spree_admin 5.1.8 → 5.2.0.rc1

data/app/assets/stylesheets/spree/admin/components/_dropdowns.scss

@@ -20,34 +20,41 @@
   }
 }
 
-.dropdown-menu {
+.dropdown-menu, .dropdown-container {
   margin-top: 0.25rem !important;
   overflow: hidden !important;
   box-shadow: $dropdown-box-shadow;
+  border-radius: $dropdown-border-radius;
+  box-shadow: $dropdown-box-shadow;
+  background-color: $dropdown-bg;
+  z-index: $zindex-dropdown;
+  min-width: $dropdown-min-width;
+  padding: $dropdown-padding-y $dropdown-padding-x;
+  font-size: $dropdown-font-size;
+  color: $dropdown-color;
 
   .dropdown-item, .dropdown-header {
-    padding-top: $input-btn-padding-y;
-    padding-bottom: $input-btn-padding-y;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+    padding-top: $dropdown-item-padding-y;
+    padding-bottom: $dropdown-item-padding-y;
+    padding-left: $dropdown-item-padding-x;
+    padding-right: $dropdown-item-padding-x;
   }
   .dropdown-header {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+    margin-bottom: 0.25rem;
+    margin-top: 0.25rem;
   }
 
   .dropdown-item {
     margin-bottom: 0.25rem;
-    border-radius: $border-radius;
+    border-radius: $dropdown-inner-border-radius;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     background: transparent;
-    padding-top: 0.4rem;
-    padding-bottom: 0.4rem;
-    margin-bottom: 0.15rem;
 
-    color: $gray-700;
+    transition-property: background-color, color;
+    transition-duration: 0.01s;
+    transition-timing-function: ease;
 
     &:hover {
       background-color: $dropdown-link-hover-bg;
@@ -77,7 +84,7 @@
       content: '';
       display: inline-block;
       position: absolute;
-      right: 0.5rem;
+      right: 0.75rem;
       width: 1rem;
       height: 1rem;
       background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-check text-primary"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10"/></svg>') no-repeat center center;
@@ -92,12 +99,31 @@
   }
   .dropdown-header {
     font-weight: $font-weight-base;
+    font-size: $font-size-base;
   }
 
   .dropdown-item:last-child {
     margin-bottom: 0px;
   }
 }
+// new non-bootstrap dropdowns
+.dropdown-container {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  animation: fadeIn 0.15s ease-in-out;
+  transform-origin: top right;
+
+  &.dropdown-container-left {
+    left: 0;
+    right: auto;
+  }
+  &.dropdown-container-top {
+    top: auto;
+    bottom: 100%;
+    height: auto;
+  }
+}
 
 .dropdown-toggle {
   &:after {

data/app/assets/stylesheets/spree/admin/components/_filters.scss

@@ -1,17 +1,16 @@
 .filter-wrap {
-  padding: 0.5rem;
+  padding: 0.55rem;
   border-bottom: 1px solid $table-border-color;
-  gap: 0.5rem;
+  gap: 0.55rem;
   position: sticky;
   top: $header-height;
   z-index: 1000;
   background-color: $card-bg;
-  border-top-left-radius: $border-radius-lg;
-  border-top-right-radius: $border-radius-lg;
+  border-top-left-radius: $card-border-radius;
+  border-top-right-radius: $card-border-radius;
 
   .btn {
     height: 2.125rem;
-    border-style: dashed;
   }
 }
 
@@ -22,11 +21,30 @@
 }
 
 #table-filter {
-  padding: 0.75rem;
-  border-radius: $border-radius;
-  border: 1px solid $gray-50;
-  background-color: $gray-25;
+  position: absolute;
+  padding: 1rem;
+  border-radius: $dropdown-border-radius;
+  box-shadow: $dropdown-box-shadow;
+  background-color: $dropdown-bg;
   margin-top: 0.5rem;
+  right: 0.5rem;
+  animation: fadeIn 0.2s ease-in-out;
+  width: 100%;
+  z-index: $zindex-dropdown;
+
+  @include media-breakpoint-up(md) {
+    width: 50%;
+
+    flex-direction: column;
+  }
+
+  &.hidden {
+    display: none !important;
+  }
+  
+  &.d-none {
+    display: none !important;
+  }
 }
 
 
@@ -51,7 +69,7 @@ i.js-delete-filter {
   }
 
   &.asc, &.desc {
-    font-weight: $font-weight-bold;
+    font-weight: $font-weight-medium;
     svg {
       color: $gray-600 !important;
     }

data/app/assets/stylesheets/spree/admin/components/_main.scss

@@ -3,14 +3,10 @@
 }
 
 #page-header {
-  height: 70px;
+  height: 80px;
   display: flex;
   align-items: center;
   background-color: $body-bg;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  border-bottom: 1px solid $border-color;
-  margin-bottom: 1rem;
 
   &.sticky-top {
     padding-left: 1rem;
@@ -18,6 +14,32 @@
     animation: slideDown 0.3s ease-out;
     height: $header-height;
     border-bottom: 1px solid $border-color;
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
+#settings-header {
+  height: $header-height;
+  background-color: $header-bg;
+  z-index: 1000;
+  position: sticky;
+  top: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 0;
+
+  #page-header {
+    margin-bottom: 0;
+    height: $header-height;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    max-width: 100%;
+    border-bottom: 1px solid $border-color;
+  }
+
+  #page-tabs {
+    border-bottom: 1px solid $border-color;
   }
 }
 
@@ -26,10 +48,6 @@
 }
 
 #page-tabs {
-  border-bottom: 1px solid $border-color;
-  margin-bottom: 1rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
   margin-top: -1rem;
 
   .nav {
@@ -65,8 +83,7 @@
   background-color: $sidebar-bg;
   width: $sidebar-width;
   border-right: 1px solid $border-color;
-  border-bottom: 1px solid $border-color;
-  height: $header-height;
+  height: calc($header-height + 1px);
 }
 
 .store-dropdown-button {
@@ -123,7 +140,6 @@
   overflow-x: hidden;
   position: fixed;
   top: $header-height;
-  color: $gray-600;
   padding-top: 0.8rem;
 
   @media (max-width: 992px) {
@@ -139,7 +155,7 @@
   }
 
   .nav-link {
-    border-radius: $border-radius;
+    border-radius: $nav-pills-border-radius;
     display: flex;
     align-items: center;
     padding-left: 0.35rem;
@@ -148,10 +164,12 @@
     padding-bottom: 0.35rem;
     color: inherit;
 
+    transition: background-color 0.1s ease-in-out;
+
     .ti {
       font-size: 1.125rem !important;
       margin-right: 0.5rem;
-      border-radius: $border-radius-sm;
+      border-radius: $border-radius;
       padding: 0.2rem 0.2rem;
     }
 
@@ -165,13 +183,12 @@
     &.active {
       color: theme-color('primary');
       background-color: $white;
-      box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px, rgba(0, 0, 0, 0.02) 0px 2px 4px 0px;
-      font-weight: 500;
+      box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px -1px, rgba(0, 0, 0, 0.02) 0px 2px 4px 0px;
+      font-weight: $font-weight-medium;
 
       .ti {
         background-color: theme-color('primary');
         color: $white;
-        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px, rgba(0, 0, 0, 0.02) 0px 2px 4px 0px;
       }
     }
 
@@ -260,6 +277,8 @@
   font-size: $font-size-sm;
   padding: 0.5rem 1rem;
   margin: 0.75rem;
+  border-width: 1px;
+  box-shadow: $box-shadow-xs;
   p {
     margin-bottom: 0.5rem;
   }

data/app/assets/stylesheets/spree/admin/components/_media_form.scss

@@ -7,15 +7,23 @@
   overflow: hidden;
   border-radius: $border-radius-lg;
   border: 1px dashed $border-color;
-  background-color: rgba($gray-25, 0.5);
+  background-color: $light;
   padding: 0.5rem;
   cursor: pointer;
   color: $gray-500;
 
+  transition-property: background-color, border-color, color;
+  transition-duration: 0.5s;
+  transition-timing-function: ease;
+
   &:hover {
     background-color: $action;
-    border-color: rgba($blue, 0.5);
-    color: rgba($blue, 0.8);
+    border-color: rgba($blue, 0.25);
+    color: rgba($primary, 0.75);
+
+    .text-muted {
+      color: rgba($primary, 0.5) !important;
+    }
   }
 
   &:active {

data/app/assets/stylesheets/spree/admin/components/_modals.scss

@@ -18,7 +18,7 @@ body.modal-open {
 
   .modal-title {
     margin-bottom: 0;
-    font-weight: $font-weight-bold;
+    font-weight: $font-weight-medium;
   }
 
   .btn-close {

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

@@ -12,7 +12,6 @@
   position: relative;
   transition: background 0.15s, color 0.1s;
   will-change: background, color;
-  color: $gray-700;
 
   &:hover {
     color: theme-color('primary');

data/app/assets/stylesheets/spree/admin/components/_search_picker.scss

@@ -1,13 +1,5 @@
 .search-results {
-  @extend .overflow-y-auto;
-
   height: 250px;
-  overflow-x: hidden;
-  padding-left: 1.25rem;
-  padding-right: 0.25rem;
-  margin-right: 1rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
 }
 
 .search-picker__option {

data/app/assets/stylesheets/spree/admin/components/_sortable_tree.scss

@@ -39,7 +39,8 @@
     border-color: transparent !important;
     .sortable-tree-item-row {
       background-color: $action !important;
-      border: 1px dashed rgba($blue, 0.5) !important;
+      border: 2px solid $blue !important;
+      margin: -1px;
     }
   }
 

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

@@ -7,14 +7,6 @@
   margin-right: auto;
 }
 
-#table-filter {
-  padding: 0.75rem;
-  border-radius: $border-radius;
-  border: 1px solid $gray-50;
-  background-color: $gray-25;
-  margin-top: 0.5rem;
-}
-
 table.table {
   margin-bottom: 0;
 
@@ -41,19 +33,19 @@ table.table {
 
   thead {
     th {
-      background-color: rgba($gray-25, 0.5);
+      background-color: $light;
       @extend .text-muted;
-      font-size: $font-size-sm;
+      font-size: $font-size-base;
       font-weight: $font-weight-normal;
       vertical-align: middle;
-      padding-top: 0.3rem;
-      padding-bottom: 0.3rem;
+      padding-top: 0.45rem;
+      padding-bottom: 0.45rem;
     }
     th:first-child {
-      border-top-left-radius: $border-radius-lg;
+      border-top-left-radius: $card-border-radius;
     }
     th:last-child {
-      border-top-right-radius: $border-radius-lg;
+      border-top-right-radius: $card-border-radius;
     }
   }
 
@@ -87,16 +79,16 @@ table.table {
 
     tr:hover:not(.active):not(.sortable-chosen) {
       td {
-        background-color: $gray-25;
+        background-color: rgba($gray-25, 0.75);
       }
     }
 
     tr:last-child {
       td:first-child {
-        border-bottom-left-radius: $border-radius-lg;
+        border-bottom-left-radius: $card-border-radius;
       }
       td:last-child {
-        border-bottom-right-radius: $border-radius-lg;
+        border-bottom-right-radius: $card-border-radius;
       }
     }
   }
@@ -194,13 +186,15 @@ td.actions {
 }
 
 .card-lg {
-  table {
-    thead {
-      th:first-child {
-        border-top-left-radius: 0;
-      }
-      th:last-child {
-        border-top-right-radius: 0;
+  .with-filters, turbo-frame {
+    table {
+      thead {
+        th:first-child {
+          border-top-left-radius: 0;
+        }
+        th:last-child {
+          border-top-right-radius: 0;
+        }
       }
     }
   }
@@ -215,8 +209,8 @@ td.actions {
   bottom: 0;
   background-color: $card-bg;
   z-index: 100;
-  border-bottom-left-radius: $border-radius-lg;
-  border-bottom-right-radius: $border-radius-lg;
+  border-bottom-left-radius: $card-border-radius;
+  border-bottom-right-radius: $card-border-radius;
 
   .page-link {
     @extend .btn;

data/app/assets/stylesheets/spree/admin/components/_tooltips.scss

@@ -0,0 +1,20 @@
+.tooltip-container {
+  position: absolute;
+  display: none;
+  opacity: 1 !important; // Ensure fully opaque
+  pointer-events: none;
+  z-index: $zindex-tooltip;
+  background-color: $tooltip-bg;
+  color: $tooltip-color;
+  border: 0 none;
+  box-shadow: 0px 0px 0px 1px $border-color, 0px 3px 6px -1px rgba($gray-300, 0.35), 0px 3px 6px 0px rgba($gray-300, 0.35);
+  border-radius: $tooltip-border-radius;
+  padding: $tooltip-padding-y $tooltip-padding-x;
+  font-size: $font-size-base !important;
+  font-weight: $font-weight-normal !important;
+  max-width: $tooltip-max-width;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  text-wrap: wrap;
+}

data/app/assets/stylesheets/spree/admin/components/_variants_form.scss

@@ -32,7 +32,7 @@
 
       .label {
         margin-bottom: 0.5rem;
-        font-weight: 500;
+        font-weight: $font-weight-medium;
         display: inline-block;
       }
 
@@ -79,7 +79,7 @@
 
     .new_option_button {
       @extend .btn;
-      @extend .btn-link;
+      @extend .btn-secondary;
       @extend .py-3;
       @extend .mt-2;
       width: 100%;
@@ -156,6 +156,7 @@
       width: 100%;
       padding: 0 1rem;
       gap: 0.25rem;
+      background-color: rgba($gray-25, 0.5);
 
       &__cell {
         display: inline-block;
@@ -163,7 +164,6 @@
     }
 
     &__footer {
-      background-color: $gray-25;
       justify-content: center;
       align-items: center;
       padding-top: 0.5rem;

data/app/assets/stylesheets/spree/admin/components/_wizard.scss

@@ -0,0 +1,27 @@
+.admin-wizard {
+  .store-dropdown {
+    border-bottom: 1px solid $border-color;
+  }
+
+  h1 {
+    margin-bottom: 1.5rem;
+  }
+
+  footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    border-top: 1px solid $border-color;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    background-color: $gray-25;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    z-index: 1000;
+  }
+}