josh/dashy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move dimension-related CSS vars to their own file

Browse Source
This commit is contained in:
Alicia Sykes
2021-06-17 22:24:34 +01:00
parent c92083f88f
commit 69dbb4d3ad
9 changed files with 56 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/styles/color-palette.scss
View File

@@ -31,22 +31,6 @@
--transparent-white-50: #ffffff80;
--transparent-white-30: #ffffff4d;
/* Other Variables */
--outline-color: none;
--curve-factor: 5px; // Border radius for most components
--curve-factor-navbar: 16px; // Border radius for header
--dimming-factor: 0.7; // Opacity for semi-transparent components
/* Settings for specific components */
--scroll-bar-width: 8px;
--item-group-padding: 5px; // Determines width of item-group outline
--item-shadow: 1px 1px 2px #130f23;
--item-hover-shadow: 1px 2px 4px #373737;
--item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
--item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
--item-group-shadow: var(--item-shadow);
--settings-container-shadow: none;
/* Color variables for specific components
* all variables are optional, since they inherit initial values from above*
* Using specific variables makes overriding for custom themes really easy */
@@ -88,5 +72,6 @@
--about-page-background: #0b1021;
--about-page-accent: var(--primary);
--side-bar-background: var(--background-darker);
--side-bar-background-lighter: var(--background);
--side-bar-color: var(--primary);
}

26
src/styles/dimensions.scss Normal file
View File

@@ -0,0 +1,26 @@
:root {
/* General Variables */
--outline-color: none;
--curve-factor: 5px; // Border radius for most components
--curve-factor-navbar: 16px; // Border radius for header
--dimming-factor: 0.7; // Opacity for semi-transparent components
/* Basic Page Components */
--scroll-bar-width: 8px;
--header-height: 6.3rem;
/* Section & Item dimensions */
--item-group-padding: 5px; // Determines width of item-group outline
--item-shadow: 1px 1px 2px #130f23;
--item-hover-shadow: 1px 2px 4px #373737;
--item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
--item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
--item-group-shadow: var(--item-shadow);
/* Settings and config menu */
--settings-container-shadow: none;
/* Workspace View */
--side-bar-width: 3.5rem; // The width of the sidebar
}