1 // Responsive breakpoint control
2 @mixin smaller-than($size) {
3 @media screen and (max-width: $size) { @content; }
5 @mixin larger-than($size) {
6 @media screen and (min-width: $size) { @content; }
8 @mixin between($min, $max) {
9 @media screen and (min-width: $min) and (max-width: $max) { @content; }
12 // Padding shorthand using logical operators to better support RTL.
13 @mixin padding($t, $r, $b, $l) {
14 padding-block-start: $t;
15 padding-block-end: $b;
16 padding-inline-start: $l;
17 padding-inline-end: $r;
20 // Margin shorthand using logical operators to better support RTL.
21 @mixin margin($t, $r, $b, $l) {
22 margin-block-start: $t;
24 margin-inline-start: $l;
25 margin-inline-end: $r;
28 // Create a RTL specific style block.
29 // Mostly used as a patch until browser support improves for logical properties.