This repository has been archived on 2024-02-08. You can view files and clone it, but cannot push or open issues or pull requests.
frontend/src/styles/custom-properties/shadows.scss
Adrian Simmons f1ecf6d897
All checks were successful
continuous-integration/drone/pr Build is passing
Still visible but better color shadows
2021-11-15 22:42:27 +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);
}
}