mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
3.4 KiB
126 lines
3.4 KiB
// Name: Countdown
|
|
// Description: Component to create countdown timers
|
|
//
|
|
// Component: `uk-countdown`
|
|
//
|
|
// Sub-objects: `uk-countdown-number`
|
|
// `uk-countdown-separator`
|
|
// `uk-countdown-label`
|
|
//
|
|
// ========================================================================
|
|
|
|
|
|
// Variables
|
|
// ========================================================================
|
|
|
|
$countdown-item-line-height: 70px !default;
|
|
|
|
$countdown-number-font-size: 2rem !default; // 32px
|
|
$countdown-number-font-size-s: 4rem !default; // 64px
|
|
$countdown-number-font-size-m: 6rem !default; // 96px
|
|
|
|
$countdown-separator-font-size: 1rem !default; // 16px
|
|
$countdown-separator-font-size-s: 2rem !default; // 32px
|
|
$countdown-separator-font-size-m: 3rem !default; // 48px
|
|
|
|
|
|
/* ========================================================================
|
|
Component: Countdown
|
|
========================================================================== */
|
|
|
|
.uk-countdown {
|
|
@if(mixin-exists(hook-countdown)) {@include hook-countdown();}
|
|
}
|
|
|
|
|
|
/* Item
|
|
========================================================================== */
|
|
|
|
/*
|
|
* 1. Center numbers and separators vertically
|
|
*/
|
|
|
|
.uk-countdown-number,
|
|
.uk-countdown-separator {
|
|
/* 1 */
|
|
line-height: $countdown-item-line-height;
|
|
@if(mixin-exists(hook-countdown-item)) {@include hook-countdown-item();}
|
|
}
|
|
|
|
|
|
/* Number
|
|
========================================================================== */
|
|
|
|
.uk-countdown-number {
|
|
font-size: $countdown-number-font-size;
|
|
@if(mixin-exists(hook-countdown-number)) {@include hook-countdown-number();}
|
|
}
|
|
|
|
/* Phone landscape and bigger */
|
|
@media (min-width: $breakpoint-small) {
|
|
|
|
.uk-countdown-number { font-size: $countdown-number-font-size-s; }
|
|
|
|
}
|
|
|
|
/* Tablet landscape and bigger */
|
|
@media (min-width: $breakpoint-medium) {
|
|
|
|
.uk-countdown-number { font-size: $countdown-number-font-size-m; }
|
|
|
|
}
|
|
|
|
|
|
/* Separator
|
|
========================================================================== */
|
|
|
|
.uk-countdown-separator {
|
|
font-size: $countdown-separator-font-size;
|
|
@if(mixin-exists(hook-countdown-separator)) {@include hook-countdown-separator();}
|
|
}
|
|
|
|
/* Phone landscape and bigger */
|
|
@media (min-width: $breakpoint-small) {
|
|
|
|
.uk-countdown-separator { font-size: $countdown-separator-font-size-s; }
|
|
|
|
}
|
|
|
|
/* Tablet landscape and bigger */
|
|
@media (min-width: $breakpoint-medium) {
|
|
|
|
.uk-countdown-separator { font-size: $countdown-separator-font-size-m; }
|
|
|
|
}
|
|
|
|
|
|
/* Label
|
|
========================================================================== */
|
|
|
|
.uk-countdown-label {
|
|
@if(mixin-exists(hook-countdown-label)) {@include hook-countdown-label();}
|
|
}
|
|
|
|
|
|
// Hooks
|
|
// ========================================================================
|
|
|
|
@if(mixin-exists(hook-countdown-misc)) {@include hook-countdown-misc();}
|
|
|
|
// @mixin hook-countdown(){}
|
|
// @mixin hook-countdown-item(){}
|
|
// @mixin hook-countdown-number(){}
|
|
// @mixin hook-countdown-separator(){}
|
|
// @mixin hook-countdown-label(){}
|
|
// @mixin hook-countdown-misc(){}
|
|
|
|
|
|
// Inverse
|
|
// ========================================================================
|
|
|
|
|
|
|
|
// @mixin hook-inverse-countdown-item(){}
|
|
// @mixin hook-inverse-countdown-number(){}
|
|
// @mixin hook-inverse-countdown-separator(){}
|
|
// @mixin hook-inverse-countdown-label(){}
|
|
|