spree_backend 4.1.15 → 4.2.0.beta

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

@@ -1,39 +1,57 @@
 table.table {
   font-size: $font-size-sm;
 
+  .move-handle {
+    cursor: grab;
+  }
+
+  th {
+    padding: 0.5rem;
+
+    &.handel-head {
+      width: 50px;
+    }
+    a.sort_link {
+      white-space: nowrap;
+    }
+  }
+
+  td {
+    padding: 0.5rem;
+  }
+
+  .badge {
+    font-size: 0.85em;
+  }
+
   thead {
     th {
       text-transform: uppercase;
       font-size: $small-font-size;
+      padding: 0.5rem;
       padding-top: 14px;
       padding-bottom: 14px;
       vertical-align: top;
       border-top: 0;
-
-      a {
-        .glyphicon {
-          padding-left: 5px;
-        }
-      }
     }
   }
 
   tbody {
     tr {
+      background: white;
       td {
         vertical-align: middle;
-
         .filterable {
-          font-size: .8em;
           margin-left: .2em;
-          color: white; // hidden, but space is reserved for the icon
           cursor: pointer;
+          width: 0.9rem;
+          height:0.9rem;
+          opacity: 0.25;
+          &:hover {
+            opacity: 1;
+          }
         }
       }
-
-      &:hover td .filterable {
-        color: #666;
-      }
     }
   }
 }
@@ -42,6 +60,18 @@ table.table {
   display: none;
   margin: -.5em 0 .9em;
 
+  .js-filter {
+    .icon {
+      cursor: pointer;
+    }
+  }
+
+  .badge-secondary {
+    .icon {
+      filter: invert(1);
+    }
+  }
+
   .badge {
     display: inline-block;
     margin-right: .5em;
@@ -50,12 +80,6 @@ table.table {
     &:hover {
       opacity: .8;
     }
-
-    span.icon {
-      margin: .3em 0 0 .6em;
-      font-size: 80%;
-      cursor: pointer;
-    }
   }
 }
 
@@ -95,3 +119,22 @@ table.table {
     border-top: 0;
 	}
 }
+
+div.table-responsive table.table-bordered {
+  border-top: 1px solid $input-border-color !important;
+}
+
+.sortable-drag-v {
+  border: 1px solid $info;
+  border-radius: 5px;
+  width:100%;
+  text-align: right;
+  opacity: 0;
+  td {
+    border-top: none;
+    opacity:0;
+    &:first-child {
+    opacity: 1;
+    }
+  }
+}

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

@@ -1,72 +1,35 @@
 .taxon-products-view {
   ul.taxon {
-    list-style: none;
-    margin-left: -2%;
-    padding: 0;
-    > * {
-      margin-left: 2%;
-    }
+
     li.product {
-      position: relative;
-      float: left;
-      width: 18%;
-      margin-bottom: 2%;
-      padding: 8px 8px 5px 8px;
-      border-radius: 4px;
-      background: #f4f4f4;
-      .well {
-        padding-bottom: 12px;
-      }
-      .sort-handle {
-        position: absolute;
-        top: 14px;
-        left: 16px;
-        color: $gray-500;
-        cursor: move;
-      }
-      .btn-group {
-        display: none;
-        position: absolute;
-        top: 14px;
-        right: 16px;
-        .btn {
-          padding: 2px 7px;
-        }
-        .dropdown-menu {
-          left: auto;
-          right: 0;
-        }
-        a.delete-product {
-          color: red;
-        }
-      }
-      .image {
-	height: 191px;
-        .thumbnail {
-	  max-height: 180px;
-          margin-bottom: 8px;
-          display: inline-block;
-          width: 100%;
-        }
+      list-style: none;
+      .thumbnail {
+        width: 100%;
       }
+
       .product-info {
-        margin-bottom: 0.3em;
-        font-size: 0.9em;
-        div.name {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          font-weight: bold;
-        }
-        div.price {
-          color: $gray-500;
-        }
-      }
-      &:hover {
-        .btn-group {
-          display: inline-block;
-        }
+        font-size: 0.8em;
       }
     }
   }
 }
+
+ul#taxon_products {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+
+  .dropdown-menu {
+    min-width: 8rem;
+  }
+
+  .products-ddb::after {
+    display: none;
+  }
+
+  li.moving-this div.card {
+    border-color: $info;
+  }
+}

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

@@ -6,7 +6,6 @@
   $info:    #48B0F7;
   $warning: #F8D053;
   $danger:  #F55753;
-
   $input-border-color:  darken(#EDEDED, 5);
 
 /*------------------------------------------
@@ -32,3 +31,8 @@
   Forms
   -----------------------------------------*/
   $label-margin-bottom: 0;
+
+/*------------------------------------------
+  Plugins
+  -----------------------------------------*/
+  $select2-icon-size: 0.7rem;

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

@@ -0,0 +1,95 @@
+// Adaptive icon from calendar to close.
+@mixin swith-appended-icon {
+  &:placeholder-shown:not(:focus) + * {
+      @content;
+  }
+}
+
+input.flatpickr-input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: white !important;
+}
+
+.flatpickr-current-month .numInputWrapper {
+  margin-left: 3px;
+  border-radius: $border-radius;
+  overflow: hidden;
+}
+.flatpickr-current-month span.cur-month:hover {
+  background: transparent;
+}
+.numInputWrapper span.arrowUp {
+  border-color: transparent;
+  border-radius: 0;
+}
+.numInputWrapper span.arrowDown {
+  border-color: transparent;
+  border-radius: 0;
+}
+
+.input-group {
+  input.flatpickr-input{
+    @include swith-appended-icon  {
+      opacity: 0;
+    }
+  }
+}
+
+.append_under {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 0;
+  height: 100%;
+}
+
+.flatpickr-day {
+  margin: 2px 0;
+  border-radius: $border-radius ;
+}
+
+// Fix Flatpickr bug where things jusy highlight for no reason.
+input.flatpickr-input[readonly] {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}
+
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+  fill: $primary;
+}
+
+// Force rounded corner for the toggle cal and close icons.
+.input-group >
+.input-group-append:not(:last-child) >
+.force-round {
+  z-index: 5;
+  border-top-right-radius: $border-radius !important;
+  border-bottom-right-radius: $border-radius !important;
+}
+
+div.flatpickr-calendar.open {
+  z-index: $zindex-dropdown;
+}
+
+.flatpickr-time {
+  border-radius: 0 0 5px 5px;
+  &:after {
+    display: none;
+  }
+  .numInputWrapper {
+      span {
+        border-color: transparent;
+        border-radius: 0;
+
+      }
+
+  }
+}

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

@@ -3,120 +3,3 @@
   font-size: $font-size-base;
   font-weight: 400;
 }
-
-#ui-datepicker-div {
-  background-color: white;
-  background-image: none;
-  color: $gray-500;
-  border-color: $input-border-color;
-  width: auto;
-  padding: 20px;
-
-  &.ui-corner-all {
-    border-radius: $border-radius;
-  }
-
-  .ui-datepicker-header {
-    border-radius: 0;
-    border: none;
-    background-image: none;
-    background-color: transparent;
-  }
-
-  .ui-widget-header .ui-icon {
-    background-color: transparent;
-    background-image: none;
-    text-indent: 0;
-    vertical-align: bottom !important;
-    width: 14px;
-    color: $primary;
-
-    &.ui-icon-circle-triangle-w {
-      @extend .glyphicon;
-      @extend .glyphicon-chevron-left;
-    }
-
-    &.ui-icon-circle-triangle-e {
-      @extend .glyphicon;
-      @extend .glyphicon-chevron-right;
-    }
-  }
-
-  .ui-state-hover {
-    border: none;
-    background-image: none;
-    background-color: transparent;
-    transition: color 0.2s ease-in-out;
-    cursor: pointer;
-
-    span.ui-icon {
-      color: $success;
-    }
-  }
-
-  .ui-datepicker-next-hover {
-    right: 2px;
-    top: 2px;
-  }
-
-  .ui-datepicker-prev-hover {
-    left: 2px;
-    top: 2px;
-  }
-
-  .ui-datepicker-title {
-    font-weight: 500;
-    color: $gray-500;
-  }
-
-  table.ui-datepicker-calendar {
-    th {
-      span {
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        color: $primary;
-        font-weight: 500;
-      }
-    }
-
-    td {
-      width: 31px;
-      height: 29px;
-      // transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-
-      .ui-state-default,
-      .ui-widget-content .ui-state-default,
-      .ui-widget-header .ui-state-default {
-        background-color: transparent;
-        background-image: none;
-        border: none;
-        text-align: center;
-        font-weight: 300;
-      }
-
-      .ui-state-highlight {
-        @include button-variant($secondary, $secondary);
-      }
-
-      .ui-state-active {
-        @include button-variant($success, $success);
-
-        &:hover {
-          background-color: darken($success, 7);
-        }
-      }
-
-      &:hover {
-        background-color: $gray-100;
-      }
-
-      &:active {
-        background-color: $success;
-
-        a {
-          color: white;
-        }
-      }
-    }
-  }
-}

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

@@ -1,3 +1,6 @@
+div.select2-drop-mask {
+  z-index: 999;
+}
 .select2-container {
   display: block;
 
@@ -7,6 +10,7 @@
     border-color: $input-border-color;
     background-image: none;
     background-color: $input-bg;
+    color: $gray-700;
 
     &,
     .select2-arrow {
@@ -16,17 +20,20 @@
     .select2-arrow {
       background-image: none;
       background-color: $input-bg;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-left-color: $input-border-color;
+      border:none;
+      width: 30px;
 
       b {
-        background-position: 0 7px;
+        background-image: url(asset-path("backend-chevron-down.svg")) !important;
+        overflow: hidden !important;
+        vertical-align: middle !important;
+        background-repeat: no-repeat !important;
+        background-size: 1rem !important;
+        background-position: 48% !important;
       }
     }
 
     .select2-chosen {
-      line-height: 36px;
       vertical-align: middle;
       display: inline;
     }
@@ -37,13 +44,23 @@
   }
 }
 
+.select2-container-multi .select2-choices .select2-search-field input {
+  color: $gray-700;
+}
+
 .select2-search input {
   border-color: $input-border-color;
   border-radius: $border-radius;
-  background-image: none;
+  background-image: url(asset-path("backend-search.svg")) !important;
+  overflow: hidden !important;
+  vertical-align: middle !important;
+  background-repeat: no-repeat !important;
+  background-size: 1rem !important;
+  background-position: 97% !important;
 }
 
 .select2-drop {
+  z-index: $zindex-dropdown;
   &, &.select2-drop-above {
     border-radius: $border-radius;
     box-shadow: none;
@@ -51,6 +68,11 @@
 }
 
 .select2-container-active {
+  .select2-choice,
+  .select2-choices {
+    border-color: $input-focus-border-color;
+    border-bottom: 1px solid $input-focus-border-color;
+  }
   &, & a {
     box-shadow: none !important;
   }
@@ -61,24 +83,32 @@
   background-image: none;
 }
 
-.select2-dropdown-open.select2-drop-above .select2-choice {
-  border-radius: 0 0 $border-radius $border-radius;
-}
 
-.select2-drop-above,
-.select2-dropdown-open.select2-drop-above .select2-choice,
-.select2-dropdown-open .select2-choice,
-.select2-drop.select2-drop-above.select2-drop-active,
 .select2-drop.select2-drop-active {
-  border-color: lighten($success, 20);
+  border-color: $input-focus-border-color;
+  border-top: 0;
+  border-radius: 0 0  $border-radius $border-radius;
+  margin-top: -6px;
+}
+
+.select2-drop.select2-drop-above.select2-drop-active {
+  border-color: $input-focus-border-color;
+  border-top: 1px solid $input-focus-border-color;
+  border-radius: $border-radius $border-radius 0 0;
+  margin-top: 6px;
 }
 
+.select2-container.select2-drop-above .select2-choice {
+  border-color: $input-focus-border-color !important;
+  border-radius: $border-radius;
+}
 .select2-result-label {
   color: $gray-900;
 }
 
 .select2-results .select2-highlighted {
   background-color: $primary;
+  border-radius: $border-radius;
 
   .select2-result-label {
     color: white;
@@ -87,7 +117,9 @@
 
 .select2-container-multi {
   .select2-choices {
-    line-height: 1.8;
+    min-height: $input-height;
+    border-radius: $border-radius;
+    line-height: 1;
     border-color: $input-border-color;
     background-image: none;
     background-color: $input-bg;
@@ -98,7 +130,6 @@
     .select2-search-choice {
       @extend .badge;
       @extend .badge-info;
-
       box-shadow: none;
       border: none;
       background-image: none;
@@ -106,19 +137,16 @@
       padding: 7px;
 
       .select2-search-choice-close {
-        @extend .glyphicon;
-        @extend .glyphicon-remove;
-
-        background-image: none !important;
-        font-size: 100%;
-        color: white !important;
+        background-image: url(asset-path("backend-cancel.svg")) !important ;
         position: absolute;
         left: 7px;
         top: 7px;
+        background-position: 50% !important;
+
       }
 
       div {
-        padding-left: 15px;
+        padding-left: 17px;
       }
     }
   }
@@ -126,11 +154,32 @@
   &.select2-container-active {
     .select2-choices {
       box-shadow: none;
-      border-color: lighten($success, 20);
+      border-color: $input-focus-border-color;
     }
   }
 }
 
+.select2-search input,
+.select2-search-choice-close,
+.select2-container .select2-choice abbr,
+.select2-container .select2-choice .select2-arrow b {
+    background-size: $select2-icon-size !important;
+}
+
+.select2-container.select2-allowclear .select2-choice abbr{
+  background-image: url(asset-path("backend-cancel.svg")) !important ;
+  overflow: hidden !important;
+  vertical-align: middle !important;
+  background-repeat: no-repeat !important;
+  background-position: 50% !important;
+  right:30px;
+  background-size: $select2-icon-size !important;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
+  background-position: 50% !important;
+}
+
 // Bugfix for required elements
 select.select2[required="required"] {
   display: inline-block !important;

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

@@ -2,10 +2,19 @@
   padding: 0 0 15px 0;
 }
 
+.card {
+  overflow: hidden;
+}
+
 .is-hidden {
   display: none;
 }
 
+.tooltip{
+  pointer-events: none;
+  z-index: $zindex-dropdown;
+}
+
 // No-margin and no-padding helper classes
 @each $side in top bottom left right {
   .no-margin-#{$side}  { margin-#{side}: 0; }
@@ -15,3 +24,34 @@
 .alert-error {
   @extend .alert-danger;
 }
+
+.js-remove-promo-rule-option-value {
+  color: $primary !important;
+  &:hover {
+    color: darken($primary, 10) !important;
+  }
+}
+
+.flash-alert {
+  z-index: 0;
+  opacity: 0;
+  bottom: -50px;
+  left:0;
+  right:0;
+
+  .alert {
+    z-index: 500;
+    opacity: 0.98;
+    border-width: 3px;
+    margin-bottom: 0;
+  }
+}
+
+.flash-alert.animate__animated {
+  opacity: 1;
+  bottom: 30px;
+}
+
+.resize-animation-stopper * {
+  transition: none !important;
+}