mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
53 lines
1.0 KiB
SCSS
53 lines
1.0 KiB
SCSS
// ==========================================================================
|
||
// Generic / Media
|
||
// ==========================================================================
|
||
|
||
// 1. Setting `vertical-align` removes the whitespace that appears under `img`
|
||
// elements when they are dropped into a page as-is. Safer alternative to
|
||
// using `display: block;`.
|
||
|
||
audio,
|
||
canvas,
|
||
iframe,
|
||
img,
|
||
svg,
|
||
video {
|
||
vertical-align: middle; // [1]
|
||
}
|
||
|
||
// Add the correct display in iOS 4-7.
|
||
|
||
audio:not([controls]) {
|
||
display: none;
|
||
height: 0;
|
||
}
|
||
|
||
// 2. Fluid media for responsive purposes.
|
||
|
||
img,
|
||
svg {
|
||
max-width: 100%; // [2]
|
||
height: auto;
|
||
|
||
// 4. If a `width` and/or `height` attribute have been explicitly defined,
|
||
// let’s not make the image fluid.
|
||
|
||
&[width], // [4]
|
||
&[height] {
|
||
// [4]
|
||
max-width: none;
|
||
}
|
||
}
|
||
|
||
// 4. Offset `alt` text from surrounding copy.
|
||
|
||
img {
|
||
font-style: italic; // [4]
|
||
}
|
||
|
||
// 5. SVG elements should fallback to their surrounding text color.
|
||
|
||
svg {
|
||
fill: currentColor; // [5]
|
||
}
|