spree_admin 5.0.0.rc1

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

@@ -0,0 +1,58 @@
+#itemImgContainer {
+  width: 200px;
+  img {
+    max-width: 100%;
+  }
+}
+
+#sortableTreeArea {
+  .space-buttons {
+    box-shadow: -11px 0 16px 6px white;
+    z-index: 9;
+    a {
+      margin: 2px;
+    }
+  }
+
+  .sortable-tree-item-row {
+    margin: 2px;
+    background-color: white;
+  }
+
+  .sortable-tree-item {
+    border: solid 1px transparent;
+    padding: 0;
+
+    [data-sortable-tree-parent-id-value] {
+      margin-left: 25px;
+    }
+
+    @include media-breakpoint-up(sm) {
+      [data-sortable-tree-parent-id-value] {
+        margin-left: 50px;
+      }
+    }
+  }
+
+  .sortable-chosen {
+    border: 1px dashed var(--gray);
+    border-radius: 5px;
+  }
+
+  .item_image_holder {
+    position: relative;
+    border: 1px solid $border-color;
+    border-radius: 7px;
+    overflow: hidden;
+    width: 45px;
+    height: 45px;
+    img {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      height: 100%;
+      width: auto;
+      transform: translate(-50%,-50%);
+    }
+  }
+}

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

@@ -0,0 +1,187 @@
+.list-group, .table {
+  color: $gray-800;
+}
+
+.filter-wrap {
+  padding: 0.5rem;
+  border-bottom: 1px solid $gray-50;
+}
+
+#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;
+
+  th {
+    border-top: 0;
+    @extend .text-nowrap;
+    border-bottom: 0;
+
+    &.handel-head {
+      width: 50px;
+    }
+    a.sort_link {
+      white-space: nowrap;
+    }
+  }
+
+  td.move-handle {
+    width:45px;
+  }
+
+  td > a:not(.btn):not(.text-primary) {
+    @extend .text-dark;
+  }
+
+  thead {
+    th {
+      @extend .text-muted;
+      font-size: $font-size-sm;
+      vertical-align: middle;
+      font-weight: 400;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+  }
+
+  tbody {
+    tr {
+      td {
+        vertical-align: middle;
+        .filterable {
+          margin-left: .2em;
+          cursor: pointer;
+          width: 0.9rem;
+          height:0.9rem;
+          opacity: 0.25;
+          &:hover {
+            opacity: 1;
+          }
+        }
+
+        a:hover {
+          text-decoration: none;
+        }
+      }
+
+      &.active {
+        td {
+          background-color: theme-color('action');
+          border-color: theme-color('action-border');
+        }
+      }
+    }
+
+    tr:hover:not(.active) {
+      td {
+        background-color: $gray-25;
+      }
+    }
+
+    tr:last-child {
+      td:first-child {
+        border-bottom-left-radius: $border-radius-lg;
+      }
+      td:last-child {
+        border-bottom-right-radius: $border-radius-lg;
+      }
+    }
+  }
+
+  tr > td:first-child, tr > th:first-child {
+    padding-left: 1rem;
+  }
+  tr > td:last-child, tr > th:last-child {
+    padding-right: 1rem;
+  }
+}
+
+.table-active-filters {
+  padding: 0.75rem;
+
+  &:not(:has(:first-child)) {
+    display: none;
+  }
+
+  .js-filter {
+    .icon {
+      cursor: pointer;
+    }
+  }
+
+  .badge-secondary {
+    .icon {
+      filter: invert(1);
+    }
+  }
+
+  .badge {
+    display: inline-block;
+    margin-right: .5em;
+    margin-bottom: .5em;
+
+    &:hover {
+      opacity: .8;
+    }
+  }
+}
+
+.table-responsive tr td, .table-responsive tr th {
+  white-space: nowrap;
+}
+
+.table-responsive.border {
+  border-color: $table-border-color !important;
+}
+
+.table-responsive:has(.dropdown.show) {
+  overflow: visible;
+}
+
+.sortable-drag-v {
+  border: 1px solid theme-color('info');
+  border-radius: $border-radius;
+  width:100%;
+  text-align: right;
+  opacity: 0;
+  td {
+    border-top: none;
+    opacity:0;
+    &:first-child {
+    opacity: 1;
+    }
+  }
+}
+
+td.actions {
+  @extend .text-right;
+
+  .btn {
+    @extend .text-nowrap;
+  }
+
+  .btn:not(.btn-sm) {
+    @extend .py-2;
+  }
+  .btn-sm {
+    @extend .py-1;
+  }
+}
+
+.select2-container--open {
+  z-index: 1060;
+}
+
+.bulk-edit-panel {
+  top: 59px;
+
+  @media (min-width: 768px) {
+    top: 0px;
+  }
+}

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

@@ -0,0 +1,203 @@
+.variants-form {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  .options-creator {
+    margin: 1rem;
+    padding: 0.5rem;
+    border: 1px solid $border-color;
+    border-radius: $border-radius;
+
+    &:not(:has(.options-creator__options_container .options-creator__option)) {
+      margin: 0;
+      border: none;
+      
+      .options-creator__option--new {
+        padding-left: 1rem;
+      }
+    }
+    &:has(.options-creator__option--new:not(.d-none)) {
+      border: 1px solid $border-color;
+      border-radius: $border-radius;
+      margin: 1rem;
+      margin-bottom: 1rem;
+    }
+
+    &__option {
+      display: flex;
+      border-bottom: 1px solid $border-color;
+      padding: 1rem 0rem;
+
+      .label {
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+        display: inline-block;
+      }
+
+      .draggable {
+        @extend .btn;
+        @extend .px-2;
+        @extend .py-0;
+        @extend .mr-3;
+        cursor: grab !important;
+        padding-right: 1rem;
+        align-items: center;
+        justify-content: center;
+        min-width: calc(16px + 1rem);
+
+        i {
+          margin-right: 0;
+        }
+
+        &:hover {
+          background-color: $gray-25;
+        }
+      }
+
+      &--new {
+        padding-left: calc(1.13px + 3.25rem);
+
+        .values-inputs {
+          display: flex;
+          flex-direction: column;
+          gap: 0.25rem;
+        }
+      }
+
+      &--form {
+        @extend .options-creator__option--new;
+      }
+    }
+    &__option:first-child {
+      border-top: 0;
+    }
+
+    .new_option_button {
+      @extend .btn;
+      @extend .btn-link;
+      @extend .py-3;
+      @extend .mt-2;
+      width: 100%;
+      justify-content: flex-start;
+    }
+  }
+
+  .variants-table {
+    display: flex;
+    flex-direction: column;
+
+    .column-checkbox,
+    .column-variant,
+    .column-price,
+    .column-quantity,
+    .column-actions {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .column-checkbox {
+      justify-content: center;
+      flex-grow: 0;
+      flex-basis: 2rem;
+    }
+    .column-variant {
+      user-select: none;
+      flex-grow: 3;
+      flex-basis: 0;
+    }
+    .column-price {
+      flex-grow: 1;
+      flex-basis: 0;
+    }
+    .column-actions {
+      flex-grow: 0;
+      flex-basis: 5rem;
+    }
+    .column-quantity {
+      justify-content: space-between;
+      width: 100%;
+      line-height: 28px;
+      flex-grow: 1;
+      flex-basis: 0;
+    }
+
+    .delete-button {
+      @extend .btn;
+      @extend .btn-danger;
+      @extend .btn-sm;
+    }
+
+    &__actions {
+      display: none;
+      width: 100%;
+      justify-content: flex-end;
+      padding: 1rem;
+      padding-top: 0;
+
+      &:has(*) {
+        display: flex;
+      }
+
+      &__select {
+        width: min-content;
+        padding-right: 1.75rem;
+      }
+    }
+
+    &__header,
+    &__footer {
+      display: flex;
+      @extend .text-muted;
+      width: 100%;
+      padding: 0 1rem;
+      gap: 0.25rem;
+
+      &__cell {
+        display: inline-block;
+      }
+    }
+
+    &__footer {
+      background-color: $gray-25;
+      justify-content: center;
+      align-items: center;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      border-radius: $border-radius;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: $border-radius-lg;
+      border-bottom-right-radius: $border-radius-lg;
+    }
+
+    &__body {
+      display: flex;
+      flex-direction: column;
+
+      &__row {
+        padding: 0 1rem;
+        width: 100%;
+        display: flex;
+        gap: 0.25rem;
+
+        border-bottom: 1px solid $border-color;
+
+        &.nested {
+          .column-checkbox,
+          .column-variant {
+            left: 1.25rem;
+            position: relative;
+          }
+          .column-variant {
+            width: calc(100% - 1.25rem);
+          }
+        }
+      }
+      &__cell {
+        padding: 0.5rem 0;
+        display: block;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,190 @@
+// https://github.com/twbs/bootstrap/blob/v4.6.2/scss/_variables.scss
+
+$gray-25: #F9F9F9;
+$gray-50: #F3F3F3;
+$gray-75: #F0F0F0;
+$gray-100: #EAEAEA !default;
+$gray-150: #E0E0E0 !default;
+$gray-200: #D5D5D5 !default;
+$gray-300: #B3B3B3 !default;
+$gray-400: #999999 !default;
+$gray-500: #808080 !default;
+$gray-600: #666666 !default;
+$gray-700: #4D4D4D !default;
+$gray-800: #333333 !default;
+$gray-900: #1A1A1A !default;
+
+$light: $gray-50 !default;
+
+$primary: #061932 !default;
+$black: #000000 !default;
+$blue: #0077ff !default;
+$white: #FFFFFF !default;
+
+$theme-colors: (
+  "white": $white,
+  "black": $black,
+  "primary": $primary,
+  "secondary": rgba($blue, 0.1),
+  "action": #f1faff,
+  "action-border": #e2ecff,
+  "active": $gray-25,
+  "partial": #E2E8F0,
+  "warning": #ffe17d,
+  "danger": #ee4266,
+  "info": #44c1ff,
+  "blue": $blue,
+  "gray-100": $gray-100,
+  "gray-200": $gray-200,
+  "gray-300": $gray-300,
+  "gray-400": $gray-400,
+  "gray-500": $gray-500,
+  "gray-600": $gray-600,
+  "gray-700": $gray-700,
+  "gray-800": $gray-800,
+  "gray-900": $gray-900,
+  "mint": #C7E15A
+);
+
+$body-color: #333 !default;
+$body-bg: #FCFCFC !default;
+$enable-shadows: false;
+$enable-responsive-font-sizes: true;
+$font-family-sans-serif: Inter, sans-serif !default;
+$font-size-base:   0.813rem !default;
+$font-size-plus:   0.875rem !default;
+$font-size-sm:    0.75rem !default;
+$font-size-lg:    1rem !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold:            600 !default;
+$headings-font-family: $font-family-sans-serif;
+$line-height-base:            1.5 !default;
+$border-radius: 0.5rem !default;
+$border-radius-sm: 0.4rem !default;
+$border-radius-lg: 0.75rem !default;
+$card-border-radius: $border-radius-lg !default;
+$border-color: $gray-100 !default;
+$input-border-color: $gray-100 !default;
+$list-group-border-color: $border-color !default;
+$list-group-hover-bg: $gray-25 !default;
+$thumbnail-border-color: $gray-100 !default;
+$hr-border-color: $border-color !default;
+$table-border-color: $gray-50 !default;
+$card-border-color: $border-color !default;
+$input-btn-focus-width: 0.15rem !default;
+
+$card-spacer-y:                     .75rem !default;
+$card-spacer-x:                     1rem !default;
+
+$component-active-bg:         $blue !default;
+
+$input-placeholder-color: $gray-500;
+$input-padding-y:         .5rem !default;
+$input-disabled-bg: $gray-50 !default;
+$custom-select-disabled-bg: $gray-50 !default;
+
+$text-muted: $gray-400 !default;
+
+$link-color: $primary !default;
+$link-hover-decoration:                   underline !default;
+
+$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .025) !default;
+$btn-disabled-opacity: 0.3 !default;
+
+$nav-link-padding-y:                .5rem !default;
+$nav-link-padding-x:                .6rem !default;
+
+$box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06) !default;
+$box-shadow-xs: rgba(43, 34, 51, 0.04) 0px 1px 2px !default;
+$box-shadow-lg: rgba(0, 5, 13, 0.5) 0px 4px 8px 2px;
+
+$tooltip-border-radius: $border-radius-sm !default;
+$tooltip-opacity: 1 !default;
+$tooltip-margin:                    0.25rem 0 !default;
+$tooltip-padding-y:                 .5rem !default;
+$tooltip-padding-x:                 .75rem !default;
+$tooltip-bg: $white !default;
+$tooltip-color: $body-color !default;
+$tooltip-arrow-color: transparent !default;
+$tooltip-max-width: 210px !default;
+
+$transition-base:             all .1s ease-in-out !default;
+$transition-fade:             opacity .15s linear !default;
+$transition-collapse:         height .15s ease !default;
+$transition-collapse-width:   width .15s ease !default;
+
+$badge-font-size:                   0.70rem !default;
+$badge-font-weight:                 500 !default;
+$badge-padding-y:                   .25em !default;
+$badge-padding-x:                   .45em !default;
+$badge-border-radius:               $border-radius-sm !default;
+
+$transition-collapse:         height .15s ease !default;
+
+$link-hover-decoration:                   none !default;
+
+$headings-line-height: 1 !default;
+
+$h1-font-size:                $font-size-base * 2.5 !default;
+$h2-font-size:                $font-size-base * 2 !default;
+$h3-font-size:                1.5rem !default;
+$h4-font-size:                1.25rem !default;
+$h5-font-size:                $font-size-lg !default;
+$h6-font-size:                $font-size-base !default;
+
+$display1-size:               7rem !default;
+$display2-size:               5rem !default;
+$display3-size:               4rem !default;
+$display4-size:               3.5rem !default;
+$display1-weight:             400 !default;
+$display2-weight:             400 !default;
+$display3-weight:             400 !default;
+$display4-weight:             400 !default;
+
+$dropdown-border-width:  0px !default;
+$dropdown-border-radius: $border-radius-lg !default;
+$dropdown-link-hover-bg: $blue !default;
+$dropdown-link-hover-color: $white !default;
+$dropdown-box-shadow:    rgba(209, 217, 224, 0.8) 0px 0px 0px 1px, rgba(37, 41, 46, 0.04) 0px 6px 12px -3px, rgba(37, 41, 46, 0.12) 0px 6px 18px 0px !default;
+$dropdown-padding-x:    0.25rem !default;
+$dropdown-padding-y:    0.25rem !default;
+$dropdown-divider-bg: $gray-25 !default;
+$dropdown-divider-margin-y: 0.25rem !default;
+$dropdown-header-color: $gray-500 !default;
+
+$modal-backdrop-bg:                 $white !default;
+$modal-backdrop-opacity:            0.8 !default;
+$modal-content-border-color: $border-color !default;
+$modal-header-padding: 1rem 1.25rem 1rem 1.25rem !default;
+$modal-inner-padding: 1rem 1.25rem 1rem 1.25rem !default;
+$modal-fade-transform:              translate(0, 0) !default;
+$modal-show-transform:              none !default;
+$modal-transition:                  transform .2s ease-out !default;
+$modal-scale-transform:             scale(1.02) !default;
+$modal-content-border-width: 0px !default;
+$modal-header-border-width: 1px !default;
+$modal-content-box-shadow-xs: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 8px 16px -4px, rgba(0, 0, 0, 0.06) 0px 24px 32px -8px !default;
+$modal-content-box-shadow-sm-up: $modal-content-box-shadow-xs !default;
+$modal-footer-margin-between: 0 !default;
+
+$alert-padding-y:                   0.5rem !default;
+$alert-padding-x:                   1rem !default;
+$alert-border-radius: $border-radius-lg;
+
+$embed-responsive-aspect-ratios: (
+    (21 9),
+    (16 9),
+    (9 16),
+    (4 3),
+    (1 1)
+) !default;
+
+// tables
+$table-cell-padding: .75rem .50rem !default;
+
+$code-color: $gray-600 !default;
+
+$list-group-bg: transparent !default;
+$list-group-item-padding-x:         1rem !default;
+
+$sidebar-width: 220px !default;