2022-10-04 09:10:14 +00:00
|
|
|
html {
|
|
|
|
|
|
|
|
|
|
// Spacing
|
|
|
|
|
@for $i from 0 to 13 {
|
|
|
|
|
--spacing-#{$i}: #{$i*4}px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Font sizes
|
|
|
|
|
--font-size-sm: 12px;
|
|
|
|
|
--font-size-normal: 14px;
|
|
|
|
|
|
|
|
|
|
// Radiuses
|
2023-09-26 10:17:34 +00:00
|
|
|
--radius-none: 0px;
|
|
|
|
|
--radius-xs: 4px;
|
|
|
|
|
--radius-sm: 8px;
|
|
|
|
|
--radius-md: 12px;
|
|
|
|
|
--radius-lg: 16px;
|
|
|
|
|
--radius-xl: 24px;
|
|
|
|
|
--radius-round: 50%;
|
|
|
|
|
|
|
|
|
|
/** @deprecated since 4.3 **/
|
|
|
|
|
--small-radius: var(--radius-xs);
|
|
|
|
|
--medium-radius: var(--radius-sm);
|
|
|
|
|
--big-radius: var(--radius-lg);
|
|
|
|
|
--huge-radius: var(--radius-xl);
|
|
|
|
|
|
2024-02-21 12:26:55 +00:00
|
|
|
// Shadows / Elevation
|
|
|
|
|
--drop-shadow-color: 40 40 40; //#282828;
|
|
|
|
|
--drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 0.20);
|
|
|
|
|
--drop-shadow-outline: 0px 0px 0px 2px rgb(var(--drop-shadow-color) / 0.15), 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 0.02);
|
|
|
|
|
--drop-shadow-01dp: 0px 1px 3px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 2px 1px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 1px 1px 0px rgb(var(--drop-shadow-color) / 0.14);
|
|
|
|
|
--drop-shadow-02dp: 0px 1px 5px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 3px 1px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 2px 2px 0px rgb(var(--drop-shadow-color) / 0.14);
|
|
|
|
|
--drop-shadow-03dp: 0px 1px 8px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 3px 3px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 3px 4px 0px rgb(var(--drop-shadow-color) / 0.14);
|
|
|
|
|
--drop-shadow-04dp: 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 1px 10px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 4px 5px 0px rgb(var(--drop-shadow-color) / 0.14);
|
|
|
|
|
--drop-shadow-06dp: 0px 3px 5px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 1px 18px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 6px 10px 0px rgb(var(--drop-shadow-color) / 0.14);
|
|
|
|
|
--drop-shadow-08dp: 0px 5px 5px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 3px 14px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 8px 10px 0px rgb(var(--drop-shadow-color) / 0.14);
|
|
|
|
|
--drop-shadow-12dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 0.20),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 0.12),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 0.14);
|
|
|
|
|
--drop-shadow-16dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 0.20),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 0.12),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 0.14);
|
|
|
|
|
--drop-shadow-24dp: 0px 11px 15px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 9px 46px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 24px 38px 0px rgb(var(--drop-shadow-color) / 0.14);
|
2022-10-04 09:10:14 +00:00
|
|
|
|
|
|
|
|
// A11y
|
|
|
|
|
--a11y-min-target-size: 44px;
|
|
|
|
|
}
|
