116 lines
2 KiB
SCSS
116 lines
2 KiB
SCSS
:root {
|
|
--font: 'Executive', Arial, sans-serif;
|
|
--title: 'System', Arial, sans-serif;
|
|
|
|
// --fs-xsmall: 10px;
|
|
// --fs-small: 12px;
|
|
// --fs-normal: 16px;
|
|
// --fs-medium: 22px;
|
|
// --fs-big: 38px;
|
|
|
|
--fs-xsmall: 10px;
|
|
--fs-small: 12px;
|
|
--fs-normal: 16px;
|
|
--fs-medium: 20px;
|
|
--fs-big: 30px;
|
|
--fs-xbig: 38px;
|
|
|
|
--fs-button-bold: 22px;
|
|
|
|
--max-w-content: 700px;
|
|
--max-w-container: 1280px;
|
|
|
|
@media #{$small} {
|
|
--fs-medium: 20px;
|
|
--fs-big: 26px;
|
|
}
|
|
|
|
--leading-tight: 1.05;
|
|
--leading-normal: 1.3;
|
|
// --leading-relaxed: 1.4;
|
|
// --leading-loose: 1.8;
|
|
|
|
--fw-normal: 400;
|
|
--fw-medium: 500;
|
|
--fw-bold: 600;
|
|
|
|
|
|
--grey-100: #d8d8d8;
|
|
--grey-200: #c8c8c8;
|
|
--grey-300: #b9b9b9;
|
|
--grey-400: #969696;
|
|
--grey-600: #6d6d6d;
|
|
--grey-800: #383838;
|
|
|
|
--color-bg: #161616;
|
|
--color-txt: #ffffff;
|
|
--color-txt-light: var(--grey-400);
|
|
--color-accent: #00ff00;
|
|
--color-accent-50: #e9ffe9;
|
|
--color-accent-100: #d8fdd8;
|
|
--dark: black;
|
|
--color-form: white;
|
|
|
|
|
|
--border: 1px solid var(--color-txt);
|
|
--border-medium: 1px solid var(--grey-600);
|
|
--border-light: 1px solid var(--grey-800);
|
|
|
|
|
|
--header-h: 80px;
|
|
--header-h-shrinked: 50px;
|
|
--menu-w: 420px;
|
|
--banner-medium: 220px;
|
|
|
|
|
|
|
|
|
|
// responsive
|
|
--padding-body: 26px;
|
|
--padding-inner: 14px;
|
|
|
|
--radius-small: 4px;
|
|
--radius-btn: 4px;
|
|
--spacing: 30px;
|
|
--h-block: 30px;
|
|
|
|
--curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
|
|
@media #{$small}{
|
|
:root {
|
|
--fs-xsmall: 10px;
|
|
--fs-small: 12px;
|
|
--fs-normal: 14px;
|
|
--fs-medium: 18px;
|
|
--fs-big: 28px;
|
|
--fs-xbig: 32px;
|
|
|
|
--header-h: 60px;
|
|
|
|
--padding-body: 16px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
:root[data-theme="light"] {
|
|
--grey-100: #1f1f1f;
|
|
--grey-200: #2f2f2f;
|
|
--grey-300: #4a4a4a;
|
|
--grey-400: #6a6a6a;
|
|
--grey-600: #9a9a9a;
|
|
--grey-800: #cfcfcf;
|
|
|
|
--color-bg: #efefef;
|
|
--color-txt: #000000;
|
|
--color-txt-light: var(--grey-400);
|
|
|
|
--color-accent: #ff00ff;
|
|
--color-accent-50: #ffe9ff;
|
|
--color-accent-100: #fdd8fd;
|
|
|
|
--dark: white;
|
|
--color-form: var(--color-bg);
|
|
}
|