spree_admin 5.2.6 → 5.3.0.rc1

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

@@ -1,210 +0,0 @@
-/* Prevent scrolling while dialog is open */
-body:has(dialog[data-dialog-target="dialog"][open]) {
-  // overflow: hidden;
-}
-
-/* Customize the dialog backdrop */
-dialog {
-  box-shadow: 0 0 0 100vw rgba($modal-backdrop-bg, $modal-backdrop-opacity);
-}
-
-dialog:-internal-dialog-in-top-layer::backdrop {
-  background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
-}
-
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-/* Add animations */
-dialog[data-dialog-target="dialog"][open] {
-  animation: fade-in 200ms forwards;
-}
-
-dialog[data-dialog-target="dialog"][closing] {
-  animation: fade-out 200ms forwards;
-}
-
-dialog {
-  display: none;
-  z-index: $zindex-modal;
-  border-radius: $modal-content-border-radius;
-  border: $modal-content-border-width solid $modal-content-border-color;
-  background: $modal-content-bg;
-  box-shadow: $modal-content-box-shadow-xs;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-dialog:open {
-  display: flex;
-}
-
-.drawer {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: auto;
-  height: calc(100dvh - 2rem);
-  max-height: calc(100dvh - 2rem);
-  width: calc(100vw - 2rem);
-  max-width: 600px;
-  min-width: 320px;
-  margin: 1rem;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 0;
-  overflow-y: hidden;
-  overflow-x: hidden;
-
-  .drawer-title {
-    margin-bottom: 0;
-  }
-
-  &:open {
-    display: flex;
-  }
-
-  .alerts-container {
-    position: absolute;
-  }
-
-  @media (max-width: 991.98px) {
-    max-width: 100vw;
-    min-width: 100vw;
-  }
-
-  > turbo-frame:not(#drawer_alerts), turbo-frame > form {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    flex-direction: column;
-    justify-content: space-between;
-    overflow: hidden;
-  }
-
-  .drawer-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: $modal-inner-padding;
-    border-bottom: 1px solid $gray-50;
-  }
-
-  .drawer-body {
-    flex: 1 1 auto;
-    overflow-y: auto;
-    padding: $modal-inner-padding;
-  }
-
-  .drawer-footer {
-    padding: $modal-inner-padding;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-top: 1px solid $gray-50;
-    background-color: $gray-25;
-  }
-}
-// safari fix
-.drawer[open] {
-  display: flex;
-}
-
-// Native Dialog component (centered modal replacement)
-.dialog {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 90%;
-  max-width: 500px;
-  max-height: 90vh;
-  margin: 0;
-  padding: 0;
-  flex-direction: column;
-  overflow-y: hidden;
-  overflow-x: hidden;
-
-  &.dialog-lg {
-    max-width: 800px;
-  }
-
-  &.dialog-xl {
-    max-width: 1140px;
-  }
-
-  &:open {
-    display: flex;
-  }
-
-  .dialog-title {
-    margin-bottom: 0;
-    font-weight: $font-weight-medium;
-  }
-
-  .alerts-container {
-    position: absolute;
-  }
-
-  > turbo-frame:not(#dialog_alerts), turbo-frame > form {
-    display: flex;
-    width: 100%;
-    flex: 1 1 auto;
-    min-height: 0;
-    flex-direction: column;
-  }
-
-  .dialog-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: $modal-inner-padding;
-    border-bottom: 1px solid $gray-50;
-
-    .btn-close {
-      margin-right: -0.25rem;
-    }
-  }
-
-  .dialog-body {
-    flex: 1 1 auto;
-    overflow-y: auto;
-    padding: $modal-inner-padding;
-    max-height: calc(90vh - 200px);
-  }
-
-  .dialog-footer {
-    position: sticky;
-    bottom: 0;
-    padding: $modal-inner-padding;
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    justify-content: space-between;
-    border-top: 1px solid $gray-50;
-    background-color: $gray-25;
-    border-radius: 0 0 $modal-content-border-radius $modal-content-border-radius;
-
-    .btn {
-      display: inline-flex;
-    }
-  }
-}
-// safari fix
-.dialog[open] {
-  display: flex;
-}

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

@@ -1,151 +0,0 @@
-.dropdown .btn .text-muted {
-  color: $gray-500 !important;
-}
-
-.dropdown {
-  .arrow {
-    color: $gray-300;
-  }
-
-  &:hover {
-    .arrow {
-      color: $gray-500;
-    }
-  }
-}
-
-.dropdown.show {
-  .arrow {
-    transform: rotate(3.142rad);
-  }
-}
-
-.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;
-  max-width: 20rem;
-
-  .dropdown-item, .dropdown-header {
-    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 {
-    margin-bottom: 0.25rem;
-    margin-top: 0.25rem;
-  }
-
-  .dropdown-item {
-    margin-bottom: 0.25rem;
-    border-radius: $dropdown-inner-border-radius;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    background: transparent;
-    height: 2rem;
-    padding-right: 2rem;
-
-    transition-property: background-color, color;
-    transition-duration: 0.01s;
-    transition-timing-function: ease;
-
-    &:hover {
-      background-color: $dropdown-link-hover-bg;
-      color: $dropdown-link-hover-color;
-    }
-
-    i {
-      margin-right: 0.5rem;
-    }
-
-    .badge {
-      @extend .ml-auto;
-      @extend .align-self-center;
-    }
-    &.btn {
-      font-weight: $font-weight-base !important;
-    }
-    &.btn-danger {
-      box-shadow: none;
-    }
-  }
-  .dropdown-item.active {
-    color: theme-color('black') !important;
-
-    i {
-      color: theme-color('black') !important;
-    }
-
-    &::after {
-      content: '';
-      display: inline-block;
-      position: absolute;
-      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;
-    }
-  }
-  .dropdown-item.active {
-    font-weight: 600 !important;
-    background-color: $dropdown-link-hover-bg !important;
-  }
-  .button_to {
-    width: 100%;
-  }
-  .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 is handled by Floating UI via inline styles
-  // Keep position: absolute but let Floating UI set top/left/right/bottom
-  position: absolute;
-  animation: fadeIn 0.15s ease-in-out;
-
-  // Legacy classes kept for backward compatibility but no longer apply positioning
-  // Floating UI handles all positioning automatically
-  &.dropdown-container-left {
-    // No longer needed - Floating UI handles placement
-  }
-  &.dropdown-container-top {
-    // No longer needed - Floating UI handles placement
-  }
-}
-
-.dropdown-toggle {
-  &:after {
-    border: none;
-    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' 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-chevron-down'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 12l6 6l6 -6'/%3E%3C/svg%3E");
-    transition: transform 0.2s ease-in-out;
-    transform: rotate(0deg);
-    opacity: 0.5;
-  }
-}
-.dropdown-toggle:hover {
-  &:after {
-    opacity: 1;
-  }
-}
-.dropdown-toggle:focus, .dropdown-toggle:active, .dropdown-toggle[aria-expanded="true"] {
-  &:after {
-    transform: rotate(180deg);
-    opacity: 1;
-  }
-}

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

@@ -1,97 +0,0 @@
-.filter-wrap {
-  padding: 0.55rem;
-  border-bottom: 1px solid $table-border-color;
-  gap: 0.55rem;
-  position: sticky;
-  top: $header-height;
-  z-index: 1000;
-  background-color: $card-bg;
-  border-top-left-radius: $card-border-radius;
-  border-top-right-radius: $card-border-radius;
-
-  .btn {
-    height: 2.125rem;
-  }
-}
-
-#filters-search-bar {
-  max-width: 300px;
-  margin-right: auto;
-  height: 2.125rem;
-}
-
-#table-filter {
-  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;
-  max-height: calc(100vh - #{$header-height} - 4rem);
-  overflow-y: auto;
-
-  @include media-breakpoint-up(md) {
-    width: 50%;
-
-    flex-direction: column;
-  }
-
-  &.hidden {
-    display: none !important;
-  }
-  
-  &.d-none {
-    display: none !important;
-  }
-}
-
-
-.collapsed .arrow {
-  transform: rotate(-90deg);
-  transition: .3s ease-in-out;
-}
-
-i.js-delete-filter {
-  margin-bottom: 0;
-}
-
-.sort_link {
-  color: $gray-600;
-  padding: 0.25rem;
-  border-radius: $border-radius-sm;
-
-  &:hover {
-    color: theme-color('primary') !important;
-    text-decoration: none !important;
-    background-color: $gray-50;
-  }
-
-  &.asc, &.desc {
-    font-weight: $font-weight-medium;
-    svg {
-      color: $gray-600 !important;
-    }
-  }
-
-  .icon, svg {
-    margin-left: 5px;
-    margin-bottom: 2px;
-    width: 0.8rem;
-    height: 0.8rem;
-  }
-
-  svg.default-filter-arrow {
-    opacity: 0.3;
-  }
-}
-
-.filter-badges-container:has(*) {
-  @extend .mt-3;
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}

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

@@ -1,32 +0,0 @@
-.order-line-items {
-  &__form {
-    padding: 0.75rem;
-    border-bottom: 1px solid #e9ecef;
-  }
-
-  &__form:last-child {
-    border-bottom: none;
-  }
-
-  &__form {
-    &:hover {
-      background-color: $gray-25;
-    }
-  }
-}
-
-.shipment-line-items {
-  &__row,
-  &__form {
-    display: grid;
-    grid-template-columns: [product_description] 1fr [price] 10% [quantity] 15% [total] 10% [actions] 5%;
-    grid-auto-flow: row;
-    padding-bottom: 0.75rem;
-    padding-top: 0.75rem;
-  }
-
-  &__form {
-    grid-column: 1/-1;
-    row-gap: 0.5rem;
-  }
-}

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

@@ -1,87 +0,0 @@
-#page-header {
-  height: 80px;
-  display: flex;
-  align-items: center;
-  background-color: $body-bg;
-
-  &.sticky-top {
-    padding-left: 1rem;
-    padding-right: 1rem;
-    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;
-  }
-}
-
-.page-header-title {
-  font-size: 1.25rem;
-}
-
-#page-tabs {
-  margin-top: -1rem;
-
-  .nav {
-    gap: 1rem;
-    display: flex;
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    padding-left: 0;
-    margin-bottom: -1px;
-
-    .nav-link {
-      border-radius: 0;
-      padding-bottom: 1rem;
-      padding-top: 1rem;
-      padding-left: 0rem;
-      padding-right: 0rem;
-  
-      &.active {
-        background-color: transparent;
-        color: theme-color('primary');
-        font-weight: 600;
-      }
-    }
-  }
-}
-
-#content {
-  transition: margin-left 0.1s ease;
-
-  @media (min-width: 992px) {
-    margin-left: $sidebar-width + 1px;
-  }
-}
-
-
-.documentation-link-container {
-  font-size: $font-size-sm;
-  text-align: center;
-  margin-top: 2rem;
-  color: $gray-400;
-}

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

@@ -1,111 +0,0 @@
-.upload-area {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  border-radius: $border-radius-lg;
-  border: 1px dashed $border-color;
-  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.25);
-    color: rgba($primary, 0.75);
-
-    .text-muted {
-      color: rgba($primary, 0.5) !important;
-    }
-  }
-
-  &:active {
-    background-color: $action;
-    border-color: rgba($blue, 0.5);
-    box-shadow: 0 0 0 2px $white, 0 0 0 4px $blue !important;
-  }
-}
-
-.media-form {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  grid-gap: 0.5rem;
-  width: 100%;
-  height: 100%;
-  user-select: none;
-
-  &__add-button {
-    aspect-ratio: 1/1;
-
-    &:only-child {
-      grid-column: 1 / span 6;
-      grid-row: 1 / span 1;
-      aspect-ratio: 12/1;
-      max-width: 200px;
-      height: 200px;
-    }
-
-    &:not(:only-child) {
-      height: 100% !important;
-    }
-  }
-
-  &__image {
-    padding: 0.5rem;
-    border: none;
-    overflow: hidden;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    aspect-ratio: 1/1;
-    border-radius: $border-radius;
-    position: relative;
-    justify-content: space-between;
-    align-items: flex-start;
-    transition-property: box-shadow;
-    transition-duration: 0.2s;
-    transition-timing-function: ease-in-out;
-    box-shadow: rgba(209, 217, 224, 0.5) 0px 0px 0px 1px;
-
-    & img {
-      top: 0;
-      left: 0;
-    }
-
-    & .move-handle {
-      z-index: 2;
-      color: white;
-    }
-
-    .custom-checkbox:has(input:checked) {
-      display: inline !important;
-    }
-
-    &:hover {
-      .custom-checkbox {
-        display: inline !important;
-      }
-      .move-handle {
-        display: inline !important;
-      }
-
-      box-shadow: rgba(209, 217, 224, 0.8) 0px 0px 0px 1px, rgba(37, 41, 46, 0.04) 0px 3px 6px -3px, rgba(37, 41, 46, 0.12) 0px 2px 6px 0px !important;
-    }
-
-    &:has(input:checked) {
-      box-shadow: 0 0 0 2px $blue !important;
-    }
-
-    &:first-of-type {
-      grid-column: 1 / span 2;
-      grid-row: 1 / span 2;
-    }
-  }
-}