solidus_backend 2.3.1 → 2.4.0.beta1

data/app/assets/stylesheets/spree/backend/components/_actions.scss

@@ -2,30 +2,28 @@ table tbody tr {
   &.highlight {
 
     @each $action in $actions {
-      &.action-#{$action} td {
-        background-color: get-value($actions, $actions-bg-colors, $action);
-        border-color: get-value($actions, $actions-brd-colors, $action);
+      &.action-#{$action} {
+        td, th {
+          background-color: get-value($actions, $actions-bg-colors, $action);
+          border-color: get-value($actions, $actions-brd-colors, $action);
+        }
       }
     }
 
-    &.action-remove td, &.action-void td, &.action-failure td {
-      text-decoration: line-through;
-
-      &.actions {
-        text-decoration: none;
+    &.action-remove, &.action-void, &.action-failure {
+      td, th {
+        text-decoration: line-through;
       }
-    }
-  }
 
-  &.before-highlight {
-    @each $action in $actions {
-      &.action-#{$action} td {
-        border-bottom-color: get-value($actions, $actions-brd-colors, $action);
+      td.actions {
+        text-decoration: none;
       }
     }
   }
 
   td.actions {
-    background-color: transparent !important;
+    button {
+      cursor: pointer;
+    }
   }
 }

data/app/assets/stylesheets/spree/backend/components/_date-picker.scss

@@ -1,6 +1,6 @@
 .date-range-filter {
   .range-divider {
-    color: $gray;
+    color: $gray-800;
   }
 }
 

data/app/assets/stylesheets/spree/backend/components/_editable_table.scss

@@ -1,6 +1,5 @@
 .inline-editable-table tr:not(:hover):not(.editing)  {
   input {
-    border: 1px solid transparent;
     color: inherit;
     background-color: transparent;
   }

data/app/assets/stylesheets/spree/backend/components/_messages.scss

@@ -1,14 +1,14 @@
 .errorExplanation {
   padding: 5px;
-  border: 1px solid very-light($brand-danger, 12);
-  background-color: very-light($brand-danger, 6);
+  border: 1px solid very-light(theme-color("danger"), 12);
+  background-color: very-light(theme-color("danger"), 6);
   border-radius: 3px;
-  color: very-light($brand-danger, 30);
+  color: very-light(theme-color("danger"), 30);
   margin-bottom: 15px;
 
   h2 {
     font-size: 140%;
-    color: very-light($brand-danger, 30);
+    color: very-light(theme-color("danger"), 30);
     margin-bottom: 5px;
   }
 
@@ -37,9 +37,9 @@
   color: $color-1;
   font-weight: $font-weight-bold;
 
-  &.notice  { background-color: rgba($brand-warning,  0.8) }
-  &.success { background-color: rgba($brand-success, 0.8) }
-  &.error   { background-color: rgba($brand-danger,   0.8) }
+  &.notice  { background-color: rgba(theme-color("warning"),  0.8) }
+  &.success { background-color: rgba(theme-color("success"), 0.8) }
+  &.error   { background-color: rgba(theme-color("danger"),   0.8) }
 }
 
 .alert {
@@ -50,5 +50,5 @@
     text-decoration: underline;
   }
 
-  &.error a { color: very-light($brand-danger, 10) }
+  &.error a { color: very-light(theme-color("danger"), 10) }
 }

data/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-sticky;
 }
 
 .admin-nav-header {

data/app/assets/stylesheets/spree/backend/components/_number_field_update.scss

@@ -1,6 +1,6 @@
 .number-field-update-table {
   td.actions {
-    a.fa-void,
+    a.fa-cancel,
     a.fa-check {
       display: none;
     }

data/app/assets/stylesheets/spree/backend/components/_number_with_currency.scss

@@ -17,7 +17,7 @@
       border-right: 0;
 
       &:focus + .number-with-currency-select {
-        border-left-color: $input-border-focus;
+        border-left-color: $input-focus-border-color;
       }
     }
 

data/app/assets/stylesheets/spree/backend/components/_pills.scss

@@ -0,0 +1,92 @@
+.pill {
+  display: inline-block;
+  padding: 0.2em 0.9em;
+  border-radius: 10px;
+  font-size: $font-size-pill;
+  background: $color-pill-neutral;
+  color: $color-pill-neutral-text;
+  white-space: nowrap;
+
+  $pill-states: (
+    complete: (
+      background: $color-pill-complete,
+      color: $color-pill-complete-text
+    ),
+    active: (
+      background: $color-pill-active,
+      color: $color-pill-active-text
+    ),
+    inactive: (
+      background: $color-pill-inactive,
+      color: $color-pill-inactive-text
+    ),
+    pending: (
+      background: $color-pill-pending,
+      color: $color-pill-pending-text
+    ),
+    warning: (
+      background: $color-pill-warning,
+      color: $color-pill-warning-text
+    ),
+    error: (
+      background: $color-pill-error,
+      color: $color-pill-error-text
+    )
+  );
+
+  @each $name, $colors in $pill-states {
+    &-#{$name} {
+      background: map-get($colors, background);
+      color: map-get($colors, color);
+    }
+  }
+}
+
+// Extend pill states for custom order, payment, and shipment state names
+.pill-address,
+.pill-awaiting,
+.pill-awaiting_return,
+.pill-backorder,
+.pill-backordered,
+.pill-balance_due,
+.pill-cart,
+.pill-checkout,
+.pill-confirm,
+.pill-credit_owed,
+.pill-delivery,
+.pill-in_transit,
+.pill-on_hand,
+.pill-partial,
+.pill-payment,
+.pill-processing,
+.pill-ready,
+.pill-resumed {
+  @extend .pill-pending;
+}
+
+.pill-authorized,
+.pill-canceled,
+.pill-completed,
+.pill-expired,
+.pill-given_to_customer,
+.pill-lost_in_transit,
+.pill-paid,
+.pill-received,
+.pill-reimbursed,
+.pill-returned,
+.pill-shipped,
+.pill-shipped_wrong_item,
+.pill-short_shipped,
+.pill-unexchanged,
+.pill-void {
+  @extend .pill-complete;
+}
+
+.pill-failed {
+  @extend .pill-warning;
+}
+
+.pill-errored,
+.pill-invalid {
+  @extend .pill-error;
+}

data/app/assets/stylesheets/spree/backend/components/_sidebar.scss

@@ -1,43 +1,18 @@
-body:not(.new-layout) #sidebar {
-  overflow: visible;
-  margin-top: 1.5rem;
+.content-sidebar {
+  padding-top: 0.65rem;
 
-  .sidebar-title {
-    color: $color-2;
-    text-align: center;
-    font-size: 16px;
-    font-weight: $font-weight-bold;
-    border-top: 1px solid $color-border;
-
-    > span {
-      display: inline;
-      background: #fff;
-      padding: 5px 10px;
-      position: relative;
-      top: -14px;
-
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-  }
-
-  dl {
-    dt, dd {
-      min-height: 3em;
-    }
+  .has-tabs & {
+    padding-top: 3.25rem;
   }
 
-  @media print { display: none }
-}
-
-body.new-layout .content-sidebar {
   ul {
     padding-left: 0;
   }
 }
 
-body.new-layout .sidebar-title {
-  @include line-through();
+.sidebar-title {
+  @include line-through($color: $color-border);
   color: $color-2;
   font-size: 14px;
+  font-weight: $font-weight-normal;
 }

data/app/assets/stylesheets/spree/backend/components/_states.scss

@@ -1,33 +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};
     }
   }
 }
-
-table tbody tr {
-  &[class*="state"] td:first-child {
-    border-left-width: 3px;
-  }
-  &.state-complete td:first-child { border-left-color: $brand-success }
-  &.state-cart     td:first-child { border-left-color: very-light($brand-warning, 6) }
-  &.state-canceled td:first-child { border-left-color: $brand-danger }
-}

data/app/assets/stylesheets/spree/backend/components/_stock_table.scss

@@ -12,15 +12,6 @@
   }
 
   > tbody {
-    > tr {
-      &:hover {
-        .stock-variant-field-table {
-          td {
-            background-color: $color-1;
-          }
-        }
-      }
-    }
     .variant-image {
       width: 31%;
       padding: 0 2%;
@@ -34,8 +25,5 @@
     .variant-details {
       float: left;
     }
-    .variant-container {
-      padding-top: 10px;
-    }
   }
 }

data/app/assets/stylesheets/spree/backend/globals/_variables.scss

@@ -4,8 +4,7 @@
 
 // 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
 //--------------------------------------------------------------
@@ -23,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;
@@ -47,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;
@@ -63,16 +49,41 @@ $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
+// about updating other areas of the admin we will likely want to pull these
+// colors out into better named variables.
+$color-pill-text: #1f2933;
+$color-pill-neutral: #e6e6e6;
+$color-pill-neutral-text: $color-pill-text;
+$color-pill-complete: #c8d8e8;
+$color-pill-complete-text: $color-pill-text;
+$color-pill-active: #bbe5b3;
+$color-pill-active-text: $color-pill-text;
+$color-pill-inactive: $color-pill-neutral;
+$color-pill-inactive-text: lighten($color-pill-text, 30%);
+$color-pill-pending: #ffe87d;
+$color-pill-pending-text: $color-pill-text;
+$color-pill-warning: #f9b36d;
+$color-pill-warning-text: $color-pill-text;
+$color-pill-error: #ff967b;
+$color-pill-error-text: $color-pill-text;
 
 // Actions colors
 $color-action-edit-bg:           very-light($color-success, 5  ) !default;
@@ -94,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

data/app/assets/stylesheets/spree/backend/plugins/_bootstrap_tooltip.scss

@@ -3,30 +3,26 @@
     background-color: $color;
   }
 
-  &.tooltip-top,
-  &.bs-tether-element-attached-bottom {
-    .tooltip-inner::before {
+  &.bs-tooltip-top {
+    .arrow::before {
       border-top-color: $color;
     }
   }
 
-  &.tooltip-right,
-  &.bs-tether-element-attached-left {
-    .tooltip-inner::before {
+  &.bs-tooltip-right {
+    .arrow::before {
       border-right-color: $color;
     }
   }
 
-  &.tooltip-bottom,
-  &.bs-tether-element-attached-top {
-    .tooltip-inner::before {
+  &.bs-tooltip-bottom {
+    .arrow::before {
       border-bottom-color: $color;
     }
   }
 
-  &.tooltip-left,
-  &.bs-tether-element-attached-right {
-    .tooltip-inner::before {
+  &.bs-tooltip-left {
+    .arrow::before {
       border-left-color: $color;
     }
   }
@@ -36,12 +32,12 @@
   pointer-events: none;
 
   &.action-edit, &.action-save, &.action-capture, &.action-add {
-    @include bootstrap-tooltip-color($brand-success);
+    @include bootstrap-tooltip-color(theme-color("success"));
   }
   &.action-clone, &.action-cancel {
-    @include bootstrap-tooltip-color($brand-warning);
+    @include bootstrap-tooltip-color(theme-color("warning"));
   }
   &.action-void, &.action-failure, &.action-remove {
-    @include bootstrap-tooltip-color($brand-danger);
+    @include bootstrap-tooltip-color(theme-color("danger"));
   }
 }