142 lines
4.1 KiB
SCSS
142 lines
4.1 KiB
SCSS
@mixin font($size, $weight, $lineHeight, $namespace: null, $onlyVars: false) {
|
|
@if ($namespace) {
|
|
@if ($onlyVars) {
|
|
--#{$namespace}-font-size: #{$size};
|
|
--#{$namespace}-font-weight: #{$weight};
|
|
--#{$namespace}-line-height: #{$lineHeight};
|
|
} @else {
|
|
font-size: var(--#{$namespace}-font-size, $size);
|
|
font-weight: var(--#{$namespace}-font-weight, $weight);
|
|
line-height: var(--#{$namespace}-line-height, $lineHeight);
|
|
}
|
|
} @else {
|
|
font-size: $size;
|
|
font-weight: $weight;
|
|
line-height: $lineHeight;
|
|
}
|
|
}
|
|
|
|
/* Headline */
|
|
@mixin h1($namespace: null, $onlyVars: false) {
|
|
@include font(32px, 700, 41px, $namespace, $onlyVars);
|
|
}
|
|
@mixin h2($namespace: null, $onlyVars: false) {
|
|
@include font(24px, 700, 31px, $namespace, $onlyVars);
|
|
}
|
|
@mixin h3($namespace: null, $onlyVars: false) {
|
|
@include font(18px, 600, 23px, $namespace, $onlyVars);
|
|
}
|
|
@mixin h4($namespace: null, $onlyVars: false) {
|
|
@include font(14px, 500, 18px, $namespace, $onlyVars);
|
|
}
|
|
@mixin h5($namespace: null, $onlyVars: false) {
|
|
@include font(12px, 500, 15px, $namespace, $onlyVars);
|
|
}
|
|
|
|
/**
|
|
Text
|
|
|
|
Format:
|
|
txt-{size}-{weight}
|
|
|
|
Sizes:
|
|
l - Large
|
|
m - Medium
|
|
i - Interim
|
|
r - Regular
|
|
s - Small
|
|
t - Tiny
|
|
|
|
Weights:
|
|
r - Regular (or leaved empty)
|
|
m - Medium
|
|
sb - Semibold
|
|
b - Bold
|
|
*/
|
|
@mixin txt-l($namespace: null, $onlyVars: false) {
|
|
@include font(18px, 400, 23px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-l-m($namespace: null, $onlyVars: false) {
|
|
@include font(18px, 500, 23px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-l-sb($namespace: null, $onlyVars: false) {
|
|
@include font(18px, 600, 23px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-l-b($namespace: null, $onlyVars: false) {
|
|
@include font(18px, 700, 23px, $namespace, $onlyVars);
|
|
}
|
|
|
|
@mixin txt-m($namespace: null, $onlyVars: false) {
|
|
@include font(16px, 400, 20px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-m-m($namespace: null, $onlyVars: false) {
|
|
@include font(16px, 500, 20px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-m-sb($namespace: null, $onlyVars: false) {
|
|
@include font(16px, 600, 20px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-m-b($namespace: null, $onlyVars: false) {
|
|
@include font(16px, 700, 20px, $namespace, $onlyVars);
|
|
}
|
|
|
|
@mixin txt-i($namespace: null, $onlyVars: false) {
|
|
@include font(14px, 400, 18px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-i-m($namespace: null, $onlyVars: false) {
|
|
@include font(14px, 500, 18px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-i-sb($namespace: null, $onlyVars: false) {
|
|
@include font(14px, 600, 18px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-i-b($namespace: null, $onlyVars: false) {
|
|
@include font(14px, 700, 18px, $namespace, $onlyVars);
|
|
}
|
|
|
|
@mixin txt-r($namespace: null, $onlyVars: false) {
|
|
@include font(12px, 400, 15px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-r-m($namespace: null, $onlyVars: false) {
|
|
@include font(12px, 500, 15px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-r-sb($namespace: null, $onlyVars: false) {
|
|
@include font(12px, 600, 15px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-r-b($namespace: null, $onlyVars: false) {
|
|
@include font(12px, 700, 15px, $namespace, $onlyVars);
|
|
}
|
|
|
|
@mixin txt-s($namespace: null, $onlyVars: false) {
|
|
@include font(11px, 400, 14px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-s-m($namespace: null, $onlyVars: false) {
|
|
@include font(11px, 500, 14px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-s-sb($namespace: null, $onlyVars: false) {
|
|
@include font(11px, 600, 14px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-s-b($namespace: null, $onlyVars: false) {
|
|
@include font(11px, 700, 14px, $namespace, $onlyVars);
|
|
}
|
|
|
|
@mixin txt-t($namespace: null, $onlyVars: false) {
|
|
@include font(10px, 400, 13px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-t-m($namespace: null, $onlyVars: false) {
|
|
@include font(10px, 500, 13px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-t-sb($namespace: null, $onlyVars: false) {
|
|
@include font(10px, 600, 13px, $namespace, $onlyVars);
|
|
}
|
|
@mixin txt-t-b($namespace: null, $onlyVars: false) {
|
|
@include font(10px, 700, 13px, $namespace, $onlyVars);
|
|
}
|
|
|
|
@mixin text-gradient {
|
|
@content;
|
|
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-fill-color: transparent;
|
|
}
|