andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Add dark mode

Browse source
This commit is contained in:
Schmelczer András 2020-01-07 21:30:23 +01:00
parent 48a55a4a97
commit 073f087e52
40 changed files with 864 additions and 531 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/style/mixins.scss
View file

@ -1,41 +1,57 @@
@import 'vars';
@mixin on-small-screen() {
@media (max-width: $breakpoint-width) {
@content;
}
}
@mixin on-large-screen() {
@media (min-width: $breakpoint-width) {
@content;
}
}
@mixin responsive() {
html {
@include on-small-screen {
@content (map_merge($small-screen-variables, $light-theme-variables));
&[theme='dark'] {
@content (map_merge($small-screen-variables, $dark-theme-variables));
}
}
}
@include on-large-screen {
html {
@content (map_merge($large-screen-variables, $light-theme-variables));
&[theme='dark'] {
@content (map_merge($large-screen-variables, $dark-theme-variables));
}
}
}
}
@mixin center-children() {
display: flex;
align-items: center;
justify-content: center;
}
%card {
@mixin card-base($vars) {
text-align: center;
padding: $normal-margin;
box-shadow: $shadow1, $shadow2;
padding: map_get($vars, $normal-margin);
box-shadow: map_get($vars, $shadow1), map_get($vars, $shadow2);
z-index: 1;
@media (min-width: $breakpoint-width) {
transition: box-shadow $long-transition-time;
@include on-large-screen {
transition: box-shadow map_get($vars, $long-transition-time);
&:hover {
box-shadow: $shadow3, $shadow2;
box-shadow: map_get($vars, $shadow3), map_get($vars, $shadow2);
}
}
}
@mixin card() {
@extend %card;
border-radius: $border-radius;
background-color: $card-color;
}
@mixin important-card() {
@extend %card;
background-color: $accent-color;
* {
color: white;
}
}
@mixin square($size) {
width: $size;
height: $size;
@ -51,7 +67,7 @@
font-style: normal;
line-height: 1;
@media (max-width: $breakpoint-width) {
@include on-small-screen {
font-size: 3rem;
line-height: 1.1;
}