mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-12-10 00:30:02 -06:00
84 lines
2.3 KiB
SCSS
84 lines
2.3 KiB
SCSS
@mixin bp($breakpoint) {
|
|
@if $breakpoint ==large-mobile {
|
|
@media (min-width: 500px) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@else if $breakpoint ==tablet {
|
|
@media (min-width: 768px) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@else if $breakpoint ==desktop {
|
|
@media (min-width: 1024px) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@else if $breakpoint ==large-desktop {
|
|
@media (min-width: 1280px) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
// else if the breakpoint is a pixel value, use it as is
|
|
@else {
|
|
@media (min-width: $breakpoint) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin h1 {
|
|
font-size: var(--typography-h1-font-size);
|
|
font-weight: var(--typography-h1-font-weight);
|
|
line-height: var(--typography-h1-line-height);
|
|
letter-spacing: -1px;
|
|
}
|
|
@mixin h2 {
|
|
font-size: var(--typography-h2-font-size);
|
|
font-weight: var(--typography-h2-font-weight);
|
|
line-height: var(--typography-h2-line-height);
|
|
letter-spacing: -1px;
|
|
}
|
|
@mixin h3 {
|
|
font-size: var(--typography-h3-font-size);
|
|
font-weight: var(--typography-h3-font-weight);
|
|
line-height: var(--typography-h3-line-height);
|
|
}
|
|
@mixin h4 {
|
|
font-size: var(--typography-h4-font-size);
|
|
font-weight: var(--typography-h4-font-weight);
|
|
line-height: var(--typography-h4-line-height);
|
|
}
|
|
@mixin h5 {
|
|
font-size: var(--typography-h5-font-size);
|
|
font-weight: var(--typography-h5-font-weight);
|
|
line-height: var(--typography-h5-line-height);
|
|
}
|
|
@mixin h6 {
|
|
font-size: var(--typography-h6-font-size);
|
|
font-weight: var(--typography-h6-font-weight);
|
|
line-height: var(--typography-h6-line-height);
|
|
}
|
|
|
|
@mixin p {
|
|
font-size: var(--typography-paragraph-font-size);
|
|
font-weight: var(--typography-paragraph-font-weight);
|
|
line-height: var(--typography-paragraph-line-height);
|
|
}
|
|
|
|
@mixin small{
|
|
font-size: var(--typography-small-paragraph-font-size, var(--typography-paragraph-font-size));
|
|
font-weight: var(--typography-small-paragraph-font-weight, var(--typography-paragraph-font-weight));
|
|
line-height: var(--typography-small-paragraph-line-height, var(--typography-paragraph-line-height));
|
|
}
|
|
|
|
@mixin big {
|
|
font-size: var(--typography-big-font-size);
|
|
font-weight: var(--typography-big-font-weight);
|
|
line-height: var(--typography-big-line-height);
|
|
text-transform: uppercase;
|
|
} |