mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
44 lines
1.0 KiB
SCSS
44 lines
1.0 KiB
SCSS
// ==========================================================================
|
|
// Utilities / Ratio
|
|
// ==========================================================================
|
|
|
|
// @link https://github.com/inuitcss/inuitcss/blob/19d0c7e/objects/_objects.ratio.scss
|
|
|
|
// A list of aspect ratios that get generated as modifier classes.
|
|
$aspect-ratios: (
|
|
(
|
|
2: 1,
|
|
),
|
|
(
|
|
4: 3,
|
|
),
|
|
(
|
|
16: 9,
|
|
)
|
|
) !default;
|
|
|
|
/* stylelint-disable */
|
|
|
|
// Generate a series of ratio classes to be used like so:
|
|
//
|
|
// @example
|
|
// <div class="o-ratio u-16:9">
|
|
|
|
@each $ratio in $aspect-ratios {
|
|
@each $antecedent, $consequent in $ratio {
|
|
@if (type-of($antecedent) != number) {
|
|
@error "`#{$antecedent}` needs to be a number.";
|
|
}
|
|
|
|
@if (type-of($consequent) != number) {
|
|
@error "`#{$consequent}` needs to be a number.";
|
|
}
|
|
|
|
.u-#{$antecedent}\:#{$consequent}::before {
|
|
padding-bottom: math.div($consequent, $antecedent) * 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* stylelint-enable */
|