From c21b353042087d582f4d654c8727671221cfbe63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 19 Feb 2016 12:26:39 +0100 Subject: [PATCH] ux(): color/grays palate refactoring --- package.json | 5 +- public/sass/_variables.dark.scss | 95 +++++++++--------- public/sass/_variables.light.scss | 129 ++++++++++++------------- public/sass/_variables.scss | 6 +- public/sass/base/_forms.scss | 4 +- public/sass/base/_type.scss | 12 +-- public/sass/components/_alerts.scss | 2 +- public/sass/components/_dashboard.scss | 2 +- public/sass/components/_dropdown.scss | 7 +- public/sass/components/_footer.scss | 4 +- public/sass/components/_gfbox.scss | 2 +- public/sass/components/_sidemenu.scss | 8 +- public/sass/components/_tags.scss | 2 +- public/sass/pages/_login.scss | 10 +- public/sass/pages/_styleguide.scss | 11 +-- 15 files changed, 151 insertions(+), 148 deletions(-) diff --git a/package.json b/package.json index 0c31f9e2616..04a41301a77 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "grunt-karma": "~0.12.1", "grunt-ng-annotate": "^1.0.1", "grunt-notify": "^0.4.3", + "grunt-sass": "^1.1.0", "grunt-string-replace": "~1.2.1", "grunt-systemjs-builder": "^0.2.5", "grunt-tslint": "^3.0.1", @@ -51,9 +52,9 @@ "phantomjs": "^1.9.19", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", + "sass-lint": "^1.5.0", "systemjs": "0.19.20", - "zone.js": "0.5.10", - "grunt-sass": "^1.1.0" + "zone.js": "0.5.10" }, "engines": { "node": "0.4.x", diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index b9d7cb21178..f4a0bb9d0ef 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -6,12 +6,22 @@ // ------------------------- $black: #000; -$gray: #bbb; -$gray-dark: #262626; -$gray-darker: #1f1f1f; -$gray-light: #ADAFAE; -$gray-lighter: #BBBFC2; -$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: #6e7580; +$gray-3: #b3b3b3; +$gray-4: #cfd4d9; +$gray-5: #e8edf0; +$gray-6: #f7f9fa; +$gray-7: #fbfbfb; + +$white: #fff; // Accent colors // ------------------------- @@ -38,10 +48,10 @@ $critical: #ed2e18; // Scaffolding // ------------------------- -$body-bg: rgb(20,20,20); -$page-bg: $gray-darker; -$body-color: $gray-lighter; -$text-color: $gray-lighter; +$body-bg: rgb(20,20,20); +$page-bg: $dark-2; +$body-color: $gray-4; +$text-color: $gray-4; // Links // ------------------------- @@ -52,11 +62,11 @@ $link-hover-color: $white; // Typography // ------------------------- $headings-color: darken($white,11%); -$abbr-border-color: $gray-light !default; -$text-muted: darken($link-color,30%); +$abbr-border-color: $gray-3 !default; +$text-muted: darken($link-color,30%); -$blockquote-small-color: $gray-light !default; -$blockquote-border-color: $gray-lighter !default; +$blockquote-small-color: $gray-3 !default; +$blockquote-border-color: $gray-4 !default; $hr-border-color: rgba(0,0,0,.1) !default; @@ -66,25 +76,25 @@ $component-active-bg: $brand-primary !default; // Panel // ------------------------- -$panel-bg: $gray-darker; -$panel-border: solid 1px $gray-dark; +$panel-bg: $dark-2; +$panel-border: solid 1px $dark-3; -$divider-border-color: #555; +$divider-border-color: #555; // Graphite Target Editor $tight-form-border: #050505; -$tight-form-bg: $gray-dark; +$tight-form-bg: $dark-3; -$tight-form-func-bg: #333; -$tight-form-func-highlight-bg: #444; +$tight-form-func-bg: #333; +$tight-form-func-highlight-bg: #444; $modal-background: $black; $code-tag-bg: #444; // Lists -$grafanaListBackground: $gray-dark; -$grafanaListAccent: lighten($gray-darker, 2%); -$grafanaListBorderTop: $gray-dark; +$grafanaListBackground: $dark-3; +$grafanaListAccent: lighten($dark-2, 2%); +$grafanaListBorderTop: $dark-3; $grafanaListBorderBottom: $black; $grafanaListHighlight: #333; $grafanaListMainLinkColor: $text-color; @@ -98,8 +108,8 @@ $scrollbarBorder: black; // ------------------------- $table-bg: transparent; // overall background-color $table-bg-accent: rgba(100, 100, 100, 0.3); // for striping -$table-bg-hover: $gray-dark; // for hover -$table-border: $gray-dark; // table and cell border +$table-bg-hover: $dark-3; // for hover +$table-border: $dark-3; // table and cell border // Buttons // ------------------------- @@ -119,30 +129,27 @@ $btnWarningBackgroundHighlight: lighten($brand-warning, 8%); $btnDangerBackground: lighten($red, 3%); $btnDangerBackgroundHighlight: darken($red, 3%); -$btnInverseBackground: $gray-dark; -$btnInverseBackgroundHighlight: lighten($gray-dark, 1%); +$btnInverseBackground: $dark-3; +$btnInverseBackgroundHighlight: lighten($dark-3, 1%); $btnInverseText: $link-color; $btnInverseBorder: #333; -$btnText: $gray; +$btnText: $gray-3; -$iconContainerBackground: $black; -$iconContainerBackgroundHighlight: lighten($black, 5%); -$iconContainerBorder: 1px solid transparent; -$iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05); +$iconContainerBackground: $black; // Forms // ------------------------- -$input-bg: lighten($gray-dark,5%); +$input-bg: lighten($dark-3,5%); $input-bg-disabled: #555; -$input-color: $gray-light; -$input-border-color: lighten($gray-dark,5%); +$input-color: $gray-4; +$input-border-color: lighten($dark-2,5%); $input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; $input-border-focus: $input-border-color !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-color-placeholder: #999 !default; -$input-label-bg: $gray-dark; +$input-label-bg: $dark-3; // Search @@ -150,7 +157,7 @@ $searchShadow: 0 0 35px 0 $body-bg; // Dropdowns // ------------------------- -$dropdownBackground: $gray-dark; +$dropdownBackground: $dark-3; $dropdownBorder: rgba(0,0,0,.2); $dropdownDividerTop: transparent; $dropdownDividerBottom: #444; @@ -182,12 +189,12 @@ $horizontalComponentOffset: 180px; $wellBackground: #131517; $navbarHeight: 52px; -$navbarBackgroundHighlight: $gray-dark; -$navbarBackground: $gray-dark; +$navbarBackgroundHighlight: $dark-3; +$navbarBackground: $dark-3; $navbarBorder: 1px solid $body-bg; -$navbarText: $gray-light; -$navbarLinkColor: $gray-light; +$navbarText: $gray-4; +$navbarLinkColor: $gray-4; $navbarLinkColorHover: $white; $navbarLinkColorActive: $navbarLinkColorHover; $navbarLinkBackgroundHover: transparent; @@ -200,10 +207,8 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); // Sidemenu // ------------------------- -$sideMenuTopShadow: $navbarDropdownShadow; -$sideMenuBackground: $gray-dark; -$sideMenuBackgroundHighlight: lighten($gray-dark, 4%); -$sideMenuShadow: 0 0 35px 0 $body-bg; +$side-menu-bg: $dark-3; +$side-menu-item-hover-bg: $dark-4; // Pagination // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 32fd60ed06f..2a779767356 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -10,15 +10,23 @@ // Grays // ------------------------- $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 // ------------------------- @@ -48,23 +56,23 @@ $critical: #EC2128; $body-bg: $white; $page-bg: $white; -$body-color: $gray; -$text-color: $gray; +$body-color: $gray-1; +$text-color: $gray-1; // Links // ------------------------- -$link-color: $gray; +$link-color: $gray-1; $link-color-disabled: lighten($link-color,30%); $link-hover-color: darken($link-color, 20%); // Typography // ------------------------- $headings-color: $text-color; -$abbr-border-color: $gray-light !default; +$abbr-border-color: $gray-2 !default; $text-muted: darken($link-color,30%); -$blockquote-small-color: $gray-light !default; -$blockquote-border-color: $gray-lighter !default; +$blockquote-small-color: $gray-2 !default; +$blockquote-border-color: $gray-3 !default; $hr-border-color: rgba(0,0,0,.1) !default; @@ -75,31 +83,27 @@ $component-active-bg: $brand-primary !default; // Panel // ------------------------- -$panel-bg: $gray-lightest; -$panel-border: solid 1px $gray-lighter; +$panel-bg: $gray-7; +$panel-border: solid 1px $gray-6; -$divider-border-color: $gray-light; - -// Submenu -$submenuBackground: rgb(218, 217, 217); -$submenuBorder: $white; +$divider-border-color: $gray-2; // Graphite Target Editor -$tight-form-border: #ddd; -$tight-form-bg: #efefef; +$tight-form-border: $gray-4; +$tight-form-bg: $gray-6; -$tight-form-func-bg: darken($tight-form-bg, 5%); -$tight-form-func-highlight-bg: darken($tight-form-bg, 10%); +$tight-form-func-bg: $gray-5; +$tight-form-func-highlight-bg: $gray-6; -$modal-background: $body-bg; -$code-tag-bg: #ddd; +$modal-background: $body-bg; +$code-tag-bg: #ddd; // Lists -$grafanaListBackground: darken($gray-lighter,5%); -$grafanaListAccent: darken($gray-lighter,8%); +$grafanaListBackground: darken($gray-3,5%); +$grafanaListAccent: darken($gray-3,8%); $grafanaListBorderTop: #eee; $grafanaListBorderBottom: #eee; -$grafanaListHighlight: darken($gray-lighter,10%); +$grafanaListHighlight: darken($gray-3,10%); $grafanaListHighlightContrast: #ddd; $grafanaListMainLinkColor: $text-color; @@ -114,14 +118,14 @@ $table-border: #ddd; // table and cell border // Scrollbars -$scrollbarBackground: $gray-lighter; -$scrollbarBackground2: $gray-lighter; -$scrollbarBorder: $gray-light; +$scrollbarBackground: $gray-3; +$scrollbarBackground2: $gray-3; +$scrollbarBorder: $gray-2; // Buttons // ------------------------- -$btnBackground: $gray-lighter; -$btnBackgroundHighlight: darken($gray-lighter, 15%); +$btnBackground: $gray-3; +$btnBackgroundHighlight: darken($gray-3, 15%); $btnBorder: #bbb; $btn-primary-bg: $brand-primary; @@ -139,50 +143,45 @@ $btnWarningBackgroundHighlight: darken($orange, 3%); $btnDangerBackground: lighten($red, 3%); $btnDangerBackgroundHighlight: darken($red, 3%); -$btnInverseBackground: $gray-lighter; -$btnInverseBackgroundHighlight: darken($gray-lighter, 5%); -$btnInverseText: $black; -$btnInverseBorder: $gray-light; +$btnInverseBackground: $gray-5; +$btnInverseBackgroundHighlight: darken($gray-5, 5%); +$btnInverseText: $dark-4; -$btnText: $gray-lighter; - -$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); +$btnText: $gray-3; +$iconContainerBackground: $white; // Forms // ------------------------- -$input-bg: $white; -$input-bg-disabled: $gray-lighter; +$input-bg: $gray-7; +$input-bg-disabled: $gray-5; -$input-color: #020202; -$input-border-color: $gray-lighter; -$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; -$input-border-focus: #66afe9 !default; -$input-box-shadow-focus: rgba(102,175,233,.6) !default; -$input-color-placeholder: #999 !default; -$input-label-bg: #f8f8f8; +$input-color: $dark-3; +$input-border-color: $gray-5; +$input-box-shadow: none; +$input-border-focus: $blue !default; +$input-box-shadow-focus: $blue !default; +$input-color-placeholder: $gray-4 !default; +$input-label-bg: $gray-5; // Sidemenu // ------------------------- -$sideMenuBackground: $panel-bg; -$sideMenuBackgroundHighlight: darken($sideMenuBackground, 4%); +$side-menu-bg: $body-bg; +$side-menu-item-hover-bg: $gray-6; // search -$searchShadow: 0 5px 30px 0 lighten($gray-light, 30%); +$searchShadow: 0 5px 30px 0 lighten($gray-2, 30%); // Dropdowns // ------------------------- $dropdownBackground: $white; $dropdownBorder: $tight-form-border; -$dropdownDividerTop: #e5e5e5; +$dropdownDividerTop: $gray-6; $dropdownDividerBottom: $white; $dropdownDivider: $dropdownDividerTop; -$dropdownTitle: #333; +$dropdownTitle: $dark-5; -$dropdownLinkColor: $gray-dark; +$dropdownLinkColor: $dark-3; $dropdownLinkColorHover: $white; $dropdownLinkColorActive: $white; @@ -196,12 +195,12 @@ $dropdownLinkBackgroundHover: $blue; // Input placeholder text color // ------------------------- -$placeholderText: $gray-light; +$placeholderText: $gray-2; // Hr border color // ------------------------- -$hrBorder: $gray-lighter; +$hrBorder: $gray-3; // Horizontal forms & lists @@ -211,7 +210,7 @@ $horizontalComponentOffset: 180px; // Wells // ------------------------- -$wellBackground: $gray-lighter; +$wellBackground: $gray-3; // Navbar @@ -238,7 +237,7 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); // Pagination // ------------------------- -$paginationBackground: $gray-light; +$paginationBackground: $gray-2; $paginationBorder: transparent; $paginationActiveBackground: $blue; @@ -265,7 +264,7 @@ $infoBorder: transparent; // Tooltips and popovers // ------------------------- $tooltipColor: $white; -$tooltipBackground: $gray-dark; +$tooltipBackground: $gray-4; $tooltipArrowWidth: 5px; $tooltipArrowColor: $tooltipBackground; $tooltipLinkColor: darken($white,11%); diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index b5324a19944..b6bb37db783 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -127,7 +127,7 @@ $lead-font-size: 1.25rem !default; $lead-font-weight: 300 !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-line-height: 1.1 !default; @@ -145,9 +145,9 @@ $list-inline-padding: 5px !default; $line-height-lg: (4 / 3) !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-sm: 0.2rem !default; +$border-radius-sm: 0.1rem !default; $caret-width: .3em !default; $caret-width-lg: $caret-width !default; diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss index e65206471ad..396f1f9b099 100644 --- a/public/sass/base/_forms.scss +++ b/public/sass/base/_forms.scss @@ -14,14 +14,14 @@ legend { margin-bottom: $line-height-base; font-size: $font-size-base * 1.5; line-height: $line-height-base * 2; - color: $gray-dark; + color: $gray-3; border: 0; border-bottom: 1px solid #e5e5e5; // Small small { font-size: $line-height-base * .75; - color: $gray-light; + color: $gray-2; } } diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index b2281c6c578..bf4045daa1d 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -27,9 +27,9 @@ em { font-style: italic; color: $headings-color; } cite { font-style: normal; } // Utility classes -.muted { color: $gray-light; } +.muted { color: $gray-2; } 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; } 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 abbr[data-original-title] { cursor: help; - border-bottom: 1px dotted $gray-light; + border-bottom: 1px dotted $gray-2; } abbr.initialism { font-size: 90%; @@ -210,7 +210,7 @@ abbr.initialism { blockquote { padding: 0 0 0 15px; margin: 0 0 $line-height-base; - border-left: 5px solid $gray-lighter; + border-left: 5px solid $gray-3; p { margin-bottom: 0; font-size: $font-size-base * 1.25; @@ -220,7 +220,7 @@ blockquote { small { display: block; line-height: $line-height-base; - color: $gray-light; + color: $gray-2; &:before { content: '\2014 \00A0'; } @@ -231,7 +231,7 @@ blockquote { float: right; padding-right: 15px; padding-left: 0; - border-right: 5px solid $gray-lighter; + border-right: 5px solid $gray-3; border-left: 0; p, small { diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss index 9dca45f7c49..2290386fc88 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: $gray-darker; + color: $gray-2; .fa { position: relative; top: -2px; diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss index c7232dcb26e..777d364123f 100644 --- a/public/sass/components/_dashboard.scss +++ b/public/sass/components/_dashboard.scss @@ -245,7 +245,7 @@ div.flot-text { .panel-drop-zone { display: none; .panel-container { - border: 1px solid $gray-dark; + border: 1px solid $dark-3; } } diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index af2888be739..76bc840b3d9 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -46,7 +46,6 @@ display: none; // none by default, but block on "open" of the menu float: left; min-width: 140px; - padding: 5px 0; margin: 2px 0 0; // override default ul list-style: none; background-color: $dropdownBackground; @@ -92,7 +91,7 @@ .dropdown-submenu:focus > a { text-decoration: none; color: $dropdownLinkColorHover; - background-color: $grafanaListHighlight; + background-color: $dropdownLinkBackgroundHover; } // Active state @@ -103,7 +102,7 @@ color: $dropdownLinkColorActive; text-decoration: none; outline: 0; - background-color: $grafanaListHighlight; + background-color: $dropdownLinkBackgroundHover; } // Disabled state @@ -112,7 +111,7 @@ .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { - color: $gray-light; + color: $gray-2; } // Nuke hover/focus effects .dropdown-menu > .disabled > a:hover, diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss index 302fd8ee142..9f2674980b0 100644 --- a/public/sass/components/_footer.scss +++ b/public/sass/components/_footer.scss @@ -3,7 +3,7 @@ bottom: 2px; left: 3px; font-size: 80%; - color: darken($gray, 25%); - a { color: darken($gray, 25%); } + color: darken($gray-1, 25%); + a { color: darken($gray-1, 25%); } } diff --git a/public/sass/components/_gfbox.scss b/public/sass/components/_gfbox.scss index 4dadfcf9e14..b4e31a2397d 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: $gray-light; + color: $gray-2; font-style: italic; } diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index e4f94fd1715..8063bbaa2c9 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -7,7 +7,7 @@ top: 52px; left: 0; width: $side-menu-width; - background-color: $body-bg; + background-color: $side-menu-bg; z-index: 101; transform: translate3d(0, -100%, 0); visibility: hidden; @@ -68,7 +68,7 @@ display: block; top: 0px; left: $side-menu-width; - background-color: $body-bg; + background-color: $side-menu-bg; } } } @@ -112,7 +112,7 @@ display: block; &:hover { - background-color: $sideMenuBackgroundHighlight; + background-color: $side-menu-item-hover-bg; } .sidemenu-item-text { @@ -166,7 +166,7 @@ box-sizing: border-box; cursor: pointer; &:hover { - background-color: $sideMenuBackgroundHighlight; + background-color: $side-menu-item-hover-bg; } display: table; position: relative; diff --git a/public/sass/components/_tags.scss b/public/sass/components/_tags.scss index 1fc1ef08575..605713b7552 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: $gray-light; + background-color: $gray-1; } diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss index 94a32c91f7f..0d17b3a53b0 100644 --- a/public/sass/pages/_login.scss +++ b/public/sass/pages/_login.scss @@ -105,7 +105,7 @@ margin-top: 10px; padding: 10px; a { - color: $gray-light; + color: $gray-2; } } @@ -117,11 +117,11 @@ .login-divider-line { width: 100%; height: 10px; - border-bottom: 1px solid $gray; + border-bottom: 1px solid $gray-1; .login-divider-text { - background-color: $gray-darker; - color: $gray-light; + background-color: $dark-3; + color: $gray-2; padding: 0 10px; } } @@ -168,7 +168,7 @@ } @include media-breakpoint-up(md) { - .login-box-logo { + .login-box-logo { img { width: 125px; } diff --git a/public/sass/pages/_styleguide.scss b/public/sass/pages/_styleguide.scss index c4326ac0e0c..3aed004a7f6 100644 --- a/public/sass/pages/_styleguide.scss +++ b/public/sass/pages/_styleguide.scss @@ -1,10 +1,9 @@ .style-guide-color-card { list-style: none; - margin: 0 $spacer $spacer 0; - float: left; - padding: $spacer*2; - width: 20rem; - border-radius: 0.5rem; + margin: 0; + padding: $spacer; + width: 100%; + text-align: center; text-shadow: 0 0 8px #fff; color: $black; font-size: $font-size-sm; @@ -12,7 +11,7 @@ .color-card-body-bg { background-color: $body-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 { padding: $spacer;