svg fixed widths

docs/css/styles.css

@@ -642,30 +642,38 @@ p:empty {
 a svg,
 button svg,
 h1 svg,
-th svg {
+th svg,
+li > svg {
     height: 0.75em;
-    width: auto;
+    width: 0.75em;
     margin-right: 0.25em;
 }
-h1 svg,
+h1 svg {
-li > svg,
+  margin-right: 0;
-h2 a svg {
+  width: 0.85em;
-    height: 1em;
+  height: 0.85em;
-    width: auto;
+}
+.wcag-icon {
+  width: 1.25em;
+}
+.bookmark-icon {
   vertical-align: middle;
 }
-h1 svg {
+.link-icon {
+  width: 0.75em;
+  height: 0.75em;
+}
+.tags svg, .link-icon {
+  vertical-align: middle;
+}
+.balloon-icon {
+  width: 0.75em;
   margin-right: 0;
 }
 .print {
     white-space: nowrap;
     font-style: normal;
 }
-.svg-outer {
-    width: 0.75em;
-    display: inline-block;
-    vertical-align: middle;
-}
 /* Color palettes */
 .colors {
     display: flex;

docs/js/dom-scripts.js

@@ -70,7 +70,7 @@
       link.setAttribute('href', '#' + id);
       var headingText = heading.textContent;
       link.setAttribute('aria-label', 'This ' + headingText + ' section');
-      link.innerHTML = '<svg aria-hidden="true" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#link"></use> </svg>';
+      link.innerHTML = '<svg aria-hidden="true" class="link-icon" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#link"></use> </svg>';
 
       container.appendChild(link);
 
@@ -79,37 +79,6 @@
   })
 }());
 
-
-/* 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, .tags svg, th 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%; height: 1px; padding-bottom: ' + padding + '%; 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);
-    })
-  }
-}());
-
 /* Enable scrolling by keyboard of code samples */
 (function () {
   var codeBlocks = document.querySelectorAll('pre');

themes/infusion/static/css/styles.css

@@ -642,30 +642,38 @@ p:empty {
 a svg,
 button svg,
 h1 svg,
-th svg {
+th svg,
+li > svg {
     height: 0.75em;
-    width: auto;
+    width: 0.75em;
     margin-right: 0.25em;
 }
-h1 svg,
+h1 svg {
-li > svg,
+  margin-right: 0;
-h2 a svg {
+  width: 0.85em;
-    height: 1em;
+  height: 0.85em;
-    width: auto;
+}
+.wcag-icon {
+  width: 1.25em;
+}
+.bookmark-icon {
   vertical-align: middle;
 }
-h1 svg {
+.link-icon {
+  width: 0.75em;
+  height: 0.75em;
+}
+.tags svg, .link-icon {
+  vertical-align: middle;
+}
+.balloon-icon {
+  width: 0.75em;
   margin-right: 0;
 }
 .print {
     white-space: nowrap;
     font-style: normal;
 }
-.svg-outer {
-    width: 0.75em;
-    display: inline-block;
-    vertical-align: middle;
-}
 /* Color palettes */
 .colors {
     display: flex;

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

@@ -70,7 +70,7 @@
       link.setAttribute('href', '#' + id);
       var headingText = heading.textContent;
       link.setAttribute('aria-label', 'This ' + headingText + ' section');
-      link.innerHTML = '<svg aria-hidden="true" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#link"></use> </svg>';
+      link.innerHTML = '<svg aria-hidden="true" class="link-icon" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#link"></use> </svg>';
 
       container.appendChild(link);
 
@@ -79,37 +79,6 @@
   })
 }());
 
-
-/* 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, .tags svg, th 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%; height: 1px; padding-bottom: ' + padding + '%; 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);
-    })
-  }
-}());
-
 /* Enable scrolling by keyboard of code samples */
 (function () {
   var codeBlocks = document.querySelectorAll('pre');