2015-07-12 15:01:42 -04:00
|
|
|
// Responsive breakpoint control
|
|
|
|
@mixin smaller-than($size) {
|
|
|
|
@media screen and (max-width: $size) { @content; }
|
|
|
|
}
|
|
|
|
@mixin larger-than($size) {
|
|
|
|
@media screen and (min-width: $size) { @content; }
|
|
|
|
}
|
2018-10-16 13:49:16 -04:00
|
|
|
@mixin between($min, $max) {
|
|
|
|
@media screen and (min-width: $min) and (max-width: $max) { @content; }
|
|
|
|
}
|
2020-04-05 08:07:19 -04:00
|
|
|
|
|
|
|
// Padding shorthand using logical operators to better support RTL.
|
|
|
|
@mixin padding($t, $r, $b, $l) {
|
|
|
|
padding-block-start: $t;
|
|
|
|
padding-block-end: $b;
|
|
|
|
padding-inline-start: $l;
|
|
|
|
padding-inline-end: $r;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Margin shorthand using logical operators to better support RTL.
|
|
|
|
@mixin margin($t, $r, $b, $l) {
|
|
|
|
margin-block-start: $t;
|
|
|
|
margin-block-end: $b;
|
|
|
|
margin-inline-start: $l;
|
|
|
|
margin-inline-end: $r;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Create a RTL specific style block.
|
|
|
|
// Mostly used as a patch until browser support improves for logical properties.
|
|
|
|
@mixin rtl() {
|
|
|
|
html[dir=rtl] & {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|