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

Center mapping icon with label

Browse Source
This commit is contained in:
rajch_ales
2026-08-05 18:36:53 +02:00
parent 921890fbec
commit 0f9764cc49
3 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+4 -2
View File
@@ -81,8 +81,10 @@
<div class="mapping-box sidebar-mapping-box" id="mappingBox"> <div class="mapping-box sidebar-mapping-box" id="mappingBox">
<details class="mapping-details" id="mappingDetails"> <details class="mapping-details" id="mappingDetails">
<summary class="mapping-summary"> <summary class="mapping-summary">
<svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#layers"></use></svg> <span class="mapping-label">
<span class="mapping-title">Mapping</span> <svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#layers"></use></svg>
<span class="mapping-title">Mapping</span>
</span>
<span class="mapping-state-dot is-missing" id="mappingState" role="status" aria-label="Mapping not loaded"></span> <span class="mapping-state-dot is-missing" id="mappingState" role="status" aria-label="Mapping not loaded"></span>
<span class="mapping-toggle" aria-hidden="true"></span> <span class="mapping-toggle" aria-hidden="true"></span>
</summary> </summary>
public/styles.css
+1 -1
View File
File diff suppressed because one or more lines are too long
src/tailwind.css
+3 -3
View File
@@ -118,9 +118,9 @@
.sidebar-mapping-box { @apply overflow-hidden border-slate-700 bg-slate-900; } .sidebar-mapping-box { @apply overflow-hidden border-slate-700 bg-slate-900; }
.sidebar-mapping-box { @apply overflow-visible; } .sidebar-mapping-box { @apply overflow-visible; }
.mapping-details { @apply relative; } .mapping-details { @apply relative; }
.mapping-summary { @apply relative grid min-h-8 grid-cols-[1fr_auto_1fr] items-center rounded bg-slate-800 px-9 text-center text-[11px] font-semibold text-slate-100; } .mapping-summary { @apply relative flex min-h-8 items-center justify-center rounded bg-slate-800 px-9 text-center text-[11px] font-semibold text-slate-100; }
.mapping-summary > .sidebar-icon { @apply absolute left-2 top-1/2 z-10 -translate-y-1/2; } .mapping-label { @apply inline-flex min-w-0 items-center justify-center gap-1.5 text-center; }
.mapping-title { @apply absolute left-1/2 max-w-[calc(100%-4.5rem)] -translate-x-1/2 truncate text-center; } .mapping-title { @apply min-w-0 truncate text-center; }
.mapping-state-dot { @apply absolute right-7 inline-block h-3 w-3 shrink-0 rounded-full border border-slate-500 shadow-sm; } .mapping-state-dot { @apply absolute right-7 inline-block h-3 w-3 shrink-0 rounded-full border border-slate-500 shadow-sm; }
.mapping-state-dot.is-ready { @apply border-emerald-300 bg-emerald-500; } .mapping-state-dot.is-ready { @apply border-emerald-300 bg-emerald-500; }
.mapping-state-dot.is-warning { @apply border-amber-300 bg-amber-400; } .mapping-state-dot.is-warning { @apply border-amber-300 bg-amber-400; }