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