Merge pull request #2133 from graygilmore/sass-organization

Admin Sass Organization
solidusio · Aug 15, 2017 · b518ca4 · b518ca4
2 parents 4c2db3e + 546825a
commit b518ca4
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 1,098 deletions.
diff --git a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
@@ -28,7 +28,7 @@ nav.menu {
 .admin-nav {
   border-right: $border-sidebar;
   background: $color-sidebar-bg;
-  z-index: $z-index-navbar-flyout;
+  z-index: $zindex-navbar;
 }
 
 .admin-nav-header {

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_pills.scss b/backend/app/assets/stylesheets/spree/backend/components/_pills.scss
@@ -7,7 +7,7 @@
   color: $color-pill-neutral-text;
   white-space: nowrap;
 
-  $states: (
+  $pill-states: (
     complete: (
       background: $color-pill-complete,
       color: $color-pill-complete-text
@@ -34,7 +34,7 @@
     )
   );
 
-  @each $name, $colors in $states {
+  @each $name, $colors in $pill-states {
     &-#{$name} {
       background: map-get($colors, background);
       color: map-get($colors, color);
@@ -59,6 +59,7 @@
 .pill-partial,
 .pill-payment,
 .pill-processing,
+.pill-ready,
 .pill-resumed {
   @extend .pill-pending;
 }

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_states.scss b/backend/app/assets/stylesheets/spree/backend/components/_states.scss
@@ -1,24 +1,11 @@
+// The state component has been deprecated in favour of Pills. This will be
+// removed in a future version of Solidus.
 .state {
-  font-size: 90%;
-  font-weight: $font-weight-bold;
-
-  &:before {
-    content: '';
-    position: relative;
-    display: inline-block;
-    margin-right: 3px;
-    border-radius: $font-size-root/2;
-    width: $font-size-root - 4px;
-    height: $font-size-root - 4px;
-  }
+  @extend .pill;
 
   @each $state in $states {
-    &.#{$state}:before {
-      background-color: get-value($states, $states-bg-colors, $state);
-
-      // &, a {
-      //   color: get-value($states, $states-text-colors, $state);
-      // }
+    &.#{$state} {
+      @extend .pill-#{$state};
     }
   }
 }
diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
@@ -4,8 +4,6 @@
 
 // Fonts
 //--------------------------------------------------------------
-@include solidus-deprecated-variable("base-font-family", "font-family-base");
-$base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
 $font-size-pill: 11px;
 
 // Colors
@@ -24,22 +22,10 @@ $color-7:                        #F4F4F4 !default;    // Light Gray
 $box-shadow:                     0px 3px 3px -2px hsla(0, 0%, 0%, 0.2) !default;
 
 // Body base colors
-@include solidus-deprecated-variable("color-body-bg", "body-bg");
-$color-body-bg:                  $color-1 !default;
-@include solidus-deprecated-variable("color-body-text", "body-color");
-$color-body-text:                $color-4 !default;
-@include solidus-deprecated-variable("color-headers", "headings-color");
-$color-headers:                  $color-4 !default;
-@include solidus-deprecated-variable("color-link", "link-color");
-$color-link:                     $color-3 !default;
-@include solidus-deprecated-variable("color-link-hover", "link-hover-color");
-$color-link-hover:               $color-2 !default;
-@include solidus-deprecated-variable("color-link-focus", "link-hover-color");
-$color-link-focus:               $color-2 !default;
 $color-border:                   very-light($color-3, 12) !default;
 
 // Basic navigation colors
-$color-sidebar-bg:              $color-body-bg !default;
+$color-sidebar-bg:              $color-1 !default;
 $color-sidebar-border:          $color-border !default;
 $color-navbar:                  $color-1 !default;
 $color-navbar-bg:               $color-3 !default;
@@ -48,7 +34,6 @@ $color-navbar-active-bg:        $color-2 !default;
 $color-navbar-submenu:          $color-3 !default;
 $color-navbar-submenu-bg:       very-light($color-navbar-bg, 4) !default;
 $color-navbar-submenu-active:   $color-2 !default;
-$color-navbar-submenu-active-bg: $color-navbar-submenu-bg !default;
 $color-navbar-footer:           $color-3 !default;
 $color-navbar-footer-bg:        $color-sidebar-bg !default;
 $color-navbar-footer-active:    $color-2 !default;
@@ -64,17 +49,21 @@ $color-error:                    $color-5 !default;
 // Color for spinner
 $color-spinner: #fff;
 
+// Style Guide
+$color-style-guide-code: darken($color-7, 10%);
+$color-style-guide-link: darken($color-7, 65%);
+$color-style-guide-nav: $color-7;
+$color-style-guide-nav-border: darken($color-7, 5%);
+$color-style-guide-nav-link: darken($color-7, 65%);
+$color-style-guide-nav-link-hover: darken($color-7, 5%);
+$color-style-guide-section-border: darken($color-7, 10%);
+$color-style-guide-swatch-border: darken($color-7, 10%);
+
 // Table colors
 $color-tbl-odd:                  $color-1 !default;
 $color-tbl-even:                 very-light($color-3, 4) !default;
 $color-tbl-thead:                very-light($color-3, 4) !default;
 
-// Button colors
-$color-btn-bg:                   $color-3 !default;
-$color-btn-text:                 $color-1 !default;
-$color-btn-hover-bg:             $color-2 !default;
-$color-btn-hover-text:           $color-1 !default;
-
 // Pill colors
 //
 // For now these are custom assigned colors just for this section. As we go
@@ -116,134 +105,42 @@ $color-action-mail-brd:          very-light($color-success, 20 ) !default;
 $color-action-failure-bg:        very-light($color-error,   10 ) !default;
 $color-action-failure-brd:       very-light($color-error,   20 ) !default;
 
-// Select2 select field colors
-$color-sel-bg:                   $color-3 !default;
-$color-sel-text:                 $color-1 !default;
-$color-sel-hover-bg:             $color-2 !default;
-$color-sel-hover-text:           $color-1 !default;
-$color-sel-disabled-bg:          $color-7 !default;
-$color-sel-disabled-text:        $color-4 !default;
-
-// Text inputs colors
-@include solidus-deprecated-variable("color-txt-brd", "input-border-color");
-$color-txt-brd:                  $color-border !default;
-@include solidus-deprecated-variable("color-txt-text", "input-color");
-$color-txt-text:                 $color-3 !default;
-@include solidus-deprecated-variable("color-txt-hover-brd", "input-border-focus");
-$color-txt-hover-brd:            $color-2 !default;
-
-// States label colors
-$color-ste-complete-bg:          $color-success !default;
-$color-ste-complete-text:        $color-1 !default;
-$color-ste-completed-bg:         $color-success !default;
-$color-ste-completed-text:       $color-1 !default;
-$color-ste-sold-bg:              $color-success !default;
-$color-ste-sold-text:            $color-1 !default;
-$color-ste-pending-bg:           $color-notice !default;
-$color-ste-pending-text:         $color-1 !default;
-$color-ste-awaiting_return-bg:   $color-notice !default;
-$color-ste-awaiting_return-text: $color-1 !default;
-$color-ste-returned-bg:          $color-notice !default;
-$color-ste-returned-text:        $color-1 !default;
-$color-ste-credit_owed-bg:       $color-notice !default;
-$color-ste-credit_owed-text:     $color-1 !default;
-$color-ste-paid-bg:              $color-success !default;
-$color-ste-paid-text:            $color-1 !default;
-$color-ste-shipped-bg:           $color-success !default;
-$color-ste-shipped-text:         $color-1 !default;
-$color-ste-balance_due-bg:       $color-notice !default;
-$color-ste-balance_due-text:     $color-1 !default;
-$color-ste-backorder-bg:         $color-notice !default;
-$color-ste-backorder-text:       $color-1 !default;
-$color-ste-none-bg:              $color-error !default;
-$color-ste-none-text:            $color-1 !default;
-$color-ste-ready-bg:             $color-success !default;
-$color-ste-ready-text:           $color-1 !default;
-$color-ste-void-bg:              $color-error !default;
-$color-ste-void-text:            $color-1 !default;
-$color-ste-canceled-bg:          $color-error !default;
-$color-ste-canceled-text:        $color-1 !default;
-$color-ste-failed-bg:            $color-error !default;
-$color-ste-failed-text:          $color-1 !default;
-$color-ste-address-bg:           $color-error !default;
-$color-ste-address-text:         $color-1 !default;
-$color-ste-checkout-bg:          $color-notice !default;
-$color-ste-checkout-text:        $color-1 !default;
-$color-ste-cart-bg:              $color-notice !default;
-$color-ste-cart-text:            $color-1 !default;
-$color-ste-payment-bg:           $color-error !default;
-$color-ste-payment-text:         $color-1 !default;
-$color-ste-delivery-bg:          $color-success !default;
-$color-ste-delivery-text:        $color-1 !default;
-$color-ste-confirm-bg:           $color-error !default;
-$color-ste-confirm-text:         $color-1 !default;
-$color-ste-active-bg:            $color-success !default;
-$color-ste-active-text:          $color-1 !default;
-$color-ste-inactive-bg:          $color-notice !default;
-$color-ste-inactive-text:        $color-1 !default;
-$color-ste-considered_risky-bg:  $color-error !default;
-$color-ste-considered_risky-text:$color-1 !default;
-$color-ste-considered_safe-bg:   $color-success !default;
-$color-ste-considered_safe-text: $color-1 !default;
-$color-ste-success-bg:           $color-success !default;
-$color-ste-success-text:         $color-1 !default;
-$color-ste-notice-bg:            $color-notice !default;
-$color-ste-notice-text:          $color-1 !default;
-$color-ste-error-bg:             $color-error !default;
-$color-ste-error-text:           $color-1 !default;
-
 // Available states
-$states: completed, complete, sold, pending, awaiting_return, returned, credit_owed, paid, shipped, balance_due, backorder, checkout, cart, address,
-delivery, payment, confirm, canceled, failed, ready, void, active, inactive, considered_risky, considered_safe, success, notice, error !default;
-
-$states-bg-colors: $color-ste-completed-bg, $color-ste-complete-bg, $color-ste-sold-bg, $color-ste-pending-bg, $color-ste-awaiting_return-bg,
-$color-ste-returned-bg, $color-ste-credit_owed-bg, $color-ste-paid-bg, $color-ste-shipped-bg, $color-ste-balance_due-bg, $color-ste-backorder-bg,
-$color-ste-checkout-bg, $color-ste-cart-bg, $color-ste-address-bg, $color-ste-delivery-bg, $color-ste-payment-bg, $color-ste-confirm-bg,
-$color-ste-canceled-bg, $color-ste-failed-bg, $color-ste-ready-bg, $color-ste-void-bg, $color-ste-active-bg, $color-ste-inactive-bg, $color-ste-considered_risky-bg,
-$color-ste-considered_safe-bg, $color-ste-success-bg, $color-ste-notice-bg, $color-ste-error-bg !default;
-
-$states-text-colors: $color-ste-completed-text, $color-ste-complete-text, $color-ste-sold-text, $color-ste-pending-text, $color-ste-awaiting_return-text,
-$color-ste-returned-text, $color-ste-credit_owed-text, $color-ste-paid-text, $color-ste-shipped-text, $color-ste-balance_due-text, $color-ste-backorder-text,
-$color-ste-checkout-text, $color-ste-cart-text, $color-ste-address-text, $color-ste-delivery-text, $color-ste-payment-text, $color-ste-confirm-text,
-$color-ste-canceled-text, $color-ste-failed-text, $color-ste-ready-text, $color-ste-void-text, $color-ste-active-text, $color-ste-inactive-text, $color-ste-considered_risky-text,
-$color-ste-considered_safe-text, $color-ste-success-text, $color-ste-notice-text, $color-ste-error-text !default;
+$states: (
+  active,
+  address,
+  awaiting_return,
+  backorder,
+  balance_due,
+  canceled,
+  cart,
+  checkout,
+  complete,
+  completed,
+  confirm,
+  credit_owed,
+  delivery,
+  error,
+  failed,
+  inactive,
+  paid,
+  payment,
+  pending,
+  ready,
+  returned,
+  shipped,
+  void
+) !default;
 
 // Available actions
 $actions: edit, clone, remove, void, capture, save, cancel, mail, failure !default;
 $actions-bg-colors: $color-action-edit-bg, $color-action-clone-bg, $color-action-remove-bg, $color-action-void-bg, $color-action-capture-bg, $color-action-save-bg, $color-action-cancel-bg, $color-action-mail-bg, $color-action-failure-bg !default;
 $actions-brd-colors: $color-action-edit-brd, $color-action-clone-brd, $color-action-remove-brd, $color-action-void-brd, $color-action-capture-brd, $color-action-save-brd, $color-action-cancel-brd, $color-action-mail-brd, $color-action-failure-brd !default;
 
-// Sizes
+// Sidebar
 //--------------------------------------------------------------
-
-@include solidus-deprecated-variable("body-font-size", "font-size-root");
-$body-font-size:                 13px !default;
-
-@include solidus-deprecated-variable("h6-size", "font-size-h6");
-$h6-size:                        $body-font-size + 2 !default;
-@include solidus-deprecated-variable("h5-size", "font-size-h5");
-$h5-size:                        $h6-size + 2 !default;
-@include solidus-deprecated-variable("h4-size", "font-size-h4");
-$h4-size:                        $h5-size + 2 !default;
-@include solidus-deprecated-variable("h3-size", "font-size-h3");
-$h3-size:                        $h4-size + 2 !default;
-@include solidus-deprecated-variable("h2-size", "font-size-h2");
-$h2-size:                        $h3-size + 2 !default;
-@include solidus-deprecated-variable("h1-size", "font-size-h1");
-$h1-size:                        $h2-size + 2 !default;
-
-$font-weight-bold:               600 !default;
-$font-weight-normal:             400 !default;
-
 $width-sidebar:                  200px !default;
 $width-sidebar-flyout:           225px !default;
-
-// Stacking
-//--------------------------------------------------------------
-$z-index-navbar-flyout:          1000 !default;
-
-// Sidebar
-//--------------------------------------------------------------
 $border-sidebar:                 1px solid $color-sidebar-border !default;
 
 // Main

diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss b/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss
@@ -4,7 +4,7 @@
 
   &-sidebar {
     width: 225px;
-    background: $color-7;
+    background: $color-style-guide-nav;
     padding: 1.5rem;
 
     .brand-link {
@@ -41,7 +41,7 @@
       @include padding(0.75rem null);
 
       &:not(:first-of-type) {
-        border-top: 1px solid darken($color-7, 5%);
+        border-top: 1px solid $color-style-guide-nav-border;
       }
 
       > a {
@@ -52,11 +52,11 @@
 
     a {
       display: block;
-      color: darken($color-7, 65%);
+      color: $color-style-guide-nav-link;
       padding: 0.3rem 0.5rem;
 
       &:hover {
-        background: darken($color-7, 5%);
+        background: $color-style-guide-nav-link-hover;
       }
     }
   }
@@ -68,7 +68,7 @@
 
   &-section-header {
     @include margin(7rem 0 3rem);
-    border-bottom: 1px solid darken($color-7, 10%);
+    border-bottom: 1px solid $color-style-guide-section-border;
     font-size: 1.5rem;
     font-weight: bold;
     line-height: 0.2;
@@ -81,7 +81,7 @@
     }
 
     a {
-      color: darken($color-7, 65%);
+      color: $color-style-guide-link;
     }
   }
 
@@ -101,7 +101,7 @@
   &-code {
     pre {
       margin: 0;
-      border: 1px solid darken($color-7, 10%);
+      border: 1px solid $color-style-guide-code;
     }
   }
 
@@ -132,13 +132,6 @@
 
   .color-swatch {
     height: 50px;
-    border: 1px solid darken($color-7, 10%);
-  }
-}
-
-.tags {
-  .state {
-    width: 33%;
-    float: left;
+    border: 1px solid $color-style-guide-swatch-border;
   }
 }
diff --git a/backend/app/controllers/spree/admin/style_guide_controller.rb b/backend/app/controllers/spree/admin/style_guide_controller.rb
@@ -10,8 +10,7 @@ def index
             'fonts',
             'colors',
             'lists',
-            'icons',
-            'tags'
+            'icons'
           ],
           forms: [
             'building_forms',