mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
59 lines
1.4 KiB
SCSS
59 lines
1.4 KiB
SCSS
// ==========================================================================
|
|
// Objects / SVG Icons
|
|
// ==========================================================================
|
|
|
|
|
|
// Markup
|
|
//
|
|
// 1. If icon is accessible and has a title
|
|
// 2. If icon is decorative
|
|
//
|
|
// <i class="o-icon ${modifier}">
|
|
// <svg
|
|
// class="svg-${icon-name}"
|
|
// xmlns="http://www.w3.org/2000/svg"
|
|
// role="img" [1]
|
|
// aria-hidden="true" [2]
|
|
// focusable="false" [2]
|
|
// aria-labelledby="${id}" [1]
|
|
// >
|
|
// <title id="${id}"> [1]
|
|
// Locomotive
|
|
// </title>
|
|
// <use xlink:href="assets/images/sprite.svg#${icon-name}" xmlns:xlink="http://www.w3.org/1999/xlink"/>
|
|
// </svg>
|
|
// </i>
|
|
|
|
// Global styles for icones
|
|
// ==========================================================================
|
|
|
|
.o-icon {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
svg {
|
|
--icon-height: calc(var(--icon-width) * math.div(1, (var(--icon-ratio))));
|
|
|
|
display: block;
|
|
width: var(--icon-width);
|
|
height: var(--icon-height);
|
|
fill: currentColor;
|
|
}
|
|
}
|
|
|
|
|
|
// SVG sizes
|
|
// ==========================================================================
|
|
|
|
// // Logo
|
|
// .svg-logo {
|
|
// --icon-width: #{rem(100px)};
|
|
// --icon-ratio: math.div(20, 30); // width/height based on svg viewBox
|
|
|
|
// // Sizes
|
|
// .o-icon.-big & {
|
|
// --icon-width: #{rem(200px)};
|
|
// }
|
|
// }
|
|
|