ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Add vh/svh/dvh/lvh fallbacks

Browse Source
This commit is contained in:
Lucas Vallenet
2024-01-11 11:45:46 +01:00
parent 61b6222525
commit 3f7077b488
7 changed files with 112 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
assets/styles/tools/_functions.scss
View File

@@ -132,18 +132,46 @@ $context: 'frontend' !default;
@return calc(#{$percentage} * (100vw - 2 * var(--grid-margin, 0px)) - (1 - #{$percentage}) * var(--grid-gutter, 0px) + #{$inset} * var(--grid-gutter, 0px));
}
// Returns calculation of a percentage of the viewport height.
// Returns calculation of a percentage of the viewport small height.
//
// ```scss
// .c-box {
// height: vh(100);
// height: svh(100);
// }
// ```
//
// @param {number} $number - The percentage number
// @return {function<number>} in vh
@function vh($number) {
@return calc(#{$number} * var(--vh, 1vh));
// @return {function<number>} in svh
@function svh($number) {
@return calc(#{$number} * var(--svh, 1svh));
}
// Returns calculation of a percentage of the viewport large height.
//
// ```scss
// .c-box {
// height: lvh(100);
// }
// ```
//
// @param {number} $number - The percentage number
// @return {function<number>} in lvh
@function lvh($number) {
@return calc(#{$number} * var(--lvh, 1lvh));
}
// Returns calculation of a percentage of the viewport dynamic height.
//
// ```scss
// .c-box {
// height: dvh(100);
// }
// ```
//
// @param {number} $number - The percentage number
// @return {function<number>} in dvh
@function dvh($number) {
@return calc(#{$number} * var(--dvh, 1dvh));
}
// Returns calculation of a percentage of the viewport width.