mirror of
https://github.com/grafana/grafana.git
synced 2025-02-04 12:41:12 -06:00
ux(sass): work on sass variables, getting messy
This commit is contained in:
Torkel Ödegaard
parent
7c917156ee
commit
b05939ec9a
@ -4,19 +4,19 @@
|
||||
<h3>Http settings</h3>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</span>
|
||||
<select class="gf-form-input gf-size-auto" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label gf-size-xs">
|
||||
<span class="gf-form-label gf-size-sm">
|
||||
Http Auth
|
||||
</span>
|
||||
<editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
|
||||
@ -24,14 +24,14 @@
|
||||
</div>
|
||||
|
||||
<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
|
||||
</span>
|
||||
<input class="gf-form-input gf-size-max-xxl" type="text" ng-model='current.basicAuthUser' placeholder="user" required></input>
|
||||
</div>
|
||||
|
||||
<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
|
||||
</span>
|
||||
<input class="gf-form-input gf-size-max-xxl" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
|
||||
|
||||
@ -10,19 +10,19 @@
|
||||
<h3>Preferences</h3>
|
||||
|
||||
<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" >
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@ -36,29 +36,30 @@
|
||||
<a href="profile/password" class="btn btn-inverse">Change Password</a>
|
||||
</div>
|
||||
|
||||
<h3>Organizations</h3>
|
||||
<table class="filter-table form-inline">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Role</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="org in orgs">
|
||||
<td>{{org.name}}</td>
|
||||
<td>{{org.role}}</td>
|
||||
<td class="text-right">
|
||||
<span class="btn btn-primary btn-mini" ng-show="org.orgId === contextSrv.user.orgId">
|
||||
Current
|
||||
</span>
|
||||
<a ng-click="setUsingOrg(org)" class="btn btn-inverse btn-mini" ng-show="org.orgId !== contextSrv.user.orgId">
|
||||
Select
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="gf-form-group">
|
||||
<h3>Organizations</h3>
|
||||
<table class="filter-table form-inline">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Role</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="org in orgs">
|
||||
<td>{{org.name}}</td>
|
||||
<td>{{org.role}}</td>
|
||||
<td class="text-right">
|
||||
<span class="btn btn-primary btn-mini" ng-show="org.orgId === contextSrv.user.orgId">
|
||||
Current
|
||||
</span>
|
||||
<a ng-click="setUsingOrg(org)" class="btn btn-inverse btn-mini" ng-show="org.orgId !== contextSrv.user.orgId">
|
||||
Select
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
@import "mixins/grid";
|
||||
@import "mixins/grid-framework";
|
||||
@import "mixins/hover";
|
||||
@import "mixins/forms";
|
||||
|
||||
|
||||
// BASE
|
||||
@ -38,7 +39,6 @@
|
||||
@import "components/sidemenu";
|
||||
@import "components/navbar";
|
||||
@import "components/gfbox";
|
||||
@import "components/pagination";
|
||||
@import "components/tabs";
|
||||
@import "components/timepicker";
|
||||
@import "components/filter-controls";
|
||||
|
||||
@ -25,6 +25,11 @@ $pink: #FF4444;
|
||||
$purple: #9933CC;
|
||||
$variable: #32D1DF;
|
||||
|
||||
$brand-primary: $blue-dark;
|
||||
$brand-success: $green;
|
||||
$brand-warning: $orange;
|
||||
$brand-danger: $red;
|
||||
|
||||
// Status colors
|
||||
// -------------------------
|
||||
$online: #10a345;
|
||||
@ -46,9 +51,8 @@ $link-hover-color: $white;
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
$headings-color: darken($white,11%);
|
||||
$headings-color: darken($white,11%);
|
||||
$abbr-border-color: $gray-light !default;
|
||||
|
||||
$text-muted: darken($link-color,30%);
|
||||
|
||||
$blockquote-small-color: $gray-light !default;
|
||||
@ -56,31 +60,34 @@ $blockquote-border-color: $gray-lighter !default;
|
||||
|
||||
$hr-border-color: rgba(0,0,0,.1) !default;
|
||||
|
||||
// Components
|
||||
$component-active-color: #fff !default;
|
||||
$component-active-bg: $brand-primary !default;
|
||||
|
||||
// Panel
|
||||
// -------------------------
|
||||
$panel-bg: $gray-darker;
|
||||
$panel-border: solid 1px $gray-dark;
|
||||
|
||||
$divider-border-color: #555;
|
||||
$divider-border-color: #555;
|
||||
|
||||
// Graphite Target Editor
|
||||
$tight-form-border: #050505;
|
||||
$tight-form-bg: $gray-dark;
|
||||
|
||||
|
||||
$tight-form-func-bg: #333;
|
||||
$tight-form-func-highlight-bg: #444;
|
||||
|
||||
$modal-background: $black;
|
||||
$code-tag-bg: #444;
|
||||
|
||||
|
||||
// Lists
|
||||
$grafanaListBackground: $gray-dark;
|
||||
$grafanaListAccent: lighten($gray-darker, 2%);
|
||||
$grafanaListBackground: $gray-dark;
|
||||
$grafanaListAccent: lighten($gray-darker, 2%);
|
||||
$grafanaListBorderTop: $gray-dark;
|
||||
$grafanaListBorderBottom: $black;
|
||||
$grafanaListHighlight: #333;
|
||||
$grafanaListMainLinkColor: $text-color;
|
||||
$grafanaListMainLinkColor: $text-color;
|
||||
|
||||
// Scrollbars
|
||||
$scrollbarBackground: #3a3a3a;
|
||||
@ -128,22 +135,19 @@ $iconContainerBackgroundHighlight: lighten($black, 5%);
|
||||
$iconContainerBorder: 1px solid transparent;
|
||||
$iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05);
|
||||
|
||||
// Hero unit
|
||||
// -------------------------
|
||||
$heroUnitBackground: $gray-dark;
|
||||
$heroUnitHeadingColor: inherit;
|
||||
$heroUnitLeadColor: inherit;
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
$inputBackground: lighten($gray-dark,5%);
|
||||
$inputBorder: lighten($gray-dark,5%);
|
||||
$inputBorderRadius: $baseBorderRadius;
|
||||
$inputText: $gray-light;
|
||||
$inputDisabledBackground: #555;
|
||||
$formActionsBackground: transparent;
|
||||
$inputHeight: $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
||||
$labelBackground: $gray-dark;
|
||||
$input-bg: lighten($gray-dark,5%);
|
||||
$input-bg-disabled: #555;
|
||||
|
||||
$input-color: $gray-light;
|
||||
$input-border-color: lighten($gray-dark,5%);
|
||||
$input-btn-border-width: 1px;
|
||||
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
|
||||
$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
|
||||
@ -151,7 +155,7 @@ $searchShadow: 0 0 35px 0 $body-bg;
|
||||
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
$dropdownBackground: $heroUnitBackground;
|
||||
$dropdownBackground: $gray-dark;
|
||||
$dropdownBorder: rgba(0,0,0,.2);
|
||||
$dropdownDividerTop: transparent;
|
||||
$dropdownDividerBottom: #444;
|
||||
@ -185,11 +189,6 @@ $zindexModal: 1050;
|
||||
$placeholderText: darken($text-color, 25%);
|
||||
|
||||
|
||||
// Hr border color
|
||||
// -------------------------
|
||||
$hrBorder: $gray-dark;
|
||||
|
||||
|
||||
// Horizontal forms & lists
|
||||
// -------------------------
|
||||
$horizontalComponentOffset: 180px;
|
||||
@ -251,7 +250,7 @@ $tooltipArrowWidth: 5px;
|
||||
$tooltipArrowColor: $tooltipBackground;
|
||||
$tooltipLinkColor: $link-color;
|
||||
|
||||
$popoverBackground: $heroUnitBackground;
|
||||
$popoverBackground: $dropdownBackground;
|
||||
$popoverArrowWidth: 10px;
|
||||
$popoverArrowColor: $popoverBackground;
|
||||
$popoverTitleBackground: $popoverBackground;
|
||||
@ -262,38 +261,3 @@ $popoverArrowOuterColor: rgba(0,0,0,.25);
|
||||
|
||||
// images
|
||||
$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);
|
||||
|
||||
@ -30,6 +30,11 @@ $pink: #E671B8;
|
||||
$purple: #9954BB;
|
||||
$variable: #2AB2E4;
|
||||
|
||||
$brand-primary: $blue-dark;
|
||||
$brand-success: $green;
|
||||
$brand-warning: $orange;
|
||||
$brand-danger: $red;
|
||||
|
||||
// Status colors
|
||||
// -------------------------
|
||||
$online: #01A64F;
|
||||
@ -53,7 +58,7 @@ $link-hover-color: darken($link-color, 20%);
|
||||
// Typography
|
||||
// -------------------------
|
||||
$headings-color: $text-color;
|
||||
$abbr-border-color: $gray-light !default;
|
||||
$abbr-border-color: $gray-light !default;
|
||||
$text-muted: darken($link-color,30%);
|
||||
|
||||
$blockquote-small-color: $gray-light !default;
|
||||
@ -61,9 +66,13 @@ $blockquote-border-color: $gray-lighter !default;
|
||||
|
||||
$hr-border-color: rgba(0,0,0,.1) !default;
|
||||
|
||||
// Components
|
||||
$component-active-color: #fff !default;
|
||||
$component-active-bg: $brand-primary !default;
|
||||
|
||||
// Panel
|
||||
// -------------------------
|
||||
|
||||
|
||||
$panel-bg: $gray-lighter;
|
||||
$panel-border: solid 1px #ddd;
|
||||
|
||||
@ -83,22 +92,6 @@ $tight-form-func-highlight-bg: darken($tight-form-bg, 10%);
|
||||
$modal-background: $body-bg;
|
||||
$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
|
||||
$grafanaListBackground: darken($gray-lighter,5%);
|
||||
$grafanaListAccent: darken($gray-lighter,8%);
|
||||
@ -159,15 +152,17 @@ $iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05);
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
$inputBackground: $white;
|
||||
$inputBorder: $gray-lighter;
|
||||
$inputBorderRadius: $baseBorderRadius;
|
||||
$inputDisabledBackground: $gray-lighter;
|
||||
$formActionsBackground: #f5f5f5;
|
||||
$inputHeight: $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
||||
$inputText: #020202;
|
||||
$labelBackground: #f8f8f8;
|
||||
$input-bg: $white;
|
||||
$input-bg-disabled: $gray-lighter;
|
||||
|
||||
$input-color: #020202;
|
||||
$input-border-color: $gray-lighter;
|
||||
$input-btn-border-width: 1px;
|
||||
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
|
||||
$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
|
||||
// -------------------------
|
||||
@ -259,13 +254,6 @@ $paginationBorder: transparent;
|
||||
$paginationActiveBackground: $blue;
|
||||
|
||||
|
||||
// Hero unit
|
||||
// -------------------------
|
||||
$heroUnitBackground: $gray-lighter;
|
||||
$heroUnitHeadingColor: inherit;
|
||||
$heroUnitLeadColor: inherit;
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
// -------------------------
|
||||
$state-warning-text: lighten($orange, 10%);
|
||||
@ -305,36 +293,4 @@ $popoverArrowOuterColor: rgba(0,0,0,.25);
|
||||
// images
|
||||
$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);
|
||||
|
||||
@ -106,11 +106,11 @@ $font-size-xs: .75rem !default;
|
||||
$line-height-base: 1.5 !default;
|
||||
$font-weight-semi-bold: 600;
|
||||
|
||||
$font-size-h1: 2.5rem !default;
|
||||
$font-size-h2: 2rem !default;
|
||||
$font-size-h3: 1.75rem !default;
|
||||
$font-size-h4: 1.5rem !default;
|
||||
$font-size-h5: 1.25rem !default;
|
||||
$font-size-h1: 2.0rem !default;
|
||||
$font-size-h2: 1.75rem !default;
|
||||
$font-size-h3: 1.50rem !default;
|
||||
$font-size-h4: 1.30rem !default;
|
||||
$font-size-h5: 1.20rem !default;
|
||||
$font-size-h6: 1rem !default;
|
||||
|
||||
$display1-size: 6rem !default;
|
||||
@ -143,14 +143,19 @@ $nested-kbd-font-weight: bold !default;
|
||||
|
||||
$list-inline-padding: 5px !default;
|
||||
|
||||
// Components
|
||||
//
|
||||
// Define common padding and border radius sizes and more.
|
||||
|
||||
$paddingLarge: 11px 19px; // 44px
|
||||
$paddingSmall: 2px 10px; // 26px
|
||||
$paddingMini: 0px 6px; // 22px
|
||||
$line-height-lg: (4 / 3) !default;
|
||||
$line-height-sm: 1.5 !default;
|
||||
|
||||
$baseBorderRadius: 3px;
|
||||
$borderRadiusLarge: 4px;
|
||||
$borderRadiusSmall: 2px;
|
||||
$border-radius: 0.0rem !default;
|
||||
$border-radius-lg: 0.3rem !default;
|
||||
$border-radius-sm: 0.2rem !default;
|
||||
|
||||
$caret-width: .3em !default;
|
||||
$caret-width-lg: $caret-width !default;
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
@ -162,4 +167,32 @@ $link-hover-decoration: none !default;
|
||||
// Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
$table-cell-padding: .75rem !default;
|
||||
$table-sm-cell-padding: .3rem !default;
|
||||
$table-sm-cell-padding: .3rem !default;
|
||||
|
||||
// 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;
|
||||
|
||||
@ -78,11 +78,11 @@ input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
display: inline-block;
|
||||
height: $line-height-base;
|
||||
height: $input-height;
|
||||
line-height: $input-line-height;
|
||||
padding: 4px 6px;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
color: $inputText;
|
||||
color: $input-color;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@ -115,8 +115,8 @@ input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
background-color: $inputBackground;
|
||||
border: 1px solid $inputBorder;
|
||||
background-color: $input-bg;
|
||||
border: 1px solid $input-border-color;
|
||||
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
||||
@include transition("border linear .2s, box-shadow linear .2s");
|
||||
|
||||
@ -149,15 +149,15 @@ input[type="checkbox"] {
|
||||
// Set the height of select and file controls to match text inputs
|
||||
select,
|
||||
input[type="file"] {
|
||||
height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
|
||||
line-height: $inputHeight;
|
||||
height: $input-height; /* In IE7, the height of the select element cannot be changed by height, only font-size */
|
||||
line-height: $input-height;
|
||||
}
|
||||
|
||||
// Make select elements obey height by applying a border
|
||||
select {
|
||||
width: 220px; // default input width + 10px of padding that doesn't get applied
|
||||
border: 1px solid $inputBorder;
|
||||
background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
|
||||
border: 1px solid $input-border-color;
|
||||
background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color
|
||||
}
|
||||
|
||||
// Make multiple select elements height not fixed
|
||||
@ -183,7 +183,6 @@ textarea {
|
||||
@include placeholder();
|
||||
}
|
||||
|
||||
|
||||
// INPUT SIZES
|
||||
// -----------
|
||||
|
||||
@ -209,7 +208,7 @@ input[readonly],
|
||||
select[readonly],
|
||||
textarea[readonly] {
|
||||
cursor: not-allowed;
|
||||
background-color: $inputDisabledBackground;
|
||||
background-color: $input-bg-disabled;
|
||||
}
|
||||
|
||||
// Explicitly reset the colors here
|
||||
@ -288,3 +287,41 @@ input[type="checkbox"]:checked+label {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -194,14 +194,6 @@ dd {
|
||||
// MISC
|
||||
// ----
|
||||
|
||||
// Horizontal rules
|
||||
hr {
|
||||
margin: $line-height-base 0;
|
||||
border: 0;
|
||||
border-top: 1px solid $hrBorder;
|
||||
border-bottom: 1px solid $white;
|
||||
}
|
||||
|
||||
// Abbreviations and acronyms
|
||||
abbr[title],
|
||||
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
.sp-container {
|
||||
border-radius: 0;
|
||||
background-color: $heroUnitBackground;
|
||||
background-color: $dropdownBackground;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -239,6 +239,5 @@
|
||||
// ---------
|
||||
.typeahead {
|
||||
z-index: 1051;
|
||||
margin-top: 2px; // give it some space to breathe
|
||||
@include border-radius($baseBorderRadius);
|
||||
margin-top: 2px; // give it some space to breathe
|
||||
}
|
||||
|
||||
@ -19,7 +19,10 @@ $gf-form-margin: 4px;
|
||||
}
|
||||
|
||||
.gf-form-group {
|
||||
margin-bottom: 20px;
|
||||
h3, h2, h4 {
|
||||
margin-top: $spacer * 2;
|
||||
margin-bottom: $spacer * 1;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-inline {
|
||||
@ -40,7 +43,7 @@ $gf-form-margin: 4px;
|
||||
|
||||
.gf-form-label {
|
||||
flex-shrink: 0;
|
||||
background-color: $labelBackground;
|
||||
background-color: $input-label-bg;
|
||||
display: block;
|
||||
padding: 8px 7px;
|
||||
font-size: $font-size-sm;
|
||||
@ -51,39 +54,6 @@ $gf-form-margin: 4px;
|
||||
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 {
|
||||
.gf-size-#{$size} { width: $value; }
|
||||
|
||||
@ -95,3 +65,55 @@ select.gf-form-input {
|
||||
.gf-size-max { width: 100%; }
|
||||
.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; }
|
||||
}
|
||||
|
||||
|
||||
@ -1,113 +0,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;
|
||||
}
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
line-height: 22px;
|
||||
background-color: $inputBackground;
|
||||
background-color: $input-bg;
|
||||
|
||||
input {
|
||||
border: none;
|
||||
|
||||
@ -26,8 +26,7 @@
|
||||
color: $tooltipColor;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: $tooltipBackground;
|
||||
@include border-radius($baseBorderRadius);
|
||||
background-color: $tooltipBackground;
|
||||
}
|
||||
|
||||
// Arrows
|
||||
|
||||
@ -31,7 +31,6 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.page-header {
|
||||
padding: 10px 0 39px 0px;
|
||||
|
||||
@ -47,6 +46,8 @@
|
||||
h1 {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.admin-page {
|
||||
|
||||
73
public/sass/mixins/_forms.scss
Normal file
73
public/sass/mixins/_forms.scss
Normal file
@ -0,0 +1,73 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@ -118,7 +118,7 @@
|
||||
.input-block-level {
|
||||
display: block;
|
||||
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
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user