91 lines
2.2 KiB
SCSS
91 lines
2.2 KiB
SCSS
/// Helper to size an element
|
|
/// @param {Length} $width
|
|
/// @param {Length} $height
|
|
@mixin size($width, $height: $width) {
|
|
width: $width;
|
|
height: $height;
|
|
}
|
|
|
|
/// Helper to size an element
|
|
/// @param {Length} $width
|
|
/// @param {Length} $height
|
|
@mixin size-fract($width, $fract: 4 / 3) {
|
|
width: $width;
|
|
height: calc(#{$width} / #{$fract});
|
|
}
|
|
|
|
/// Media queries mobile first
|
|
/// @param {Length} $width
|
|
@mixin min-width($width) {
|
|
@media screen and (min-width: $width), print and (min-width: $width) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
/// Media queries desktop first
|
|
/// @param {Length} $width
|
|
@mixin max-width($width) {
|
|
@media screen and (max-width: $width), print and (max-width: $width) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
/// Helper to declare a flex container and center elements within
|
|
/// @param {String} $direction
|
|
/// @param {String} $justify
|
|
/// @param {String} $align
|
|
@mixin d-flex-center($direction, $justify, $align) {
|
|
display: flex;
|
|
flex-direction: $direction;
|
|
align-items: $align;
|
|
justify-content: $justify;
|
|
}
|
|
|
|
@mixin desactivate-collapse-hide($breakpoint) {
|
|
.collapse:not(.show) {
|
|
display: none;
|
|
|
|
@include media-breakpoint-up($breakpoint) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.deactivatable {
|
|
cursor: pointer;
|
|
pointer-events: inherit;
|
|
|
|
@include media-breakpoint-up($breakpoint) {
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Helper to hide text
|
|
/// @param {Integer} $nblines
|
|
/// @param {String} $fontsize
|
|
/// @param {Float} $lineheight
|
|
/// @param {String} $bgcolor
|
|
@mixin txt-overflow-fade($nblines, $fontsize, $lineheight, $bgcolor: "") {
|
|
position: relative;
|
|
overflow: hidden;
|
|
max-height: calc(#{$nblines} * 1em * #{$lineheight});
|
|
margin: 0;
|
|
font-size: $fontsize;
|
|
line-height: $lineheight;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: calc(calc(#{$nblines} * 1em - 1em) * #{$lineheight});
|
|
right: 0;
|
|
display: block;
|
|
width: 12ch;
|
|
height: calc(1em * #{$lineheight});
|
|
|
|
@if $bgcolor {
|
|
background: linear-gradient(to right, transparent, #{$bgcolor} 12ch);
|
|
}
|
|
|
|
content: "";
|
|
}
|
|
}
|