feat(alerts): update system SVG icons to see through content, as seen…

… on new alert stencil
Orange-OpenSource · Oct 29, 2019 · 9df2e51 · 9df2e51
1 parent 06d9497
commit 9df2e51
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/scss/_alert.scss b/scss/_alert.scss
@@ -40,7 +40,7 @@
     margin-right: map-get($spacers, 3);
     content: "";
     background-repeat: no-repeat;
-    background-size: cover;
+    background-size: contain;
   }
   // end mod
 }

diff --git a/scss/mixins/_orange-icons.scss b/scss/mixins/_orange-icons.scss
@@ -66,24 +66,24 @@
 
 %svg-success {
   &::after {
-    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1250' height='1250' viewBox='0 0 125 125'><path d='M62.5 0C27.983 0 0 27.982 0 62.5 0 97.017 27.982 125 62.5 125c34.517 0 62.5-27.982 62.5-62.5C125 27.983 97.018 0 62.5 0' fill='#32c832'/><path d='M96.437 35.294c0-3.248-2.62-5.882-5.851-5.882a5.813 5.813 0 0 0-4.002 1.592v-.001L51.968 64.706 40.563 52.004l-.001.002a5.81 5.81 0 0 0-3.808-1.418 5.814 5.814 0 0 0-4.136 1.724l-2.341 2.352a5.881 5.881 0 0 0-1.714 4.16c0 1.39.481 2.667 1.284 3.674h-.001l18.723 23.53.002-.001a5.828 5.828 0 0 0 9.136 0v.001l37.447-47.059v-.001a5.88 5.88 0 0 0 1.283-3.674' fill='#fff'/></svg>"));
+    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{theme-color("success")}' d='M62.5 0a62.5 62.5 0 100 125 62.5 62.5 0 000-125zm28 29.4c3.3 0 6 2.6 6 5.9a5.9 5.9 0 01-1.3 3.7L57.7 86a5.8 5.8 0 01-9.1 0L29.8 62.5c-.8-1-1.2-2.3-1.2-3.7a5.9 5.9 0 011.7-4.1l2.3-2.4a5.8 5.8 0 014.2-1.7 5.8 5.8 0 013.8 1.4L52 64.7 86.6 31a5.8 5.8 0 014-1.6z'/></svg>"));
   }
 }
 
 %svg-warning {
   &::after {
-    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1250' height='1250' viewBox='0 0 140 125'><path d='M138.7 101.504l.001-.002-54.767-93.75-.003.002C81.218 3.117 76.183 0 70.416 0 64.65 0 59.615 3.117 56.901 7.754l-.001-.002-54.634 93.52c-.002.003-.003.007-.006.01l-.129.22.001.002A15.527 15.527 0 0 0 0 109.375C0 118.005 7.006 125 15.647 125h109.538c8.642 0 15.649-6.995 15.649-15.625 0-2.871-.78-5.559-2.134-7.871' fill='#fc0'/><path d='M62.68 37.562l2.624 43.12c.002 2.913 2.364 4.007 5.28 4.007 2.913 0 5.275-1.094 5.277-4.007l2.617-43.02a7.917 7.917 0 0 0-7.895-8.494 7.917 7.917 0 0 0-7.902 8.394M70.583 92.5a7.918 7.918 0 1 0-.001 15.836 7.918 7.918 0 0 0 .001-15.836'/></svg>"));
+    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 125'><path fill='#{theme-color("warning")}' d='M70.4 0C64.7 0 59.6 3.1 57 7.8L2.3 101.3l-.2.2a15.5 15.5 0 00-2.1 7.9C0 118 7 125 15.6 125h109.6a15.6 15.6 0 0013.5-23.5L83.9 7.8A15.6 15.6 0 0070.4 0zm.2 29.2a8 8 0 017.9 8.5l-2.6 43c0 2.9-2.4 4-5.3 4-3 0-5.3-1.1-5.3-4l-2.6-43.1a8 8 0 017.9-8.4zm0 63.3a8 8 0 010 15.8 8 8 0 110-15.8z'/></svg>"));
   }
 }
 
 %svg-danger {
   &::after {
-    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1250' height='1250' viewBox='0 0 140 125'><path d='M138.426 101.502h.003L83.767 7.752C81.056 3.116 76.033 0 70.276 0 64.522 0 59.5 3.116 56.79 7.752h-.002l-54.525 93.52-.006.01-.129.22h.002c-1.35 2.313-2.129 5-2.129 7.873C0 118.004 6.994 125 15.617 125H124.94c8.623 0 15.616-6.996 15.616-15.625 0-2.873-.778-5.56-2.129-7.873' fill='#cd3c14'/><path d='M94.435 99.68a6.41 6.41 0 0 1-4.543 1.882 6.407 6.407 0 0 1-4.542-1.882L70.278 84.601 55.206 99.68a6.404 6.404 0 0 1-4.541 1.882 6.405 6.405 0 0 1-4.543-1.882 6.43 6.43 0 0 1 .001-9.089l15.07-15.079-14.535-14.54a6.426 6.426 0 1 1 9.086-9.09L70.28 66.423 84.815 51.88a6.423 6.423 0 0 1 9.083 0 6.43 6.43 0 0 1 0 9.09L79.363 75.512l15.072 15.08a6.429 6.429 0 0 1 0 9.088' fill='#fff'/></svg>"));
+    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 125'><path fill='#{theme-color("danger")}' d='M70.3 0c-5.8 0-10.8 3.1-13.5 7.8L2.3 101.3l-.2.2A15.6 15.6 0 0015.6 125H125a15.6 15.6 0 0013.5-23.5L83.8 7.8A15.6 15.6 0 0070.3 0zm19.2 50a6.4 6.4 0 014.4 1.9 6.4 6.4 0 010 9L79.4 75.6l15 15a6.4 6.4 0 010 9.2 6.4 6.4 0 01-4.5 1.9 6.4 6.4 0 01-4.6-2l-15-15-15 15a6.4 6.4 0 01-4.6 2 6.4 6.4 0 01-4.6-2 6.4 6.4 0 010-9l15-15L46.8 61a6.4 6.4 0 119-9.1l14.6 14.5L84.8 52a6.4 6.4 0 014.7-1.9z'/></svg> "));
   }
 }
 
 %svg-info {
   &::after {
-    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1250' height='1250' viewBox='0 0 125 125'><path d='M62.5 0C27.983 0 0 27.982 0 62.5 0 97.017 27.983 125 62.5 125c34.518 0 62.5-27.982 62.5-62.5C125 27.983 97.018 0 62.5 0' fill='#527edb'/><path d='M80.127 99.133c-2.491-.15-4.013-.702-4.798-1.64-.556-.665-1.8-2.46-1.8-7.228V44.118H47.794v3.823l.754.045c2.45.15 4.09.703 4.879 1.642.556.667 1.221 2.463 1.221 7.227v33.41c0 5.009-.644 6.498-1.022 6.935-1.067 1.208-2.767 1.858-5.054 1.931l-.778.025v3.785h33.088v-3.763l-.755-.045zM62.499 36.765c6.092 0 11.03-4.939 11.03-11.03 0-6.091-4.938-11.03-11.03-11.03-6.09 0-11.028 4.939-11.028 11.03 0 6.091 4.937 11.03 11.028 11.03' fill='#fff'/></svg>"));
+    background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{theme-color("info")}' d='M62.5 0a62.5 62.5 0 100 125 62.5 62.5 0 000-125zm0 14.7a11 11 0 110 22 11 11 0 010-22zM47.8 44.1h25.7v46.2c0 4.7 1.3 6.5 1.8 7.2.8 1 2.3 1.5 4.8 1.6h.8v3.8H47.8v-3.7h.8c2.3-.1 4-.8 5-2 .4-.4 1-2 1-7V57c0-4.8-.6-6.6-1.2-7.3-.8-1-2.4-1.5-4.9-1.6h-.7V44z'/></svg> "));
   }
 }