From e56c5ea45d9fcd04f45dc1d75372913e54c0f4f5 Mon Sep 17 00:00:00 2001 From: Heydon Pickering Date: Fri, 28 Jul 2017 14:42:01 +0100 Subject: [PATCH] IE SVG fix --- docs/css/styles.css | 17 ++++++++++--- docs/js/dom-scripts.js | 31 ++++++++++++++++++++++++ docs/service-worker.js | 2 +- themes/infusion/static/css/styles.css | 17 ++++++++++--- themes/infusion/static/js/dom-scripts.js | 31 ++++++++++++++++++++++++ 5 files changed, 89 insertions(+), 9 deletions(-) diff --git a/docs/css/styles.css b/docs/css/styles.css index 9abdee6..b19da54 100644 --- a/docs/css/styles.css +++ b/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; diff --git a/docs/js/dom-scripts.js b/docs/js/dom-scripts.js index e2ed375..0673630 100644 --- a/docs/js/dom-scripts.js +++ b/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) + }) + } +}()); diff --git a/docs/service-worker.js b/docs/service-worker.js index a3aa907..b2ce4ea 100644 --- a/docs/service-worker.js +++ b/docs/service-worker.js @@ -37,7 +37,7 @@ /* eslint-disable indent, no-unused-vars, no-multiple-empty-lines, max-nested-callbacks, space-before-function-paren, quotes, comma-spacing */ 'use strict'; -var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/fonts/pt_sans-web-bold.woff","f83c22b548d2d684e24e315d81f7d22b"],["css/fonts/pt_sans-web-bold.woff2","84520c22e6ebf1b30b6f17251d65fff7"],["css/fonts/pt_sans-web-italic.woff","31f09f09a1d3fbe6c8de19644ef0e614"],["css/fonts/pt_sans-web-italic.woff2","df128e1d5a449fc0506fc1b48aac0184"],["css/fonts/pt_sans-web-regular.woff","32100f6ebf01af64d4a71416561c072d"],["css/fonts/pt_sans-web-regular.woff2","b6d4ede9a3a5dbe4d5ac242ae4b0ecc2"],["css/images/arrow_effect.svg","1434d178461f70c16b77acb4bdbc51e3"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","0042ea6976cb09f2653def831f8e6718"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/browser-Chrome-Android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-Chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-Edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-Firefox-Android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-Firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-IE.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-Opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-Safari-iOS.svg","f729e629ec998ec40d313495d7257741"],["images/browser-Safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.png","0134d77c2c6b01eabb425990bab7ce9a"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["images/steve_faulkner.jpg","b90382f2b505ce6f6b1e08657637395e"],["index.html","e5608fc8380e087946d70b4ce8eeefca"],["index.xml","69b28bf21721f0244666f2f84c7922fd"],["js/dom-scripts.js","767a2870b95c7b7d1129445e04add354"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["js/webcomponents.js","c5f6fe397db634cde89f66c2f1bc2f62"],["manifest.json","4e77b7f1253442852a2f185822f1b4d8"],["patterns/coding/code-blocks/index.html","9f5da6f79116417132896d6bda6ee59b"],["patterns/coding/color-palettes/index.html","0e795eb87dc3e71fc85284c32a769bd7"],["patterns/coding/command-line/index.html","ec21140dc8e228619778e9fac01728cb"],["patterns/coding/demo-embedding/index.html","4404864e072812c7c4031d0f8e24a8f8"],["patterns/coding/file-trees/index.html","6c13a333d402cc45325cd385084e13d9"],["patterns/coding/index.html","df8f94bc14d73917704c93df7784b5f3"],["patterns/coding/index.xml","c8141d2e5b185b41c7c2297cbe9761a9"],["patterns/coding/tested/index.html","748ea6b624b9373ae91fe76e37373fa0"],["patterns/coding/writing-inline-demos/index.html","457202e0708a7fc40831b2d6d25e38e8"],["patterns/index.html","8e38d3ecc23c5a7f55c894640f922692"],["patterns/index.xml","8c88ea8c5d4e10c5982c9293a8fd501b"],["patterns/installation/index.html","483f1178215532aee0f50732a45bfd56"],["patterns/library-setup/index.html","0fe35dfd05d466e23bb71846dc6cffec"],["patterns/media/including-images/index.html","734f1ff369ea1706bca9a8328ef36473"],["patterns/media/including-videos/index.html","cb93f9f66f260d8e59ad4bf1128a6790"],["patterns/media/index.html","a89badd70c807faed416e6a21e987ad9"],["patterns/media/index.xml","91130ea74bd16f6d51c959a00c3c6284"],["patterns/serving/index.html","90399d266baad0ae380d56a4d790dee6"],["patterns/writing/expandable-sections/index.html","31dcbca1d28b0fa5fc3c51106567347b"],["patterns/writing/index.html","c29f281fcd2a22dc07060e930c8fd099"],["patterns/writing/index.xml","a68bf9da0d9106898c1e05942614e90c"],["patterns/writing/library-structure/index.html","83d62104ea0a101a62b58034fef93e67"],["patterns/writing/markdown-and-metadata/index.html","9ab59fbd79b5b1f1108a16cde75e8d05"],["patterns/writing/notes-and-warnings/index.html","66a2da25e4133a92bac54898e8a7cef3"],["patterns/writing/references/index.html","c4d7d00bc426db35f7c00b8da29567b4"],["patterns/writing/tables-of-contents/index.html","59b1475d50a99aa1d81a8da526f8672d"],["sitemap.xml","42a06aafa5566ee7db4adb4fd5e2cf39"],["tags/index.xml","05aca37c2ea9dc2534847f246ba6301b"],["tags/library/index.html","3818570d8224257998fafe00a2ed5fa4"],["tags/library/index.xml","b6a44a1a0a10135485e4f39d12fd322a"],["tags/markdown/index.html","b780eb964676878ffbbcba071e455d13"],["tags/markdown/index.xml","757d307cdf85883859ac95ea20527f4a"],["tags/metadata/index.html","6c7c8624967cb259631ac5bc4fd52b4a"],["tags/metadata/index.xml","b6989e44540f4745072a2063369de173"],["tags/structure/index.html","0bd1963f101de59a7c06a794ec176320"],["tags/structure/index.xml","69b02d1c1393249cac54fc2734c9ef63"],["tags/stuff/index.html","25d4e9b9391a045d8fdf93f4998c9837"],["tags/stuff/index.xml","c3ade9b0a2f01caee9de105ded22695f"]]; +var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/fonts/pt_sans-web-bold.woff","f83c22b548d2d684e24e315d81f7d22b"],["css/fonts/pt_sans-web-bold.woff2","84520c22e6ebf1b30b6f17251d65fff7"],["css/fonts/pt_sans-web-italic.woff","31f09f09a1d3fbe6c8de19644ef0e614"],["css/fonts/pt_sans-web-italic.woff2","df128e1d5a449fc0506fc1b48aac0184"],["css/fonts/pt_sans-web-regular.woff","32100f6ebf01af64d4a71416561c072d"],["css/fonts/pt_sans-web-regular.woff2","b6d4ede9a3a5dbe4d5ac242ae4b0ecc2"],["css/images/arrow_effect.svg","1434d178461f70c16b77acb4bdbc51e3"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","51b24d726cac12d1de60a65f5e1e23ca"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/browser-Chrome-Android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-Chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-Edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-Firefox-Android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-Firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-IE.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-Opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-Safari-iOS.svg","f729e629ec998ec40d313495d7257741"],["images/browser-Safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.png","0134d77c2c6b01eabb425990bab7ce9a"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["images/steve_faulkner.jpg","b90382f2b505ce6f6b1e08657637395e"],["index.html","e5608fc8380e087946d70b4ce8eeefca"],["index.xml","69b28bf21721f0244666f2f84c7922fd"],["js/dom-scripts.js","2b572ac4dd9d0d060b542a7c9d36196b"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["js/webcomponents.js","c5f6fe397db634cde89f66c2f1bc2f62"],["manifest.json","4e77b7f1253442852a2f185822f1b4d8"],["patterns/coding/code-blocks/index.html","9f5da6f79116417132896d6bda6ee59b"],["patterns/coding/color-palettes/index.html","0e795eb87dc3e71fc85284c32a769bd7"],["patterns/coding/command-line/index.html","ec21140dc8e228619778e9fac01728cb"],["patterns/coding/demo-embedding/index.html","4404864e072812c7c4031d0f8e24a8f8"],["patterns/coding/file-trees/index.html","6c13a333d402cc45325cd385084e13d9"],["patterns/coding/index.html","df8f94bc14d73917704c93df7784b5f3"],["patterns/coding/index.xml","c8141d2e5b185b41c7c2297cbe9761a9"],["patterns/coding/tested/index.html","748ea6b624b9373ae91fe76e37373fa0"],["patterns/coding/writing-inline-demos/index.html","457202e0708a7fc40831b2d6d25e38e8"],["patterns/index.html","8e38d3ecc23c5a7f55c894640f922692"],["patterns/index.xml","8c88ea8c5d4e10c5982c9293a8fd501b"],["patterns/installation/index.html","483f1178215532aee0f50732a45bfd56"],["patterns/library-setup/index.html","0fe35dfd05d466e23bb71846dc6cffec"],["patterns/media/including-images/index.html","734f1ff369ea1706bca9a8328ef36473"],["patterns/media/including-videos/index.html","cb93f9f66f260d8e59ad4bf1128a6790"],["patterns/media/index.html","a89badd70c807faed416e6a21e987ad9"],["patterns/media/index.xml","91130ea74bd16f6d51c959a00c3c6284"],["patterns/serving/index.html","90399d266baad0ae380d56a4d790dee6"],["patterns/writing/expandable-sections/index.html","31dcbca1d28b0fa5fc3c51106567347b"],["patterns/writing/index.html","c29f281fcd2a22dc07060e930c8fd099"],["patterns/writing/index.xml","a68bf9da0d9106898c1e05942614e90c"],["patterns/writing/library-structure/index.html","83d62104ea0a101a62b58034fef93e67"],["patterns/writing/markdown-and-metadata/index.html","9ab59fbd79b5b1f1108a16cde75e8d05"],["patterns/writing/notes-and-warnings/index.html","66a2da25e4133a92bac54898e8a7cef3"],["patterns/writing/references/index.html","c4d7d00bc426db35f7c00b8da29567b4"],["patterns/writing/tables-of-contents/index.html","59b1475d50a99aa1d81a8da526f8672d"],["sitemap.xml","42a06aafa5566ee7db4adb4fd5e2cf39"],["tags/index.xml","05aca37c2ea9dc2534847f246ba6301b"],["tags/library/index.html","3818570d8224257998fafe00a2ed5fa4"],["tags/library/index.xml","b6a44a1a0a10135485e4f39d12fd322a"],["tags/markdown/index.html","b780eb964676878ffbbcba071e455d13"],["tags/markdown/index.xml","757d307cdf85883859ac95ea20527f4a"],["tags/metadata/index.html","6c7c8624967cb259631ac5bc4fd52b4a"],["tags/metadata/index.xml","b6989e44540f4745072a2063369de173"],["tags/structure/index.html","0bd1963f101de59a7c06a794ec176320"],["tags/structure/index.xml","69b02d1c1393249cac54fc2734c9ef63"],["tags/stuff/index.html","25d4e9b9391a045d8fdf93f4998c9837"],["tags/stuff/index.xml","c3ade9b0a2f01caee9de105ded22695f"]]; var cacheName = 'sw-precache-v3-sw-precache-' + (self.registration ? self.registration.scope : ''); diff --git a/themes/infusion/static/css/styles.css b/themes/infusion/static/css/styles.css index 9abdee6..b19da54 100644 --- a/themes/infusion/static/css/styles.css +++ b/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; diff --git a/themes/infusion/static/js/dom-scripts.js b/themes/infusion/static/js/dom-scripts.js index e2ed375..0673630 100644 --- a/themes/infusion/static/js/dom-scripts.js +++ b/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) + }) + } +}());