feat: add light/dark mode media query mixin
This commit is contained in:
parent
a4fadab6ad
commit
bf1aa929c1
1 changed files with 17 additions and 7 deletions
|
@ -1,20 +1,30 @@
|
|||
@mixin mq-bigscreen() {
|
||||
@media (min-width: 125em) {
|
||||
@content
|
||||
@content;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@mixin mq-desktop() {
|
||||
@media (min-width: 50em) {
|
||||
@content
|
||||
@content;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@mixin mq-mobile() {
|
||||
@media (max-width: 35em) {
|
||||
@content
|
||||
@content;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@mixin theme($theme) {
|
||||
@media (prefers-color-scheme: $theme) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin radial-background($primary, $secondary) {
|
||||
background: radial-gradient(circle at top left, $primary 5%, $secondary 100%) fixed no-repeat;
|
||||
}
|
||||
|
||||
@mixin button($btn-color, $darken: 10%) {
|
||||
box-shadow: 0 0.5em 0 0 darken($btn-color, $darken);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue