frontend/src/styles/custom-properties/shadows.scss
adrinux 46fa43d67f Migrate to bulma-css-variables and introduce dark mode (#954)
Co-authored-by: Adrian Simmons <adrian@perlucida.co.uk>
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: vikunja/frontend#954
Reviewed-by: dpschen <dpschen@noreply.kolaente.de>
Reviewed-by: konrad <k@knt.li>
Co-authored-by: adrinux <adrian@perlucida.co.uk>
Co-committed-by: adrinux <adrian@perlucida.co.uk>
2021-11-22 21:12:54 +00:00

22 lines
996 B
SCSS

:root {
--shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl), .12),
0 1px 2px hsla(var(--grey-500-hsl), .24);
--shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12),
0 2px 4px hsla(var(--grey-500-hsl), .10);
--shadow-md: 0 10px 20px hsla(var(--grey-500-hsl), .12),
0 3px 6px hsla(var(--grey-500-hsl), .08);
--shadow-lg: 0 15px 25px hsla(var(--grey-500-hsl), .12),
0 5px 10px hsla(var(--grey-500-hsl), .05);
&.dark {
// Even darker shadows for dark mode
--shadow-xs: 0 1px 3px hsla(var(--grey-50-hsl), 0.4),
0 1px 2px hsla(var(--grey-50-hsl), 0.8);
--shadow-sm: 0 3px 6px hsla(var(--grey-50-hsl), 0.8),
0 2px 4px hsla(var(--grey-50-hsl), 0.6);
--shadow-md: 0 10px 20px hsla(var(--grey-50-hsl), 0.8),
0 3px 6px hsla(var(--grey-50-hsl), 0.6);
--shadow-lg: 0 15px 25px hsla(var(--grey-50-hsl), 0.8),
0 5px 10px hsla(var(--grey-50-hsl), 0.4);
}
}