Create admin SCSS colour palette

2026-02-27 01:43:22 +00:00 · 2018-06-27 16:55:36 +01:00
parent 75e52a7a91
commit 24ff5555be
34 changed files with 127 additions and 115 deletions
--- 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;
  }
 }
--- 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{
--- 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;
    }
  }
 }
--- a/app/assets/stylesheets/admin/all.scss
+++ b/app/assets/stylesheets/admin/all.scss
@@ -12,5 +12,7 @@
 *= require shared/ng-tags-input.min

 *= require_self
- *= require_tree .
 */
+
+@import 'variables';
+@import '*';
--- 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;
      }
    }

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

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

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

--- 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;
 }
--- 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;
--- 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;
    }
  }
-}
+}
--- 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 {
--- 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;
--- 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;
 }
--- 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{
--- 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 {
--- 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;
        }
--- 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;
      }
    }

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

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


--- a/app/assets/stylesheets/admin/variables.css.scss
+++ 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;
--- 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;
 }