8d87eedcb4
* Update mobile modal animations * Member popup input error and placeholder refinements * Adding close animation to members auth popups * Improve members auth dialog * Refine members reset password design
110 lines
2.9 KiB
CSS
110 lines
2.9 KiB
CSS
/* Design system variables */
|
|
/* ------------------------------------------------------------
|
|
|
|
Variables to define colors, fonts and various visual elements.
|
|
Layout use a 4px grid.
|
|
|
|
*/
|
|
|
|
|
|
/* Colors */
|
|
/* ------------------------------------------------------------ */
|
|
:root {
|
|
/* Base colors */
|
|
--blue: #3eb0ef;
|
|
--green: #a4d037;
|
|
--red: #f05230;
|
|
--yellow: #fecd35;
|
|
--white: #ffffff;
|
|
--grey: #B8C2CC;
|
|
--black: #22292F;
|
|
|
|
/* Variations */
|
|
--blue-l3: color-mod(var(--blue) l(+15%));
|
|
--blue-l2: color-mod(var(--blue) l(+10%));
|
|
--blue-l1: color-mod(var(--blue) l(+5%));
|
|
--blue-d1: color-mod(var(--blue) l(-5%));
|
|
--blue-d2: color-mod(var(--blue) l(-10%));
|
|
--blue-d3: color-mod(var(--blue) l(-15%));
|
|
|
|
--green-l3: color-mod(var(--green) l(+15%));
|
|
--green-l2: color-mod(var(--green) l(+10%));
|
|
--green-l1: color-mod(var(--green) l(+5%));
|
|
--green-d1: color-mod(var(--green) l(-5%));
|
|
--green-d2: color-mod(var(--green) l(-10%));
|
|
--green-d3: color-mod(var(--green) l(-15%));
|
|
|
|
--yellow-l3: color-mod(var(--yellow) l(+15%));
|
|
--yellow-l2: color-mod(var(--yellow) l(+10%));
|
|
--yellow-l1: color-mod(var(--yellow) l(+5%));
|
|
--yellow-d1: color-mod(var(--yellow) l(-5%));
|
|
--yellow-d2: color-mod(var(--yellow) l(-10%));
|
|
--yellow-d3: color-mod(var(--yellow) l(-13%));
|
|
|
|
--red-l3: color-mod(var(--red) l(+15%));
|
|
--red-l2: color-mod(var(--red) l(+10%));
|
|
--red-l1: color-mod(var(--red) l(+5%));
|
|
--red-d1: color-mod(var(--red) l(-5%));
|
|
--red-d2: color-mod(var(--red) l(-10%));
|
|
--red-d3: color-mod(var(--red) l(-15%));
|
|
|
|
--grey-l3:#F8FAFC;
|
|
--grey-l2:#F1F5F8;
|
|
--grey-l1:#DAE1E7;
|
|
--grey-d1:#8795A1;
|
|
--grey-d2:#606F7B;
|
|
--grey-d3:#3D4852;
|
|
}
|
|
|
|
|
|
/* Typography */
|
|
/* ------------------------------------------------------------ */
|
|
|
|
/* Fonts */
|
|
:root {
|
|
--default-font: -apple-system, BlinkMacSystemFont,
|
|
'avenir next', avenir,
|
|
'helvetica neue', helvetica,
|
|
ubuntu,
|
|
roboto, noto,
|
|
'segoe ui', arial,
|
|
sans-serif;
|
|
}
|
|
|
|
/* Type scale */
|
|
:root {
|
|
--text-2xs: 1.15rem;
|
|
--text-xs: 1.3rem;
|
|
--text-s: 1.4rem;
|
|
--text-base: 1.5rem;
|
|
--text-l: 1.8rem;
|
|
--text-xl: 2.5rem;
|
|
--text-2xl: 3.0rem;
|
|
--text-3xl: 3.6rem;
|
|
--text-4xl: 4.5rem;
|
|
}
|
|
|
|
|
|
/* Visual elements */
|
|
/* ------------------------------------------------------------ */
|
|
|
|
/* Borders */
|
|
:root {
|
|
--border-radius-s: 2px;
|
|
--border-radius-base: 4px;
|
|
--border-radius-l: 8px;
|
|
--border-radius-xl: 12px;
|
|
}
|
|
|
|
/* Shadows */
|
|
:root {
|
|
--box-shadow-base: 0 0 1px rgba(0, 0, 0, .12), 0 16px 24px -12px rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
/* Animations */
|
|
:root {
|
|
/* Speed (f: faster, s: slower) */
|
|
--animation-speed-f1: 0.18s;
|
|
--animation-speed-base: 0.25s;
|
|
--animation-speed-s1: 0.45s;
|
|
} |