X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/e91ef54cc9f8ce6b264bced8191275b6a33e594f..refs/pull/3433/head:/resources/sass/_mixins.scss diff --git a/resources/sass/_mixins.scss b/resources/sass/_mixins.scss index 1c45ebd30..0a419c08a 100644 --- a/resources/sass/_mixins.scss +++ b/resources/sass/_mixins.scss @@ -8,3 +8,41 @@ @mixin between($min, $max) { @media screen and (min-width: $min) and (max-width: $max) { @content; } } + +// 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; + } +} + +// Define a property for both light and dark mode +@mixin lightDark($prop, $light, $dark, $important: false) { + #{$prop}: if($important, $light !important, $light); + html.dark-mode & { + #{$prop}: if($important, $dark !important, $dark); + } +} + +@mixin whenDark { + html.dark-mode & { + @content; + } +} \ No newline at end of file