rajch_ales/product-import-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Standardize arrow controls with Tailwind utilities

Browse Source
This commit is contained in:
rajch_ales
2026-08-05 17:06:42 +02:00
parent f54ebe082b
commit d6af48095a
2 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles.css
+1 -1
View File
File diff suppressed because one or more lines are too long
src/tailwind.css
+18 -7
View File
@@ -58,7 +58,10 @@
.sidebar-drawer[aria-hidden="true"] { @apply -translate-x-full; } .sidebar-drawer[aria-hidden="true"] { @apply -translate-x-full; }
.sidebar-section { @apply border-t border-slate-700 pt-1; } .sidebar-section { @apply border-t border-slate-700 pt-1; }
.drawer-trigger { @apply flex min-h-8 w-full items-center gap-2 rounded border border-slate-700 bg-slate-800 px-2 text-left text-[11px] font-semibold text-slate-100 transition hover:border-slate-500 hover:bg-slate-700; } .drawer-trigger { @apply flex min-h-8 w-full items-center gap-2 rounded border border-slate-700 bg-slate-800 px-2 text-left text-[11px] font-semibold text-slate-100 transition hover:border-slate-500 hover:bg-slate-700; }
.drawer-trigger .drawer-chevron { @apply ml-auto text-sm text-slate-400; } .drawer-trigger .drawer-chevron,
.picker-chevron { @apply inline-flex h-2 w-2 border-b-2 border-r-2 text-[0px] leading-none; }
.drawer-trigger .drawer-chevron { @apply ml-auto rotate-45 text-slate-300; }
.drawer-trigger[aria-expanded="true"] .drawer-chevron { @apply rotate-[225deg]; }
.parser-drawer[hidden] { display: none; } .parser-drawer[hidden] { display: none; }
.sidebar-icon { @apply inline-flex h-4 w-4 shrink-0 items-center justify-center text-sm leading-none text-slate-300; } .sidebar-icon { @apply inline-flex h-4 w-4 shrink-0 items-center justify-center text-sm leading-none text-slate-300; }
.action-button { @apply flex items-center justify-center gap-1.5; } .action-button { @apply flex items-center justify-center gap-1.5; }
@@ -71,10 +74,12 @@
.arrow-row { @apply grid grid-cols-2 gap-1; } .arrow-row { @apply grid grid-cols-2 gap-1; }
.arrow-button, .action-button, .input-like { @apply w-full rounded border border-slate-700 bg-slate-800 text-center text-slate-200 shadow-sm transition; } .arrow-button, .action-button, .input-like { @apply w-full rounded border border-slate-700 bg-slate-800 text-center text-slate-200 shadow-sm transition; }
.arrow-button, .action-button { @apply min-h-7 px-1 text-[11px]; } .arrow-button, .action-button { @apply min-h-7 px-1 text-[11px]; }
.arrow-button { @apply relative text-transparent; } .arrow-button { @apply relative text-slate-100; }
.arrow-button::before { @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-xl leading-none text-slate-100; content: ""; } .arrow-button::before,
.arrow-button-prev::before { content: "‹"; } .column-toggle::before { content: ""; @apply block h-2 w-2 border-b-2 border-r-2; }
.arrow-button-next::before { content: "›"; } .arrow-button::before { @apply absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 border-b-2 border-r-2; }
.arrow-button-prev::before { @apply rotate-[135deg]; }
.arrow-button-next::before { @apply rotate-[-45deg]; }
.parser-actions { @apply grid gap-1; } .parser-actions { @apply grid gap-1; }
.parser-actions .action-button { @apply min-h-7; } .parser-actions .action-button { @apply min-h-7; }
.action-button.primary { @apply min-h-8 font-semibold; } .action-button.primary { @apply min-h-8 font-semibold; }
@@ -87,7 +92,7 @@
.manufacturer-trigger:hover { @apply border-slate-500 bg-slate-700; } .manufacturer-trigger:hover { @apply border-slate-500 bg-slate-700; }
.manufacturer-trigger[aria-expanded="true"] { @apply border-catalog-focus ring-2 ring-catalog-focus/25; } .manufacturer-trigger[aria-expanded="true"] { @apply border-catalog-focus ring-2 ring-catalog-focus/25; }
.manufacturer-trigger span:first-child { @apply min-w-0 truncate; } .manufacturer-trigger span:first-child { @apply min-w-0 truncate; }
.picker-chevron { @apply ml-2 text-slate-400; } .picker-chevron { @apply ml-2 rotate-45 text-slate-200; }
.manufacturer-menu { @apply absolute left-0 right-0 top-full z-50 mt-1 rounded border border-slate-300 bg-white p-1 shadow-xl; } .manufacturer-menu { @apply absolute left-0 right-0 top-full z-50 mt-1 rounded border border-slate-300 bg-white p-1 shadow-xl; }
.manufacturer-menu[hidden] { display: none; } .manufacturer-menu[hidden] { display: none; }
.manufacturer-search { @apply mb-1 h-7 w-full rounded border border-slate-300 px-2 text-[11px] text-slate-800 outline-none focus:border-catalog-focus focus:ring-2 focus:ring-catalog-focus/25; } .manufacturer-search { @apply mb-1 h-7 w-full rounded border border-slate-300 px-2 text-[11px] text-slate-800 outline-none focus:border-catalog-focus focus:ring-2 focus:ring-catalog-focus/25; }
@@ -117,7 +122,11 @@
.mapping-source-status.is-muted { @apply bg-slate-200 text-slate-600; } .mapping-source-status.is-muted { @apply bg-slate-200 text-slate-600; }
.secondary-panel { @apply min-w-0 border-r border-slate-400 bg-slate-300; } .secondary-panel { @apply min-w-0 border-r border-slate-400 bg-slate-300; }
.column-header { @apply min-w-0; } .column-header { @apply min-w-0; }
.column-toggle { @apply inline-flex h-5 w-5 shrink-0 items-center justify-center rounded border border-slate-400 bg-white text-sm leading-none text-slate-700 shadow-sm transition hover:border-slate-500 hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-catalog-focus/25; } .column-toggle { @apply inline-flex h-5 w-5 shrink-0 items-center justify-center rounded border border-slate-400 bg-white text-[0px] leading-none text-slate-700 shadow-sm transition hover:border-slate-500 hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-catalog-focus/25; }
#secondaryPanelToggle[aria-label="Collapse product details"]::before,
#mainWorkspaceToggle[aria-label="Expand main workspace"]::before { transform: rotate(135deg); }
#secondaryPanelToggle[aria-label="Expand product details"]::before,
#mainWorkspaceToggle[aria-label="Collapse main workspace"]::before { transform: rotate(-45deg); }
.secondary-panel .field-grid { @apply overflow-hidden; } .secondary-panel .field-grid { @apply overflow-hidden; }
.secondary-collapsed .secondary-panel .column-header { @apply h-full flex-col justify-start py-1; writing-mode: vertical-rl; } .secondary-collapsed .secondary-panel .column-header { @apply h-full flex-col justify-start py-1; writing-mode: vertical-rl; }
.secondary-collapsed .secondary-panel .column-header .column-toggle, .secondary-collapsed .secondary-panel .column-header .column-toggle,
@@ -228,6 +237,8 @@
html:not(.dark) .sidebar-drawer-header, html:not(.dark) .sidebar-drawer-header,
html:not(.dark) .column-header { @apply border-slate-300 bg-slate-100 text-slate-700; } html:not(.dark) .column-header { @apply border-slate-300 bg-slate-100 text-slate-700; }
html:not(.dark) .sidebar-drawer-title { @apply text-slate-700; } html:not(.dark) .sidebar-drawer-title { @apply text-slate-700; }
html:not(.dark) .drawer-trigger .drawer-chevron,
html:not(.dark) .picker-chevron { @apply text-slate-700; }
html:not(.dark) .sidebar-close-button, html:not(.dark) .sidebar-close-button,
html:not(.dark) .sidebar-open-button, html:not(.dark) .sidebar-open-button,
html:not(.dark) .drawer-trigger, html:not(.dark) .drawer-trigger,