Merge pull request #654 from live-codes/css-icon-fallback

add fallback when css masking is not supported
live-codes · Nov 27, 2024 · 540f29e · 540f29e
2 parents 04867a1 + b4384a5
commit 540f29e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
@@ -217,6 +217,9 @@
   --text-success-bg-color: rgba(85, 255, 0, 0.25);
   --text-success-border: 1px solid rgb(85, 255, 0);
   --text-success-color: rgb(153, 255, 102);
+
+  --icon-filter: invert(0.8);
+  --icon-filter-active: invert(1);
 }
 
 @import 'inc-light';

diff --git a/src/livecodes/styles/inc-icons.css b/src/livecodes/styles/inc-icons.css
@@ -10,6 +10,22 @@
   width: 1em;
 }
 
+@supports not (mask-image: var(--svg)) {
+  [class^='icon-'] {
+    background-color: transparent;
+    background-image: var(--svg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    filter: var(--icon-filter);
+  }
+
+  a:hover [class^='icon-'],
+  button:hover [class^='icon-'],
+  [class^='icon-']:hover {
+    filter: var(--icon-filter-active);
+  }
+}
+
 .icon-add {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8z'/%3E%3C/svg%3E");
 }

diff --git a/src/livecodes/styles/inc-light.scss b/src/livecodes/styles/inc-light.scss
@@ -72,6 +72,9 @@
   --text-success-border: 1px solid rgb(0, 128, 0);
   --text-success-color: rgb(0, 178, 0);
 
+  --icon-filter: invert(0.3);
+  --icon-filter-active: invert(1);
+
   #logo img {
     filter: drop-shadow(1px 1px 1px var(--color50));
   }