IE SVG fix

docs/css/styles.css

@@ -762,16 +762,25 @@ p:empty {
 a svg, button svg, h1 svg {
   height: 0.75em;
   width: auto;
-  margin-right: 0.25em;
+  margin-right: 0.125em;
 }
 
-h1 svg {
+h1 svg, li > svg, h2 a svg {
   height: 1em;
-  margin-right: 0;
   vertical-align: middle;
 }
 
-/* color palettes */
+h1 svg {
+  margin-right: 0;
+}
+
+.svg-outer {
+  width: 0.75em;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* Color palettes */
 
 .colors {
   display: flex;

docs/js/dom-scripts.js

@@ -70,3 +70,34 @@
     }
   })
 }());
+
+
+// SVG scaling fix for IE10-11
+(function () {
+  if (window.matchMedia('(-ms-high-contrast: none), (-ms-high-contrast: active)').matches) {
+  // Get all the SVGs on the page except the symbol defs
+    var svgs = document.querySelectorAll('a svg, button svg, h1 svg')
+    // ... iterate over SVGs
+    Array.prototype.forEach.call(svgs, function(svg) {
+      // Set preserveAspectRatio to 'XMidYMin slice'
+      svg.setAttribute('preserveAspectRatio', 'xMidYMin slice')
+
+      // Turn the viewBox values into an array
+      var viewBox = svg.getAttribute('viewBox').split(' ')
+
+      // Calculate padding value needed (width/height x 100)
+      var padding = (viewBox[2] / viewBox[3]) * 100
+
+      // Set inline styles
+      svg.setAttribute('style', 'width: 100%; padding-bottom: ' + padding + '%; height: 1px; overflow: visible')
+
+      // Create span wrapper
+      var span = document.createElement('span')
+      span.setAttribute('class', 'svg-outer')
+      span.style.width = '0.75em'
+
+      svg.parentNode.insertBefore(span, svg)
+      span.appendChild(svg)
+    })
+  }
+}());

themes/infusion/static/css/styles.css

@@ -762,16 +762,25 @@ p:empty {
 a svg, button svg, h1 svg {
   height: 0.75em;
   width: auto;
-  margin-right: 0.25em;
+  margin-right: 0.125em;
 }
 
-h1 svg {
+h1 svg, li > svg, h2 a svg {
   height: 1em;
-  margin-right: 0;
   vertical-align: middle;
 }
 
-/* color palettes */
+h1 svg {
+  margin-right: 0;
+}
+
+.svg-outer {
+  width: 0.75em;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* Color palettes */
 
 .colors {
   display: flex;

themes/infusion/static/js/dom-scripts.js

@@ -70,3 +70,34 @@
     }
   })
 }());
+
+
+// SVG scaling fix for IE10-11
+(function () {
+  if (window.matchMedia('(-ms-high-contrast: none), (-ms-high-contrast: active)').matches) {
+  // Get all the SVGs on the page except the symbol defs
+    var svgs = document.querySelectorAll('a svg, button svg, h1 svg')
+    // ... iterate over SVGs
+    Array.prototype.forEach.call(svgs, function(svg) {
+      // Set preserveAspectRatio to 'XMidYMin slice'
+      svg.setAttribute('preserveAspectRatio', 'xMidYMin slice')
+
+      // Turn the viewBox values into an array
+      var viewBox = svg.getAttribute('viewBox').split(' ')
+
+      // Calculate padding value needed (width/height x 100)
+      var padding = (viewBox[2] / viewBox[3]) * 100
+
+      // Set inline styles
+      svg.setAttribute('style', 'width: 100%; padding-bottom: ' + padding + '%; height: 1px; overflow: visible')
+
+      // Create span wrapper
+      var span = document.createElement('span')
+      span.setAttribute('class', 'svg-outer')
+      span.style.width = '0.75em'
+
+      svg.parentNode.insertBefore(span, svg)
+      span.appendChild(svg)
+    })
+  }
+}());