solidus_backend 2.3.1 → 2.4.0.beta1

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

@@ -3,7 +3,8 @@
     border: $input-btn-border-width solid $input-border-color;
     @include border-radius($input-border-radius);
     background: $input-bg;
-    height: calc(#{$input-height} + #{2*$input-btn-border-width});
+    height: $input-height;
+    padding: 0;
 
     .select2-arrow {
       background: transparent;
@@ -17,7 +18,8 @@
     }
 
     >.select2-chosen {
-      line-height: $input-height;
+      padding: $input-btn-padding-y $input-btn-padding-x;
+      line-height: $input-btn-line-height;
       color: $input-color;
     }
   }
@@ -39,7 +41,7 @@
   .select2-choices.select2-choices, /* Needs extra specificity */
   .select2-choice {
     box-shadow: none; /* Remove default outline */
-    border-color: $input-border-focus;
+    border-color: $input-focus-border-color;
   }
 }
 
@@ -49,7 +51,7 @@
   }
 
   .select2-search-choice {
-    background: $badge-default-bg;
+    background: $gray-200;
     border: 0;
     margin: 2px 0 3px 5px; // adjust the margin to respect the adjusted line height
   }
@@ -72,7 +74,7 @@
 }
 
 .select2-drop-active {
-  border: $input-btn-border-width solid $input-border-focus;
+  border: $input-btn-border-width solid $input-focus-border-color;
   border-top: 0;
 }
 

data/app/assets/stylesheets/spree/backend/sections/_orders.scss

@@ -17,7 +17,7 @@
   .order-total {
     font-size: 35px;
     font-weight: $font-weight-bold;
-    color: $brand-success;
+    color: theme-color("success");
   }
 }
 
@@ -28,7 +28,7 @@
   .customer {
     font-size: 20px;
     font-weight: $font-weight-bold;
-    color: $brand-success;
+    color: theme-color("success");
   }
 }
 
@@ -37,10 +37,10 @@
     color: $body-color;
 
     .shipment-number {
-      color: $brand-success;
+      color: theme-color("success");
     }
     .stock-location-name {
-      color: $brand-success;
+      color: theme-color("success");
     }
   }
 }
@@ -83,11 +83,11 @@ form.admin-ship-shipment {
 
 table.line-items {
   input.error {
-    border-color: $brand-danger;
+    border-color: theme-color("danger");
   }
 
   .select2-container.error {
     border-radius: 4px;
-    border: 1px solid $brand-danger;
+    border: 1px solid theme-color("danger");
   }
 }

data/app/assets/stylesheets/spree/backend/sections/_products.scss

@@ -48,7 +48,7 @@ div[data-hook="admin_products_index_search_buttons"] {
   }
 
   &.with-images {
-    border-color: $brand-success;
+    border-color: theme-color("success");
   }
 }
 
@@ -56,3 +56,7 @@ div[data-hook="admin_products_index_search_buttons"] {
   height: 100%;
   padding: 1rem;
 }
+
+.modal-image-trigger {
+  cursor: zoom-in;
+}

data/app/assets/stylesheets/spree/backend/sections/_promotions.scss

@@ -74,9 +74,11 @@
     text-align: right;
   }
 
-  .field {
+  .calculator-fields {
     padding-bottom: 10px;
+  }
 
+  .field {
     &.alpha {
       margin-left: -1px;
       padding-left: 11px;
@@ -121,7 +123,7 @@
     cursor: pointer;
 
     &:hover {
-      color: $brand-danger;
+      color: theme-color("danger");
     }
   }
 }

data/app/assets/stylesheets/spree/backend/sections/_stock_management.scss

@@ -1,48 +1,17 @@
 #listing_product_stock {
-  margin-left: 0px;
-  margin-right: 0px;
 
-  th {
-    border-bottom: 1px solid $color-border;
+  tbody + tbody {
+    border-top-width: 1px;
   }
 
-  > tbody {
-    > tr.stock-item-edit-row {
-      td {
-        background-color: $color-tbl-even;
-        border-left: none;
-      }
-      &:nth-child(even) td {
-        /* An nth-even child is actually an odd row */
-        background-color: $color-tbl-odd;
-      }
-    }
-    > tr {
-      &:first-child td {
-        border-top: none;
-      }
-    }
-  }
   td {
-    vertical-align: middle;
-
-    &.location-name-cell {
-      border-left: none;
-    }
-
     input.error {
-      border-color: $brand-danger;
+      border-color: theme-color("danger");
     }
 
     .select2-container.error {
       border-radius: 4px;
-      border: 1px solid $brand-danger;
-    }
-  }
-
-  tr:hover {
-    .stock-variant-field-table td {
-      background-color: transparent;
+      border: 1px solid theme-color("danger");
     }
   }
 }

data/app/assets/stylesheets/spree/backend/sections/_style_guide.scss

@@ -1,9 +1,10 @@
 .style-guide {
+  padding-left: 0; // override regular admin layout
   display: flex;
 
   &-sidebar {
     width: 225px;
-    background: $color-7;
+    background: $color-style-guide-nav;
     padding: 1.5rem;
 
     .brand-link {
@@ -40,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 {
@@ -51,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;
       }
     }
   }
@@ -67,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;
@@ -80,7 +81,7 @@
     }
 
     a {
-      color: darken($color-7, 65%);
+      color: $color-style-guide-link;
     }
   }
 
@@ -100,7 +101,7 @@
   &-code {
     pre {
       margin: 0;
-      border: 1px solid darken($color-7, 10%);
+      border: 1px solid $color-style-guide-code;
     }
   }
 
@@ -114,6 +115,11 @@
   }
 }
 
+.style-guide-code,
+.style-guide-result {
+  margin: 1rem 0;
+}
+
 .color-variables {
   display: flex;
   flex-wrap: wrap;
@@ -126,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;
   }
 }

data/app/assets/stylesheets/spree/backend/sections/_taxonomies.scss

@@ -14,32 +14,25 @@
     margin-bottom: 0.5em;
   }
 
-  > li {
-    > .sortable-handle {
-      text-indent: 2em;
-
-      * {
-        text-indent: 0;
-      }
-    }
-
-    > .ui-sortable {
-      padding-bottom: 5em;
-    }
+  .taxon,
+  .sortable-placeholder {
+    border-radius: $border-radius;
   }
 
-  .sortable-handle ,
   .sortable-placeholder {
-    border-radius: $border-radius;
+    margin: 0.5em 0;
   }
 
-  .sortable-handle {
+  .taxon {
     background-color: very-light($color-3);
     border: 1px solid $color-border;
     color: $body-color;
     font-weight: $font-weight-bold;
     padding: 0.5em;
-    cursor: move;
+
+    &.sortable {
+      cursor: move;
+    }
 
     i {
       @include margin(null 4px 0 6px);

data/app/assets/stylesheets/spree/backend/shared/_forms.scss

@@ -8,25 +8,25 @@ input[type="url"],
 input[type="number"],
 input[type="tel"],
 textarea {
-  padding: $input-padding-y $input-padding-x;
+  padding: $input-btn-padding-y $input-btn-padding-x;
   color: $input-color;
   border: $input-btn-border-width solid $input-border-color;
   border-radius: $input-border-radius;
   background: $input-bg;
   font-size: $font-size-base;
-  line-height: $input-line-height;
+  line-height: $input-btn-line-height;
 
   &:focus {
-    border-color: $input-border-focus;
+    border-color: $input-focus-border-color;
     outline: 0;
   }
 
   &:disabled {
-    background: $input-bg-disabled;
+    background: $input-disabled-bg;
   }
 
   &::placeholder {
-    color: $input-color-placeholder;
+    color: $input-placeholder-color;
     // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
     opacity: 1;
   }
@@ -45,7 +45,6 @@ label {
   font-size: 90%;
   display: inline;
   margin-bottom: 5px;
-  color: $color-4;
 
   &.inline {
     display: inline-block !important;
@@ -64,9 +63,17 @@ label {
 
 input[type="submit"],
 input[type="button"],
-button, .button {
-  @extend .btn;
-  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+button,
+.button {
+  &:not(.close):not([class*="btn"]) {
+    // We want to apply the primary button coloring to all buttons that do not
+    // currently use the Bootstrap class naming convention (`btn`).
+    //
+    // In order to avoid the clashing between using `:not(.btn)` and
+    // `@extend .btn` we need to use an attribute selector of `[class*="btn"]`.
+    @extend .btn;
+    @include button-variant(theme-color("primary"), theme-color("primary"));
+  }
 
   &:before {
     font-weight: normal !important;
@@ -109,19 +116,19 @@ span.info {
   }
 
   ul {
-    border-top: 1px solid $color-border;
     list-style: none;
-    padding-top: 5px;
+    margin: 5px 0;
+    padding-left: 0;
 
     li {
       display: inline-block;
       padding-right: 10px;
 
-
       label {
         font-weight: normal;
         text-transform: none;
       }
+
       &.white-space-nowrap {
         white-space: nowrap;
       }
@@ -131,21 +138,21 @@ span.info {
   &.withError {
     .field_with_errors {
       label {
-        color: very-light($brand-danger, 30);
+        color: very-light(theme-color("danger"), 30);
       }
 
       input {
-        border-color: very-light($brand-danger, 15);
+        border-color: very-light(theme-color("danger"), 15);
       }
     }
     .formError {
-      color: very-light($brand-danger, 30);
+      color: very-light(theme-color("danger"), 30);
       font-style: italic;
       font-size: 85%;
     }
     .select2-container {
       border-radius: 4px;
-      border: 1px solid very-light($brand-danger, 15);
+      border: 1px solid very-light(theme-color("danger"), 15);
     }
   }
 }
@@ -184,10 +191,6 @@ fieldset {
     }
   }
 
-  label {
-    color: lighten($body-color, 8);
-  }
-
   .filter-actions {
     margin-bottom: -32px;
     margin-top: 15px;

data/app/assets/stylesheets/spree/backend/shared/_header.scss

@@ -1,15 +1,11 @@
 .main-header {
   display: flex;
   align-items: center;
-  padding: 15px map-get($grid-gutter-widths, "xl");
+  padding: 15px $grid-gutter-width;
   background-color: very-light($color-3, 4);
   border-bottom: 1px solid $color-border;
   height: $main-header-height;
 
-  body:not(.new-layout) & {
-    margin-left: $width-sidebar;
-  }
-
   @media print { display: none }
 }
 

data/app/assets/stylesheets/spree/backend/shared/_layout.scss

@@ -5,10 +5,7 @@ html {
 body {
   position: relative;
   min-height: 100%;
-
-  &.new-layout {
-    padding-left: $width-sidebar;
-  }
+  padding-left: $width-sidebar;
 }
 
 .admin-nav {
@@ -18,37 +15,20 @@ body {
 }
 
 .content-wrapper {
-  body:not(.new-layout) & {
-    margin-left: $width-sidebar;
-    @media print { margin-left: 0 }
-  }
-
-  body.new-layout & {
-    @include padding(1rem map-get($grid-gutter-widths, "xl") null);
-  }
+  @include padding(1rem $grid-gutter-width null);
 
-  &.centered {
+  &:not(.full-width) {
     @include margin(null auto);
     max-width: map-get($container-max-widths, "xl");
   }
 }
 
 .content-main {
-  @include make-col(12);
   overflow-x: hidden; // makes sure that the tabs are able to resize
-
-  .has-sidebar & {
-    @include make-col(9);
-  }
-}
-
-.content-sidebar {
-  @include make-col(3);
 }
 
 #content {
   position: relative;
-  z-index: 0;
   padding: 0;
   margin-top: 15px;
 }