103 lines
2.5 KiB
SCSS
103 lines
2.5 KiB
SCSS
/* Path: Frontend/src/styles/tools/_mixins.scss */
|
|
|
|
@use "./breakpoints" as *;
|
|
|
|
@mixin respond-up($breakpoint) {
|
|
@if $breakpoint == mobile {
|
|
@media (min-width: $breakpoint-mobile) {
|
|
@content;
|
|
}
|
|
} @else if $breakpoint == tablet {
|
|
@media (min-width: $breakpoint-tablet) {
|
|
@content;
|
|
}
|
|
} @else if $breakpoint == desktop {
|
|
@media (min-width: $breakpoint-desktop) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin respond-down($breakpoint) {
|
|
@if $breakpoint == mobile {
|
|
@media (max-width: calc($breakpoint-mobile - 0.01rem)) {
|
|
@content;
|
|
}
|
|
} @else if $breakpoint == tablet {
|
|
@media (max-width: calc($breakpoint-tablet - 0.01rem)) {
|
|
@content;
|
|
}
|
|
} @else if $breakpoint == desktop {
|
|
@media (max-width: calc($breakpoint-desktop - 0.01rem)) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin interactive-frame(
|
|
$background: var(--color-surface),
|
|
$border: var(--color-border),
|
|
$color: var(--color-text-muted),
|
|
$radius: var(--radius-md)
|
|
) {
|
|
border: 1px solid $border;
|
|
border-radius: $radius;
|
|
background: $background;
|
|
color: $color;
|
|
}
|
|
|
|
@mixin interactive-frame-hover(
|
|
$background: var(--color-surface-hover),
|
|
$border: var(--color-border-strong),
|
|
$color: var(--color-text)
|
|
) {
|
|
&:hover {
|
|
background: $background;
|
|
border-color: $border;
|
|
color: $color;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
@mixin text-caption {
|
|
font-size: var(--font-size-caption);
|
|
font-weight: var(--font-weight-caption);
|
|
line-height: var(--line-height-caption);
|
|
letter-spacing: var(--letter-spacing-caption);
|
|
}
|
|
|
|
@mixin text-label {
|
|
font-size: var(--font-size-label);
|
|
font-weight: var(--font-weight-label);
|
|
line-height: var(--line-height-label);
|
|
letter-spacing: var(--letter-spacing-label);
|
|
}
|
|
|
|
@mixin text-body {
|
|
font-size: var(--font-size-body);
|
|
font-weight: var(--font-weight-body);
|
|
line-height: var(--line-height-body);
|
|
letter-spacing: var(--letter-spacing-body);
|
|
}
|
|
|
|
@mixin text-title {
|
|
font-size: var(--font-size-title);
|
|
font-weight: var(--font-weight-title);
|
|
line-height: var(--line-height-title);
|
|
letter-spacing: var(--letter-spacing-title);
|
|
}
|
|
|
|
@mixin text-heading {
|
|
font-size: var(--font-size-heading);
|
|
font-weight: var(--font-weight-heading);
|
|
line-height: var(--line-height-heading);
|
|
letter-spacing: var(--letter-spacing-heading);
|
|
}
|
|
|
|
@mixin text-display {
|
|
font-size: var(--font-size-display);
|
|
font-weight: var(--font-weight-display);
|
|
line-height: var(--line-height-display);
|
|
letter-spacing: var(--letter-spacing-display);
|
|
}
|