From c4d75d4a40c0a20f188d578ca3881674d2dbfe12 Mon Sep 17 00:00:00 2001
From: "Denton, Remy" <Remy.Denton@pega.com>
Date: Fri, 22 Dec 2017 12:19:13 -0800
Subject: [PATCH] fix: Update background shapes svg positioning to support IE
 (BL-97)

---
 .../05-bolt-background-shapes/src/background-shapes.scss  | 8 ++++++++
 1 file changed, 8 insertions(+)

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
index c666886d1c..04bbef310e 100644
--- 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 {