Skip to content

N
nexpie-grafana-theme
Commit 058c9054 by Torkel Ödegaard
Options

ux(sass): variable renaming

parent 41b77556
Showing with 96 additions and 97 deletions
public/sass/_variables.dark.scss
...@@ -6,17 +6,17 @@ ...@@ -6,17 +6,17 @@
// ------------------------- // -------------------------
$black: #000; $black: #000;
$gray: #bbb; $gray: #bbb;
$grayDark: #262626; $gray-dark: #262626;
$grayDarker: #1f1f1f; $gray-darker: #1f1f1f;
$grayLight: #ADAFAE; $gray-light: #ADAFAE;
$grayLighter: #BBBFC2; $gray-lighter: #BBBFC2;
$white: #fff; $white: #fff;
// Accent colors // Accent colors
// ------------------------- // -------------------------
$blue: #33B5E5; $blue: #33B5E5;
$blueDark: #005f81; $blue-dark: #005f81;
$green: #669900; $green: #669900;
$red: #CC3900; $red: #CC3900;
$yellow: #ECBB13; $yellow: #ECBB13;
...@@ -33,13 +33,13 @@ $critical: #ed2e18; ...@@ -33,13 +33,13 @@ $critical: #ed2e18;
// grafana Variables // grafana Variables
// ------------------------- // -------------------------
$grafanaPanelBackground: $grayDarker; $grafanaPanelBackground: $gray-darker;
$grafanaPanelBorder: solid 1px $grayDark; $grafanaPanelBorder: solid 1px $gray-dark;
$grafanaTriggerBorder: solid 1px #555; $grafanaTriggerBorder: solid 1px #555;
// Graphite Target Editor // Graphite Target Editor
$grafanaTargetBorder: $black; $grafanaTargetBorder: $black;
$grafanaTargetBackground: $grayDark; $grafanaTargetBackground: $gray-dark;
$grafanaTargetColor: #c8c8c8; $grafanaTargetColor: #c8c8c8;
$grafanaTargetColorHide: darken(#c8c8c8, 25%); $grafanaTargetColorHide: darken(#c8c8c8, 25%);
$grafanaTargetSegmentBorder: #050505; $grafanaTargetSegmentBorder: #050505;
...@@ -55,8 +55,8 @@ $codeTagBackground: #444; ...@@ -55,8 +55,8 @@ $codeTagBackground: #444;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
$bodyBackground: rgb(20,20,20); $bodyBackground: rgb(20,20,20);
$pageBackground: $grayDarker; $pageBackground: $gray-darker;
$textColor: $grayLighter; $textColor: $gray-lighter;
// Links // Links
// ------------------------- // -------------------------
...@@ -82,7 +82,7 @@ $headingsFontFamily: inherit; // empty to use BS default, $baseFontFamily ...@@ -82,7 +82,7 @@ $headingsFontFamily: inherit; // empty to use BS default, $baseFontFamily
$headingsFontWeight: 400; // instead of browser default, bold $headingsFontWeight: 400; // instead of browser default, bold
$headingsFontStyle: normal; $headingsFontStyle: normal;
$headingsColor: darken($white,11%); // empty to use BS default, $textColor $headingsColor: darken($white,11%); // empty to use BS default, $textColor
$inputText: $grayLight; $inputText: $gray-light;
// Component sizing // Component sizing
...@@ -102,9 +102,9 @@ $borderRadiusLarge: 4px; ...@@ -102,9 +102,9 @@ $borderRadiusLarge: 4px;
$borderRadiusSmall: 2px; $borderRadiusSmall: 2px;
// Lists // Lists
$grafanaListBackground: $grayDark; $grafanaListBackground: $gray-dark;
$grafanaListAccent: lighten($grayDarker, 2%); $grafanaListAccent: lighten($gray-darker, 2%);
$grafanaListBorderTop: $grayDark; $grafanaListBorderTop: $gray-dark;
$grafanaListBorderBottom: $black; $grafanaListBorderBottom: $black;
$grafanaListHighlight: #333; $grafanaListHighlight: #333;
$grafanaListMainLinkColor: $textColor; $grafanaListMainLinkColor: $textColor;
...@@ -118,18 +118,18 @@ $scrollbarBorder: black; ...@@ -118,18 +118,18 @@ $scrollbarBorder: black;
// ------------------------- // -------------------------
$tableBackground: transparent; // overall background-color $tableBackground: transparent; // overall background-color
$tableBackgroundAccent: rgba(100, 100, 100, 0.3); // for striping $tableBackgroundAccent: rgba(100, 100, 100, 0.3); // for striping
$tableBackgroundHover: $grayDark; // for hover $tableBackgroundHover: $gray-dark; // for hover
$tableBorder: $grayDark; // table and cell border $tableBorder: $gray-dark; // table and cell border
// Buttons // Buttons
// ------------------------- // -------------------------
$btnBackground: $grayDark; $btnBackground: $gray-dark;
$btnBackgroundHighlight: darken($grayLight, 15%); $btnBackgroundHighlight: darken($gray-light, 15%);
$btnBackgroundShadow: darken($grayLight, 15%); $btnBackgroundShadow: darken($gray-light, 15%);
$btnBorder: #bbb; $btnBorder: #bbb;
$btnPrimaryBackground: $blueDark; $btnPrimaryBackground: $blue-dark;
$btnPrimaryBackgroundHighlight: lighten($blueDark, 5%); $btnPrimaryBackgroundHighlight: lighten($blue-dark, 5%);
$btnInfoBackground: lighten($purple, 3%); $btnInfoBackground: lighten($purple, 3%);
$btnInfoBackgroundHighlight: darken($purple, 3%); $btnInfoBackgroundHighlight: darken($purple, 3%);
...@@ -143,8 +143,8 @@ $btnWarningBackgroundHighlight: darken($orange, 3%); ...@@ -143,8 +143,8 @@ $btnWarningBackgroundHighlight: darken($orange, 3%);
$btnDangerBackground: lighten($red, 3%); $btnDangerBackground: lighten($red, 3%);
$btnDangerBackgroundHighlight: darken($red, 3%); $btnDangerBackgroundHighlight: darken($red, 3%);
$btnInverseBackground: $grayDark; $btnInverseBackground: $gray-dark;
$btnInverseBackgroundHighlight: lighten($grayDark, 1%); $btnInverseBackgroundHighlight: lighten($gray-dark, 1%);
$btnInverseText: $textColor; $btnInverseText: $textColor;
$btnInverseBorder: #333; $btnInverseBorder: #333;
...@@ -157,19 +157,19 @@ $iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05); ...@@ -157,19 +157,19 @@ $iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05);
// Hero unit // Hero unit
// ------------------------- // -------------------------
$heroUnitBackground: $grayDark; $heroUnitBackground: $gray-dark;
$heroUnitHeadingColor: inherit; $heroUnitHeadingColor: inherit;
$heroUnitLeadColor: inherit; $heroUnitLeadColor: inherit;
// Forms // Forms
// ------------------------- // -------------------------
$inputBackground: lighten($grayDark,5%); $inputBackground: lighten($gray-dark,5%);
$inputBorder: lighten($grayDark,5%); $inputBorder: lighten($gray-dark,5%);
$inputBorderRadius: $baseBorderRadius; $inputBorderRadius: $baseBorderRadius;
$inputDisabledBackground: #555; $inputDisabledBackground: #555;
$formActionsBackground: transparent; $formActionsBackground: transparent;
$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border $inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
$labelBackground: $grayDark; $labelBackground: $gray-dark;
// Search // Search
...@@ -188,8 +188,8 @@ $dropdownLinkColor: $textColor; ...@@ -188,8 +188,8 @@ $dropdownLinkColor: $textColor;
$dropdownLinkColorHover: $white; $dropdownLinkColorHover: $white;
$dropdownLinkColorActive: $white; $dropdownLinkColorActive: $white;
$dropdownLinkBackgroundActive: $blueDark; $dropdownLinkBackgroundActive: $blue-dark;
$dropdownLinkBackgroundHover: $blueDark; $dropdownLinkBackgroundHover: $blue-dark;
// COMPONENT VARIABLES // COMPONENT VARIABLES
...@@ -213,7 +213,7 @@ $placeholderText: darken($textColor, 25%); ...@@ -213,7 +213,7 @@ $placeholderText: darken($textColor, 25%);
// Hr border color // Hr border color
// ------------------------- // -------------------------
$hrBorder: $grayDark; $hrBorder: $gray-dark;
// Horizontal forms & lists // Horizontal forms & lists
...@@ -226,12 +226,12 @@ $horizontalComponentOffset: 180px; ...@@ -226,12 +226,12 @@ $horizontalComponentOffset: 180px;
$wellBackground: #131517; $wellBackground: #131517;
$navbarHeight: 52px; $navbarHeight: 52px;
$navbarBackgroundHighlight: $grayDark; $navbarBackgroundHighlight: $gray-dark;
$navbarBackground: $grayDark; $navbarBackground: $gray-dark;
$navbarBorder: 1px solid $bodyBackground; $navbarBorder: 1px solid $bodyBackground;
$navbarText: $grayLight; $navbarText: $gray-light;
$navbarLinkColor: $grayLight; $navbarLinkColor: $gray-light;
$navbarLinkColorHover: $white; $navbarLinkColorHover: $white;
$navbarLinkColorActive: $navbarLinkColorHover; $navbarLinkColorActive: $navbarLinkColorHover;
$navbarLinkBackgroundHover: transparent; $navbarLinkBackgroundHover: transparent;
...@@ -245,8 +245,8 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); ...@@ -245,8 +245,8 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
// Sidemenu // Sidemenu
// ------------------------- // -------------------------
$sideMenuTopShadow: $navbarDropdownShadow; $sideMenuTopShadow: $navbarDropdownShadow;
$sideMenuBackground: $grayDark; $sideMenuBackground: $gray-dark;
$sideMenuBackgroundHighlight: lighten($grayDark, 4%); $sideMenuBackgroundHighlight: lighten($gray-dark, 4%);
$sideMenuShadow: 0 0 35px 0 $bodyBackground; $sideMenuShadow: 0 0 35px 0 $bodyBackground;
// Pagination // Pagination
...@@ -266,7 +266,7 @@ $errorBackground: $btnDangerBackground; ...@@ -266,7 +266,7 @@ $errorBackground: $btnDangerBackground;
$successText: #468847; $successText: #468847;
$successBackground: $btnSuccessBackground; $successBackground: $btnSuccessBackground;
$infoText: $blueDark; $infoText: $blue-dark;
$infoBackground: $btnInfoBackground; $infoBackground: $btnInfoBackground;
// Tooltips and popovers // Tooltips and popovers
......
public/sass/_variables.light.scss
...@@ -10,19 +10,18 @@ ...@@ -10,19 +10,18 @@
// Grays // Grays
// ------------------------- // -------------------------
$black: #000; $black: #000;
$grayDarker: lighten(#000, 11.5%); // #222 $gray-darker: lighten(#000, 11.5%); // #222
$grayDark: lighten(#000, 20%); // #333 $gray-dark: lighten(#000, 20%); // #333
$gray: lighten(#000, 33.5%); // #555 $gray: lighten(#000, 33.5%); // #555
$grayLight: lighten(#000, 60%); // #999 $gray-light: lighten(#000, 60%); // #999
$grayLighter: lighten(#000, 97.5%); // #eee $gray-lighter: lighten(#000, 97.5%); // #eee
$white: #fff; $white: #fff;
// Accent colors // Accent colors
// ------------------------- // -------------------------
$blueOrig: #007FFF;
$blue: #2AB2E4; $blue: #2AB2E4;
$blueDark: #75CAEB; $blue-dark: #75CAEB;
$green: #28B62C; $green: #28B62C;
$red: #FF4136; $red: #FF4136;
$yellow: #FF851B; $yellow: #FF851B;
...@@ -39,9 +38,9 @@ $critical: #EC2128; ...@@ -39,9 +38,9 @@ $critical: #EC2128;
// grafana Variables // grafana Variables
// ------------------------- // -------------------------
$grafanaPanelBackground: $grayLighter; $grafanaPanelBackground: $gray-lighter;
$grafanaPanelBorder: solid 1px #ddd; $grafanaPanelBorder: solid 1px #ddd;
$grafanaTriggerBorder: solid 1px $grayLight; $grafanaTriggerBorder: solid 1px $gray-light;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
...@@ -110,11 +109,11 @@ $borderRadiusLarge: 4px; ...@@ -110,11 +109,11 @@ $borderRadiusLarge: 4px;
$borderRadiusSmall: 2px; $borderRadiusSmall: 2px;
// Lists // Lists
$grafanaListBackground: darken($grayLighter,5%); $grafanaListBackground: darken($gray-lighter,5%);
$grafanaListAccent: darken($grayLighter,8%); $grafanaListAccent: darken($gray-lighter,8%);
$grafanaListBorderTop: #eee; $grafanaListBorderTop: #eee;
$grafanaListBorderBottom: #eee; $grafanaListBorderBottom: #eee;
$grafanaListHighlight: darken($grayLighter,10%); $grafanaListHighlight: darken($gray-lighter,10%);
$grafanaListHighlightContrast: #ddd; $grafanaListHighlightContrast: #ddd;
$grafanaListMainLinkColor: $textColor; $grafanaListMainLinkColor: $textColor;
...@@ -127,14 +126,14 @@ $tableBackgroundHover: #E8F8FD; // for hover ...@@ -127,14 +126,14 @@ $tableBackgroundHover: #E8F8FD; // for hover
$tableBorder: #ddd; // table and cell border $tableBorder: #ddd; // table and cell border
// Scrollbars // Scrollbars
$scrollbarBackground: $grayLighter; $scrollbarBackground: $gray-lighter;
$scrollbarBackground2: $grayLighter; $scrollbarBackground2: $gray-lighter;
$scrollbarBorder: $grayLight; $scrollbarBorder: $gray-light;
// Buttons // Buttons
// ------------------------- // -------------------------
$btnBackground: $grayLighter; $btnBackground: $gray-lighter;
$btnBackgroundHighlight: darken($grayLighter, 15%); $btnBackgroundHighlight: darken($gray-lighter, 15%);
$btnBorder: #bbb; $btnBorder: #bbb;
$btnPrimaryBackground: lighten($blue, 3%); $btnPrimaryBackground: lighten($blue, 3%);
...@@ -152,12 +151,12 @@ $btnWarningBackgroundHighlight: darken($orange, 3%); ...@@ -152,12 +151,12 @@ $btnWarningBackgroundHighlight: darken($orange, 3%);
$btnDangerBackground: lighten($red, 3%); $btnDangerBackground: lighten($red, 3%);
$btnDangerBackgroundHighlight: darken($red, 3%); $btnDangerBackgroundHighlight: darken($red, 3%);
$btnInverseBackground: $grayLighter; $btnInverseBackground: $gray-lighter;
$btnInverseBackgroundHighlight: darken($grayLighter, 5%); $btnInverseBackgroundHighlight: darken($gray-lighter, 5%);
$btnInverseText: $black; $btnInverseText: $black;
$btnInverseBorder: $grayLight; $btnInverseBorder: $gray-light;
$btnText: $grayLighter; $btnText: $gray-lighter;
$iconContainerBackground: $white; $iconContainerBackground: $white;
$iconContainerBackgroundHighlight: lighten($white, 5%); $iconContainerBackgroundHighlight: lighten($white, 5%);
...@@ -168,9 +167,9 @@ $iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05); ...@@ -168,9 +167,9 @@ $iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05);
// Forms // Forms
// ------------------------- // -------------------------
$inputBackground: $white; $inputBackground: $white;
$inputBorder: $grayLighter; $inputBorder: $gray-lighter;
$inputBorderRadius: $baseBorderRadius; $inputBorderRadius: $baseBorderRadius;
$inputDisabledBackground: $grayLighter; $inputDisabledBackground: $gray-lighter;
$formActionsBackground: #f5f5f5; $formActionsBackground: #f5f5f5;
$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border $inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
$inputText: #020202; $inputText: #020202;
...@@ -183,7 +182,7 @@ $sideMenuBackground: $grafanaPanelBackground; ...@@ -183,7 +182,7 @@ $sideMenuBackground: $grafanaPanelBackground;
$sideMenuBackgroundHighlight: darken($sideMenuBackground, 4%); $sideMenuBackgroundHighlight: darken($sideMenuBackground, 4%);
// search // search
$searchShadow: 0 5px 30px 0 lighten($grayLight, 30%); $searchShadow: 0 5px 30px 0 lighten($gray-light, 30%);
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
...@@ -194,7 +193,7 @@ $dropdownDividerBottom: $white; ...@@ -194,7 +193,7 @@ $dropdownDividerBottom: $white;
$dropdownDivider: $dropdownDividerTop; $dropdownDivider: $dropdownDividerTop;
$dropdownTitle: #333; $dropdownTitle: #333;
$dropdownLinkColor: $grayDark; $dropdownLinkColor: $gray-dark;
$dropdownLinkColorHover: $white; $dropdownLinkColorHover: $white;
$dropdownLinkColorActive: $white; $dropdownLinkColorActive: $white;
...@@ -220,12 +219,12 @@ $zindexModal: 1050; ...@@ -220,12 +219,12 @@ $zindexModal: 1050;
// Input placeholder text color // Input placeholder text color
// ------------------------- // -------------------------
$placeholderText: $grayLight; $placeholderText: $gray-light;
// Hr border color // Hr border color
// ------------------------- // -------------------------
$hrBorder: $grayLighter; $hrBorder: $gray-lighter;
// Horizontal forms & lists // Horizontal forms & lists
...@@ -235,7 +234,7 @@ $horizontalComponentOffset: 180px; ...@@ -235,7 +234,7 @@ $horizontalComponentOffset: 180px;
// Wells // Wells
// ------------------------- // -------------------------
$wellBackground: $grayLighter; $wellBackground: $gray-lighter;
// Navbar // Navbar
...@@ -262,14 +261,14 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); ...@@ -262,14 +261,14 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
// Pagination // Pagination
// ------------------------- // -------------------------
$paginationBackground: $grayLight; $paginationBackground: $gray-light;
$paginationBorder: transparent; $paginationBorder: transparent;
$paginationActiveBackground: $blue; $paginationActiveBackground: $blue;
// Hero unit // Hero unit
// ------------------------- // -------------------------
$heroUnitBackground: $grayLighter; $heroUnitBackground: $gray-lighter;
$heroUnitHeadingColor: inherit; $heroUnitHeadingColor: inherit;
$heroUnitLeadColor: inherit; $heroUnitLeadColor: inherit;
...@@ -296,7 +295,7 @@ $infoBorder: transparent; ...@@ -296,7 +295,7 @@ $infoBorder: transparent;
// Tooltips and popovers // Tooltips and popovers
// ------------------------- // -------------------------
$tooltipColor: $white; $tooltipColor: $white;
$tooltipBackground: $grayDark; $tooltipBackground: $gray-dark;
$tooltipArrowWidth: 5px; $tooltipArrowWidth: 5px;
$tooltipArrowColor: $tooltipBackground; $tooltipArrowColor: $tooltipBackground;
$tooltipLinkColor: darken($white,11%); $tooltipLinkColor: darken($white,11%);
......
public/sass/base/_forms.scss
...@@ -25,14 +25,14 @@ legend { ...@@ -25,14 +25,14 @@ legend {
margin-bottom: $baseLineHeight; margin-bottom: $baseLineHeight;
font-size: $baseFontSize * 1.5; font-size: $baseFontSize * 1.5;
line-height: $baseLineHeight * 2; line-height: $baseLineHeight * 2;
color: $grayDark; color: $gray-dark;
border: 0; border: 0;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
// Small // Small
small { small {
font-size: $baseLineHeight * .75; font-size: $baseLineHeight * .75;
color: $grayLight; color: $gray-light;
} }
} }
......
public/sass/base/_type.scss
...@@ -29,9 +29,9 @@ em { font-style: italic; color: $headingsColor; } ...@@ -29,9 +29,9 @@ em { font-style: italic; color: $headingsColor; }
cite { font-style: normal; } cite { font-style: normal; }
// Utility classes // Utility classes
.muted { color: $grayLight; } .muted { color: $gray-light; }
a.muted:hover, a.muted:hover,
a.muted:focus { color: darken($grayLight, 10%); } a.muted:focus { color: darken($gray-light, 10%); }
.text-warning { color: $warningText; } .text-warning { color: $warningText; }
a.text-warning:hover, a.text-warning:hover,
...@@ -69,7 +69,7 @@ h1, h2, h3, h4, h5, h6 { ...@@ -69,7 +69,7 @@ h1, h2, h3, h4, h5, h6 {
small { small {
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
color: $grayLight; color: $gray-light;
} }
} }
...@@ -172,7 +172,7 @@ abbr[title], ...@@ -172,7 +172,7 @@ 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
abbr[data-original-title] { abbr[data-original-title] {
cursor: help; cursor: help;
border-bottom: 1px dotted $grayLight; border-bottom: 1px dotted $gray-light;
} }
abbr.initialism { abbr.initialism {
font-size: 90%; font-size: 90%;
...@@ -183,7 +183,7 @@ abbr.initialism { ...@@ -183,7 +183,7 @@ abbr.initialism {
blockquote { blockquote {
padding: 0 0 0 15px; padding: 0 0 0 15px;
margin: 0 0 $baseLineHeight; margin: 0 0 $baseLineHeight;
border-left: 5px solid $grayLighter; border-left: 5px solid $gray-lighter;
p { p {
margin-bottom: 0; margin-bottom: 0;
font-size: $baseFontSize * 1.25; font-size: $baseFontSize * 1.25;
...@@ -193,7 +193,7 @@ blockquote { ...@@ -193,7 +193,7 @@ blockquote {
small { small {
display: block; display: block;
line-height: $baseLineHeight; line-height: $baseLineHeight;
color: $grayLight; color: $gray-light;
&:before { &:before {
content: '\2014 \00A0'; content: '\2014 \00A0';
} }
...@@ -204,7 +204,7 @@ blockquote { ...@@ -204,7 +204,7 @@ blockquote {
float: right; float: right;
padding-right: 15px; padding-right: 15px;
padding-left: 0; padding-left: 0;
border-right: 5px solid $grayLighter; border-right: 5px solid $gray-lighter;
border-left: 0; border-left: 0;
p, p,
small { small {
......
public/sass/components/_alerts.scss
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
border-radius: 50%; border-radius: 50%;
border: none; border: none;
font-size: 1.1rem; font-size: 1.1rem;
color: $grayDarker; color: $gray-darker;
.fa { .fa {
position: relative; position: relative;
top: -2px; top: -2px;
......
public/sass/components/_buttons.scss
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
cursor: pointer; cursor: pointer;
border: none; border: none;
@include buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75)); @include buttonBackground($btnBackground, $btnBackgroundHighlight, $gray-dark, 0 1px 1px rgba(255,255,255,.75));
@include box-shadow("inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); @include box-shadow("inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
// Hover/focus state // Hover/focus state
......
public/sass/components/_dashboard.scss
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
float: left; float: left;
cursor: pointer; cursor: pointer;
line-height: 31px; line-height: 31px;
background-color: $blueDark; background-color: $blue-dark;
} }
.row-text { .row-text {
...@@ -245,7 +245,7 @@ div.flot-text { ...@@ -245,7 +245,7 @@ div.flot-text {
.panel-drop-zone { .panel-drop-zone {
display: none; display: none;
.panel-container { .panel-container {
border: 1px solid $grayDark; border: 1px solid $gray-dark;
} }
} }
......
public/sass/components/_dropdown.scss
...@@ -112,7 +112,7 @@ ...@@ -112,7 +112,7 @@
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus { .dropdown-menu > .disabled > a:focus {
color: $grayLight; color: $gray-light;
} }
// Nuke hover/focus effects // Nuke hover/focus effects
.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:hover,
......
public/sass/components/_gfbox.scss
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
.gf-box-header-save-btn { .gf-box-header-save-btn {
padding: 7px 0; padding: 7px 0;
float: right; float: right;
color: $grayLight; color: $gray-light;
font-style: italic; font-style: italic;
} }
......
public/sass/components/_navs.scss
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
.nav > li > a:hover, .nav > li > a:hover,
.nav > li > a:focus { .nav > li > a:focus {
text-decoration: none; text-decoration: none;
background-color: $grayLighter; background-color: $gray-lighter;
} }
// Redeclare pull classes because of specifity // Redeclare pull classes because of specifity
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
line-height: $baseLineHeight; line-height: $baseLineHeight;
color: $grayLight; color: $gray-light;
text-shadow: 0 1px 0 rgba(255,255,255,.5); text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase; text-transform: uppercase;
} }
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
@include border-radius(4px 4px 0 0); @include border-radius(4px 4px 0 0);
&:hover, &:hover,
&:focus { &:focus {
border-color: $grayLighter $grayLighter #ddd; border-color: $gray-lighter $gray-lighter #ddd;
} }
} }
// Active state, and it's :hover/:focus to override normal :hover/:focus // Active state, and it's :hover/:focus to override normal :hover/:focus
...@@ -172,8 +172,8 @@ ...@@ -172,8 +172,8 @@
.nav > li.dropdown.open.active > a:hover, .nav > li.dropdown.open.active > a:hover,
.nav > li.dropdown.open.active > a:focus { .nav > li.dropdown.open.active > a:focus {
color: $white; color: $white;
background-color: $grayLight; background-color: $gray-light;
border-color: $grayLight; border-color: $gray-light;
} }
.nav li.dropdown.open .caret, .nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret, .nav li.dropdown.open.active .caret,
...@@ -187,7 +187,7 @@ ...@@ -187,7 +187,7 @@
// Dropdowns in stacked tabs // Dropdowns in stacked tabs
.tabs-stacked .open > a:hover, .tabs-stacked .open > a:hover,
.tabs-stacked .open > a:focus { .tabs-stacked .open > a:focus {
border-color: $grayLight; border-color: $gray-light;
} }
// Show/hide tabbable areas // Show/hide tabbable areas
......
public/sass/components/_pagination.scss
...@@ -29,14 +29,14 @@ ...@@ -29,14 +29,14 @@
} }
.pagination ul > .active > a, .pagination ul > .active > a,
.pagination ul > .active > span { .pagination ul > .active > span {
color: $grayLight; color: $gray-light;
cursor: default; cursor: default;
} }
.pagination ul > .disabled > span, .pagination ul > .disabled > span,
.pagination ul > .disabled > a, .pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover, .pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus { .pagination ul > .disabled > a:focus {
color: $grayLight; color: $gray-light;
background-color: transparent; background-color: transparent;
cursor: default; cursor: default;
} }
......
public/sass/components/_submenu.scss
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
.variable-option { .variable-option {
&:hover, &.highlighted { &:hover, &.highlighted {
background-color: $blueDark; background-color: $blue-dark;
} }
} }
......
public/sass/components/_tags.scss
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
vertical-align: baseline; vertical-align: baseline;
white-space: nowrap; white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0,0,0,.25); text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: $grayLight; background-color: $gray-light;
} }
...@@ -55,6 +55,6 @@ ...@@ -55,6 +55,6 @@
&-info { background-color: $infoText; } &-info { background-color: $infoText; }
&-info[href] { background-color: darken($infoText, 10%); } &-info[href] { background-color: darken($infoText, 10%); }
// Inverse (black) // Inverse (black)
&-inverse { background-color: $grayDark; } &-inverse { background-color: $gray-dark; }
&-inverse[href] { background-color: darken($grayDark, 10%); } &-inverse[href] { background-color: darken($gray-dark, 10%); }
} }
public/sass/pages/_login.scss
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
margin-top: 10px; margin-top: 10px;
padding: 10px; padding: 10px;
a { a {
color: $grayLight; color: $gray-light;
} }
} }
...@@ -121,8 +121,8 @@ ...@@ -121,8 +121,8 @@
border-bottom: 1px solid $gray; border-bottom: 1px solid $gray;
.login-divider-text { .login-divider-text {
background-color: $grayDarker; background-color: $gray-darker;
color: $grayLight; color: $gray-light;
padding: 0 10px; padding: 0 10px;
} }
} }
......
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