104 lines
2.5 KiB
SCSS
104 lines
2.5 KiB
SCSS
|
|
// BASE
|
|
|
|
*, *:before, *:after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// UNITS
|
|
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
|
|
// ELEVATION
|
|
|
|
:root {
|
|
--elevation-color: rgba(0, 0, 0, 0.333);
|
|
--elevation-color-on-dark: rgba(0, 0, 0, 0.5);
|
|
@for $elevation from 1 to 24 {
|
|
--elevation-#{$elevation}: #{$elevation/16/2}rem #{$elevation/16/2}rem #{$elevation/16*2}rem var(--elevation-color);
|
|
--elevation-#{$elevation}-on-dark: #{$elevation/16/2}rem #{$elevation/16/2}rem #{$elevation/16*2}rem var(--elevation-color-on-dark);
|
|
}
|
|
}
|
|
|
|
// COLOR
|
|
|
|
$color-deep-blue: #364dfc;
|
|
$color-cyan-blue: #27d8ed;
|
|
|
|
$color-mute: mix($color-deep-blue, $color-cyan-blue, 15%);
|
|
$color-chill: mix($color-deep-blue, $color-cyan-blue, 50%);
|
|
$color-bold: mix($color-deep-blue, $color-cyan-blue, 75%);
|
|
|
|
$color-primary: $color-bold;
|
|
$color-secondary: $color-mute;
|
|
$color-middle: $color-chill;
|
|
|
|
$color-highlight: transparentize($color-chill, 0.25);
|
|
|
|
$color-text: mix($color-chill, #002, 33.3%);
|
|
|
|
:root {
|
|
// theme
|
|
--color-gradient-primary: #{$color-primary};
|
|
--color-gradient-secondary: #{$color-secondary};
|
|
--color-primary: #{$color-primary};
|
|
--color-secondary: #{$color-secondary};
|
|
--color-middle: #{$color-middle};
|
|
// interactions
|
|
--color-highlight: #{$color-highlight};
|
|
// text
|
|
--color-text: #{$color-text};
|
|
--color-text-bold: #{$color-primary};
|
|
}
|
|
|
|
// GRADIENTS
|
|
|
|
:root {
|
|
--gradient-linear: linear-gradient(120deg, var(--color-gradient-secondary) 20%, var(--color-gradient-primary) 80%);
|
|
--gradient-linear-background: linear-gradient(180deg, var(--color-gradient-secondary) 0%, var(--color-gradient-primary) 100%);
|
|
--gradient-linear-background-reverse: linear-gradient(0deg, var(--color-gradient-secondary) 0%, var(--color-gradient-primary) 100%);
|
|
--gradient-radial: radial-gradient(circle at right bottom, var(--color-gradient-secondary) 0%, var(--color-gradient-primary) 100%);
|
|
--gradient-radial-text: radial-gradient(ellipse at 90% 100%, var(--color-gradient-secondary) 16.66%, var(--color-gradient-primary) 83.33%);
|
|
--gradient-radial-reverse: radial-gradient(circle at left top, var(--color-gradient-secondary) 0%, var(--color-gradient-primary) 100%);
|
|
}
|
|
|
|
// TYPOGRAPHY
|
|
|
|
body {
|
|
line-height: 1.2;
|
|
font-family: 'Inter UI';
|
|
color: var(--color-text);
|
|
}
|
|
|
|
// RADIUS
|
|
|
|
:root {
|
|
--radius-cut: 1.5rem;
|
|
--radius-dialog: 0.5rem;
|
|
}
|
|
|
|
// PADDING
|
|
|
|
:root {
|
|
@for $padding from 1 to 48 {
|
|
--padding-#{$padding}: #{$padding/16}rem;
|
|
}
|
|
}
|
|
|
|
// SIZES
|
|
|
|
:root {
|
|
--safe-top: 0px;
|
|
--size-appbar: 3.5rem;
|
|
--safe-bottom: 0px;
|
|
--size-controls: 3.5rem;
|
|
}
|
|
|
|
// TODO: better solution
|
|
|
|
input, textarea, button, a {
|
|
outline: none;
|
|
}
|