spree_admin 5.2.6 → 5.3.0.rc1

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

@@ -0,0 +1,114 @@
+/* ==========================================================================
+   BUTTONS
+   ========================================================================== */
+
+@layer components {
+  /* Tabler Icons base styles */
+  .ti {
+    @apply align-middle text-[120%];
+  }
+
+  .btn {
+    @apply inline-flex items-center justify-center text-center align-middle gap-2;
+    @apply cursor-pointer select-none no-underline;
+    @apply px-3 py-1.5 text-base font-medium leading-normal border border-transparent rounded-xl;
+    @apply transition-colors duration-100 ease-linear;
+  }
+
+  .btn:disabled,
+  .btn.disabled {
+    @apply opacity-70 pointer-events-none cursor-not-allowed;
+  }
+
+  .btn-sm {
+    @apply px-2 py-1 text-sm rounded-lg;
+  }
+
+  .btn-lg {
+    @apply px-3 py-2 text-lg rounded-xl;
+  }
+
+  /* Button Variants */
+  .btn-primary {
+    @apply text-white bg-zinc-950 border-zinc-950 shadow-xs;
+  }
+
+  .btn-primary:hover {
+    @apply bg-zinc-800 border-zinc-800;
+  }
+
+  .btn-secondary {
+    @apply text-blue-900 shadow-xs bg-blue-50 border-blue-100/75;
+  }
+
+  .btn-secondary:hover,
+  .btn-secondary:focus {
+    @apply border-blue-100 bg-blue-100/75;
+  }
+
+  .btn-secondary .arrow {
+    @apply text-zinc-950;
+  }
+
+  .btn-light,
+  .btn-danger {
+    @apply text-gray-700 bg-gray-25 border-gray-200 shadow-xs;
+  }
+
+  .btn-light:hover,
+  .btn-light:focus,
+  .btn-light:active {
+    @apply bg-gray-100 border-gray-200 text-gray-900;
+  }
+
+  .btn-light:active {
+    @apply bg-gray-50;
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.025);
+  }
+
+  .btn-light.bg-transparent {
+    @apply bg-transparent;
+  }
+
+  .btn-danger {
+    @apply text-red-600 bg-gray-25 hover:bg-red-100;
+  }
+
+  .btn-close {
+    @apply border-none opacity-50 p-3 rounded-md w-3.5 h-3.5;
+    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/0.85em auto no-repeat;
+  }
+
+  .btn-close:hover {
+    @apply opacity-80 bg-gray-100;
+  }
+
+  .btn-clipboard {
+    @apply w-6 h-6 px-1;
+  }
+
+  .payment-action-save {
+    @apply text-white bg-green-300 border-green-300;
+  }
+
+  /* Button states for Turbo */
+  button .show-when-disabled {
+    @apply hidden;
+  }
+
+  button[disabled] .show-when-disabled {
+    @apply inline;
+  }
+
+  button .show-when-enabled {
+    @apply inline;
+  }
+
+  button[disabled] .show-when-enabled {
+    @apply hidden;
+  }
+
+  .actions .btn {
+    @apply ml-1;
+  }
+}

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

@@ -0,0 +1,240 @@
+/* ==========================================================================
+   CARDS
+   ========================================================================== */
+
+@layer components {
+  .card,
+  .card-lg {
+    @apply relative flex flex-col min-w-0 break-words bg-white border border-gray-200 rounded-2xl;
+    background-clip: border-box;
+  }
+
+  .card-lg {
+    @apply p-0 mb-3;
+  }
+
+  .card .card {
+    @apply rounded-2xl;
+  }
+
+  /* Card with table */
+  .card > .table,
+  .card .table-responsive > .table {
+    @apply border-x-0 mb-0;
+  }
+
+  .card .card {
+    @apply rounded-lg;
+  }
+
+  .card > .table:last-child,
+  .card > .table:last-of-type,
+  .card .table-responsive > .table:last-child,
+  .card .table-responsive > .table:last-of-type {
+    @apply border-b-0;
+  }
+
+  .card .table thead th:first-child {
+    @apply rounded-none;
+  }
+
+  .card .table thead th:last-child {
+    @apply rounded-none;
+  }
+
+  .card > .table td:first-child,
+  .card > .table th:first-child,
+  .card .table-responsive > .table td:first-child,
+  .card .table-responsive > .table th:first-child {
+    @apply border-l-0;
+  }
+
+  .card > .table td:last-child,
+  .card > .table th:last-child,
+  .card .table-responsive > .table td:last-child,
+  .card .table-responsive > .table th:last-child {
+    @apply border-r-0;
+  }
+
+  .card > .table tr:first-child td,
+  .card > .table tr:first-child th,
+  .card .table-responsive > .table tr:first-child td,
+  .card .table-responsive > .table tr:first-child th {
+    @apply border-t-0;
+  }
+
+  .card > .table tr:last-child td,
+  .card .table-responsive > .table tr:last-child td {
+    @apply border-b-0;
+  }
+
+  .card .card-header + .table,
+  .card .card-header + .table-responsive > .table {
+    @apply border-t-0;
+  }
+
+  .card-body {
+    @apply flex-auto p-5;
+  }
+
+  .card-body .form-group:last-child {
+    @apply mb-0;
+  }
+
+  .card-header,
+  .card-footer {
+    @apply bg-transparent;
+  }
+
+  .card-header {
+    @apply flex items-center mb-0 p-5 pr-3 h-14 border-b border-gray-100 rounded-t-[calc(var(--radius-2xl)-1px)];
+  }
+
+  .card-header .card-title {
+    @apply mb-0 font-sans text-lg font-medium flex items-center gap-2;
+  }
+
+  .card-header .arrow {
+    @apply w-auto;
+  }
+
+  .card-header .arrow:before {
+    @apply transition-transform duration-300 ease-in-out;
+  }
+
+  .card-header .collapsed .arrow:before {
+    @apply -rotate-90;
+  }
+
+  .card-footer {
+    @apply p-5;
+  }
+
+  .card-footer:last-child {
+    @apply rounded-b-[calc(var(--radius-2xl)-1px)];
+  }
+
+  .card-footer.border-top,
+  .card-body.border-top,
+  .card .border-top,
+  .card .border-bottom,
+  .card .list-group-item {
+    @apply border-gray-100!;
+  }
+
+  .card-text {
+    @apply break-words;
+  }
+
+  .card-text:last-child {
+    @apply mb-0;
+  }
+
+  .card-link + .card-link {
+    @apply ml-3;
+  }
+
+  .card-img-top {
+    @apply w-full rounded-t-[calc(var(--radius-2xl)-1px)];
+  }
+
+  /* Collapsable Card */
+  .collapsable-card {
+    @apply relative flex flex-col min-w-0 break-words overflow-hidden;
+    @apply bg-white border border-gray-200 rounded-2xl;
+    background-clip: border-box;
+  }
+
+  .collapsable-card .card-header:hover {
+    @apply bg-gray-25!;
+  }
+
+  .collapsable-card .card-body {
+    @apply border-t border-gray-100;
+  }
+
+  .collapsable-card[open] .arrow {
+    @apply rotate-90 transition-transform duration-200 ease-in-out;
+  }
+
+  .collapsable-card:not([open]) .arrow {
+    @apply rotate-0 transition-transform duration-200 ease-in-out;
+  }
+
+  /* Animate details content */
+  .collapsable-card > *:not(summary) {
+    @apply grid overflow-hidden opacity-0;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.25s ease-out, opacity 0.2s ease-out;
+  }
+
+  .collapsable-card[open] > *:not(summary) {
+    @apply opacity-100;
+    grid-template-rows: 1fr;
+  }
+
+  .collapsable-card > *:not(summary) > * {
+    @apply min-h-0;
+  }
+
+  /* Collapsible Card (Stimulus reveal controller version) */
+  .card .card-header--collapsible:hover {
+    @apply bg-gray-25;
+  }
+
+  .card .card-header--collapsible:focus {
+    @apply outline-2 outline-primary outline-offset-[-2px];
+  }
+
+  .card .card-header--collapsible .arrow {
+    @apply rotate-90 transition-transform duration-200 ease-in-out;
+  }
+
+  .card:has(.collapsible-content.is-collapsed) .card-header--collapsible .arrow {
+    @apply rotate-0;
+  }
+
+  .card .collapsible-content {
+    @apply grid overflow-hidden;
+    grid-template-rows: 1fr;
+    transition: grid-template-rows 0.25s ease-out, opacity 0.2s ease-out;
+  }
+
+  .card .collapsible-content.is-collapsed {
+    grid-template-rows: 0fr;
+  }
+
+  .card .collapsible-content > * {
+    @apply overflow-hidden min-h-0;
+  }
+
+  .card .collapsible-content .card-body {
+    @apply border-t border-gray-100;
+  }
+
+  /* Details/Summary styling for cards */
+  .collapsable-card details summary,
+  .card details summary {
+    @apply cursor-pointer list-none select-none;
+  }
+
+  .collapsable-card details summary::-webkit-details-marker,
+  .card details summary::-webkit-details-marker {
+    @apply hidden;
+  }
+
+  .collapsable-card details summary::marker,
+  .card details summary::marker {
+    @apply hidden;
+  }
+
+  .collapsable-card details summary[role="button"],
+  .card details summary[role="button"] {
+    @apply outline-none;
+  }
+
+  .collapsable-card details summary[role="button"]:focus,
+  .card details summary[role="button"]:focus {
+    @apply outline-2 outline-primary outline-offset-[-2px];
+  }
+}

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

@@ -0,0 +1,279 @@
+/* ==========================================================================
+   DIALOGS & MODALS
+   ========================================================================== */
+
+@layer components {
+  /* Body modal-open state */
+  body.modal-open,
+  .modal.fade.show {
+    @apply pr-0!;
+  }
+
+  body.modal-open {
+    @apply w-full overflow-y-scroll! overflow-x-clip;
+  }
+
+  /* ==========================================================================
+     Native Dialog Element
+     ========================================================================== */
+
+  /* Customize the dialog backdrop */
+  dialog {
+    box-shadow: 0 0 0 100vw rgba(255, 255, 255, 0.8);
+  }
+
+  dialog:-internal-dialog-in-top-layer::backdrop {
+    background-color: rgba(255, 255, 255, 0.8);
+  }
+
+  dialog::backdrop {
+    background-color: rgba(255, 255, 255, 0.8);
+  }
+
+  @keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  @keyframes fade-out {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+  }
+
+  /* Add animations for centered dialogs (not drawers) */
+  dialog.dialog[data-dialog-target="dialog"][open] {
+    animation: fade-in 200ms forwards;
+  }
+
+  dialog.dialog[data-dialog-target="dialog"][closing] {
+    animation: fade-out 200ms forwards;
+  }
+
+  dialog {
+    @apply hidden z-1050 rounded-2xl border-none bg-white overflow-y-auto overflow-x-hidden p-0;
+    box-shadow: 0px 0px 0px 1px rgba(179, 179, 179, 0.5), 0px 6px 12px -3px rgba(179, 179, 179, 0.35), 0px 6px 18px 0px rgba(179, 179, 179, 0.35);
+  }
+
+  /* Allow tom-select dropdowns to overflow the dialog */
+  dialog:has(.ts-dropdown) {
+    @apply overflow-visible;
+  }
+
+  dialog:open,
+  dialog[open] {
+    @apply flex;
+  }
+
+  /* ==========================================================================
+     Drawer (Native Dialog)
+     ========================================================================== */
+
+  .drawer {
+    @apply fixed top-0 right-0 left-auto flex-col justify-between p-0 overflow-hidden;
+    height: calc(100dvh - 1rem);
+    max-height: calc(100dvh - 1rem);
+    width: calc(100vw - 1rem);
+    max-width: 600px;
+    min-width: 320px;
+    margin: 0.5rem;
+  }
+
+  .drawer[open] {
+    @apply flex;
+    animation: slideInRight 0.25s ease-out forwards;
+  }
+
+  dialog.drawer[closing] {
+    animation: slideOutRight 0.2s ease-in forwards;
+  }
+
+  .drawer .alerts-container {
+    @apply absolute;
+  }
+
+  @media (max-width: 991.98px) {
+    .drawer {
+      max-width: 100vw;
+      min-width: 100vw;
+    }
+  }
+
+  .drawer > turbo-frame:not(#drawer_alerts),
+  .drawer turbo-frame > form {
+    @apply flex w-full h-full flex-col justify-between overflow-hidden;
+  }
+
+  .drawer-header {
+    @apply flex justify-between items-center p-4 border-b border-gray-100;
+  }
+
+  .drawer-title {
+    @apply mb-0 font-semibold;
+  }
+
+  .drawer-body {
+    @apply flex-auto overflow-y-auto p-4;
+  }
+
+  .drawer-footer {
+    @apply flex justify-between items-center p-4 bg-gray-25 border-t border-gray-100 rounded-b-2xl;
+  }
+
+  .drawer .card, .drawer .card-header, .drawer .card-body, .drawer .card-footer {
+    @apply border-none p-0;
+  }
+  .drawer .card-header {
+    @apply h-auto pb-4 pt-2;
+  }
+
+  /* ==========================================================================
+     Dialog (Centered Modal - Native Dialog)
+     ========================================================================== */
+
+  .dialog {
+    @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] max-w-[500px] m-0 p-0 flex-col overflow-hidden;
+    max-height: 90vh;
+  }
+
+  .dialog[open] {
+    @apply flex;
+  }
+
+  .dialog .alerts-container {
+    @apply absolute;
+  }
+
+  .dialog > turbo-frame:not(#dialog_alerts),
+  .dialog turbo-frame > form {
+    @apply flex w-full flex-col;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  .dialog-header {
+    @apply flex justify-between items-center p-4 border-b border-gray-100;
+  }
+
+  .dialog-header .btn-close {
+    @apply -mr-1;
+  }
+
+  .dialog-title {
+    @apply mb-0 font-medium;
+  }
+
+  .dialog-body {
+    @apply flex-auto overflow-y-auto p-4;
+    max-height: calc(90vh - 200px);
+  }
+
+  .dialog-footer {
+    @apply sticky bottom-0 p-4 flex gap-2 items-center justify-between border-t border-gray-100 bg-gray-25;
+    border-radius: 0 0 calc(var(--radius-2xl) - 1px) calc(var(--radius-2xl) - 1px);
+  }
+
+  .dialog-footer .btn {
+    @apply inline-flex;
+  }
+
+  /* ==========================================================================
+     Bootstrap Modal (Legacy Support)
+     ========================================================================== */
+
+  .modal {
+    @apply fixed top-0 left-0 z-1050 hidden w-full h-full overflow-x-hidden overflow-y-auto outline-none;
+  }
+
+  .modal.show {
+    @apply block;
+  }
+
+  .modal-dialog {
+    @apply relative w-auto m-2 pointer-events-none;
+  }
+
+  .modal.show .modal-dialog {
+    @apply transform-none;
+  }
+
+  .modal-dialog-centered {
+    @apply flex items-center;
+    min-height: calc(100% - 1rem);
+  }
+
+  .modal-content {
+    @apply relative flex flex-col w-full pointer-events-auto bg-white border-none rounded-2xl outline-none;
+    background-clip: padding-box;
+    box-shadow: 0px 0px 0px 1px rgba(179, 179, 179, 0.5), 0px 6px 12px -3px rgba(179, 179, 179, 0.35), 0px 6px 18px 0px rgba(179, 179, 179, 0.35);
+  }
+
+  .modal-backdrop {
+    @apply fixed top-0 left-0 z-1050 w-screen h-screen;
+    background-color: rgba(255, 255, 255, 0.8);
+  }
+
+  .modal-header {
+    @apply flex shrink-0 items-center justify-between p-4 border-b border-gray-100;
+    border-top-left-radius: calc(var(--radius-2xl) - 1px);
+    border-top-right-radius: calc(var(--radius-2xl) - 1px);
+  }
+
+  .modal-header .btn-close {
+    @apply -mr-1;
+  }
+
+  .modal-title {
+    @apply mb-0 leading-normal font-medium;
+  }
+
+  .modal-body {
+    @apply relative flex-auto p-4;
+  }
+
+  .modal-footer {
+    @apply flex shrink-0 items-center justify-end p-4 bg-gray-25 border-t border-gray-100;
+    border-bottom-right-radius: calc(var(--radius-2xl) - 1px);
+    border-bottom-left-radius: calc(var(--radius-2xl) - 1px);
+  }
+
+  .modal-footer .btn {
+    @apply inline-flex w-auto! h-10;
+  }
+
+  .modal-footer > * {
+    @apply m-1;
+  }
+
+  .modal-dialog turbo-frame {
+    @apply block w-full;
+  }
+
+  @media (min-width: 576px) {
+    .modal-dialog {
+      @apply max-w-[500px] mx-auto;
+      margin-top: 1.75rem;
+      margin-bottom: 1.75rem;
+    }
+
+    .modal-dialog-centered {
+      min-height: calc(100% - 3.5rem);
+    }
+
+    .modal-sm {
+      @apply max-w-[300px];
+    }
+  }
+
+  @media (min-width: 992px) {
+    .modal-lg,
+    .modal-xl {
+      @apply max-w-[800px];
+    }
+  }
+
+  @media (min-width: 1200px) {
+    .modal-xl {
+      @apply max-w-[1140px];
+    }
+  }
+}