plain-ui/src/scss/core/_heading.scss

/**
 *  Heading
 *
 *
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */


/**
 * add font-size for heading as class and element
 *
 *
 */
@mixin heading-font-size($h, $font-size)
{
    #{$h}, .#{$h} {
        font-size: $font-size;
    }
}

$heading__font-sizes: (
    'h1': 2.5rem,
    'h2': 2rem,
    'h3': 1.75rem,
    'h4': 1.5rem,
    'h5': 1.25rem,
    'h6': 1rem
) !default;

$heading__font-sizes-breakpoints: (
    $grid__md: (
        'h1': 2.75rem,
        'h2': 2.5rem,
        'h3': 2rem,
        'h4': 1.75rem,
        'h5': 1.5rem,
        'h6': 1.2rem
    )
) !default;

$heading__font-weight: bold!default;
$heading__font-family: $font-family !default;

$heading__line-height: 1.2 !default;

$heading__margin: $margin !default;
$heading__margin-breakpoints: margin-breakpoints !default;

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: $heading__font-family;
    font-weight: $heading__font-weight;
    line-height: $heading__line-height;

    margin: $heading__margin;
    @include breakpoints('margin', $heading__margin-breakpoints);

    &.highlight {
        display: table;
    }
}

// adding font-size for each
@each $h, $font-size in $heading__font-sizes {
    @include heading-font-size($h, $font-size);
}

// adding breakpoints for each breakpoint and each heading
@each $breakpoint, $headings in $heading__font-sizes-breakpoints {
    @media only screen and (min-width: $breakpoint) {
        @each $h, $font-size in $headings {
            @include heading-font-size($h, $font-size);
        }
    }
}