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 @@
// -------------------------
$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
......
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%);
......
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;
}
}
......
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 {
......
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;
......
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
......
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;
}
}
......
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,
......
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;
}
......
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
......
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;
}
......
public/sass/components/_submenu.scss
......@@ -122,7 +122,7 @@
.variable-option {
&:hover, &.highlighted {
background-color: $blueDark;
background-color: $blue-dark;
}
}
......
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%); }
}
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;
}
}
......
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