Skip to content

N
nexpie-grafana-theme
Commit b05939ec by Torkel Ödegaard
Options

ux(sass): work on sass variables, getting messy

parent 7c917156
Showing with 316 additions and 353 deletions
public/app/features/datasources/partials/http_settings.html
...@@ -4,19 +4,19 @@ ...@@ -4,19 +4,19 @@
<h3>Http settings</h3> <h3>Http settings</h3>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-xs">Url</span> <span class="gf-form-label gf-size-sm">Url</span>
<input class="gf-form-input gf-size-max-xxl" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input> <input class="gf-form-input gf-size-max-xxl" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-xs"> <span class="gf-form-label gf-size-sm">
Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip> Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip>
</span> </span>
<select class="gf-form-input gf-size-auto" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select> <select class="gf-form-input gf-size-auto" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-xs"> <span class="gf-form-label gf-size-sm">
Http Auth Http Auth
</span> </span>
<editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox> <editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
...@@ -24,14 +24,14 @@ ...@@ -24,14 +24,14 @@
</div> </div>
<div class="gf-form" ng-if="current.basicAuth"> <div class="gf-form" ng-if="current.basicAuth">
<span class="gf-form-label gf-size-xs"> <span class="gf-form-label gf-size-sm">
User User
</span> </span>
<input class="gf-form-input gf-size-max-xxl" type="text" ng-model='current.basicAuthUser' placeholder="user" required></input> <input class="gf-form-input gf-size-max-xxl" type="text" ng-model='current.basicAuthUser' placeholder="user" required></input>
</div> </div>
<div class="gf-form" ng-if="current.basicAuth"> <div class="gf-form" ng-if="current.basicAuth">
<span class="gf-form-label gf-size-xs"> <span class="gf-form-label gf-size-sm">
Passord Passord
</span> </span>
<input class="gf-form-input gf-size-max-xxl" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input> <input class="gf-form-input gf-size-max-xxl" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
......
public/app/features/profile/partials/profile.html
...@@ -10,19 +10,19 @@ ...@@ -10,19 +10,19 @@
<h3>Preferences</h3> <h3>Preferences</h3>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-xs">Name</span> <span class="gf-form-label gf-size-sm">Name</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.name" > <input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.name" >
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-xs">Email</span> <span class="gf-form-label gf-size-sm">Email</span>
<input class="gf-form-input gf-size-max-xxl" type="email" required ng-model="user.email"> <input class="gf-form-input gf-size-max-xxl" type="email" required ng-model="user.email">
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-xs">Username</span> <span class="gf-form-label gf-size-sm">Username</span>
<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.login"> <input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.login">
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label gf-size-xs">UI Theme</span> <span class="gf-form-label gf-size-sm">UI Theme</span>
<select class="gf-form-input gf-size-auto" ng-model="user.theme" ng-options="f for f in ['dark', 'light']"></select> <select class="gf-form-input gf-size-auto" ng-model="user.theme" ng-options="f for f in ['dark', 'light']"></select>
</div> </div>
...@@ -36,29 +36,30 @@ ...@@ -36,29 +36,30 @@
<a href="profile/password" class="btn btn-inverse">Change Password</a> <a href="profile/password" class="btn btn-inverse">Change Password</a>
</div> </div>
<h3>Organizations</h3> <div class="gf-form-group">
<table class="filter-table form-inline"> <h3>Organizations</h3>
<thead> <table class="filter-table form-inline">
<tr> <thead>
<th>Name</th> <tr>
<th>Role</th> <th>Name</th>
<th></th> <th>Role</th>
</tr> <th></th>
</thead> </tr>
<tbody> </thead>
<tr ng-repeat="org in orgs"> <tbody>
<td>{{org.name}}</td> <tr ng-repeat="org in orgs">
<td>{{org.role}}</td> <td>{{org.name}}</td>
<td class="text-right"> <td>{{org.role}}</td>
<span class="btn btn-primary btn-mini" ng-show="org.orgId === contextSrv.user.orgId"> <td class="text-right">
Current <span class="btn btn-primary btn-mini" ng-show="org.orgId === contextSrv.user.orgId">
</span> Current
<a ng-click="setUsingOrg(org)" class="btn btn-inverse btn-mini" ng-show="org.orgId !== contextSrv.user.orgId"> </span>
Select <a ng-click="setUsingOrg(org)" class="btn btn-inverse btn-mini" ng-show="org.orgId !== contextSrv.user.orgId">
</a> Select
</td> </a>
</tr> </td>
</tbody> </tr>
</table> </tbody>
</div> </table>
</div>
public/sass/_grafana.scss
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
@import "mixins/grid"; @import "mixins/grid";
@import "mixins/grid-framework"; @import "mixins/grid-framework";
@import "mixins/hover"; @import "mixins/hover";
@import "mixins/forms";
// BASE // BASE
...@@ -38,7 +39,6 @@ ...@@ -38,7 +39,6 @@
@import "components/sidemenu"; @import "components/sidemenu";
@import "components/navbar"; @import "components/navbar";
@import "components/gfbox"; @import "components/gfbox";
@import "components/pagination";
@import "components/tabs"; @import "components/tabs";
@import "components/timepicker"; @import "components/timepicker";
@import "components/filter-controls"; @import "components/filter-controls";
......
public/sass/_variables.dark.scss
...@@ -25,6 +25,11 @@ $pink: #FF4444; ...@@ -25,6 +25,11 @@ $pink: #FF4444;
$purple: #9933CC; $purple: #9933CC;
$variable: #32D1DF; $variable: #32D1DF;
$brand-primary: $blue-dark;
$brand-success: $green;
$brand-warning: $orange;
$brand-danger: $red;
// Status colors // Status colors
// ------------------------- // -------------------------
$online: #10a345; $online: #10a345;
...@@ -46,9 +51,8 @@ $link-hover-color: $white; ...@@ -46,9 +51,8 @@ $link-hover-color: $white;
// Typography // Typography
// ------------------------- // -------------------------
$headings-color: darken($white,11%); $headings-color: darken($white,11%);
$abbr-border-color: $gray-light !default; $abbr-border-color: $gray-light !default;
$text-muted: darken($link-color,30%); $text-muted: darken($link-color,30%);
$blockquote-small-color: $gray-light !default; $blockquote-small-color: $gray-light !default;
...@@ -56,31 +60,34 @@ $blockquote-border-color: $gray-lighter !default; ...@@ -56,31 +60,34 @@ $blockquote-border-color: $gray-lighter !default;
$hr-border-color: rgba(0,0,0,.1) !default; $hr-border-color: rgba(0,0,0,.1) !default;
// Components
$component-active-color: #fff !default;
$component-active-bg: $brand-primary !default;
// Panel // Panel
// ------------------------- // -------------------------
$panel-bg: $gray-darker; $panel-bg: $gray-darker;
$panel-border: solid 1px $gray-dark; $panel-border: solid 1px $gray-dark;
$divider-border-color: #555; $divider-border-color: #555;
// Graphite Target Editor // Graphite Target Editor
$tight-form-border: #050505; $tight-form-border: #050505;
$tight-form-bg: $gray-dark; $tight-form-bg: $gray-dark;
$tight-form-func-bg: #333; $tight-form-func-bg: #333;
$tight-form-func-highlight-bg: #444; $tight-form-func-highlight-bg: #444;
$modal-background: $black; $modal-background: $black;
$code-tag-bg: #444; $code-tag-bg: #444;
// Lists // Lists
$grafanaListBackground: $gray-dark; $grafanaListBackground: $gray-dark;
$grafanaListAccent: lighten($gray-darker, 2%); $grafanaListAccent: lighten($gray-darker, 2%);
$grafanaListBorderTop: $gray-dark; $grafanaListBorderTop: $gray-dark;
$grafanaListBorderBottom: $black; $grafanaListBorderBottom: $black;
$grafanaListHighlight: #333; $grafanaListHighlight: #333;
$grafanaListMainLinkColor: $text-color; $grafanaListMainLinkColor: $text-color;
// Scrollbars // Scrollbars
$scrollbarBackground: #3a3a3a; $scrollbarBackground: #3a3a3a;
...@@ -128,22 +135,19 @@ $iconContainerBackgroundHighlight: lighten($black, 5%); ...@@ -128,22 +135,19 @@ $iconContainerBackgroundHighlight: lighten($black, 5%);
$iconContainerBorder: 1px solid transparent; $iconContainerBorder: 1px solid transparent;
$iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05); $iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05);
// Hero unit
// -------------------------
$heroUnitBackground: $gray-dark;
$heroUnitHeadingColor: inherit;
$heroUnitLeadColor: inherit;
// Forms // Forms
// ------------------------- // -------------------------
$inputBackground: lighten($gray-dark,5%); $input-bg: lighten($gray-dark,5%);
$inputBorder: lighten($gray-dark,5%); $input-bg-disabled: #555;
$inputBorderRadius: $baseBorderRadius;
$inputText: $gray-light; $input-color: $gray-light;
$inputDisabledBackground: #555; $input-border-color: lighten($gray-dark,5%);
$formActionsBackground: transparent; $input-btn-border-width: 1px;
$inputHeight: $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border $input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
$labelBackground: $gray-dark; $input-border-focus: $input-border-color !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default;
$input-label-bg: $gray-dark;
// Search // Search
...@@ -151,7 +155,7 @@ $searchShadow: 0 0 35px 0 $body-bg; ...@@ -151,7 +155,7 @@ $searchShadow: 0 0 35px 0 $body-bg;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
$dropdownBackground: $heroUnitBackground; $dropdownBackground: $gray-dark;
$dropdownBorder: rgba(0,0,0,.2); $dropdownBorder: rgba(0,0,0,.2);
$dropdownDividerTop: transparent; $dropdownDividerTop: transparent;
$dropdownDividerBottom: #444; $dropdownDividerBottom: #444;
...@@ -185,11 +189,6 @@ $zindexModal: 1050; ...@@ -185,11 +189,6 @@ $zindexModal: 1050;
$placeholderText: darken($text-color, 25%); $placeholderText: darken($text-color, 25%);
// Hr border color
// -------------------------
$hrBorder: $gray-dark;
// Horizontal forms & lists // Horizontal forms & lists
// ------------------------- // -------------------------
$horizontalComponentOffset: 180px; $horizontalComponentOffset: 180px;
...@@ -251,7 +250,7 @@ $tooltipArrowWidth: 5px; ...@@ -251,7 +250,7 @@ $tooltipArrowWidth: 5px;
$tooltipArrowColor: $tooltipBackground; $tooltipArrowColor: $tooltipBackground;
$tooltipLinkColor: $link-color; $tooltipLinkColor: $link-color;
$popoverBackground: $heroUnitBackground; $popoverBackground: $dropdownBackground;
$popoverArrowWidth: 10px; $popoverArrowWidth: 10px;
$popoverArrowColor: $popoverBackground; $popoverArrowColor: $popoverBackground;
$popoverTitleBackground: $popoverBackground; $popoverTitleBackground: $popoverBackground;
...@@ -262,38 +261,3 @@ $popoverArrowOuterColor: rgba(0,0,0,.25); ...@@ -262,38 +261,3 @@ $popoverArrowOuterColor: rgba(0,0,0,.25);
// images // images
$checkboxImageUrl: '../img/checkbox.png'; $checkboxImageUrl: '../img/checkbox.png';
// GRID
// --------------------------------------------------
// Default 940px grid
// -------------------------
$gridColumns: 12;
$gridColumnWidth: 60px;
$gridGutterWidth: 20px;
$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
// 1200px min
$gridColumnWidth1200: 70px;
$gridGutterWidth1200: 30px;
$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
// 768px-979px
$gridColumnWidth768: 42px;
$gridGutterWidth768: 20px;
$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
// Fluid grid
// -------------------------
$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth);
$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth);
// 1200px min
$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200);
$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200);
// 768px-979px
$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768);
$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768);
public/sass/_variables.light.scss
...@@ -30,6 +30,11 @@ $pink: #E671B8; ...@@ -30,6 +30,11 @@ $pink: #E671B8;
$purple: #9954BB; $purple: #9954BB;
$variable: #2AB2E4; $variable: #2AB2E4;
$brand-primary: $blue-dark;
$brand-success: $green;
$brand-warning: $orange;
$brand-danger: $red;
// Status colors // Status colors
// ------------------------- // -------------------------
$online: #01A64F; $online: #01A64F;
...@@ -53,7 +58,7 @@ $link-hover-color: darken($link-color, 20%); ...@@ -53,7 +58,7 @@ $link-hover-color: darken($link-color, 20%);
// Typography // Typography
// ------------------------- // -------------------------
$headings-color: $text-color; $headings-color: $text-color;
$abbr-border-color: $gray-light !default; $abbr-border-color: $gray-light !default;
$text-muted: darken($link-color,30%); $text-muted: darken($link-color,30%);
$blockquote-small-color: $gray-light !default; $blockquote-small-color: $gray-light !default;
...@@ -61,9 +66,13 @@ $blockquote-border-color: $gray-lighter !default; ...@@ -61,9 +66,13 @@ $blockquote-border-color: $gray-lighter !default;
$hr-border-color: rgba(0,0,0,.1) !default; $hr-border-color: rgba(0,0,0,.1) !default;
// Components
$component-active-color: #fff !default;
$component-active-bg: $brand-primary !default;
// Panel // Panel
// ------------------------- // -------------------------
$panel-bg: $gray-lighter; $panel-bg: $gray-lighter;
$panel-border: solid 1px #ddd; $panel-border: solid 1px #ddd;
...@@ -83,22 +92,6 @@ $tight-form-func-highlight-bg: darken($tight-form-bg, 10%); ...@@ -83,22 +92,6 @@ $tight-form-func-highlight-bg: darken($tight-form-bg, 10%);
$modal-background: $body-bg; $modal-background: $body-bg;
$code-tag-bg: #ddd; $code-tag-bg: #ddd;
// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height
$font-size-lg: $font-size-base * 1.25; // ~18px
$font-size-sm: $font-size-base * 0.85; // ~12px
$font-size-xs: $font-size-base * 0.75; // ~11px
$paddingLarge: 22px 30px; // 66px
$paddingSmall: 2px 10px; // 26px
$paddingMini: 2px 6px; // 24px
$baseBorderRadius: 3px;
$borderRadiusLarge: 4px;
$borderRadiusSmall: 2px;
// Lists // Lists
$grafanaListBackground: darken($gray-lighter,5%); $grafanaListBackground: darken($gray-lighter,5%);
$grafanaListAccent: darken($gray-lighter,8%); $grafanaListAccent: darken($gray-lighter,8%);
...@@ -159,15 +152,17 @@ $iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05); ...@@ -159,15 +152,17 @@ $iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05);
// Forms // Forms
// ------------------------- // -------------------------
$inputBackground: $white; $input-bg: $white;
$inputBorder: $gray-lighter; $input-bg-disabled: $gray-lighter;
$inputBorderRadius: $baseBorderRadius;
$inputDisabledBackground: $gray-lighter; $input-color: #020202;
$formActionsBackground: #f5f5f5; $input-border-color: $gray-lighter;
$inputHeight: $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border $input-btn-border-width: 1px;
$inputText: #020202; $input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
$labelBackground: #f8f8f8; $input-border-focus: #66afe9 !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default;
$input-label-bg: #f8f8f8;
// Sidemenu // Sidemenu
// ------------------------- // -------------------------
...@@ -259,13 +254,6 @@ $paginationBorder: transparent; ...@@ -259,13 +254,6 @@ $paginationBorder: transparent;
$paginationActiveBackground: $blue; $paginationActiveBackground: $blue;
// Hero unit
// -------------------------
$heroUnitBackground: $gray-lighter;
$heroUnitHeadingColor: inherit;
$heroUnitLeadColor: inherit;
// Form states and alerts // Form states and alerts
// ------------------------- // -------------------------
$state-warning-text: lighten($orange, 10%); $state-warning-text: lighten($orange, 10%);
...@@ -305,36 +293,4 @@ $popoverArrowOuterColor: rgba(0,0,0,.25); ...@@ -305,36 +293,4 @@ $popoverArrowOuterColor: rgba(0,0,0,.25);
// images // images
$checkboxImageUrl: '../img/checkbox_white.png'; $checkboxImageUrl: '../img/checkbox_white.png';
// GRID
// --------------------------------------------------
// Default 940px grid
// -------------------------
$gridColumns: 12;
$gridColumnWidth: 60px;
$gridGutterWidth: 20px;
$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
// 1200px min
$gridColumnWidth1200: 70px;
$gridGutterWidth1200: 30px;
$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
// 768px-979px
$gridColumnWidth768: 42px;
$gridGutterWidth768: 20px;
$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
// Fluid grid
// -------------------------
$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth);
$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth);
// 1200px min
$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200);
$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200);
// 768px-979px
$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768);
$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768);
public/sass/_variables.scss
...@@ -106,11 +106,11 @@ $font-size-xs: .75rem !default; ...@@ -106,11 +106,11 @@ $font-size-xs: .75rem !default;
$line-height-base: 1.5 !default; $line-height-base: 1.5 !default;
$font-weight-semi-bold: 600; $font-weight-semi-bold: 600;
$font-size-h1: 2.5rem !default; $font-size-h1: 2.0rem !default;
$font-size-h2: 2rem !default; $font-size-h2: 1.75rem !default;
$font-size-h3: 1.75rem !default; $font-size-h3: 1.50rem !default;
$font-size-h4: 1.5rem !default; $font-size-h4: 1.30rem !default;
$font-size-h5: 1.25rem !default; $font-size-h5: 1.20rem !default;
$font-size-h6: 1rem !default; $font-size-h6: 1rem !default;
$display1-size: 6rem !default; $display1-size: 6rem !default;
...@@ -143,14 +143,19 @@ $nested-kbd-font-weight: bold !default; ...@@ -143,14 +143,19 @@ $nested-kbd-font-weight: bold !default;
$list-inline-padding: 5px !default; $list-inline-padding: 5px !default;
// Components
//
// Define common padding and border radius sizes and more.
$line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default;
$paddingLarge: 11px 19px; // 44px $border-radius: 0.0rem !default;
$paddingSmall: 2px 10px; // 26px $border-radius-lg: 0.3rem !default;
$paddingMini: 0px 6px; // 22px $border-radius-sm: 0.2rem !default;
$baseBorderRadius: 3px; $caret-width: .3em !default;
$borderRadiusLarge: 4px; $caret-width-lg: $caret-width !default;
$borderRadiusSmall: 2px;
// Links // Links
// ------------------------- // -------------------------
...@@ -162,4 +167,32 @@ $link-hover-decoration: none !default; ...@@ -162,4 +167,32 @@ $link-hover-decoration: none !default;
// Customizes the `.table` component with basic values, each used across all table variations. // Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding: .75rem !default; $table-cell-padding: .75rem !default;
$table-sm-cell-padding: .3rem !default; $table-sm-cell-padding: .3rem !default;
\ No newline at end of file
// Forms
$input-padding-x: .75rem !default;
$input-padding-y: .5rem !default;
$input-line-height: 1.25 !default;
$input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;
$input-padding-x-sm: .5rem !default;
$input-padding-y-sm: .25rem !default;
$input-padding-x-lg: 1.5rem !default;
$input-padding-y-lg: .75rem !default;
$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
$form-group-margin-bottom: $spacer-y !default;
$cursor-disabled: not-allowed !default;
// Form validation icons
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
public/sass/base/_forms.scss
...@@ -78,11 +78,11 @@ input[type="tel"], ...@@ -78,11 +78,11 @@ input[type="tel"],
input[type="color"], input[type="color"],
.uneditable-input { .uneditable-input {
display: inline-block; display: inline-block;
height: $line-height-base; height: $input-height;
line-height: $input-line-height;
padding: 4px 6px; padding: 4px 6px;
font-size: $font-size-base; font-size: $font-size-base;
line-height: $line-height-base; color: $input-color;
color: $inputText;
vertical-align: top; vertical-align: top;
} }
...@@ -115,8 +115,8 @@ input[type="search"], ...@@ -115,8 +115,8 @@ input[type="search"],
input[type="tel"], input[type="tel"],
input[type="color"], input[type="color"],
.uneditable-input { .uneditable-input {
background-color: $inputBackground; background-color: $input-bg;
border: 1px solid $inputBorder; border: 1px solid $input-border-color;
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
@include transition("border linear .2s, box-shadow linear .2s"); @include transition("border linear .2s, box-shadow linear .2s");
...@@ -149,15 +149,15 @@ input[type="checkbox"] { ...@@ -149,15 +149,15 @@ input[type="checkbox"] {
// Set the height of select and file controls to match text inputs // Set the height of select and file controls to match text inputs
select, select,
input[type="file"] { input[type="file"] {
height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */ height: $input-height; /* In IE7, the height of the select element cannot be changed by height, only font-size */
line-height: $inputHeight; line-height: $input-height;
} }
// Make select elements obey height by applying a border // Make select elements obey height by applying a border
select { select {
width: 220px; // default input width + 10px of padding that doesn't get applied width: 220px; // default input width + 10px of padding that doesn't get applied
border: 1px solid $inputBorder; border: 1px solid $input-border-color;
background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color
} }
// Make multiple select elements height not fixed // Make multiple select elements height not fixed
...@@ -183,7 +183,6 @@ textarea { ...@@ -183,7 +183,6 @@ textarea {
@include placeholder(); @include placeholder();
} }
// INPUT SIZES // INPUT SIZES
// ----------- // -----------
...@@ -209,7 +208,7 @@ input[readonly], ...@@ -209,7 +208,7 @@ input[readonly],
select[readonly], select[readonly],
textarea[readonly] { textarea[readonly] {
cursor: not-allowed; cursor: not-allowed;
background-color: $inputDisabledBackground; background-color: $input-bg-disabled;
} }
// Explicitly reset the colors here // Explicitly reset the colors here
...@@ -288,3 +287,41 @@ input[type="checkbox"]:checked+label { ...@@ -288,3 +287,41 @@ input[type="checkbox"]:checked+label {
box-sizing: border-box; box-sizing: border-box;
} }
} }
// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.
.form-control-success,
.form-control-warning,
.form-control-danger {
padding-right: ($input-padding-x * 3);
background-repeat: no-repeat;
background-position: center right ($input-height / 4);
background-size: ($input-height / 2) ($input-height / 2);
}
// Form validation states
.has-success {
@include form-control-validation($brand-success);
.form-control-success {
background-image: $form-icon-success;
}
}
.has-warning {
@include form-control-validation($brand-warning);
.form-control-warning {
background-image: $form-icon-warning;
}
}
.has-danger {
@include form-control-validation($brand-danger);
.form-control-danger {
background-image: $form-icon-danger;
}
}
public/sass/base/_type.scss
...@@ -194,14 +194,6 @@ dd { ...@@ -194,14 +194,6 @@ dd {
// MISC // MISC
// ---- // ----
// Horizontal rules
hr {
margin: $line-height-base 0;
border: 0;
border-top: 1px solid $hrBorder;
border-bottom: 1px solid $white;
}
// Abbreviations and acronyms // Abbreviations and acronyms
abbr[title], abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 // Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
......
public/sass/components/_color_picker.scss
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
.sp-container { .sp-container {
border-radius: 0; border-radius: 0;
background-color: $heroUnitBackground; background-color: $dropdownBackground;
border: none; border: none;
padding: 0; padding: 0;
} }
......
public/sass/components/_dropdown.scss
...@@ -239,6 +239,5 @@ ...@@ -239,6 +239,5 @@
// --------- // ---------
.typeahead { .typeahead {
z-index: 1051; z-index: 1051;
margin-top: 2px; // give it some space to breathe margin-top: 2px; // give it some space to breathe
@include border-radius($baseBorderRadius);
} }
public/sass/components/_gf-form.scss
...@@ -19,7 +19,10 @@ $gf-form-margin: 4px; ...@@ -19,7 +19,10 @@ $gf-form-margin: 4px;
} }
.gf-form-group { .gf-form-group {
margin-bottom: 20px; h3, h2, h4 {
margin-top: $spacer * 2;
margin-bottom: $spacer * 1;
}
} }
.gf-form-inline { .gf-form-inline {
...@@ -40,7 +43,7 @@ $gf-form-margin: 4px; ...@@ -40,7 +43,7 @@ $gf-form-margin: 4px;
.gf-form-label { .gf-form-label {
flex-shrink: 0; flex-shrink: 0;
background-color: $labelBackground; background-color: $input-label-bg;
display: block; display: block;
padding: 8px 7px; padding: 8px 7px;
font-size: $font-size-sm; font-size: $font-size-sm;
...@@ -51,39 +54,6 @@ $gf-form-margin: 4px; ...@@ -51,39 +54,6 @@ $gf-form-margin: 4px;
flex-shrink: 0; flex-shrink: 0;
} }
[type=text],
[type=email],
[type=number],
[type=password], {
&.gf-form-input {
border: none;
margin: 0px;
border-radius: 0;
padding: 8px 6px;
height: 100%;
box-sizing: border-box;
font-size: 15px;
display: block;
width: 100%;
margin-right: $gf-form-margin;
}
&.gf-size-auto { width: auto; }
}
input[type=checkbox].gf-form-checkbox {
margin: 0;
}
select.gf-form-input {
padding: 2px 3px;
font-size: 15px;
box-sizing: content-box;
display: block;
width: 100%;
margin-right: $gf-form-margin;
&.gf-size-auto { width: auto; }
}
@each $size, $value in $form-sizes { @each $size, $value in $form-sizes {
.gf-size-#{$size} { width: $value; } .gf-size-#{$size} { width: $value; }
...@@ -95,3 +65,55 @@ select.gf-form-input { ...@@ -95,3 +65,55 @@ select.gf-form-input {
.gf-size-max { width: 100%; } .gf-size-max { width: 100%; }
.gf-size-auto { width: auto; } .gf-size-auto { width: auto; }
select,
[type=text],
[type=email],
[type=number],
[type=password] {
&.gf-form-input {
display: block;
width: 100%;
padding: $input-padding-y $input-padding-x;
font-size: $font-size-base;
line-height: $input-line-height;
color: $input-color;
background-color: $input-bg;
background-image: none;
background-clip: padding-box;
border: $input-btn-border-width solid $input-border-color;
@include border-radius($input-border-radius);
@include box-shadow($input-box-shadow);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
background-color: transparent;
border: 0;
}
// Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus();
// Placeholder
&::placeholder {
color: $input-color-placeholder;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
}
&:disabled,
&[readonly] {
background-color: $input-bg-disabled;
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
&:disabled {
cursor: $cursor-disabled;
}
}
&.gf-size-auto { width: auto; }
}
public/sass/components/_pagination.scss deleted 100644 → 0
.pagination {
}
.pagination ul {
display: inline-block;
margin-left: 0;
margin-bottom: 0;
@include border-radius($baseBorderRadius);
@include box-shadow(0 1px 2px rgba(0,0,0,.05));
}
.pagination ul > li {
display: inline; // Remove list-style and block-level defaults
}
.pagination ul > li > a,
.pagination ul > li > span {
float: left; // Collapse white-space
padding: 4px 12px;
line-height: $line-height-base;
text-decoration: none;
background-color: $paginationBackground;
border: 1px solid $paginationBorder;
border-left-width: 0;
}
.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
background-color: $paginationActiveBackground;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
color: $gray-light;
cursor: default;
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
color: $gray-light;
background-color: transparent;
cursor: default;
}
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
border-left-width: 1px;
@include border-left-radius($baseBorderRadius);
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
@include border-right-radius($baseBorderRadius);
}
// Alignment
// --------------------------------------------------
.pagination-centered {
text-align: center;
}
.pagination-right {
text-align: right;
}
// Sizing
// --------------------------------------------------
// Large
.pagination-large {
ul > li > a,
ul > li > span {
padding: $paddingLarge;
font-size: $font-size-lg;
}
ul > li:first-child > a,
ul > li:first-child > span {
@include border-left-radius($borderRadiusLarge);
}
ul > li:last-child > a,
ul > li:last-child > span {
@include border-right-radius($borderRadiusLarge);
}
}
// Small and mini
.pagination-mini,
.pagination-small {
ul > li:first-child > a,
ul > li:first-child > span {
@include border-left-radius($borderRadiusSmall);
}
ul > li:last-child > a,
ul > li:last-child > span {
@include border-right-radius($borderRadiusSmall);
}
}
// Small
.pagination-small {
ul > li > a,
ul > li > span {
padding: $paddingSmall;
font-size: $font-size-sm;
}
}
// Mini
.pagination-mini {
ul > li > a,
ul > li > span {
padding: $paddingMini;
font-size: $font-size-xs;
}
}
public/sass/components/_tagsinput.scss
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
vertical-align: middle; vertical-align: middle;
max-width: 100%; max-width: 100%;
line-height: 22px; line-height: 22px;
background-color: $inputBackground; background-color: $input-bg;
input { input {
border: none; border: none;
......
public/sass/components/_tooltip.scss
...@@ -26,8 +26,7 @@ ...@@ -26,8 +26,7 @@
color: $tooltipColor; color: $tooltipColor;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
background-color: $tooltipBackground; background-color: $tooltipBackground;
@include border-radius($baseBorderRadius);
} }
// Arrows // Arrows
......
public/sass/layout/_page.scss
...@@ -31,7 +31,6 @@ ...@@ -31,7 +31,6 @@
height: 100%; height: 100%;
} }
.page-header { .page-header {
padding: 10px 0 39px 0px; padding: 10px 0 39px 0px;
...@@ -47,6 +46,8 @@ ...@@ -47,6 +46,8 @@
h1 { h1 {
font-style: italic; font-style: italic;
} }
margin-bottom: 2rem;
} }
.admin-page { .admin-page {
......
public/sass/mixins/_forms.scss 0 → 100644
@mixin form-control-validation($color) {
// Color the label and help text
.text-help,
.form-control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline,
&.radio label,
&.checkbox label,
&.radio-inline label,
&.checkbox-inline label,
.custom-control {
color: $color;
}
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: $color;
// @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
// border-color: darken($border-color, 10%);
// $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
// @include box-shadow($shadow);
}
}
// Set validation states also for addons
.input-group-addon {
color: $color;
border-color: $color;
background-color: lighten($color, 40%);
}
// Optional feedback icon
.form-control-feedback {
color: $color;
}
}
@mixin form-control-focus() {
&:focus {
border-color: $input-border-focus;
outline: none;
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus;
@include box-shadow($shadow);
}
}
// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
#{$parent} {
height: $input-height;
padding: $padding-y $padding-x;
font-size: $font-size;
line-height: $line-height;
@include border-radius($border-radius);
}
select#{$parent} {
height: $input-height;
line-height: $input-height;
}
textarea#{$parent},
select[multiple]#{$parent} {
height: auto;
}
}
public/sass/mixins/_mixins.scss
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
.input-block-level { .input-block-level {
display: block; display: block;
width: 100%; width: 100%;
min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border) min-height: $input-line-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
@include box-sizing(border-box); // Makes inputs behave like true block-level elements @include box-sizing(border-box); // Makes inputs behave like true block-level elements
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment