Make gamut warning conditional, add z-index

oddbird · Feb 5, 2025 · cdfec9a · cdfec9a
1 parent c592135
commit cdfec9a
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte
@@ -92,9 +92,11 @@
   data-needs-changes={hasError}
 >
   <div class="swatch {type} {colorInGamut ? 'in-gamut' : 'out-of-gamut'}">
-    <div class="gamut-warning">
-      <span class="sr-only">Out of gamut</span><Icon name="warning" />
-    </div>
+    {#if !colorInGamut}
+      <div class="gamut-warning">
+        <span class="sr-only">Out of gamut</span><Icon name="warning" />
+      </div>
+    {/if}
   </div>
   <label for="{type}-color" data-label>
     {displayType} Color
@@ -143,6 +145,11 @@
       outline: var(--warning) 3pt solid;
     }
 
+    .gamut-warning {
+      z-index: 1;
+      position: absolute;
+    }
+
     &.bg {
       &:after {
         background-color: var(--bgcolor);