diff options
Diffstat (limited to 'scss/uikit/components/heading.scss')
| -rw-r--r-- | scss/uikit/components/heading.scss | 223 |
1 files changed, 223 insertions, 0 deletions
diff --git a/scss/uikit/components/heading.scss b/scss/uikit/components/heading.scss new file mode 100644 index 00000000..13f97229 --- /dev/null +++ b/scss/uikit/components/heading.scss @@ -0,0 +1,223 @@ +// 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 !default; // 60px +$heading-primary-line-height-l: 1.1 !default; + +$heading-primary-font-size-m: $heading-primary-font-size-l * 0.9 !default; // 54px + +$heading-primary-font-size: $heading-primary-font-size-l * 0.8 !default; // 48px +$heading-primary-line-height: 1.2 !default; + +$heading-hero-font-size-l: 8rem !default; // 128px +$heading-hero-line-height-l: 1 !default; + +$heading-hero-font-size-m: $heading-hero-font-size-l * 0.75 !default; // 96px +$heading-hero-line-height-m: 1 !default; + +$heading-hero-font-size: $heading-hero-font-size-l * 0.5 !default; // 64px +$heading-hero-line-height: 1.1 !default; + +$heading-divider-padding-bottom: 10px !default; +$heading-divider-border-width: $global-border-width !default; +$heading-divider-border: $global-border !default; + +$heading-bullet-top: unquote('calc(-0.1 * 1em)') !default; +$heading-bullet-height: 0.9em !default; +$heading-bullet-margin-right: 10px !default; +$heading-bullet-border-width: 5px !default; +$heading-bullet-border: $global-border !default; + +$heading-line-top: 50% !default; +$heading-line-height: $heading-line-border-width !default; +$heading-line-width: 2000px !default; +$heading-line-border-width: $global-border-width !default; +$heading-line-border: $global-border !default; +$heading-line-margin-horizontal: 0.6em !default; + + +/* ======================================================================== + Component: Heading + ========================================================================== */ + + +/* Primary + ========================================================================== */ + +.uk-heading-primary { + font-size: $heading-primary-font-size; + line-height: $heading-primary-line-height; + @if(mixin-exists(hook-heading-primary)) {@include 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; + @if(mixin-exists(hook-heading-hero)) {@include 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; + @if(mixin-exists(hook-heading-divider)) {@include 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; + @if(mixin-exists(hook-heading-bullet)) {@include 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: unquote('calc(#{$heading-line-top} - (#{$heading-line-height} / 2))'); + /* 2 */ + width: $heading-line-width; + /* 3 */ + border-bottom: $heading-line-border-width solid $heading-line-border; + @if(mixin-exists(hook-heading-line)) {@include 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 +// ======================================================================== + +@if(mixin-exists(hook-heading-misc)) {@include hook-heading-misc();} + +// @mixin hook-heading-primary(){} +// @mixin hook-heading-hero(){} +// @mixin hook-heading-divider(){} +// @mixin hook-heading-bullet(){} +// @mixin hook-heading-line(){} +// @mixin hook-heading-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-heading-divider-border: $inverse-global-border !default; +$inverse-heading-bullet-border: $inverse-global-border !default; +$inverse-heading-line-border: $inverse-global-border !default; + + + +// @mixin hook-inverse-heading-primary(){} +// @mixin hook-inverse-heading-hero(){} +// @mixin hook-inverse-heading-divider(){} +// @mixin hook-inverse-heading-bullet(){} +// @mixin hook-inverse-heading-line(){} |