1 | // Name: Countdown
|
2 | // Description: Component to create countdown timers
|
3 | //
|
4 | // Component: `uk-countdown`
|
5 | //
|
6 | // Sub-objects: `uk-countdown-number`
|
7 | // `uk-countdown-separator`
|
8 | // `uk-countdown-label`
|
9 | //
|
10 | // ========================================================================
|
11 |
|
12 |
|
13 | // Variables
|
14 | // ========================================================================
|
15 |
|
16 | $countdown-item-line-height: 0.8 !default;
|
17 |
|
18 | $countdown-number-font-size: 2rem !default; // 32px
|
19 | $countdown-number-font-size-s: 4rem !default; // 64px
|
20 | $countdown-number-font-size-m: 6rem !default; // 96px
|
21 |
|
22 | $countdown-separator-font-size: 1rem !default; // 16px
|
23 | $countdown-separator-font-size-s: 2rem !default; // 32px
|
24 | $countdown-separator-font-size-m: 3rem !default; // 48px
|
25 |
|
26 |
|
27 | /* ========================================================================
|
28 | Component: Countdown
|
29 | ========================================================================== */
|
30 |
|
31 | .uk-countdown {
|
32 | @if(mixin-exists(hook-countdown)) {@include hook-countdown();}
|
33 | }
|
34 |
|
35 |
|
36 | /* Item
|
37 | ========================================================================== */
|
38 |
|
39 | /*
|
40 | * 1. Center numbers and separators vertically
|
41 | */
|
42 |
|
43 | .uk-countdown-number,
|
44 | .uk-countdown-separator {
|
45 | /* 1 */
|
46 | line-height: $countdown-item-line-height;
|
47 | @if(mixin-exists(hook-countdown-item)) {@include hook-countdown-item();}
|
48 | }
|
49 |
|
50 |
|
51 | /* Number
|
52 | ========================================================================== */
|
53 |
|
54 | .uk-countdown-number {
|
55 | font-size: $countdown-number-font-size;
|
56 | @if(mixin-exists(hook-countdown-number)) {@include hook-countdown-number();}
|
57 | }
|
58 |
|
59 | /* Phone landscape and bigger */
|
60 | @media (min-width: $breakpoint-small) {
|
61 |
|
62 | .uk-countdown-number { font-size: $countdown-number-font-size-s; }
|
63 |
|
64 | }
|
65 |
|
66 | /* Tablet landscape and bigger */
|
67 | @media (min-width: $breakpoint-medium) {
|
68 |
|
69 | .uk-countdown-number { font-size: $countdown-number-font-size-m; }
|
70 |
|
71 | }
|
72 |
|
73 |
|
74 | /* Separator
|
75 | ========================================================================== */
|
76 |
|
77 | .uk-countdown-separator {
|
78 | font-size: $countdown-separator-font-size;
|
79 | @if(mixin-exists(hook-countdown-separator)) {@include hook-countdown-separator();}
|
80 | }
|
81 |
|
82 | /* Phone landscape and bigger */
|
83 | @media (min-width: $breakpoint-small) {
|
84 |
|
85 | .uk-countdown-separator { font-size: $countdown-separator-font-size-s; }
|
86 |
|
87 | }
|
88 |
|
89 | /* Tablet landscape and bigger */
|
90 | @media (min-width: $breakpoint-medium) {
|
91 |
|
92 | .uk-countdown-separator { font-size: $countdown-separator-font-size-m; }
|
93 |
|
94 | }
|
95 |
|
96 |
|
97 | /* Label
|
98 | ========================================================================== */
|
99 |
|
100 | .uk-countdown-label {
|
101 | @if(mixin-exists(hook-countdown-label)) {@include hook-countdown-label();}
|
102 | }
|
103 |
|
104 |
|
105 | // Hooks
|
106 | // ========================================================================
|
107 |
|
108 | @if(mixin-exists(hook-countdown-misc)) {@include hook-countdown-misc();}
|
109 |
|
110 | // @mixin hook-countdown(){}
|
111 | // @mixin hook-countdown-item(){}
|
112 | // @mixin hook-countdown-number(){}
|
113 | // @mixin hook-countdown-separator(){}
|
114 | // @mixin hook-countdown-label(){}
|
115 | // @mixin hook-countdown-misc(){}
|
116 |
|
117 |
|
118 | // Inverse
|
119 | // ========================================================================
|
120 |
|
121 |
|
122 |
|
123 | // @mixin hook-inverse-countdown-item(){}
|
124 | // @mixin hook-inverse-countdown-number(){}
|
125 | // @mixin hook-inverse-countdown-separator(){}
|
126 | // @mixin hook-inverse-countdown-label(){}
|