You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
plain-ui/src/scss/core/_heading.scss

63 lines
1.4 KiB

/**
* Heading
*
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
$plain-ui__heading__font-sizes: (
'h1': 2.25rem,
'h2': 2rem,
'h3': 1.8rem,
'h4': 1.6rem,
'h5': 1.4rem,
'h6': 1.2rem
) !default;
$plain-ui__heading__font-sizes__breakpoints: (
$plain-ui__md: 1.2rem
) !default;
$plain-ui__heading__font-weight: bold!default;
$plain-ui__heading__font-family: $plain-ui__font-family !default;
$plain-ui__heading__line-height: 1.2 !default;
$plain-ui__heading__margin: 0 0 1.2rem !default;
$plain-ui__heading__margin-breakpoints: (
$plain-ui__md: 0 0 1.4rem
) !default;
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: $plain-ui__heading__font-family;
font-weight: $plain-ui__heading__font-weight;
line-height: $plain-ui__heading__line-height;
margin: $plain-ui__heading__margin;
@include plain-ui__breakpoints('margin', $plain-ui__heading__margin-breakpoints);
&.highlight {
display: table;
}
}
.highlight {
padding: 0.25rem 0.5rem;
background: var(--primary);
color: var(--text-secondary);
}
@each $h, $font-size in $plain-ui__heading__font-sizes {
#{$h}, .#{$h} {
font-size: $font-size;
@include plain-ui__breakpoints-font-size($plain-ui__heading__font-sizes__breakpoints, $font-size, $plain-ui__font-size);
}
}