1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-29 23:22:34 +01:00
BookStack/resources/sass/_mixins.scss
Dan Brown 1ba5a1274c
Started work on supporting a dark-mode
- Most elements done, but still need to do editors, tables and final
pass.
- Toggled only by quick js check at the moment, checking via css media
query. Need to make into user-preference toggle.

For #1234
2020-04-10 22:38:29 +01:00

48 lines
1.2 KiB
SCSS

// 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; }
}
@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;
}
}