danremollino/form-validation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

added demo site

Browse Source
This commit is contained in:
Dan Remollino
2025-04-03 17:45:27 -04:00
parent 3a0ad9d804
commit 50af7ae33a
15 changed files with 1732 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
demo/css/custom_properties.css Normal file
View File

@ -0,0 +1,94 @@
:root {
/* ###### ##### ## ##### ###### */
/* ### ## ## ## ## ## ## ## */
/* ## ## ## ## ## ## ###### */
/* ### ## ## ## ## ## ## ## */
/* ###### ##### ####### ##### ## ## */
/*
use color-mix() with transparent to add transparency
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#adding_transparency
*/
&[data-color-scheme="light"] {
/* light gray */
--color-01-l: 90%;
--color-01-a: 0%;
--color-01-b: 0%;
/* black */
--color-02-l: 0%;
--color-02-a: 0%;
--color-02-b: 0%;
}
&[data-color-scheme="dark"] {
/* black */
--color-01-l: 0%;
--color-01-a: 0%;
--color-01-b: 0%;
/* light gray */
--color-02-l: 90%;
--color-02-a: 0%;
--color-02-b: 0%;
}
--color-01: oklab(var(--color-01-l) var(--color-01-a) var(--color-01-b));
--color-01-light: oklab(calc(var(--color-01-l) + 25%) var(--color-01-a) var(--color-01-b));
--color-01-dark: oklab(calc(var(--color-01-l) - 25%) var(--color-01-a) var(--color-01-b));
--color-02: oklab(var(--color-02-l) var(--color-02-a) var(--color-02-b));
--color-02-light: oklab(calc(var(--color-02-l) + 25%) var(--color-02-a) var(--color-02-b));
--color-02-dark: oklab(calc(var(--color-02-l) - 25%) var(--color-02-a) var(--color-02-b));
--link-color-01: var(--text-color-01);
--link-decoration-01: none;
--link-hover-color-01: var(--text-color-01);
--link-hover-decoration-01: underline;
--success-color: oklab(60.735% -40.534% 31.334%);
--info-color: oklab(61.465% -23.829% -17.445%);
--warning-color: oklab(82.103% 10.93% 66.106%);
--danger-color: oklab(50.864% 51.073% 25.414%);
/* ###### ###### ##### ###### ###### ## ## ###### */
/* ## ## ## ## ## ### ## ### ## ## */
/* ##### ###### ####### ## ## ## # ## ## ### */
/* ## ## ## ## ### ## ## ### ## ## */
/* ###### ## ## ## ###### ###### ## ## ##### */
--space: 1lh;
--eighth-space: calc(var(--space) * .125);
--quarter-space: calc(var(--space) * .25);
--half-space: calc(var(--space) * .5);
--three-quarter-space: calc(var(--space) * .75);
--one-and-quarter-space: calc(var(--space) * 1.25);
--one-and-half-space: calc(var(--space) * 1.5);
--one-and-three-quarter-space: calc(var(--space) * 1.75);
--double-space: calc(var(--space) * 2);
--tripple-space: calc(var(--space) * 3);
/* ###### ###### ####### ###### ## ## ###### */
/* ## ## ## ## ### ## ## */
/* ##### ## # ## ## # ## ## ### */
/* ## ## ## ## ## ### ## ## */
/* ###### ###### ####### ###### ## ## ##### */
--site-max-width: 1440px;
/* grid.css */
--content-gap: var(--double-space);
--content-padding: clamp(var(--space), 5dvw, var(--tripple-space));
--site-padding: max(5dvw, 10px);
--max-content-width: calc(var(--site-max-width) - var(--content-padding) * 2);
}