Merge pull request #4560 from consul/improve_icon_support

Fix SVG icons on old browsers
2021-06-23 13:00:13 +02:00
parent 918276ec70 d0f8560c33
commit cdc31db723
1 changed files with 11 additions and 12 deletions
--- a/app/assets/stylesheets/mixins/icons.scss
+++ b/app/assets/stylesheets/mixins/icons.scss
@@ -6,12 +6,14 @@
 }

 %svg-icon {
-  background: currentcolor;
-  content: "";
-  height: 1em;
-  mask-repeat: no-repeat;
-  mask-size: 100% 100%;
-  width: 1em;
+  @supports (mask-image: url()) {
+    background: currentcolor;
+    content: "";
+    height: 1em;
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+    width: 1em;
+  }
 }

 %admin-menu-icon {
@@ -37,11 +39,8 @@
    }
  }

-  @supports (mask-image: url()) {
-
-    &::#{$position} {
-      @extend %svg-icon;
-      mask-image: image-url("fontawesome/#{$style}/#{$icon}.svg");
-    }
+  &::#{$position} {
+    @extend %svg-icon;
+    mask-image: image-url("fontawesome/#{$style}/#{$icon}.svg");
  }
 }