From 24ff5555bef1a8f6f17380bdba7c481da1310aa2 Mon Sep 17 00:00:00 2001 From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com> Date: Wed, 27 Jun 2018 16:55:36 +0100 Subject: [PATCH] Create admin SCSS colour palette --- app/assets/stylesheets/admin/account.css.scss | 2 +- .../admin/advanced_settings.css.scss | 4 +- app/assets/stylesheets/admin/alert.css.scss | 12 ++-- .../stylesheets/admin/{all.css => all.scss} | 4 +- .../admin/change_type_form.css.scss | 10 ++-- .../admin/components/alert-box.css.scss | 10 ++-- .../admin/components/alert_row.css.scss | 2 +- .../admin/components/dialogs.css.scss | 4 +- .../admin/components/jquery_dialog.scss | 2 +- .../admin/components/save_bar.scss | 6 +- .../admin/components/states_decorator.scss | 2 +- .../admin/components/trial_progess_bar.scss | 2 +- .../admin/components/wizard_progress.css.scss | 2 +- .../stylesheets/admin/customers.css.scss | 4 +- .../stylesheets/admin/dashboard_item.css.scss | 58 +++++++++---------- .../stylesheets/admin/dropdown.css.scss | 2 +- .../admin/enterprise_console.css.scss | 4 +- .../admin/enterprise_index_panels.css.scss | 6 +- .../stylesheets/admin/enterprises.css.scss | 2 +- .../admin/index_panel_buttons.css.scss | 2 +- .../stylesheets/admin/index_panels.css.scss | 6 +- .../admin/openfoodnetwork.css.scss | 14 ++--- .../stylesheets/admin/order_cycles.scss | 2 +- app/assets/stylesheets/admin/orders.css.scss | 8 +-- .../stylesheets/admin/product_import.css.scss | 4 +- .../stylesheets/admin/products.css.scss | 10 ++-- app/assets/stylesheets/admin/reports.css.scss | 2 +- app/assets/stylesheets/admin/select2.css.scss | 8 +-- .../stylesheets/admin/side_menu.css.scss | 2 +- .../stylesheets/admin/sidebar-item.css.scss | 26 ++++----- .../stylesheets/admin/tag_rules.css.scss | 6 +- .../stylesheets/admin/typography.css.scss | 2 +- .../stylesheets/admin/variables.css.scss | 10 ++++ .../admin/variant_overrides.css.scss | 2 +- 34 files changed, 127 insertions(+), 115 deletions(-) rename app/assets/stylesheets/admin/{all.css => all.scss} (93%) create mode 100644 app/assets/stylesheets/admin/variables.css.scss diff --git a/app/assets/stylesheets/admin/account.css.scss b/app/assets/stylesheets/admin/account.css.scss index 7d58147d91..fedd079786 100644 --- a/app/assets/stylesheets/admin/account.css.scss +++ b/app/assets/stylesheets/admin/account.css.scss @@ -12,6 +12,6 @@ table.invoice_summary { .invoice_title { .balance { - color: #9fc820; + color: $spree-green; } } diff --git a/app/assets/stylesheets/admin/advanced_settings.css.scss b/app/assets/stylesheets/admin/advanced_settings.css.scss index 6b48e8ce11..7f1aa3a8c8 100644 --- a/app/assets/stylesheets/admin/advanced_settings.css.scss +++ b/app/assets/stylesheets/admin/advanced_settings.css.scss @@ -1,6 +1,6 @@ #advanced_settings { - background-color: #eff5fc; - border: 1px solid #cee1f4; + background-color: $spree-light-blue; + border: 1px solid $pale-blue; margin-bottom: 20px; .row{ diff --git a/app/assets/stylesheets/admin/alert.css.scss b/app/assets/stylesheets/admin/alert.css.scss index b516867a96..267e7a8580 100644 --- a/app/assets/stylesheets/admin/alert.css.scss +++ b/app/assets/stylesheets/admin/alert.css.scss @@ -1,12 +1,12 @@ .alert { - border: 3px solid #919191; + border: 3px solid $medium-grey; border-radius: 6px; margin-bottom: 20px; - color: #919191; + color: $medium-grey; padding: 5px 10px; h6 { - color: #919191; + color: $medium-grey; } .message { @@ -14,11 +14,11 @@ } &:hover { - border-color: #DA5354; - color: #DA5354; + border-color: $warning-red; + color: $warning-red; h6 { - color: #DA5354; + color: $warning-red; } } } diff --git a/app/assets/stylesheets/admin/all.css b/app/assets/stylesheets/admin/all.scss similarity index 93% rename from app/assets/stylesheets/admin/all.css rename to app/assets/stylesheets/admin/all.scss index 47bf928477..80acf2e1e5 100644 --- a/app/assets/stylesheets/admin/all.css +++ b/app/assets/stylesheets/admin/all.scss @@ -12,5 +12,7 @@ *= require shared/ng-tags-input.min *= require_self - *= require_tree . */ + +@import 'variables'; +@import '*'; diff --git a/app/assets/stylesheets/admin/change_type_form.css.scss b/app/assets/stylesheets/admin/change_type_form.css.scss index 0153d701e8..87b43ff1a2 100644 --- a/app/assets/stylesheets/admin/change_type_form.css.scss +++ b/app/assets/stylesheets/admin/change_type_form.css.scss @@ -6,12 +6,12 @@ margin: 2em 0 0 0; &, & * { - color: #5498da; + color: $spree-blue; } } .description { - background-color: #eff5fc; + background-color: $spree-light-blue; margin-top: -2em; padding: 4em 2em 2em 1em; @@ -21,7 +21,7 @@ } .admin-cta { - border: 1px solid #5498da; + border: 1px solid $spree-blue; @include border-radius(3px); @@ -65,14 +65,14 @@ &:after { border-color: rgba(136, 183, 213, 0); - border-top-color: #5498da; + border-top-color: $spree-blue; border-width: 12px; margin-left: -12px; } &:hover { &:after { - border-top-color: #9fc820; + border-top-color: $spree-green; } } diff --git a/app/assets/stylesheets/admin/components/alert-box.css.scss b/app/assets/stylesheets/admin/components/alert-box.css.scss index dcd89adf25..c9708d27bc 100644 --- a/app/assets/stylesheets/admin/components/alert-box.css.scss +++ b/app/assets/stylesheets/admin/components/alert-box.css.scss @@ -4,7 +4,7 @@ position: relative; display: block; background-color: #eff5dc; - border: 1px solid #9fc820; + border: 1px solid $spree-green; color: #666; margin-top: 1em; margin-bottom: 1em; @@ -22,21 +22,21 @@ } &.ok { - border: 1px solid #9fc820; + border: 1px solid $spree-green; background-color: #fbffee; - color: #9fc820; + color: $spree-green; font-weight: bold; a.button { padding: 3px 10px; background-color: #a7c44d; &:hover { - background-color: #9fc820; + background-color: $spree-green; } } a.close { - color: #9fc820; + color: $spree-green; } } diff --git a/app/assets/stylesheets/admin/components/alert_row.css.scss b/app/assets/stylesheets/admin/components/alert_row.css.scss index 4c74afc56f..c8c41651a5 100644 --- a/app/assets/stylesheets/admin/components/alert_row.css.scss +++ b/app/assets/stylesheets/admin/components/alert_row.css.scss @@ -1,7 +1,7 @@ .alert-row{ margin-bottom: 10px; font-weight: bold; - background-color: #eff5fc; + background-color: $spree-light-blue; .column, .columns { padding-top: 8px; diff --git a/app/assets/stylesheets/admin/components/dialogs.css.scss b/app/assets/stylesheets/admin/components/dialogs.css.scss index 0ddaeb2e24..298f8e1239 100644 --- a/app/assets/stylesheets/admin/components/dialogs.css.scss +++ b/app/assets/stylesheets/admin/components/dialogs.css.scss @@ -21,7 +21,7 @@ &.error { .message { .icon { - color: #da5354; + color: $warning-red; } } } @@ -29,7 +29,7 @@ &.info { .message { .icon { - color: #5498da; + color: $spree-blue; } } } diff --git a/app/assets/stylesheets/admin/components/jquery_dialog.scss b/app/assets/stylesheets/admin/components/jquery_dialog.scss index ecdb0f0f7d..3bfddb8762 100644 --- a/app/assets/stylesheets/admin/components/jquery_dialog.scss +++ b/app/assets/stylesheets/admin/components/jquery_dialog.scss @@ -63,7 +63,7 @@ light: #ccc &:hover { &:before { - color: #da5354; + color: $warning-red; } } diff --git a/app/assets/stylesheets/admin/components/save_bar.scss b/app/assets/stylesheets/admin/components/save_bar.scss index 4b63a50bc8..70f906119f 100644 --- a/app/assets/stylesheets/admin/components/save_bar.scss +++ b/app/assets/stylesheets/admin/components/save_bar.scss @@ -6,11 +6,11 @@ left: 0; padding: 8px 8px; font-weight: bold; - background-color: #eff5fc; - color: #5498da; + background-color: $spree-light-blue; + color: $spree-blue; h5 { - color: #5498da; + color: $spree-blue; } input { diff --git a/app/assets/stylesheets/admin/components/states_decorator.scss b/app/assets/stylesheets/admin/components/states_decorator.scss index e64a192c09..c32fdfde86 100644 --- a/app/assets/stylesheets/admin/components/states_decorator.scss +++ b/app/assets/stylesheets/admin/components/states_decorator.scss @@ -2,7 +2,7 @@ @extend .state; &.active { - background-color: #9fc820; + background-color: $spree-green; &, a { color: #ffffff; } } diff --git a/app/assets/stylesheets/admin/components/trial_progess_bar.scss b/app/assets/stylesheets/admin/components/trial_progess_bar.scss index 049c1f1f3d..c544304715 100644 --- a/app/assets/stylesheets/admin/components/trial_progess_bar.scss +++ b/app/assets/stylesheets/admin/components/trial_progess_bar.scss @@ -5,6 +5,6 @@ width: 100vw; padding: 8px 10px; font-weight: bold; - background-color: #5498da; + background-color: $spree-blue; color: white; } diff --git a/app/assets/stylesheets/admin/components/wizard_progress.css.scss b/app/assets/stylesheets/admin/components/wizard_progress.css.scss index b3df36081e..f226580177 100644 --- a/app/assets/stylesheets/admin/components/wizard_progress.css.scss +++ b/app/assets/stylesheets/admin/components/wizard_progress.css.scss @@ -1,5 +1,5 @@ $color_unselected: #d9d9d9; -$color_selected: #5498da; +$color_selected: $spree-blue; ul.wizard-progress { list-style: none; diff --git a/app/assets/stylesheets/admin/customers.css.scss b/app/assets/stylesheets/admin/customers.css.scss index d70078d02a..f1284b4725 100644 --- a/app/assets/stylesheets/admin/customers.css.scss +++ b/app/assets/stylesheets/admin/customers.css.scss @@ -7,10 +7,10 @@ table#customers.index { tr.customer { .guest-label { - color: #999; + color: $medium-grey; display: block; font-size: 0.85em; margin-top: 0.15em; } } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/admin/dashboard_item.css.scss b/app/assets/stylesheets/admin/dashboard_item.css.scss index f314500031..239dd3c5fc 100644 --- a/app/assets/stylesheets/admin/dashboard_item.css.scss +++ b/app/assets/stylesheets/admin/dashboard_item.css.scss @@ -15,22 +15,22 @@ div.dashboard_item { border-radius: 10px; &.green { - background-color: #9fc820; + background-color: $spree-green; } &.red { - background-color: #DA5354; + background-color: $warning-red; } &.orange { - background-color: #DA7F52; + background-color: $warning-orange; } } div.header { height: 50px; border-radius: 6px 6px 0px 0px; - border: 1px solid #5498da; + border: 1px solid $spree-blue; position: relative; a[ofn-with-tip] { @@ -40,20 +40,20 @@ div.dashboard_item { } &.red { - border-color: #DA5354; + border-color: $warning-red; border-width: 3px; h3 { - color: #DA5354; + color: $warning-red; } } &.orange { - border-color: #DA7F52; + border-color: $warning-orange; border-width: 3px; h3 { - color: #DA7F52; + color: $warning-orange; } } @@ -72,7 +72,7 @@ div.dashboard_item { .tabs { height: 30px; - border: solid #5498da; + border: solid $spree-blue; border-width: 0px 0px 1px 0px; margin-top: 3px; @@ -80,19 +80,19 @@ div.dashboard_item { cursor: pointer; height: 30px; color: #fff; - background-color: #5498da; + background-color: $spree-blue; padding: 5px 5px 0px 5px; text-align: center; font-weight: bold; - border: solid #5498da; + border: solid $spree-blue; border-width: 1px 1px 0px 1px; &:hover { - background-color: #9fc820; + background-color: $spree-green; } &.selected { - color: #5498da; + color: $spree-blue; background-color: #fff; } } @@ -105,7 +105,7 @@ div.dashboard_item { } .list-title { - border: solid #5498da; + border: solid $spree-blue; border-width: 0px 1px 0px 1px; span { @@ -120,7 +120,7 @@ div.dashboard_item { } .list-item { - border: solid #5498da; + border: solid $spree-blue; border-width: 0px 1px 0px 1px; height: 38px; @@ -142,28 +142,28 @@ div.dashboard_item { } .icon-warning-sign { - color: #DA7F52; + color: $warning-orange; font-size: 30px; } .icon-remove-sign { - color: #DA5354; + color: $warning-red; font-size: 30px; } .icon-ok-sign { - color: #9fc820; + color: $spree-green; font-size: 30px; } &.orange { - color: #DA7F52; - border: solid #DA7F52; + color: $warning-orange; + border: solid $warning-orange; } &.red { - color: #DA5354; - border: solid #DA5354; + color: $warning-red; + border: solid $warning-red; } &.orange, &.red { @@ -175,13 +175,13 @@ div.dashboard_item { } &.odd { - background-color: #eff5fc; + background-color: $spree-light-blue; } &.even, &.odd { &:hover { color: #ffffff; - background-color: #9fc820; + background-color: $spree-green; .icon-arrow-right { color: #fff; @@ -201,7 +201,7 @@ div.dashboard_item { .text-icon { &.green { - color: #9fc820; + color: $spree-green; background-color: #fff; } } @@ -216,19 +216,19 @@ div.dashboard_item { text-align: center; &.orange { - background-color: #DA7F52; + background-color: $warning-orange; } &.blue { - background-color: #5498da; + background-color: $spree-blue; } &.red { - background-color: #DA5354; + background-color: $warning-red; } &:hover { - background-color: #9fc820; + background-color: $spree-green; } &.bottom { diff --git a/app/assets/stylesheets/admin/dropdown.css.scss b/app/assets/stylesheets/admin/dropdown.css.scss index b848bc3c2c..4a991cbffe 100644 --- a/app/assets/stylesheets/admin/dropdown.css.scss +++ b/app/assets/stylesheets/admin/dropdown.css.scss @@ -1,6 +1,6 @@ #content-header .ofn-drop-down { border: none; - background-color: #5498da; + background-color: $spree-blue; color: #fff; float: none; margin-left: 3px; diff --git a/app/assets/stylesheets/admin/enterprise_console.css.scss b/app/assets/stylesheets/admin/enterprise_console.css.scss index afca3d9261..adfff995a4 100644 --- a/app/assets/stylesheets/admin/enterprise_console.css.scss +++ b/app/assets/stylesheets/admin/enterprise_console.css.scss @@ -6,9 +6,9 @@ span.unavailable, span.available { } span.available { - color: #9fc820; + color: $spree-green; } span.unavailable { - color: #DA5354; + color: $warning-red; } \ No newline at end of file diff --git a/app/assets/stylesheets/admin/enterprise_index_panels.css.scss b/app/assets/stylesheets/admin/enterprise_index_panels.css.scss index 750509c63b..7d95b9b8e2 100644 --- a/app/assets/stylesheets/admin/enterprise_index_panels.css.scss +++ b/app/assets/stylesheets/admin/enterprise_index_panels.css.scss @@ -19,7 +19,7 @@ } &:hover { &:after { - border-top-color: #9fc820; + border-top-color: $spree-green; } } &.disabled{ @@ -60,7 +60,7 @@ .status-ok { margin: 30px 0px; i.icon-ok-sign { - color: #9fc820; + color: $spree-green; font-size: 1.5rem; } } @@ -76,7 +76,7 @@ font-size: 1.5rem; &.issue{ - color: #da5354; + color: $warning-red; } &.warning{ diff --git a/app/assets/stylesheets/admin/enterprises.css.scss b/app/assets/stylesheets/admin/enterprises.css.scss index c389913773..c77d61e7e8 100644 --- a/app/assets/stylesheets/admin/enterprises.css.scss +++ b/app/assets/stylesheets/admin/enterprises.css.scss @@ -1,6 +1,6 @@ form[name="enterprise_form"] { div.row.warning { - color: #DA7F52; + color: $warning-orange; } table.managers { diff --git a/app/assets/stylesheets/admin/index_panel_buttons.css.scss b/app/assets/stylesheets/admin/index_panel_buttons.css.scss index 4cfcde1b23..499313079c 100644 --- a/app/assets/stylesheets/admin/index_panel_buttons.css.scss +++ b/app/assets/stylesheets/admin/index_panel_buttons.css.scss @@ -5,7 +5,7 @@ tbody.panel-ctrl { cursor: pointer; margin-bottom: 10px; font-size: 1.3rem; - background-color: #DA5354; + background-color: $warning-red; &:hover { background-color: #CD4E4F; } diff --git a/app/assets/stylesheets/admin/index_panels.css.scss b/app/assets/stylesheets/admin/index_panels.css.scss index e47ad151eb..c8ea698820 100644 --- a/app/assets/stylesheets/admin/index_panels.css.scss +++ b/app/assets/stylesheets/admin/index_panels.css.scss @@ -26,7 +26,7 @@ tbody.panel-ctrl { font-size: 2rem; -webkit-font-smoothing: antialiased; content: "\f071"; - color: #da5354; + color: $warning-red; } &.status { @@ -37,7 +37,7 @@ tbody.panel-ctrl { i.issue::before { content: "\f071"; - color: #da5354; + color: $warning-red; } i.warning::before { @@ -47,7 +47,7 @@ tbody.panel-ctrl { i.ok::before { content: "\f058"; - color: #9fc820; + color: $spree-green; } } diff --git a/app/assets/stylesheets/admin/openfoodnetwork.css.scss b/app/assets/stylesheets/admin/openfoodnetwork.css.scss index 348b85820a..e1473a1756 100644 --- a/app/assets/stylesheets/admin/openfoodnetwork.css.scss +++ b/app/assets/stylesheets/admin/openfoodnetwork.css.scss @@ -20,7 +20,7 @@ table .blank-action { } text-angular .ta-editor { - border: 1px solid #cee1f4; + border: 1px solid $pale-blue; border-radius: 3px; } @@ -33,7 +33,7 @@ text-angular .ta-editor { } span.error, div.error:not(.flash) { - color: #DA5354; + color: $warning-red; } /* Fix conflict between Spree and elRTE's styles */ @@ -43,7 +43,7 @@ span.error, div.error:not(.flash) { } input.red, a.button.red, button.red { - background-color: #DA5354; + background-color: $warning-red; margin-right: 5px; color: #ffffff; } @@ -51,7 +51,7 @@ input.red, a.button.red, button.red { a.button.red { &:not(:hover) { color: #fff; - background-color: #DA5354; + background-color: $warning-red; } } @@ -204,15 +204,15 @@ table#listing_enterprise_groups { // TODO: remove this, use class below #no_results { font-weight:bold; - color: #DA5354; + color: $warning-red; } .no-results { font-weight:bold; - color: #DA5354; + color: $warning-red; h1, h2, h3, h4, h5, h6 { - color: #DA5354; + color: $warning-red; } } diff --git a/app/assets/stylesheets/admin/order_cycles.scss b/app/assets/stylesheets/admin/order_cycles.scss index 4eebb90c8d..a0585b1cbc 100644 --- a/app/assets/stylesheets/admin/order_cycles.scss +++ b/app/assets/stylesheets/admin/order_cycles.scss @@ -47,7 +47,7 @@ } &:hover { - background-color: #cee1f4; + background-color: $pale-blue; } } } diff --git a/app/assets/stylesheets/admin/orders.css.scss b/app/assets/stylesheets/admin/orders.css.scss index 23cb9d8fff..15998ec433 100644 --- a/app/assets/stylesheets/admin/orders.css.scss +++ b/app/assets/stylesheets/admin/orders.css.scss @@ -8,20 +8,20 @@ input.show-dirty { &.ng-dirty { border: solid 1px orange; &.update-error { - border: solid 1px #DA5354; + border: solid 1px $warning-red; } } } input, div { &.update-error { - border: solid 1px #DA5354; + border: solid 1px $warning-red; } } input, div { &.update-success { - border: solid 1px #9fc820; + border: solid 1px $spree-green; } } @@ -31,7 +31,7 @@ input, div { div#group_buy_calculation { border-radius: 3px; - background-color: #eff5fc; + background-color: $spree-light-blue; div { margin-bottom: 5px; span, h6 { diff --git a/app/assets/stylesheets/admin/product_import.css.scss b/app/assets/stylesheets/admin/product_import.css.scss index 79265c9231..9d75342ace 100644 --- a/app/assets/stylesheets/admin/product_import.css.scss +++ b/app/assets/stylesheets/admin/product_import.css.scss @@ -4,7 +4,7 @@ div.panel-section { color: #bfbfbf; } .warning { - color: #da5354; + color: $warning-red; } .success { color: #86d83a; @@ -175,7 +175,7 @@ table.import-settings { span.header-error { font-size: 0.85em; - color: #da5354; + color: $warning-red; } .select2-search { diff --git a/app/assets/stylesheets/admin/products.css.scss b/app/assets/stylesheets/admin/products.css.scss index b8ae95a779..c146b6be3f 100644 --- a/app/assets/stylesheets/admin/products.css.scss +++ b/app/assets/stylesheets/admin/products.css.scss @@ -4,13 +4,13 @@ tbody.odd { tr.product { td { background-color: white; } } - tr.variant.odd { td { background-color: lighten(#eff5fc, 3); } } + tr.variant.odd { td { background-color: lighten($spree-light-blue, 3); } } tr.variant.even { td { background-color: white; } } } tbody.even { - tr.product { td { background-color: darken(#eff5fc, 1); } } - tr.variant.odd { td { background-color: lighten(#eff5fc, 2); } } - tr.variant.even { td { background-color: darken(#eff5fc, 1); } } + tr.product { td { background-color: darken($spree-light-blue, 1); } } + tr.variant.odd { td { background-color: lighten($spree-light-blue, 2); } } + tr.variant.even { td { background-color: darken($spree-light-blue, 1); } } } tbody tr.product td.actions { background-color: transparent; } @@ -20,7 +20,7 @@ tbody tr.variant td { padding: 5px 10px; } th.left-actions, td.left-actions { background-color: transparent !important; border: none !important; - border-right: 1px solid #cee1f4 !important; + border-right: 1px solid $pale-blue !important; } #status-message { diff --git a/app/assets/stylesheets/admin/reports.css.scss b/app/assets/stylesheets/admin/reports.css.scss index 13df70de8b..fb94f683a2 100644 --- a/app/assets/stylesheets/admin/reports.css.scss +++ b/app/assets/stylesheets/admin/reports.css.scss @@ -3,7 +3,7 @@ } .report__message { margin-top: 2em; - border: 1px solid #cee1f4; + border: 1px solid $pale-blue; border-radius: .5em; padding: .5em; text-align: center; diff --git a/app/assets/stylesheets/admin/select2.css.scss b/app/assets/stylesheets/admin/select2.css.scss index f94515a54c..90fd4e2b97 100644 --- a/app/assets/stylesheets/admin/select2.css.scss +++ b/app/assets/stylesheets/admin/select2.css.scss @@ -15,12 +15,12 @@ .select2-choice{ background-color: #ffffff; font-weight: normal; - border: 1px solid #5498da !important; - color: #5498da !important; + border: 1px solid $spree-blue !important; + color: $spree-blue !important; .select2-arrow { &:before { - color: #5498da; + color: $spree-blue; font-size: 1rem; font-weight: 400; content: '\25be'; @@ -32,7 +32,7 @@ &:hover, &.select2-container-active { .select2-choice{ color: #ffffff !important; - background-color: #5498da !important; + background-color: $spree-blue !important; .select2-arrow { &:before { diff --git a/app/assets/stylesheets/admin/side_menu.css.scss b/app/assets/stylesheets/admin/side_menu.css.scss index 921b9dee52..398787b7b8 100644 --- a/app/assets/stylesheets/admin/side_menu.css.scss +++ b/app/assets/stylesheets/admin/side_menu.css.scss @@ -22,7 +22,7 @@ } &.selected { - background-color: #5498da; + background-color: $spree-blue; color: #ffffff; } } diff --git a/app/assets/stylesheets/admin/sidebar-item.css.scss b/app/assets/stylesheets/admin/sidebar-item.css.scss index a3baa7b6e0..b9d34b27f1 100644 --- a/app/assets/stylesheets/admin/sidebar-item.css.scss +++ b/app/assets/stylesheets/admin/sidebar-item.css.scss @@ -12,11 +12,11 @@ div.sidebar_item { position: relative; &.blue { - background-color: #5498da; + background-color: $spree-blue; } &.red { - background-color: #DA5354; + background-color: $warning-red; } } @@ -26,10 +26,10 @@ div.sidebar_item { overflow-x: hidden; &.red { - color: #DA5354; + color: $warning-red; .list-item { - border: solid #DA5354; + border: solid $warning-red; border-width: 0px 3px 0px 3px; a.alpha, span.alpha { @@ -40,13 +40,13 @@ div.sidebar_item { background-color: #fcf6ef; &:hover { - background-color: #9fc820; + background-color: $spree-green; } } } a { - color: #DA5354; + color: $warning-red; } } } @@ -57,7 +57,7 @@ div.sidebar_item { font-size: 20px; } - border: solid #5498da; + border: solid $spree-blue; border-width: 0px 1px 0px 1px; a.alpha, span.alpha { @@ -75,7 +75,7 @@ div.sidebar_item { } .icon-remove-sign { - color: #DA5354; + color: $warning-red; font-size: 18px; } @@ -84,13 +84,13 @@ div.sidebar_item { } &.odd { - background-color: #eff5fc; + background-color: $spree-light-blue; } &.even, &.odd { &:hover { color: #ffffff; - background-color: #9fc820; + background-color: $spree-green; a { color: #ffffff; @@ -107,15 +107,15 @@ div.sidebar_item { border-radius: 0px; &.blue { - background-color: #5498da; + background-color: $spree-blue; } &.red { - background-color: #DA5354; + background-color: $warning-red; } &:hover { - background-color: #9fc820; + background-color: $spree-green; } } } diff --git a/app/assets/stylesheets/admin/tag_rules.css.scss b/app/assets/stylesheets/admin/tag_rules.css.scss index 05decd6027..8650f11c22 100644 --- a/app/assets/stylesheets/admin/tag_rules.css.scss +++ b/app/assets/stylesheets/admin/tag_rules.css.scss @@ -21,13 +21,13 @@ tags-input { .customer_tag, .default_rules { background-color: #ffffff; - border: 1px solid #cee1f4; + border: 1px solid $pale-blue; margin-bottom: 40px; .header { padding: 8px 10px; - background-color: #eff5fc; - border-bottom: 1px solid #cee1f4; + background-color: $spree-light-blue; + border-bottom: 1px solid $pale-blue; table { padding: 0px; diff --git a/app/assets/stylesheets/admin/typography.css.scss b/app/assets/stylesheets/admin/typography.css.scss index 761058fb1d..ae68f03323 100644 --- a/app/assets/stylesheets/admin/typography.css.scss +++ b/app/assets/stylesheets/admin/typography.css.scss @@ -9,7 +9,7 @@ } .text-red { - color: #DA5354; + color: $warning-red; } diff --git a/app/assets/stylesheets/admin/variables.css.scss b/app/assets/stylesheets/admin/variables.css.scss new file mode 100644 index 0000000000..d4c6bf522e --- /dev/null +++ b/app/assets/stylesheets/admin/variables.css.scss @@ -0,0 +1,10 @@ +// Admin variables and colours + +$spree-green: #9fc820; +$spree-blue: #5498da; +$spree-light-blue: #eff5fc; + +$warning-red: #da5354; +$warning-orange: #da7f52; +$medium-grey: #919191; +$pale-blue: #cee1f4; diff --git a/app/assets/stylesheets/admin/variant_overrides.css.scss b/app/assets/stylesheets/admin/variant_overrides.css.scss index d4e3e4aaac..c01673b292 100644 --- a/app/assets/stylesheets/admin/variant_overrides.css.scss +++ b/app/assets/stylesheets/admin/variant_overrides.css.scss @@ -4,5 +4,5 @@ } button.hide:hover { - background-color: #DA5354; + background-color: $warning-red; }