49 lines
1.0 KiB
SCSS
49 lines
1.0 KiB
SCSS
// dont' put classes here, only variables and mixins.
|
|
// this is needed until we migration to @use/@forward
|
|
@use './colors' as colors;
|
|
/* Font size */
|
|
$font-size-xs: 10px;
|
|
$font-size-s: 12px;
|
|
$font-size-m: 14px;
|
|
$font-size-l: 16px;
|
|
$font-size-xl: 18px;
|
|
$font-size-xl1: 20px;
|
|
$font-size-xl2: 22px;
|
|
$font-size-xl3: 26px;
|
|
$font-size-xxl: 30px;
|
|
$font-size-xxxl: 42px;
|
|
$font-size-xxxl--tablet: 36px;
|
|
$font-size-xxxl--mobile: 22px;
|
|
|
|
$font-family: 'Roboto', Arial, Helvetica, sans-serif;
|
|
|
|
$font-light: 300;
|
|
$font-regular: 400;
|
|
$font-medium: 500;
|
|
$font-bold: 700;
|
|
|
|
// 44 usages
|
|
@mixin font-small($color-font-small: colors.$gray) {
|
|
font-size: $font-size-s;
|
|
font-family: $font-family;
|
|
font-weight: $font-regular;
|
|
color: $color-font-small;
|
|
line-height: normal;
|
|
}
|
|
|
|
@mixin font-overflow {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@mixin link {
|
|
color: $blue-light;
|
|
text-decoration: none;
|
|
border-bottom: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|