Current Directory: /home/astoriaah/www/templates/yootheme/vendor/assets/uikit/src/less/components
Viewing File: /home/astoriaah/www/templates/yootheme/vendor/assets/uikit/src/less/components/heading.less
// 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-l: 3.75rem; // 60px
@heading-primary-line-height-l: 1.1;
@heading-primary-font-size-m: @heading-primary-font-size-l * 0.9; // 54px
@heading-primary-font-size: @heading-primary-font-size-l * 0.8; // 48px
@heading-primary-line-height: 1.2;
@heading-hero-font-size-l: 8rem; // 128px
@heading-hero-line-height-l: 1;
@heading-hero-font-size-m: @heading-hero-font-size-l * 0.75; // 96px
@heading-hero-line-height-m: 1;
@heading-hero-font-size: @heading-hero-font-size-l * 0.5; // 64px
@heading-hero-line-height: 1.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-top: 50%;
@heading-line-height: @heading-line-border-width;
@heading-line-width: 2000px;
@heading-line-border-width: @global-border-width;
@heading-line-border: @global-border;
@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; }
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-heading-primary {
font-size: @heading-primary-font-size-l;
line-height: @heading-primary-line-height-l;
}
}
/* Hero
========================================================================== */
.uk-heading-hero {
font-size: @heading-hero-font-size;
line-height: @heading-hero-line-height;
.hook-heading-hero;
}
/* 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;
}
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.uk-heading-hero {
font-size: @heading-hero-font-size-l;
line-height: @heading-hero-line-height-l;
}
}
/* 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(@{heading-line-top} - (@{heading-line-height} / 2))';
/* 2 */
width: @heading-line-width;
/* 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() {}