rayelliott
/
css-framework
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

move spacing to variables, restructure css directory

This commit is contained in:
Ray Elliott 2021-02-17 22:44:22 +00:00
parent eca7e468fe
commit 30a673c74c
4 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/css/base/spacing.css
View File

@ -1,19 +0,0 @@
:root {
--space-unit: 1rem;
}
:root,
* {
--space-xxxxs: calc(0.125 * var(--space-unit));
--space-xxxs: calc(0.25 * var(--space-unit));
--space-xxs: calc(0.375 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit));
--space-md: calc(1.25 * var(--space-unit));
--space-lg: calc(2 * var(--space-unit));
--space-xl: calc(3.25 * var(--space-unit));
--space-xxl: calc(5.25 * var(--space-unit));
--space-xxxl: calc(8.5 * var(--space-unit));
--space-xxxxl: calc(13.75 * var(--space-unit));
--component-padding: var(--space-md);
}

0
src/css/base/colors.css → src/css/colors.css
View File

0
src/css/base/reset.css → src/css/reset.css
View File

19
src/css/base/variables.css → src/css/variables.css
View File

@ -5,6 +5,9 @@
--zindex-fixed-element: 10; /* e.g., 'back to top' button */ --zindex-fixed-element: 10; /* e.g., 'back to top' button */
--zindex-overlay: 15; /* e.g., modals and dialogs */ --zindex-overlay: 15; /* e.g., modals and dialogs */
/* space unit */
--space-unit: 1rem;
/*radius */ /*radius */
--radius-sm: calc(var(--radius, 0.25em) / 2); --radius-sm: calc(var(--radius, 0.25em) / 2);
--radius-md: var(--radius, 0.25em); --radius-md: var(--radius, 0.25em);
@ -37,3 +40,19 @@
--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
} }
:root,
* {
--space-xxxxs: calc(0.125 * var(--space-unit));
--space-xxxs: calc(0.25 * var(--space-unit));
--space-xxs: calc(0.375 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit));
--space-md: calc(1.25 * var(--space-unit));
--space-lg: calc(2 * var(--space-unit));
--space-xl: calc(3.25 * var(--space-unit));
--space-xxl: calc(5.25 * var(--space-unit));
--space-xxxl: calc(8.5 * var(--space-unit));
--space-xxxxl: calc(13.75 * var(--space-unit));
--component-padding: var(--space-md);
}