D-Net

// Name:            Heading

// Description:     Styles for headings

//

// Component:       `uk-heading-primary`

//                  `uk-heading-hero`

//                  `uk-heading-divider`

//                  `uk-heading-bullet`

//                  `uk-heading-line`

//

// ========================================================================

// Variables

// ========================================================================

@heading-primary-font-size:                     @global-xxlarge-font-size;

@heading-primary-line-height:                   1.2;

@heading-primary-font-size-m:                   3.75rem; // 54px

@heading-primary-line-height-m:                 1.1;

@heading-hero-font-size:                        4rem; // 64px

@heading-hero-line-height:                      1.1;

@heading-hero-font-size-s:                      6rem; // 96px

@heading-hero-line-height-s:                    1;

@heading-hero-font-size-m:                      8rem; // 128px

@heading-hero-line-height-m:                    1;

@heading-divider-padding-bottom:                10px;

@heading-divider-border-width:                  @global-border-width;

@heading-divider-border:                        @global-border;

@heading-bullet-top:                            ~'calc(-0.1 * 1em)';

@heading-bullet-height:                         0.9em;

@heading-bullet-margin-right:                   10px;

@heading-bullet-border-width:                   5px;

@heading-bullet-border:                         @global-border;

@heading-line-border-width:                     @global-border-width;

@heading-line-border:                           @global-border;

@heading-line-height:                           @heading-line-border-width;

@heading-line-margin-horizontal:                0.6em;

/* ========================================================================

   Component: Heading

 ========================================================================== */

/* Primary

 ========================================================================== */

.uk-heading-primary {

    font-size: @heading-primary-font-size;

    line-height: @heading-primary-line-height;

    .hook-heading-primary;

}

/* Tablet landscape and bigger */

@media (min-width: @breakpoint-medium) {

    .uk-heading-primary {

        font-size: @heading-primary-font-size-m;

        line-height: @heading-primary-line-height-m;

    }

}

/* Hero

 ========================================================================== */

.uk-heading-hero {

    font-size: @heading-hero-font-size;

    line-height: @heading-hero-line-height;

    .hook-heading-hero;

}

/* Phone landscape and bigger */

@media (min-width: @breakpoint-small) {

    .uk-heading-hero {

        font-size: @heading-hero-font-size-s;

        line-height: @heading-hero-line-height-s;

    }

}

/* Tablet landscape and bigger */

@media (min-width: @breakpoint-medium) {

    .uk-heading-hero {

        font-size: @heading-hero-font-size-m;

        line-height: @heading-hero-line-height-m;

    }

}

/* Divider

 ========================================================================== */

.uk-heading-divider {

    padding-bottom: @heading-divider-padding-bottom;

    border-bottom: @heading-divider-border-width solid @heading-divider-border;

    .hook-heading-divider;

}

/* Bullet

 ========================================================================== */

.uk-heading-bullet { position: relative; }

/*

 * 1. Using `inline-block` to make it work with text alignment

 * 2. Center vertically

 * 3. Style

 */

.uk-heading-bullet::before {

    content: "";

    /* 1 */

    display: inline-block;

    /* 2 */

    position: relative;

    top: @heading-bullet-top;

    vertical-align: middle;

    /* 3 */

    height: @heading-bullet-height;

    margin-right: @heading-bullet-margin-right;

    border-left: @heading-bullet-border-width solid @heading-bullet-border;

    .hook-heading-bullet;

}

/* Line

 ========================================================================== */

/*

 * Clip the child element

 */

.uk-heading-line { overflow: hidden; }

/*

 * Extra markup is needed to make it work with text align

 */

.uk-heading-line > * {

    display: inline-block;

    position: relative;

}

/*

 * 1. Center vertically

 * 2. Make the element as large as possible. It's clipped by the container.

 * 3. Style

 */

.uk-heading-line > :before,

.uk-heading-line > :after {

    content: "";

    /* 1 */

    position: absolute;

    top: ~'calc(50% - (@{heading-line-height} / 2))';

    /* 2 */

    width: 2000px;

    /* 3 */

    border-bottom: @heading-line-border-width solid @heading-line-border;

    .hook-heading-line;

}

.uk-heading-line > :before {

    right: 100%;

    margin-right: @heading-line-margin-horizontal;

}

.uk-heading-line > :after {

    left: 100%;

    margin-left: @heading-line-margin-horizontal;

}

// Hooks

// ========================================================================

.hook-heading-misc;

.hook-heading-primary() {}

.hook-heading-hero() {}

.hook-heading-divider() {}

.hook-heading-bullet() {}

.hook-heading-line() {}

.hook-heading-misc() {}

// Inverse

// ========================================================================

@inverse-heading-divider-border:                  @inverse-global-border;

@inverse-heading-bullet-border:                   @inverse-global-border;

@inverse-heading-line-border:                     @inverse-global-border;

.hook-inverse() {

    .uk-heading-primary {

        .hook-inverse-heading-primary;

    }

    .uk-heading-hero {

        .hook-inverse-heading-hero;

    }

    .uk-heading-divider {

        border-bottom-color: @inverse-heading-divider-border;

        .hook-inverse-heading-divider;

    }

    .uk-heading-bullet::before {

        border-left-color: @inverse-heading-bullet-border;

        .hook-inverse-heading-bullet;

    }

    .uk-heading-line > :before,

    .uk-heading-line > :after {

        border-bottom-color: @inverse-heading-line-border;

        .hook-inverse-heading-line;

    }

}

.hook-inverse-heading-primary() {}

.hook-inverse-heading-hero() {}

.hook-inverse-heading-divider() {}

.hook-inverse-heading-bullet() {}

.hook-inverse-heading-line() {}