Standardize left sidebar controls
This commit is contained in:
+12
-5
@@ -57,13 +57,17 @@
|
||||
.sidebar-overlay[hidden] { display: none; }
|
||||
.sidebar-drawer[aria-hidden="true"] { @apply -translate-x-full; }
|
||||
.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 relative flex min-h-8 w-full items-center justify-center rounded border border-slate-700 bg-slate-800 px-8 text-center text-[11px] font-semibold text-slate-100 transition hover:border-slate-500 hover:bg-slate-700; }
|
||||
.drawer-trigger .sidebar-icon { @apply absolute left-2; }
|
||||
.drawer-trigger > span:not(.drawer-chevron) { @apply min-w-0 truncate text-center; }
|
||||
.drawer-trigger .drawer-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; }
|
||||
.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 > .sidebar-icon { @apply shrink-0; }
|
||||
.action-button > span { @apply min-w-0 truncate text-center; }
|
||||
.action-button .sidebar-icon { @apply text-slate-400; }
|
||||
.sidebar-footer { @apply mt-auto grid gap-1 border-t border-slate-700 pt-2; }
|
||||
.app-status { @apply rounded border border-slate-700 bg-slate-950 p-1 text-[10px] leading-tight text-slate-100; }
|
||||
@@ -86,14 +90,16 @@
|
||||
.arrow-button:disabled, .action-button:disabled { @apply cursor-not-allowed opacity-50; }
|
||||
.input-like { @apply h-7 px-1 text-[11px]; }
|
||||
.select-control { @apply relative w-full; }
|
||||
.select-control .input-like { @apply appearance-none pr-7 text-center; }
|
||||
.select-control .input-like { @apply appearance-none pr-7 pl-9 text-center; }
|
||||
.select-icon { @apply pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-slate-300; }
|
||||
.select-chevron { @apply pointer-events-none absolute right-3 top-1/2 h-2 w-2 -translate-y-1/2 rotate-45 border-b-2 border-r-2 text-slate-200; }
|
||||
.native-manufacturer-select { @apply hidden; }
|
||||
.manufacturer-picker { @apply relative; }
|
||||
.manufacturer-trigger { @apply relative flex h-7 w-full items-center justify-center rounded border border-slate-700 bg-slate-800 px-2 text-center text-[11px] text-slate-200 shadow-sm; }
|
||||
.manufacturer-trigger { @apply relative flex h-7 w-full items-center justify-center rounded border border-slate-700 bg-slate-800 px-9 text-center text-[11px] text-slate-200 shadow-sm; }
|
||||
.manufacturer-trigger .select-icon { @apply left-3; }
|
||||
.manufacturer-trigger > span:not(.select-chevron) { @apply min-w-0 truncate text-center; }
|
||||
.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 span:first-child { @apply min-w-0 truncate; }
|
||||
.manufacturer-trigger .select-chevron { @apply right-3 top-1/2 ml-0 translate-y-[-50%]; }
|
||||
.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; }
|
||||
@@ -240,7 +246,8 @@
|
||||
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) .drawer-trigger .drawer-chevron,
|
||||
html:not(.dark) .select-chevron { @apply text-slate-700; }
|
||||
html:not(.dark) .select-chevron,
|
||||
html:not(.dark) .select-icon { @apply text-slate-700; }
|
||||
html:not(.dark) .sidebar-close-button,
|
||||
html:not(.dark) .sidebar-open-button,
|
||||
html:not(.dark) .drawer-trigger,
|
||||
|
||||
Reference in New Issue
Block a user