spree_admin 5.2.6 → 5.3.0.rc1

data/app/assets/tailwind/spree/admin/components/_media-form.css

@@ -0,0 +1,69 @@
+/* ==========================================================================
+   MEDIA FORM
+   ========================================================================== */
+
+@layer components {
+  .upload-area {
+    @apply flex flex-col gap-2 justify-center items-center overflow-hidden rounded-lg border border-dashed border-gray-200 bg-gray-25 p-2 cursor-pointer text-gray-500 transition-all duration-500 ease-out;
+  }
+
+  .upload-area:hover {
+    @apply bg-blue-50/50 border-blue-500/25 text-blue-800;
+  }
+
+  .upload-area:active {
+    @apply bg-blue-50 border-blue-100 !ring-2 !ring-blue-500 !ring-offset-2 !ring-offset-white;
+  }
+
+  .media-form {
+    @apply grid grid-cols-6 gap-2 w-full h-full select-none;
+  }
+
+  .media-form__add-button {
+    @apply aspect-square;
+  }
+
+  .media-form__add-button:only-child {
+    @apply col-span-6 row-span-1 aspect-[12/1] max-w-[200px] h-[200px];
+  }
+
+  .media-form__add-button:not(:only-child) {
+    @apply !h-full;
+  }
+
+  .media-form__image {
+    @apply p-2 border-none overflow-hidden flex w-full h-full aspect-square rounded-lg relative justify-between items-start transition-shadow duration-200 ease-in-out shadow-[rgba(209,217,224,0.5)_0px_0px_0px_1px];
+  }
+
+  .media-form__image img {
+    @apply top-0 left-0;
+  }
+
+  .media-form__image .move-handle {
+    @apply z-[2] text-white;
+  }
+
+  .media-form__image .form-checkbox:has(input:checked) {
+    @apply !inline;
+  }
+
+  .media-form__image:hover .form-checkbox {
+    @apply !inline;
+  }
+
+  .media-form__image:hover .move-handle {
+    @apply !inline;
+  }
+
+  .media-form__image:hover {
+    @apply !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];
+  }
+
+  .media-form__image:has(input:checked) {
+    @apply !ring-2 !ring-blue-500;
+  }
+
+  .media-form__image:first-of-type {
+    @apply col-span-2 row-span-2;
+  }
+}

data/app/assets/tailwind/spree/admin/components/_misc.css

@@ -0,0 +1,35 @@
+/* ==========================================================================
+   MISCELLANEOUS COMPONENTS
+   ========================================================================== */
+
+@layer components {
+  /* Embed responsive */
+  .embed-responsive {
+    @apply relative block w-full p-0 overflow-hidden;
+  }
+
+  .embed-responsive::before {
+    @apply block;
+    content: "";
+  }
+
+  .embed-responsive .embed-responsive-item,
+  .embed-responsive iframe,
+  .embed-responsive embed,
+  .embed-responsive object,
+  .embed-responsive video {
+    @apply absolute top-0 bottom-0 left-0 w-full h-full border-0;
+  }
+
+  .embed-responsive-16by9::before {
+    padding-top: 56.25%;
+  }
+
+  .embed-responsive-4by3::before {
+    padding-top: 75%;
+  }
+
+  .embed-responsive-1by1::before {
+    padding-top: 100%;
+  }
+}

data/app/assets/tailwind/spree/admin/components/_navigation.css

@@ -0,0 +1,41 @@
+/* ==========================================================================
+   NAVIGATION
+   ========================================================================== */
+
+@layer components {
+  /* Nav base */
+  .nav {
+    @apply flex flex-wrap pl-0 mb-0 list-none;
+  }
+
+  .nav-link {
+    @apply block no-underline py-2 px-4 transition-colors duration-150 ease-in-out;
+  }
+
+  .nav-link:hover,
+  .nav-link:focus {
+    @apply text-zinc-950;
+  }
+
+  .nav-link.disabled {
+    @apply pointer-events-none cursor-default text-gray-500;
+  }
+
+  /* Nav pills */
+  .nav-pills {
+    @apply gap-1;
+  }
+  .nav-pills .nav-link {
+    @apply bg-none rounded-xl py-1.5 px-3 cursor-pointer transition-colors duration-300 ease-in-out text-gray-900 hover:bg-gray-25;
+  }
+
+  .nav-pills .nav-link.active {
+    @apply bg-gray-100;
+  }
+
+  /* Nav fill and justified */
+  .nav-fill > .nav-link,
+  .nav-fill .nav-item {
+    @apply flex-auto text-center;
+  }
+}

data/app/assets/tailwind/spree/admin/components/_progress.css

@@ -0,0 +1,14 @@
+/* ==========================================================================
+   PROGRESS & SPINNERS
+   ========================================================================== */
+
+@layer components {
+  /* Progress bar */
+  .progress {
+    @apply flex h-2 overflow-hidden text-xs bg-gray-100 rounded-full;
+  }
+
+  .progress-bar {
+    @apply bg-blue-500 transition-[width] duration-600 ease-out;
+  }
+}

data/app/assets/tailwind/spree/admin/components/_search-picker.css

@@ -0,0 +1,36 @@
+/* ==========================================================================
+   SEARCH PICKER
+   ========================================================================== */
+
+@layer components {
+  .search-results {
+    height: 250px;
+  }
+
+  .search-picker__option {
+    @apply relative mb-2 flex cursor-pointer items-center border border-transparent rounded-md pr-8;
+  }
+
+  .search-picker__option label {
+    @apply mb-0 w-full h-full p-2 flex items-center justify-start;
+  }
+
+  .search-picker__option input[type="checkbox"],
+  .search-picker__option input[type="radio"] {
+    @apply hidden;
+  }
+
+  .search-picker__option:hover {
+    @apply bg-gray-25;
+  }
+
+  .search-picker__option:has(input:checked) {
+    @apply bg-blue-50 border-blue-100;
+  }
+
+  .search-picker__option:has(input:checked)::after {
+    @apply inline-block absolute right-2 w-6 h-6;
+    content: '';
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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-zinc-950"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10"/></svg>') no-repeat center center;
+  }
+}

data/app/assets/tailwind/spree/admin/components/_seo-form.css

@@ -0,0 +1,21 @@
+/* ==========================================================================
+   SEO FORM
+   ========================================================================== */
+
+@layer components {
+  .seo-form .card-body {
+    @apply gap-4;
+  }
+
+  .seo-form .seo__preview {
+    @apply gap-0.5;
+  }
+
+  .seo-form .seo__preview__title {
+    color: #1a0dab;
+  }
+
+  .seo-form .seo__preview__link {
+    color: #006625;
+  }
+}

data/app/assets/tailwind/spree/admin/components/_sortable-tree.css

@@ -0,0 +1,61 @@
+/* ==========================================================================
+   SORTABLE TREE
+   ========================================================================== */
+
+@layer components {
+  #itemImgContainer {
+    width: 200px;
+  }
+
+  #itemImgContainer img {
+    @apply max-w-full;
+  }
+
+  #sortableTreeArea .space-buttons {
+    box-shadow: -11px 0 16px 6px white;
+    z-index: 9;
+  }
+
+  #sortableTreeArea .space-buttons a {
+    margin: 2px;
+  }
+
+  #sortableTreeArea .sortable-tree-item-row {
+    @apply bg-white;
+    margin: 2px;
+  }
+
+  #sortableTreeArea .sortable-tree-item {
+    @apply border border-transparent p-0;
+  }
+
+  #sortableTreeArea .sortable-tree-item [data-sortable-tree-parent-id-value] {
+    margin-left: 25px;
+  }
+
+  @media (min-width: 576px) {
+    #sortableTreeArea .sortable-tree-item [data-sortable-tree-parent-id-value] {
+      margin-left: 50px;
+    }
+  }
+
+  #sortableTreeArea .sortable-chosen {
+    @apply bg-transparent border-transparent;
+  }
+
+  #sortableTreeArea .sortable-chosen .sortable-tree-item-row {
+    @apply bg-blue-50 border-2 border-blue-500;
+    margin: -1px;
+  }
+
+  #sortableTreeArea .item_image_holder {
+    @apply relative border border-gray-200 overflow-hidden;
+    border-radius: 7px;
+    width: 45px;
+    height: 45px;
+  }
+
+  #sortableTreeArea .item_image_holder img {
+    @apply absolute left-1/2 top-1/2 h-full w-auto -translate-x-1/2 -translate-y-1/2;
+  }
+}

data/app/assets/tailwind/spree/admin/components/_tables.css

@@ -0,0 +1,195 @@
+/* ==========================================================================
+   TABLES
+   ========================================================================== */
+
+@layer components {
+  .table {
+    @apply w-full align-top text-gray-950 border-gray-200;
+  }
+
+  .table > :not(caption) > * > * {
+    @apply bg-transparent border-b py-4 px-3;
+    box-shadow: inset 0 0 0 9999px transparent;
+  }
+
+  .table > tbody {
+    @apply align-middle;
+  }
+
+  .table > thead {
+    @apply align-bottom;
+  }
+
+  .table th {
+    @apply border-t-0 border-b-0 whitespace-nowrap;
+  }
+
+  .table thead th {
+    @apply align-middle text-left text-sm font-medium text-gray-600 bg-gray-25 py-2 border-b border-gray-200;
+  }
+
+  .table thead th:first-child {
+    @apply rounded-tl-2xl;
+  }
+
+  .table thead th:last-child {
+    @apply rounded-tr-2xl;
+  }
+
+  .table tbody tr td {
+    @apply align-middle;
+  }
+
+  .table tbody tr td .filterable {
+    @apply cursor-pointer opacity-25 ml-1 w-4 h-4;
+  }
+
+  .table tbody tr td .filterable:hover {
+    @apply opacity-100;
+  }
+
+  .table tbody tr td a:hover {
+    @apply no-underline;
+  }
+
+  .table tbody tr td > a:not(.btn):not(.text-zinc-950) {
+    @apply text-gray-900;
+  }
+
+  .table tbody tr.active td {
+    @apply bg-blue-50 border-blue-100;
+  }
+
+  .table tbody tr:hover:not(.active):not(.sortable-chosen) td {
+    @apply bg-gray-50/75;
+  }
+
+  .table tbody tr:last-child td {
+    @apply border-b-0;
+  }
+
+  .table tbody tr:last-child td:first-child {
+    @apply rounded-bl-xl;
+  }
+
+  .table tbody tr:last-child td:last-child {
+    @apply rounded-br-xl;
+  }
+
+  .table tr > td:first-child,
+  .table tr > th:first-child {
+    @apply pl-4;
+  }
+
+  .table tr > td:last-child,
+  .table tr > th:last-child {
+    @apply pr-4;
+  }
+
+  .table th.handel-head {
+    @apply w-12;
+  }
+
+  .table td.move-handle {
+    @apply w-11;
+  }
+
+  .table th a.sort_link {
+    @apply whitespace-nowrap;
+  }
+
+  .table-responsive {
+    @apply overflow-x-auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Card-lg table styles */
+  .card-lg .with-filters table thead th:first-child,
+  .card-lg turbo-frame table thead th:first-child {
+    @apply rounded-tl-none;
+  }
+
+  .card-lg .with-filters table thead th:last-child,
+  .card-lg turbo-frame table thead th:last-child {
+    @apply rounded-tr-none;
+  }
+
+  /* Pagination container */
+  .pagination-container {
+    @apply sticky bottom-0 z-100 border-t bg-white rounded-b-2xl;
+  }
+
+  /* Filters search bar */
+  #filters-search-bar {
+    @apply max-w-xs mr-auto;
+  }
+
+  /* Table active filters */
+  .table-active-filters {
+    @apply p-3;
+  }
+
+  .table-active-filters:not(:has(:first-child)) {
+    @apply hidden;
+  }
+
+  .table-active-filters .js-filter .icon {
+    @apply cursor-pointer;
+  }
+
+  .table-active-filters .badge-secondary .icon {
+    @apply invert;
+  }
+
+  .table-active-filters .badge {
+    @apply inline-block mr-2 mb-2;
+  }
+
+  .table-active-filters .badge:hover {
+    @apply opacity-80;
+  }
+
+  /* Table responsive overflow handling */
+  .table-responsive tr td,
+  .table-responsive tr th {
+    @apply whitespace-nowrap;
+  }
+
+  .table-responsive.border {
+    @apply border-gray-200!;
+  }
+
+  .table-responsive:has(.dropdown.show) {
+    @apply overflow-visible;
+  }
+
+  /* Sortable drag */
+  .sortable-drag-v {
+    @apply w-full text-right opacity-0 border border-info rounded-md;
+  }
+
+  .sortable-drag-v td {
+    @apply border-t-0 opacity-0;
+  }
+
+  .sortable-drag-v td:first-child {
+    @apply opacity-100;
+  }
+
+  /* Actions column */
+  td.actions {
+    @apply text-right;
+  }
+
+  td.actions .btn {
+    @apply whitespace-nowrap;
+  }
+
+  td.actions .btn:not(.btn-sm) {
+    @apply py-2;
+  }
+
+  td.actions .btn-sm {
+    @apply py-1;
+  }
+}

data/app/assets/tailwind/spree/admin/components/_tooltips.css

@@ -0,0 +1,15 @@
+/* ==========================================================================
+   TOOLTIPS & POPOVERS
+   ========================================================================== */
+
+@layer components {
+  /* Custom Tooltip Container (Floating UI) */
+  .tooltip-container {
+    @apply absolute hidden pointer-events-none z-1080 bg-white text-gray-950 border-0 rounded-lg;
+    @apply text-base! font-normal! opacity-100! py-1 px-2 max-w-[200px];
+    @apply whitespace-normal break-words;
+    box-shadow: 0px 0px 0px 1px var(--color-gray-200), 0px 3px 6px -1px rgba(209, 213, 219, 0.35), 0px 3px 6px 0px rgba(209, 213, 219, 0.35);
+    overflow-wrap: anywhere;
+    text-wrap: wrap;
+  }
+}

data/app/assets/tailwind/spree/admin/components/_variants-form.css

@@ -0,0 +1,150 @@
+/* ==========================================================================
+   VARIANTS FORM
+   ========================================================================== */
+
+@layer components {
+  .variants-form {
+    @apply flex flex-col gap-8;
+  }
+
+  .variants-form .options-creator {
+    @apply m-4 p-2 border border-gray-200 rounded-md;
+  }
+
+  .variants-form .options-creator:not(:has(.options-creator__options_container .options-creator__option)) {
+    @apply m-0 border-none;
+  }
+
+  .variants-form .options-creator:not(:has(.options-creator__options_container .options-creator__option)) .options-creator__option--new {
+    @apply pl-4;
+  }
+
+  .variants-form .options-creator:has(.options-creator__option--new:not(.d-none)) {
+    @apply border border-gray-200 rounded-md m-4 mb-4;
+  }
+
+  .variants-form .options-creator__option {
+    @apply flex border-b border-gray-200 mb-2;
+    padding: 0.5rem 0.5rem 1rem 0;
+  }
+
+  .variants-form .options-creator__option .label {
+    @apply inline-block font-medium mb-2;
+  }
+
+  .variants-form .options-creator__option .draggable {
+    @apply inline-flex items-center justify-center px-2 mr-3 !cursor-grab pr-4;
+    min-width: calc(16px + 1rem);
+  }
+
+  .variants-form .options-creator__option .draggable i {
+    @apply mr-0;
+  }
+
+  .variants-form .options-creator__option .draggable:hover {
+    @apply bg-gray-25;
+  }
+
+  .variants-form .options-creator__option--new {
+    @apply border-b-0 mb-0 pb-2;
+    padding-left: calc(1.13px + 3.25rem);
+  }
+
+  .variants-form .options-creator__option--new .values-inputs {
+    @apply flex flex-col gap-1;
+  }
+
+  .variants-form .options-creator__option--form {
+    @apply border-b-0 mb-0 pb-2;
+    padding-left: calc(1.13px + 3.25rem);
+  }
+
+  .variants-form .options-creator__option:first-child {
+    @apply border-t-0;
+  }
+
+  .variants-form .options-creator .new_option_button {
+    @apply w-full justify-start py-2;
+  }
+
+  .variants-form .variants-table {
+    @apply flex flex-col;
+  }
+
+  .variants-form .variants-table .column-checkbox,
+  .variants-form .variants-table .column-variant,
+  .variants-form .variants-table .column-price,
+  .variants-form .variants-table .column-quantity,
+  .variants-form .variants-table .column-actions {
+    @apply inline-flex items-center;
+  }
+
+  .variants-form .variants-table .column-checkbox {
+    @apply justify-center grow-0 basis-8;
+  }
+
+  .variants-form .variants-table .column-variant {
+    @apply select-none grow-[3] basis-0;
+  }
+
+  .variants-form .variants-table .column-price {
+    @apply grow basis-0;
+  }
+
+  .variants-form .variants-table .column-actions {
+    @apply grow-0 basis-20;
+  }
+
+  .variants-form .variants-table .column-quantity {
+    @apply justify-between w-full grow basis-0;
+    line-height: 28px;
+  }
+
+  .variants-form .variants-table__actions {
+    @apply hidden w-full justify-end p-4 pt-0;
+  }
+
+  .variants-form .variants-table__actions:has(*) {
+    @apply flex;
+  }
+
+  .variants-form .variants-table__actions__select {
+    @apply w-min pr-7;
+  }
+
+  .variants-form .variants-table__header,
+  .variants-form .variants-table__footer {
+    @apply flex text-gray-600 w-full px-4 gap-1;
+    background-color: rgba(250, 250, 250, 0.5);
+  }
+
+  .variants-form .variants-table__header__cell,
+  .variants-form .variants-table__footer__cell {
+    @apply inline-block;
+  }
+
+  .variants-form .variants-table__footer {
+    @apply justify-center items-center py-2 rounded-t-none rounded-b-lg;
+  }
+
+  .variants-form .variants-table__body {
+    @apply flex flex-col;
+  }
+
+  .variants-form .variants-table__body__row {
+    @apply px-4 w-full flex gap-1 border-b border-gray-200;
+  }
+
+  .variants-form .variants-table__body__row.nested .column-checkbox,
+  .variants-form .variants-table__body__row.nested .column-variant {
+    @apply left-5 relative;
+  }
+
+  .variants-form .variants-table__body__row.nested .column-variant {
+    width: calc(100% - 1.25rem);
+  }
+
+  .variants-form .variants-table__body__cell {
+    @apply py-2 block;
+  }
+}