spree_admin 5.2.6 → 5.3.0.rc1

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

@@ -0,0 +1,128 @@
+/* ==========================================================================
+   DROPDOWNS
+   ========================================================================== */
+
+@layer components {
+  .dropdown {
+    @apply relative;
+  }
+
+  .dropdown .btn .text-gray-600 {
+    @apply text-gray-500!;
+  }
+
+  .dropdown .arrow {
+    @apply text-gray-300;
+  }
+
+  .dropdown:hover .arrow {
+    @apply text-gray-500;
+  }
+
+  .dropdown.show .arrow {
+    @apply rotate-180;
+  }
+
+  /* Dropdown Toggle */
+  .dropdown-toggle {
+    @apply whitespace-nowrap;
+  }
+
+  .dropdown-toggle::after {
+    @apply border-none inline-block align-middle opacity-50 rotate-0 transition-transform duration-200 ease-in-out;
+    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");
+  }
+
+  .dropdown-toggle:focus::after,
+  .dropdown-toggle:active::after,
+  .dropdown-toggle[aria-expanded="true"]::after {
+    @apply rotate-180 opacity-100;
+  }
+
+  .dropdown-toggle:empty::after {
+    @apply ml-0;
+  }
+
+  /* Dropdown Container using Floating UI */
+  .dropdown-container {
+    @apply absolute z-1050 text-left list-none border-0 overflow-hidden text-base font-normal text-gray-950 bg-white;
+    @apply origin-top mt-1! p-1 rounded-2xl min-w-40 max-w-80;
+    animation: popIn 0.15s ease-out both;
+    background-clip: padding-box;
+    box-shadow: var(--shadow-dropdown);
+  }
+
+  /* When hidden, disable animation so it doesn't play on page load */
+  .dropdown-container.hidden {
+    @apply animate-none;
+  }
+
+  .dropdown-divider {
+    @apply h-0 my-1 overflow-hidden border-t border-gray-100;
+  }
+
+  /* Dropdown Item */
+  .dropdown-container .dropdown-item,
+  .dropdown-container .dropdown-header {
+    @apply py-2 px-2.5;
+  }
+
+  .dropdown-container .dropdown-header {
+    @apply text-base font-normal my-1;
+  }
+
+  .dropdown-item {
+    @apply flex items-center justify-start w-full clear-both text-inherit no-underline whitespace-nowrap bg-transparent border-0 font-normal;
+    @apply h-8 mb-1 pr-8 rounded-xl transition-colors duration-75 ease-linear gap-3;
+  }
+
+  .dropdown-item .badge {
+    @apply ml-auto self-center;
+  }
+
+  .dropdown-item:hover,
+  .dropdown-item:focus {
+    @apply no-underline text-gray-900 bg-gray-200/50;
+  }
+
+  .dropdown-item.active {
+    @apply text-gray-900! font-bold! bg-gray-200/50!;
+  }
+
+  .dropdown-item.active i {
+    @apply text-gray-900!;
+  }
+
+  .dropdown-item:active {
+    @apply no-underline text-gray-900 bg-gray-100;
+  }
+
+  .dropdown-item.disabled,
+  .dropdown-item:disabled {
+    @apply pointer-events-none bg-transparent text-gray-500;
+  }
+
+  .dropdown-item.btn {
+    @apply font-normal!;
+  }
+
+  .dropdown-item.btn-danger {
+    @apply shadow-none;
+  }
+
+  .dropdown-item:last-child {
+    @apply mb-0;
+  }
+
+  .dropdown-container .button_to {
+    @apply w-full;
+  }
+
+  .dropdown-header {
+    @apply block mb-0 whitespace-nowrap text-sm text-gray-600 py-2 px-4;
+  }
+
+  .dropdown-item-text {
+    @apply block py-1 px-4 text-gray-950;
+  }
+}

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

@@ -0,0 +1,83 @@
+/* ==========================================================================
+   FILTERS
+   ========================================================================== */
+
+@layer components {
+  .filter-wrap {
+    @apply sticky bg-white border-b border-gray-200 rounded-t-2xl;
+    padding: 0.55rem;
+    gap: 0.55rem;
+    top: var(--spacing-header-height);
+    z-index: 1000;
+  }
+
+  .filter-wrap .btn {
+    height: 2.125rem;
+  }
+
+
+  #table-filter {
+    @apply absolute p-4 rounded-2xl shadow-dropdown bg-white mt-2 right-2 w-full overflow-y-auto;
+    animation: fadeIn 0.2s ease-in-out;
+    z-index: 1050;
+    max-height: calc(100vh - var(--spacing-header-height) - 4rem);
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @media (min-width: 768px) {
+    #table-filter {
+      @apply w-1/2 flex-col;
+    }
+  }
+
+  #table-filter.hidden,
+  #table-filter.d-none {
+    @apply !hidden;
+  }
+
+  .collapsed .arrow {
+    @apply -rotate-90 transition-transform duration-300 ease-in-out;
+  }
+
+  i.js-delete-filter {
+    @apply mb-0;
+  }
+
+  .sort_link {
+    @apply text-gray-600 px-1 rounded-sm inline-flex items-center justify-center;
+  }
+
+  .sort_link:hover {
+    @apply text-zinc-950! no-underline! bg-gray-50;
+  }
+
+  .sort_link.asc,
+  .sort_link.desc {
+    @apply font-medium;
+  }
+
+  .sort_link.asc svg,
+  .sort_link.desc svg {
+    @apply text-gray-600!;
+  }
+
+  .sort_link .icon,
+  .sort_link svg {
+    margin-left: 5px;
+    margin-bottom: 2px;
+    width: 0.8rem;
+    height: 0.8rem;
+  }
+
+  .sort_link svg.default-filter-arrow {
+    @apply opacity-30;
+  }
+
+  .filter-badges-container:has(*) {
+    @apply mt-4 flex gap-2 flex-wrap;
+  }
+}

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

@@ -0,0 +1,258 @@
+/* ==========================================================================
+   FORMS
+   ========================================================================== */
+@layer components {
+  label {
+    @apply flex items-center cursor-pointer gap-2 font-medium mb-2 text-base;
+  }
+
+  .form-group {
+    @apply mb-4;
+  }
+
+  .form-label {
+    @apply inline-block mb-2 font-medium;
+  }
+
+  .form-control, 
+  .text-input, 
+  .form-input, 
+  .form-select,
+  .custom-select, 
+  .ts-control, 
+  .select-input, 
+  .form-control-sm, 
+  .custom-select-sm {
+    @apply block w-full py-2 pl-3 pr-8 text-base font-normal leading-normal;
+    @apply text-gray-950 bg-white border border-gray-200 rounded-lg shadow-xs;
+    @apply focus:outline-offset-2 focus:outline-blue-500 focus:border-gray-200 focus:ring-0;
+    @apply transition-all duration-100 ease-in-out;
+  }
+
+  .form-input-sm,
+  .form-select-sm,
+  .form-control-sm,
+  .custom-select-sm {
+    @apply py-1 px-2 text-sm;
+  }
+
+  .form-control::placeholder,
+  .form-input::placeholder,
+  .text-input::placeholder,
+  .form-select::placeholder {
+    @apply text-gray-500 opacity-100;
+  }
+
+  .form-control:disabled,
+  .form-control[readonly],
+  .form-input:disabled,
+  .form-input[readonly],
+  .text-input:disabled,
+  .text-input[readonly] {
+    @apply shadow-none cursor-not-allowed text-gray-600;
+    background-color: var(--color-gray-50) !important;
+    border: 1px solid var(--color-gray-100) !important;
+  }
+
+  .form-text {
+    @apply block mt-0 text-base text-gray-600;
+  }
+
+  .form-actions {
+    @apply flex items-center gap-2;
+  }
+
+  .field_with_errors {
+    @apply contents;
+  }
+
+  .field_with_errors input,
+  .field_with_errors select,
+  .field_with_errors textarea {
+    @apply border-danger;
+  }
+
+  .formError {
+    @apply block mt-1 text-sm text-danger;
+  }
+
+  /* Select */
+  .custom-select:disabled,
+  .custom-select[readonly],
+  .form-select:disabled,
+  .form-select[readonly] {
+    @apply shadow-none cursor-not-allowed text-gray-600;
+    background-color: var(--color-gray-50);
+    border: 1px solid var(--color-gray-200);
+  }
+
+  /* Custom Select Small */
+  .custom-select-sm,
+  .form-select-sm {
+    height: calc(1.5em + 0.5rem + 2px);
+  }
+
+  /* Input Group */
+  .input-group {
+    @apply flex items-center gap-3 bg-white border border-gray-200 rounded-lg shadow-xs focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-blue-500 focus-within:ring-0 transition-all duration-100 ease-in-out;
+  }
+  .input-group > input {
+    @apply text-base border-0 focus:ring-0 focus:outline-none rounded-lg;
+  }
+  .input-group-append {
+    @apply px-3 text-center;
+  }
+
+  /* File input */
+  input[type="file"] {
+    @apply max-w-full whitespace-nowrap overflow-hidden text-ellipsis;
+    width: fit-content;
+  }
+
+  /* Custom Controls (Checkboxes & Radios) */
+  .custom-control {
+    @apply relative block min-h-6;
+  }
+
+  .custom-control-input {
+    @apply absolute opacity-0 z-[-1];
+  }
+
+  .custom-control-label {
+    @apply relative mb-0 align-top cursor-pointer select-none pl-7 font-normal;
+  }
+
+  .custom-control-label::before {
+    @apply absolute left-0 top-0.5 block pointer-events-none bg-white border border-gray-300 rounded;
+    content: "";
+    width: 1.125rem;
+    height: 1.125rem;
+    transition:
+      background-color 0.15s ease-in-out,
+      border-color 0.15s ease-in-out,
+      box-shadow 0.15s ease-in-out;
+  }
+
+  .custom-control-label::after {
+    @apply absolute left-0 top-0.5 block bg-no-repeat bg-center;
+    content: "";
+    width: 1.125rem;
+    height: 1.125rem;
+    background-size: 60% 60%;
+  }
+
+  /* Checkbox checked state */
+  .form-checkbox .custom-control-input:checked ~ .custom-control-label::before {
+    @apply border-blue-500 bg-blue-500;
+  }
+
+  .form-checkbox .custom-control-input:checked ~ .custom-control-label::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e");
+  }
+
+  /* Checkbox indeterminate state */
+  .form-checkbox
+    .custom-control-input:indeterminate
+    ~ .custom-control-label::before {
+    @apply border-blue-500 bg-blue-500;
+  }
+
+  .form-checkbox
+    .custom-control-input:indeterminate
+    ~ .custom-control-label::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3e%3cpath fill-rule='evenodd' d='M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
+  }
+
+  /* Focus state */
+  .custom-control-input:focus ~ .custom-control-label::before {
+    @apply ring-2 ring-blue-500/25 ring-offset-1;
+  }
+
+  /* Disabled state */
+  .custom-control-input:disabled ~ .custom-control-label {
+    @apply text-gray-400 cursor-not-allowed;
+  }
+
+  .custom-control-input:disabled ~ .custom-control-label::before {
+    @apply bg-gray-100 border-gray-200;
+  }
+
+  .custom-control-input:disabled:checked ~ .custom-control-label::before {
+    @apply bg-blue-500/50 border-blue-500/50;
+  }
+
+  /* Radio button specific styles */
+  .custom-radio .custom-control-label::before {
+    @apply rounded-full;
+  }
+
+  .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
+    @apply border-blue-500 bg-blue-500;
+  }
+
+  .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='white'/%3e%3c/svg%3e");
+  }
+
+  /* Hover state for unchecked */
+  .custom-control-input:not(:checked):not(:disabled)
+    ~ .custom-control-label:hover::before {
+    @apply border-gray-400;
+  }
+
+  /* Custom switch styles */
+  .custom-switch {
+    @apply pl-12;
+  }
+
+  .custom-switch .custom-control-label::before {
+    @apply left-0 rounded-full bg-gray-200 border-gray-200;
+    width: 2.5rem;
+    height: 1.25rem;
+    pointer-events: all;
+  }
+
+  .custom-switch .custom-control-label::after {
+    @apply left-0.5 top-1 rounded-full bg-white shadow;
+    width: 1rem;
+    height: 1rem;
+    transition:
+      transform 0.15s ease-in-out,
+      background-color 0.15s ease-in-out;
+  }
+
+  .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
+    @apply bg-blue-500 border-blue-500;
+  }
+
+  .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
+    @apply bg-white;
+    transform: translateX(1.25rem);
+  }
+
+  .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
+    @apply ring-2 ring-blue-500/25 ring-offset-1;
+  }
+
+  .custom-switch
+    .custom-control-input:disabled
+    ~ .custom-control-label::before {
+    @apply bg-gray-100 border-gray-100;
+  }
+
+  /* Inline controls */
+  .custom-range, .form-range {
+    @apply w-full h-2 p-0 bg-transparent border rounded-full appearance-none cursor-pointer bg-gray-200;
+  }
+
+  .custom-range::-webkit-slider-thumb, .form-range::-webkit-slider-thumb {
+    @apply w-4 h-4 appearance-none bg-blue-500 rounded-full cursor-pointer ring-2 ring-blue-500/25 ring-offset-1 focus:outline-none;
+  }
+
+  /* Hide native search clear button */
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+}