diff options
Diffstat (limited to 'scss/uikit/components/heading.scss')
| -rw-r--r-- | scss/uikit/components/heading.scss | 223 |
1 files changed, 0 insertions, 223 deletions
diff --git a/scss/uikit/components/heading.scss b/scss/uikit/components/heading.scss deleted file mode 100644 index 13f97229..00000000 --- a/scss/uikit/components/heading.scss +++ /dev/null @@ -1,223 +0,0 @@ -// 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(){} |