solidus_backend 2.4.2 → 2.5.0.beta1

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

@@ -123,7 +123,8 @@ nav.menu {
 
   .admin-subnav {
     background: $color-navbar-submenu-bg;
-    @include padding($padding-y-navbar - $padding-y-navbar-submenu null);
+    padding-top:    $padding-y-navbar - $padding-y-navbar-submenu;
+    padding-bottom: $padding-y-navbar - $padding-y-navbar-submenu;
 
     li {
       background: $color-navbar-submenu-bg;
@@ -131,7 +132,8 @@ nav.menu {
 
     a {
       color: $color-navbar-submenu;
-      @include padding($padding-y-navbar-submenu null);
+      padding-top:    $padding-y-navbar-submenu;
+      padding-bottom: $padding-y-navbar-submenu;
 
       &:hover {
         color: $color-navbar-submenu-active;

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

@@ -1,14 +1,20 @@
 .number-with-currency {
+  $currency-width: 5.5rem;
+
   &-symbol {
     min-width: 2.5em;
+
+    /* bootstrap makes this a flexbox item */
+    justify-content: space-around;
   }
 
   &-amount {
+    min-width: 5rem;
     text-align: right;
   }
 
   &-addon {
-    width: 5.5rem;
+    width: $currency-width;
     text-align: left;
   }
 
@@ -25,7 +31,7 @@
       @extend .custom-select;
 
       cursor: pointer;
-      width: 5.5rem;
+      width: $currency-width;
 
       @include border-radius($border-radius);
       @include border-left-radius(0);

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

@@ -1,3 +1,7 @@
+.turbolinks-progress-bar {
+  background-color: $color-3;
+}
+
 #progress {
   display: none;
   position: fixed;

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

@@ -64,7 +64,7 @@
   position: relative;
 
   .tabs:not(.tabs-overflowed) & {
-    display: none;
+    visibility: hidden;
   }
 
   > a {
@@ -88,7 +88,9 @@
   }
 
   ul {
-    @include position(absolute, calc(100% - 1px) 0 null null);
+    position: absolute;
+    top: calc(100% - 1px);
+    right: 0;
     z-index: 1;
   }
 }

data/app/assets/stylesheets/spree/backend/globals/mixins/_line_through.scss

@@ -14,7 +14,8 @@
   }
 
   > * { // usually a <span> but we'll use an * just in case
-    @include padding(null 1rem);
+    padding-left: 1rem;
+    padding-right: 1rem;
     position: relative;
     background: $background;
     z-index: 1;

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

@@ -1,7 +1,8 @@
-.select2-container {
+.select2-container,
+.select2-container.select2-drop-above {
   .select2-choice, .select2-choices {
     border: $input-btn-border-width solid $input-border-color;
-    @include border-radius($input-border-radius);
+    border-radius: $input-border-radius;
     background: $input-bg;
     height: $input-height;
     padding: 0;
@@ -25,6 +26,20 @@
   }
 }
 
+.select2-container.select2-dropdown-open {
+  .select2-choice,
+  .select2-choices {
+    border-radius: $input-border-radius $input-border-radius 0 0;
+  }
+
+  &.select2-drop-above {
+    .select2-choice,
+    .select2-choices {
+      border-radius: 0 0 $input-border-radius $input-border-radius;
+    }
+  }
+}
+
 .select2-container .select2-choice .select2-search-choice-close {
   @extend .fa;
   @extend .fa-times;
@@ -37,7 +52,9 @@
   background-image: none;
 }
 
-.select2-container-active, .select2-dropdown-open {
+.select2-container-active, .select2-dropdown-open,
+.select2-container-active.select2-drop-above,
+.select2-dropdown-open.select2-drop-above {
   .select2-choices.select2-choices, /* Needs extra specificity */
   .select2-choice {
     box-shadow: none; /* Remove default outline */
@@ -71,11 +88,19 @@
 .select2-drop {
   /* Remove default shadow */
   box-shadow: none;
-}
 
-.select2-drop-active {
-  border: $input-btn-border-width solid $input-focus-border-color;
-  border-top: 0;
+  &.select2-drop-active,
+  &.select2-drop-active.select2-drop-above {
+    border: $input-btn-border-width solid $input-focus-border-color;
+  }
+
+  &.select2-drop-active {
+    border-top: 0;
+
+    &.select2-drop-above {
+      border-bottom: 0;
+    }
+  }
 }
 
 .select2-results {

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

@@ -0,0 +1,3 @@
+.sortable-ghost {
+  opacity: 0.4;
+}

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

@@ -45,26 +45,6 @@
   }
 }
 
-// Customize orduct add fieldset
-#add-line-item {
-  fieldset {
-    padding: 10px 0;
-
-    .field {
-      margin-bottom: 0;
-
-      input[type="text"], input[type="number"] {
-        width: 100%;
-      }
-    }
-    .actions {
-      .button {
-        margin-top: 28px;
-      }
-    }
-  }
-}
-
 [data-hook="adjustments_new_coupon_code"] {
   margin-bottom: 18px;
 }
@@ -90,4 +70,8 @@ table.line-items {
     border-radius: 4px;
     border: 1px solid theme-color("danger");
   }
+
+  .line-item-select-variant .select2-chosen {
+    max-width: 400px;
+  }
 }

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

@@ -18,7 +18,6 @@ div[data-hook="admin_products_index_search_buttons"] {
   }
   input[type="checkbox"] {
     width: auto;
-    vertical-align: bottom;
   }
 }
 

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

@@ -18,12 +18,13 @@
   }
 }
 
-#promotion-pilicy-select {
+#promotion-policy-select {
   overflow: auto;
+  margin-bottom: 1.5rem;
 }
 
 .promotion-block {
-  // padding: 0 5px 5px;
+  padding: 0 1.25rem 0.5rem;
   background-color: lighten($color-border, 5);
   border: 1px solid $color-border;
   border-radius: 3px;
@@ -34,6 +35,11 @@
     margin-bottom: 0;
   }
 
+  // Fix the padding added by the .fa icon rule
+  .fa:before {
+    padding-right: 0;
+  }
+
   .promo-rule-option-value {
     position: relative;
     padding-bottom: 10px;
@@ -41,7 +47,7 @@
     .remove {
       cursor: pointer;
       position: absolute;
-      right: 10px;
+      right: 0;
       top: 10px;
 
       &:hover {
@@ -118,8 +124,8 @@
 
   a.delete {
     position: absolute;
-    top: 3px;
-    right: 5px;
+    top: 1.25rem;
+    right: 1.25rem;
     cursor: pointer;
 
     &:hover {
@@ -130,12 +136,14 @@
 
 .promotion-title {
   text-align: left;
-  font-size: 85%;
+  font-size: 1rem;
   border-bottom: 1px solid $color-border;
-  padding: 0 10px;
+  padding: 0.75rem 0;
+  margin-bottom: 0.75rem;
 
   &.no-text {
     border: none;
     padding-bottom: 0;
+    margin-bottom: 0.25rem;
   }
 }

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

@@ -1,9 +1,3 @@
-#sc_memo_edit_form {
-  #store_credit_memo {
-    width: 100%;
-  }
-}
-
 #sc-detail-table {
   tr {
     &:hover {
@@ -16,3 +10,20 @@
     }
   }
 }
+
+.store-credit-memo-row {
+  &.editing {
+    .store-credit-memo-text,
+    .edit-memo {
+      display: none;
+    }
+  }
+
+  &:not(.editing) {
+    .store-credit-memo-form,
+    .save-memo,
+    .cancel-memo {
+      display: none;
+    }
+  }
+}

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

@@ -37,8 +37,10 @@
     text-transform: capitalize;
 
     > li {
-      @include margin(0.5rem null);
-      @include padding(0.75rem null);
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
+      padding-top: 0.75rem;
+      padding-bottom: 0.75rem;
 
       &:not(:first-of-type) {
         border-top: 1px solid $color-style-guide-nav-border;
@@ -67,7 +69,8 @@
   }
 
   &-section-header {
-    @include margin(7rem 0 3rem);
+    margin: 7rem 0 3rem;
+
     border-bottom: 1px solid $color-style-guide-section-border;
     font-size: 1.5rem;
     font-weight: bold;
@@ -77,7 +80,8 @@
 
     span {
       background: $body-bg;
-      @include padding(null 0.5em);
+      padding-left: 0.5em;
+      padding-right: 0.5em;
     }
 
     a {

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

@@ -8,21 +8,13 @@
 
   ul {
     min-height: 0.5em;
+    margin-bottom: 1.5em;
   }
 
-  .ui-sortable {
-    margin-bottom: 0.5em;
-  }
-
-  .taxon,
-  .sortable-placeholder {
+  .taxon {
     border-radius: $border-radius;
   }
 
-  .sortable-placeholder {
-    margin: 0.5em 0;
-  }
-
   .taxon {
     background-color: very-light($color-3);
     border: 1px solid $color-border;
@@ -35,19 +27,13 @@
     }
 
     i {
-      @include margin(null 4px 0 6px);
+      margin-right: 4px;
+      margin-bottom: 0;
+      margin-left: 6px;
     }
 
     .actions a {
       margin-left: 8px;
     }
   }
-
-  .ui-sortable-over {
-    padding-bottom: 1em;
-  }
-
-  .ui-sortable-handle:first-child {
-    margin-top: 1em;
-  }
 }

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

@@ -0,0 +1,5 @@
+.variant-autocomplete-item {
+  .media-left {
+    padding: map-get($spacers, 2) $spacer 0 0;
+  }
+}

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

@@ -41,22 +41,14 @@ textarea {
 }
 
 label {
-  font-weight: $font-weight-bold;
-  font-size: 90%;
-  display: inline;
-  margin-bottom: 5px;
-
-  &.inline {
-    display: inline-block !important;
-  }
-
-  &.block {
-    display: block !important;
-  }
-
   &.required:after {
     content: " *";
   }
+
+  input[type="radio"],
+  input[type="checkbox"] {
+    margin-right: 0.25rem;
+  }
 }
 
 .label-block label { display: block }
@@ -100,7 +92,7 @@ span.info {
   padding: 10px 0;
 
   &.checkbox {
-    min-height: 73px;
+    min-height: 5.9rem;
     display: flex;
     align-items: center;
 
@@ -111,22 +103,23 @@ span.info {
 
     label {
       cursor: pointer;
-      display: block;
+      margin-top: 2.25rem;
     }
   }
 
   ul {
     list-style: none;
-    margin: 5px 0;
+    margin: 0.5rem 0;
     padding-left: 0;
 
     li {
       display: inline-block;
-      padding-right: 10px;
+      padding-right: 1rem;
 
       label {
         font-weight: normal;
         text-transform: none;
+        margin-bottom: 0;
       }
 
       &.white-space-nowrap {
@@ -167,6 +160,9 @@ fieldset {
 
   &.no-border-bottom {
     border-bottom: none;
+  }
+
+  &.no-margin-bottom {
     margin-bottom: 0;
   }