IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(): color/grays palate refactoring

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-02-19 12:26:39 +01:00
parent a73ef353f0
commit c21b353042
15 changed files with 151 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -33,6 +33,7 @@
"grunt-karma": "~0.12.1", "grunt-karma": "~0.12.1",
"grunt-ng-annotate": "^1.0.1", "grunt-ng-annotate": "^1.0.1",
"grunt-notify": "^0.4.3", "grunt-notify": "^0.4.3",
"grunt-sass": "^1.1.0",
"grunt-string-replace": "~1.2.1", "grunt-string-replace": "~1.2.1",
"grunt-systemjs-builder": "^0.2.5", "grunt-systemjs-builder": "^0.2.5",
"grunt-tslint": "^3.0.1", "grunt-tslint": "^3.0.1",
@ -51,9 +52,9 @@
"phantomjs": "^1.9.19", "phantomjs": "^1.9.19",
"reflect-metadata": "0.1.2", "reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0", "rxjs": "5.0.0-beta.0",
"sass-lint": "^1.5.0",
"systemjs": "0.19.20", "systemjs": "0.19.20",
"zone.js": "0.5.10", "zone.js": "0.5.10"
"grunt-sass": "^1.1.0"
}, },
"engines": { "engines": {
"node": "0.4.x", "node": "0.4.x",

95
public/sass/_variables.dark.scss
View File

@ -6,12 +6,22 @@
// ------------------------- // -------------------------
$black: #000; $black: #000;
$gray: #bbb; // -------------------------
$gray-dark: #262626; $black: #000;
$gray-darker: #1f1f1f; $dark-1: #141414; // (body)
$gray-light: #ADAFAE; $dark-2: #1f1d1d; // ($gray-darker)
$gray-lighter: #BBBFC2; $dark-3: #262626; // ($gray-dark)
$white: #fff; $dark-4: #333333;
$dark-5: #444444;
$gray-1: #555555;
$gray-2: #6e7580;
$gray-3: #b3b3b3;
$gray-4: #cfd4d9;
$gray-5: #e8edf0;
$gray-6: #f7f9fa;
$gray-7: #fbfbfb;
$white: #fff;
// Accent colors // Accent colors
// ------------------------- // -------------------------
@ -38,10 +48,10 @@ $critical: #ed2e18;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
$body-bg: rgb(20,20,20); $body-bg: rgb(20,20,20);
$page-bg: $gray-darker; $page-bg: $dark-2;
$body-color: $gray-lighter; $body-color: $gray-4;
$text-color: $gray-lighter; $text-color: $gray-4;
// Links // Links
// ------------------------- // -------------------------
@ -52,11 +62,11 @@ $link-hover-color: $white;
// Typography // Typography
// ------------------------- // -------------------------
$headings-color: darken($white,11%); $headings-color: darken($white,11%);
$abbr-border-color: $gray-light !default; $abbr-border-color: $gray-3 !default;
$text-muted: darken($link-color,30%); $text-muted: darken($link-color,30%);
$blockquote-small-color: $gray-light !default; $blockquote-small-color: $gray-3 !default;
$blockquote-border-color: $gray-lighter !default; $blockquote-border-color: $gray-4 !default;
$hr-border-color: rgba(0,0,0,.1) !default; $hr-border-color: rgba(0,0,0,.1) !default;
@ -66,25 +76,25 @@ $component-active-bg: $brand-primary !default;
// Panel // Panel
// ------------------------- // -------------------------
$panel-bg: $gray-darker; $panel-bg: $dark-2;
$panel-border: solid 1px $gray-dark; $panel-border: solid 1px $dark-3;
$divider-border-color: #555; $divider-border-color: #555;
// Graphite Target Editor // Graphite Target Editor
$tight-form-border: #050505; $tight-form-border: #050505;
$tight-form-bg: $gray-dark; $tight-form-bg: $dark-3;
$tight-form-func-bg: #333; $tight-form-func-bg: #333;
$tight-form-func-highlight-bg: #444; $tight-form-func-highlight-bg: #444;
$modal-background: $black; $modal-background: $black;
$code-tag-bg: #444; $code-tag-bg: #444;
// Lists // Lists
$grafanaListBackground: $gray-dark; $grafanaListBackground: $dark-3;
$grafanaListAccent: lighten($gray-darker, 2%); $grafanaListAccent: lighten($dark-2, 2%);
$grafanaListBorderTop: $gray-dark; $grafanaListBorderTop: $dark-3;
$grafanaListBorderBottom: $black; $grafanaListBorderBottom: $black;
$grafanaListHighlight: #333; $grafanaListHighlight: #333;
$grafanaListMainLinkColor: $text-color; $grafanaListMainLinkColor: $text-color;
@ -98,8 +108,8 @@ $scrollbarBorder: black;
// ------------------------- // -------------------------
$table-bg: transparent; // overall background-color $table-bg: transparent; // overall background-color
$table-bg-accent: rgba(100, 100, 100, 0.3); // for striping $table-bg-accent: rgba(100, 100, 100, 0.3); // for striping
$table-bg-hover: $gray-dark; // for hover $table-bg-hover: $dark-3; // for hover
$table-border: $gray-dark; // table and cell border $table-border: $dark-3; // table and cell border
// Buttons // Buttons
// ------------------------- // -------------------------
@ -119,30 +129,27 @@ $btnWarningBackgroundHighlight: lighten($brand-warning, 8%);
$btnDangerBackground: lighten($red, 3%); $btnDangerBackground: lighten($red, 3%);
$btnDangerBackgroundHighlight: darken($red, 3%); $btnDangerBackgroundHighlight: darken($red, 3%);
$btnInverseBackground: $gray-dark; $btnInverseBackground: $dark-3;
$btnInverseBackgroundHighlight: lighten($gray-dark, 1%); $btnInverseBackgroundHighlight: lighten($dark-3, 1%);
$btnInverseText: $link-color; $btnInverseText: $link-color;
$btnInverseBorder: #333; $btnInverseBorder: #333;
$btnText: $gray; $btnText: $gray-3;
$iconContainerBackground: $black; $iconContainerBackground: $black;
$iconContainerBackgroundHighlight: lighten($black, 5%);
$iconContainerBorder: 1px solid transparent;
$iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05);
// Forms // Forms
// ------------------------- // -------------------------
$input-bg: lighten($gray-dark,5%); $input-bg: lighten($dark-3,5%);
$input-bg-disabled: #555; $input-bg-disabled: #555;
$input-color: $gray-light; $input-color: $gray-4;
$input-border-color: lighten($gray-dark,5%); $input-border-color: lighten($dark-2,5%);
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; $input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
$input-border-focus: $input-border-color !default; $input-border-focus: $input-border-color !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default; $input-color-placeholder: #999 !default;
$input-label-bg: $gray-dark; $input-label-bg: $dark-3;
// Search // Search
@ -150,7 +157,7 @@ $searchShadow: 0 0 35px 0 $body-bg;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
$dropdownBackground: $gray-dark; $dropdownBackground: $dark-3;
$dropdownBorder: rgba(0,0,0,.2); $dropdownBorder: rgba(0,0,0,.2);
$dropdownDividerTop: transparent; $dropdownDividerTop: transparent;
$dropdownDividerBottom: #444; $dropdownDividerBottom: #444;
@ -182,12 +189,12 @@ $horizontalComponentOffset: 180px;
$wellBackground: #131517; $wellBackground: #131517;
$navbarHeight: 52px; $navbarHeight: 52px;
$navbarBackgroundHighlight: $gray-dark; $navbarBackgroundHighlight: $dark-3;
$navbarBackground: $gray-dark; $navbarBackground: $dark-3;
$navbarBorder: 1px solid $body-bg; $navbarBorder: 1px solid $body-bg;
$navbarText: $gray-light; $navbarText: $gray-4;
$navbarLinkColor: $gray-light; $navbarLinkColor: $gray-4;
$navbarLinkColorHover: $white; $navbarLinkColorHover: $white;
$navbarLinkColorActive: $navbarLinkColorHover; $navbarLinkColorActive: $navbarLinkColorHover;
$navbarLinkBackgroundHover: transparent; $navbarLinkBackgroundHover: transparent;
@ -200,10 +207,8 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
// Sidemenu // Sidemenu
// ------------------------- // -------------------------
$sideMenuTopShadow: $navbarDropdownShadow; $side-menu-bg: $dark-3;
$sideMenuBackground: $gray-dark; $side-menu-item-hover-bg: $dark-4;
$sideMenuBackgroundHighlight: lighten($gray-dark, 4%);
$sideMenuShadow: 0 0 35px 0 $body-bg;
// Pagination // Pagination
// ------------------------- // -------------------------

129
public/sass/_variables.light.scss
View File

@ -10,15 +10,23 @@
// Grays // Grays
// ------------------------- // -------------------------
$black: #000; $black: #000;
$gray-darker: lighten(#000, 11.5%); // #222
$gray-dark: lighten(#000, 20%); // #333
$gray: lighten(#000, 33.5%); // #555
$gray-light: lighten(#000, 60%); // #999
$gray-light2: lighten(#000, 70%); // #999
$gray-lighter: lighten(#000, 96.5%); // #eee
$gray-lightest: lighten(#000, 98%); // #eee
$white: #fff;
// -------------------------
$black: #000;
$dark-1: #141414; // (body)
$dark-2: #1f1d1d; // ($gray-darker)
$dark-3: #262626; // ($gray-dark)
$dark-4: #333333;
$dark-5: #444444;
$gray-1: #555555;
$gray-2: #7B7B7B;
$gray-3: #b3b3b3;
$gray-4: #D8D9DA;
$gray-5: #ECECEC;
$gray-6: #f4f5f8;
$gray-7: #fbfbfb;
$white: #fff;
// Accent colors // Accent colors
// ------------------------- // -------------------------
@ -48,23 +56,23 @@ $critical: #EC2128;
$body-bg: $white; $body-bg: $white;
$page-bg: $white; $page-bg: $white;
$body-color: $gray; $body-color: $gray-1;
$text-color: $gray; $text-color: $gray-1;
// Links // Links
// ------------------------- // -------------------------
$link-color: $gray; $link-color: $gray-1;
$link-color-disabled: lighten($link-color,30%); $link-color-disabled: lighten($link-color,30%);
$link-hover-color: darken($link-color, 20%); $link-hover-color: darken($link-color, 20%);
// Typography // Typography
// ------------------------- // -------------------------
$headings-color: $text-color; $headings-color: $text-color;
$abbr-border-color: $gray-light !default; $abbr-border-color: $gray-2 !default;
$text-muted: darken($link-color,30%); $text-muted: darken($link-color,30%);
$blockquote-small-color: $gray-light !default; $blockquote-small-color: $gray-2 !default;
$blockquote-border-color: $gray-lighter !default; $blockquote-border-color: $gray-3 !default;
$hr-border-color: rgba(0,0,0,.1) !default; $hr-border-color: rgba(0,0,0,.1) !default;
@ -75,31 +83,27 @@ $component-active-bg: $brand-primary !default;
// Panel // Panel
// ------------------------- // -------------------------
$panel-bg: $gray-lightest; $panel-bg: $gray-7;
$panel-border: solid 1px $gray-lighter; $panel-border: solid 1px $gray-6;
$divider-border-color: $gray-light; $divider-border-color: $gray-2;
// Submenu
$submenuBackground: rgb(218, 217, 217);
$submenuBorder: $white;
// Graphite Target Editor // Graphite Target Editor
$tight-form-border: #ddd; $tight-form-border: $gray-4;
$tight-form-bg: #efefef; $tight-form-bg: $gray-6;
$tight-form-func-bg: darken($tight-form-bg, 5%); $tight-form-func-bg: $gray-5;
$tight-form-func-highlight-bg: darken($tight-form-bg, 10%); $tight-form-func-highlight-bg: $gray-6;
$modal-background: $body-bg; $modal-background: $body-bg;
$code-tag-bg: #ddd; $code-tag-bg: #ddd;
// Lists // Lists
$grafanaListBackground: darken($gray-lighter,5%); $grafanaListBackground: darken($gray-3,5%);
$grafanaListAccent: darken($gray-lighter,8%); $grafanaListAccent: darken($gray-3,8%);
$grafanaListBorderTop: #eee; $grafanaListBorderTop: #eee;
$grafanaListBorderBottom: #eee; $grafanaListBorderBottom: #eee;
$grafanaListHighlight: darken($gray-lighter,10%); $grafanaListHighlight: darken($gray-3,10%);
$grafanaListHighlightContrast: #ddd; $grafanaListHighlightContrast: #ddd;
$grafanaListMainLinkColor: $text-color; $grafanaListMainLinkColor: $text-color;
@ -114,14 +118,14 @@ $table-border: #ddd; // table and cell border
// Scrollbars // Scrollbars
$scrollbarBackground: $gray-lighter; $scrollbarBackground: $gray-3;
$scrollbarBackground2: $gray-lighter; $scrollbarBackground2: $gray-3;
$scrollbarBorder: $gray-light; $scrollbarBorder: $gray-2;
// Buttons // Buttons
// ------------------------- // -------------------------
$btnBackground: $gray-lighter; $btnBackground: $gray-3;
$btnBackgroundHighlight: darken($gray-lighter, 15%); $btnBackgroundHighlight: darken($gray-3, 15%);
$btnBorder: #bbb; $btnBorder: #bbb;
$btn-primary-bg: $brand-primary; $btn-primary-bg: $brand-primary;
@ -139,50 +143,45 @@ $btnWarningBackgroundHighlight: darken($orange, 3%);
$btnDangerBackground: lighten($red, 3%); $btnDangerBackground: lighten($red, 3%);
$btnDangerBackgroundHighlight: darken($red, 3%); $btnDangerBackgroundHighlight: darken($red, 3%);
$btnInverseBackground: $gray-lighter; $btnInverseBackground: $gray-5;
$btnInverseBackgroundHighlight: darken($gray-lighter, 5%); $btnInverseBackgroundHighlight: darken($gray-5, 5%);
$btnInverseText: $black; $btnInverseText: $dark-4;
$btnInverseBorder: $gray-light;
$btnText: $gray-lighter; $btnText: $gray-3;
$iconContainerBackground: $white;
$iconContainerBackgroundHighlight: lighten($white, 5%);
$iconContainerBorder: 1px solid rgba(0,0,0, 0.05);
$iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05);
$iconContainerBackground: $white;
// Forms // Forms
// ------------------------- // -------------------------
$input-bg: $white; $input-bg: $gray-7;
$input-bg-disabled: $gray-lighter; $input-bg-disabled: $gray-5;
$input-color: #020202; $input-color: $dark-3;
$input-border-color: $gray-lighter; $input-border-color: $gray-5;
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; $input-box-shadow: none;
$input-border-focus: #66afe9 !default; $input-border-focus: $blue !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-box-shadow-focus: $blue !default;
$input-color-placeholder: #999 !default; $input-color-placeholder: $gray-4 !default;
$input-label-bg: #f8f8f8; $input-label-bg: $gray-5;
// Sidemenu // Sidemenu
// ------------------------- // -------------------------
$sideMenuBackground: $panel-bg; $side-menu-bg: $body-bg;
$sideMenuBackgroundHighlight: darken($sideMenuBackground, 4%); $side-menu-item-hover-bg: $gray-6;
// search // search
$searchShadow: 0 5px 30px 0 lighten($gray-light, 30%); $searchShadow: 0 5px 30px 0 lighten($gray-2, 30%);
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
$dropdownBackground: $white; $dropdownBackground: $white;
$dropdownBorder: $tight-form-border; $dropdownBorder: $tight-form-border;
$dropdownDividerTop: #e5e5e5; $dropdownDividerTop: $gray-6;
$dropdownDividerBottom: $white; $dropdownDividerBottom: $white;
$dropdownDivider: $dropdownDividerTop; $dropdownDivider: $dropdownDividerTop;
$dropdownTitle: #333; $dropdownTitle: $dark-5;
$dropdownLinkColor: $gray-dark; $dropdownLinkColor: $dark-3;
$dropdownLinkColorHover: $white; $dropdownLinkColorHover: $white;
$dropdownLinkColorActive: $white; $dropdownLinkColorActive: $white;
@ -196,12 +195,12 @@ $dropdownLinkBackgroundHover: $blue;
// Input placeholder text color // Input placeholder text color
// ------------------------- // -------------------------
$placeholderText: $gray-light; $placeholderText: $gray-2;
// Hr border color // Hr border color
// ------------------------- // -------------------------
$hrBorder: $gray-lighter; $hrBorder: $gray-3;
// Horizontal forms & lists // Horizontal forms & lists
@ -211,7 +210,7 @@ $horizontalComponentOffset: 180px;
// Wells // Wells
// ------------------------- // -------------------------
$wellBackground: $gray-lighter; $wellBackground: $gray-3;
// Navbar // Navbar
@ -238,7 +237,7 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
// Pagination // Pagination
// ------------------------- // -------------------------
$paginationBackground: $gray-light; $paginationBackground: $gray-2;
$paginationBorder: transparent; $paginationBorder: transparent;
$paginationActiveBackground: $blue; $paginationActiveBackground: $blue;
@ -265,7 +264,7 @@ $infoBorder: transparent;
// Tooltips and popovers // Tooltips and popovers
// ------------------------- // -------------------------
$tooltipColor: $white; $tooltipColor: $white;
$tooltipBackground: $gray-dark; $tooltipBackground: $gray-4;
$tooltipArrowWidth: 5px; $tooltipArrowWidth: 5px;
$tooltipArrowColor: $tooltipBackground; $tooltipArrowColor: $tooltipBackground;
$tooltipLinkColor: darken($white,11%); $tooltipLinkColor: darken($white,11%);

6
public/sass/_variables.scss
View File

@ -127,7 +127,7 @@ $lead-font-size: 1.25rem !default;
$lead-font-weight: 300 !default; $lead-font-weight: 300 !default;
$headings-margin-bottom: ($spacer / 2) !default; $headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; $headings-font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$headings-font-weight: 400 !default; $headings-font-weight: 400 !default;
$headings-line-height: 1.1 !default; $headings-line-height: 1.1 !default;
@ -145,9 +145,9 @@ $list-inline-padding: 5px !default;
$line-height-lg: (4 / 3) !default; $line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default; $line-height-sm: 1.5 !default;
$border-radius: 0.0rem !default; $border-radius: 0.2rem !default;
$border-radius-lg: 0.3rem !default; $border-radius-lg: 0.3rem !default;
$border-radius-sm: 0.2rem !default; $border-radius-sm: 0.1rem !default;
$caret-width: .3em !default; $caret-width: .3em !default;
$caret-width-lg: $caret-width !default; $caret-width-lg: $caret-width !default;

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

@ -14,14 +14,14 @@ legend {
margin-bottom: $line-height-base; margin-bottom: $line-height-base;
font-size: $font-size-base * 1.5; font-size: $font-size-base * 1.5;
line-height: $line-height-base * 2; line-height: $line-height-base * 2;
color: $gray-dark; color: $gray-3;
border: 0; border: 0;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
// Small // Small
small { small {
font-size: $line-height-base * .75; font-size: $line-height-base * .75;
color: $gray-light; color: $gray-2;
} }
} }

12
public/sass/base/_type.scss
View File

@ -27,9 +27,9 @@ em { font-style: italic; color: $headings-color; }
cite { font-style: normal; } cite { font-style: normal; }
// Utility classes // Utility classes
.muted { color: $gray-light; } .muted { color: $gray-2; }
a.muted:hover, a.muted:hover,
a.muted:focus { color: darken($gray-light, 10%); } a.muted:focus { color: darken($gray-2, 10%); }
.text-warning { color: $state-warning-text; } .text-warning { color: $state-warning-text; }
a.text-warning:hover, a.text-warning:hover,
@ -199,7 +199,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 $gray-light; border-bottom: 1px dotted $gray-2;
} }
abbr.initialism { abbr.initialism {
font-size: 90%; font-size: 90%;
@ -210,7 +210,7 @@ abbr.initialism {
blockquote { blockquote {
padding: 0 0 0 15px; padding: 0 0 0 15px;
margin: 0 0 $line-height-base; margin: 0 0 $line-height-base;
border-left: 5px solid $gray-lighter; border-left: 5px solid $gray-3;
p { p {
margin-bottom: 0; margin-bottom: 0;
font-size: $font-size-base * 1.25; font-size: $font-size-base * 1.25;
@ -220,7 +220,7 @@ blockquote {
small { small {
display: block; display: block;
line-height: $line-height-base; line-height: $line-height-base;
color: $gray-light; color: $gray-2;
&:before { &:before {
content: '\2014 \00A0'; content: '\2014 \00A0';
} }
@ -231,7 +231,7 @@ blockquote {
float: right; float: right;
padding-right: 15px; padding-right: 15px;
padding-left: 0; padding-left: 0;
border-right: 5px solid $gray-lighter; border-right: 5px solid $gray-3;
border-left: 0; border-left: 0;
p, p,
small { small {

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

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

2
public/sass/components/_dashboard.scss
View File

@ -245,7 +245,7 @@ div.flot-text {
.panel-drop-zone { .panel-drop-zone {
display: none; display: none;
.panel-container { .panel-container {
border: 1px solid $gray-dark; border: 1px solid $dark-3;
} }
} }

7
public/sass/components/_dropdown.scss
View File

@ -46,7 +46,6 @@
display: none; // none by default, but block on "open" of the menu display: none; // none by default, but block on "open" of the menu
float: left; float: left;
min-width: 140px; min-width: 140px;
padding: 5px 0;
margin: 2px 0 0; // override default ul margin: 2px 0 0; // override default ul
list-style: none; list-style: none;
background-color: $dropdownBackground; background-color: $dropdownBackground;
@ -92,7 +91,7 @@
.dropdown-submenu:focus > a { .dropdown-submenu:focus > a {
text-decoration: none; text-decoration: none;
color: $dropdownLinkColorHover; color: $dropdownLinkColorHover;
background-color: $grafanaListHighlight; background-color: $dropdownLinkBackgroundHover;
} }
// Active state // Active state
@ -103,7 +102,7 @@
color: $dropdownLinkColorActive; color: $dropdownLinkColorActive;
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
background-color: $grafanaListHighlight; background-color: $dropdownLinkBackgroundHover;
} }
// Disabled state // Disabled state
@ -112,7 +111,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: $gray-light; color: $gray-2;
} }
// Nuke hover/focus effects // Nuke hover/focus effects
.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:hover,

4
public/sass/components/_footer.scss
View File

@ -3,7 +3,7 @@
bottom: 2px; bottom: 2px;
left: 3px; left: 3px;
font-size: 80%; font-size: 80%;
color: darken($gray, 25%); color: darken($gray-1, 25%);
a { color: darken($gray, 25%); } a { color: darken($gray-1, 25%); }
} }

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

@ -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: $gray-light; color: $gray-2;
font-style: italic; font-style: italic;
} }

8
public/sass/components/_sidemenu.scss
View File

@ -7,7 +7,7 @@
top: 52px; top: 52px;
left: 0; left: 0;
width: $side-menu-width; width: $side-menu-width;
background-color: $body-bg; background-color: $side-menu-bg;
z-index: 101; z-index: 101;
transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);
visibility: hidden; visibility: hidden;
@ -68,7 +68,7 @@
display: block; display: block;
top: 0px; top: 0px;
left: $side-menu-width; left: $side-menu-width;
background-color: $body-bg; background-color: $side-menu-bg;
} }
} }
} }
@ -112,7 +112,7 @@
display: block; display: block;
&:hover { &:hover {
background-color: $sideMenuBackgroundHighlight; background-color: $side-menu-item-hover-bg;
} }
.sidemenu-item-text { .sidemenu-item-text {
@ -166,7 +166,7 @@
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: $sideMenuBackgroundHighlight; background-color: $side-menu-item-hover-bg;
} }
display: table; display: table;
position: relative; position: relative;

2
public/sass/components/_tags.scss
View File

@ -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: $gray-light; background-color: $gray-1;
} }

8
public/sass/pages/_login.scss
View File

@ -105,7 +105,7 @@
margin-top: 10px; margin-top: 10px;
padding: 10px; padding: 10px;
a { a {
color: $gray-light; color: $gray-2;
} }
} }
@ -117,11 +117,11 @@
.login-divider-line { .login-divider-line {
width: 100%; width: 100%;
height: 10px; height: 10px;
border-bottom: 1px solid $gray; border-bottom: 1px solid $gray-1;
.login-divider-text { .login-divider-text {
background-color: $gray-darker; background-color: $dark-3;
color: $gray-light; color: $gray-2;
padding: 0 10px; padding: 0 10px;
} }
} }

11
public/sass/pages/_styleguide.scss
View File

@ -1,10 +1,9 @@
.style-guide-color-card { .style-guide-color-card {
list-style: none; list-style: none;
margin: 0 $spacer $spacer 0; margin: 0;
float: left; padding: $spacer;
padding: $spacer*2; width: 100%;
width: 20rem; text-align: center;
border-radius: 0.5rem;
text-shadow: 0 0 8px #fff; text-shadow: 0 0 8px #fff;
color: $black; color: $black;
font-size: $font-size-sm; font-size: $font-size-sm;
@ -12,7 +11,7 @@
.color-card-body-bg { background-color: $body-bg; } .color-card-body-bg { background-color: $body-bg; }
.color-card-page-bg { background-color: $page-bg; } .color-card-page-bg { background-color: $page-bg; }
.color-card-gray { background-color: $gray; } .color-card-gray { background-color: $gray-1; }
.style-guide-button-list { .style-guide-button-list {
padding: $spacer; padding: $spacer;