svg fixed widths

This commit is contained in:
Heydon Pickering 2017-08-24 13:31:48 +01:00
parent a2e30b592e
commit 54abe01d97
5 changed files with 49 additions and 95 deletions

View File

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

View File

@ -70,7 +70,7 @@
link.setAttribute('href', '#' + id); link.setAttribute('href', '#' + id);
var headingText = heading.textContent; var headingText = heading.textContent;
link.setAttribute('aria-label', 'This ' + headingText + ' section'); 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); 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 */ /* Enable scrolling by keyboard of code samples */
(function () { (function () {
var codeBlocks = document.querySelectorAll('pre'); var codeBlocks = document.querySelectorAll('pre');

File diff suppressed because one or more lines are too long

View File

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

View File

@ -70,7 +70,7 @@
link.setAttribute('href', '#' + id); link.setAttribute('href', '#' + id);
var headingText = heading.textContent; var headingText = heading.textContent;
link.setAttribute('aria-label', 'This ' + headingText + ' section'); 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); 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 */ /* Enable scrolling by keyboard of code samples */
(function () { (function () {
var codeBlocks = document.querySelectorAll('pre'); var codeBlocks = document.querySelectorAll('pre');