fix: Update background shapes svg positioning to support IE (BL-97)

boltdesignsystem · Dec 26, 2017 · c4d75d4 · c4d75d4
1 parent 99772ce
commit c4d75d4
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/src/_patterns/02-components/05-bolt-background-shapes/src/background-shapes.scss b/src/_patterns/02-components/05-bolt-background-shapes/src/background-shapes.scss
@@ -12,9 +12,17 @@
   }
 
   &__shape {
+    // To support IE, use the "bottom padding" hack to position svgs within the grid.
+    // See https://css-tricks.com/scale-svg/#article-header-id-10
+    position: relative;
+    height: 0;
+    padding-bottom: 100%;
 
     svg {
       display: block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
     }
 
     &--orange {