apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ux(sass): variable renaming

Browse Source
pull/4072/head
Torkel Ödegaard 9 years ago
parent 41b775561a
commit 058c905432
14 changed files with 96 additions and 97 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 74
      public/sass/_variables.dark.scss
  2. 59
      public/sass/_variables.light.scss
  3. 4
      public/sass/base/_forms.scss
  4. 14
      public/sass/base/_type.scss
  5. 2
      public/sass/components/_alerts.scss
  6. 2
      public/sass/components/_buttons.scss
  7. 4
      public/sass/components/_dashboard.scss
  8. 2
      public/sass/components/_dropdown.scss
  9. 2
      public/sass/components/_gfbox.scss
  10. 12
      public/sass/components/_navs.scss
  11. 4
      public/sass/components/_pagination.scss
  12. 2
      public/sass/components/_submenu.scss
  13. 6
      public/sass/components/_tags.scss
  14. 6
      public/sass/pages/_login.scss

74
public/sass/_variables.dark.scss
Unescape View File

@ -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

59
public/sass/_variables.light.scss
Unescape View File

@ -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%);

4
public/sass/base/_forms.scss
Unescape View File

@ -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;
}
}

14
public/sass/base/_type.scss
Unescape View File

@ -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 {

2
public/sass/components/_alerts.scss
Unescape View File

@ -55,7 +55,7 @@
border-radius: 50%;
border: none;
font-size: 1.1rem;
color: $grayDarker;
color: $gray-darker;
.fa {
position: relative;
top: -2px;

2
public/sass/components/_buttons.scss
Unescape View File

@ -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

4
public/sass/components/_dashboard.scss
Unescape View File

@ -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;
}
}

2
public/sass/components/_dropdown.scss
Unescape View File

@ -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,

2
public/sass/components/_gfbox.scss
Unescape View File

@ -28,7 +28,7 @@
.gf-box-header-save-btn {
padding: 7px 0;
float: right;
color: $grayLight;
color: $gray-light;
font-style: italic;
}

12
public/sass/components/_navs.scss
Unescape View File

@ -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

4
public/sass/components/_pagination.scss
Unescape View File

@ -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;
}

2
public/sass/components/_submenu.scss
Unescape View File

@ -122,7 +122,7 @@
.variable-option {
&:hover, &.highlighted {
background-color: $blueDark;
background-color: $blue-dark;
}
}

6
public/sass/components/_tags.scss
Unescape View File

@ -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%); }
}

6
public/sass/pages/_login.scss
Unescape View File

@ -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;
}
}

Write Preview
Loading…
Cancel
Save