SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add light/dark mode media query mixin

Browse source
This commit is contained in:
Sebin Nyshkim 2022-01-28 23:34:08 +01:00
parent a4fadab6ad
commit bf1aa929c1
1 changed files with 17 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/scss/_mixins.scss
View file

@ -1,20 +1,30 @@
@mixin mq-bigscreen() { @mixin mq-bigscreen() {
@media (min-width: 125em) { @media (min-width: 125em) {
@content @content;
}
} }
};
@mixin mq-desktop() { @mixin mq-desktop() {
@media (min-width: 50em) { @media (min-width: 50em) {
@content @content;
}
} }
};
@mixin mq-mobile() { @mixin mq-mobile() {
@media (max-width: 35em) { @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%) { @mixin button($btn-color, $darken: 10%) {
box-shadow: 0 0.5em 0 0 darken($btn-color, $darken); box-shadow: 0 0.5em 0 0 darken($btn-color, $darken);