Skip to content

Commit c90b26a

Browse files
g1ebg1eb
committed
Add initial source files for the time range directive
1 parent d10cb0a commit c90b26a

File tree

3 files changed

+624
-0
lines changed

3 files changed

+624
-0
lines changed

‎src/time-range.css‎

Lines changed: 361 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,361 @@
1+
/**
2+
* Datetime range styles
3+
*/
4+
.datetime-range.time {
5+
position: relative;
6+
width: 100%;
7+
min-width: 350px;
8+
height: auto;
9+
min-height: 4em;
10+
margin: 0;
11+
padding: 0;
12+
color: #444;
13+
font-size: 14px;
14+
font-family: sans-serif;
15+
text-decoration: none;
16+
text-align: center;
17+
user-select: none;
18+
-ms-user-select: none;
19+
-moz-user-select: none;
20+
-khtml-user-select: none;
21+
-webkit-user-select: none;
22+
-webkit-touch-callout: none;
23+
-webkit-user-select: none;
24+
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
25+
}
26+
27+
28+
/**
29+
* Start and end datetime objects
30+
*/
31+
.datetime-range.time .start-datetime,
32+
.datetime-range.time .end-datetime {
33+
cursor: pointer;
34+
position: relative;
35+
width: 47%;
36+
height: 4em;
37+
background-color: #efefef;
38+
transition: background-color 0.25s ease-out;
39+
}
40+
.datetime-range.time .start-datetime {
41+
position: absolute;
42+
left: 0;
43+
}
44+
.datetime-range.time .end-datetime {
45+
position: absolute;
46+
left: 53%;
47+
}
48+
.datetime-range.time .start-datetime .time,
49+
.datetime-range.time .end-datetime .time {
50+
color: #777;
51+
font-size: 2em;
52+
line-height: 2em;
53+
display: block;
54+
overflow: hidden;
55+
}
56+
.datetime-range.time .start-datetime.active,
57+
.datetime-range.time .start-datetime:hover,
58+
.datetime-range.time .end-datetime.active,
59+
.datetime-range.time .end-datetime:hover {
60+
background-color: #ddd;
61+
}
62+
.datetime-range.time .start-datetime::after {
63+
content: "";
64+
position: absolute;
65+
top: 0;
66+
border-top: 2em solid transparent;
67+
border-bottom: 2em solid transparent;
68+
border-left: 1em solid #efefef;
69+
transition: border-left 0.25s ease-out;
70+
right: -1em;
71+
}
72+
.datetime-range.time .start-datetime.active::after,
73+
.datetime-range.time .start-datetime:hover::after {
74+
border-left-color: #ddd;
75+
}
76+
.datetime-range.time .end-datetime::before {
77+
content: "";
78+
position: absolute;
79+
top: 0;
80+
border-width: 2em 0 2em 1em;
81+
border-style: solid;
82+
border-color: #efefef #efefef #efefef transparent;
83+
transition: border-color 0.25s ease-out;
84+
left: -1em;
85+
}
86+
.datetime-range.time .end-datetime.active::before,
87+
.datetime-range.time .end-datetime:hover::before {
88+
border-color: #ddd #ddd #ddd transparent;
89+
}
90+
.datetime-range.time .start-datetime.warning,
91+
.datetime-range.time .end-datetime.warning {
92+
background-color: rgba(255, 54, 46, 0.75);
93+
}
94+
.datetime-range.time .start-datetime.warning.active,
95+
.datetime-range.time .start-datetime.warning:hover,
96+
.datetime-range.time .end-datetime.warning.active,
97+
.datetime-range.time .end-datetime.warning:hover {
98+
background-color: rgba(255, 54, 46, 0.75);
99+
}
100+
.datetime-range.time .start-datetime.warning::after {
101+
border-left-color: rgba(255, 54, 46, 0.75);
102+
}
103+
.datetime-range.time .start-datetime.warning.active::after,
104+
.datetime-range.time .start-datetime.warning:hover::after {
105+
border-left-color: rgba(255, 54, 46, 0.75);
106+
}
107+
.datetime-range.time .end-datetime.warning::before {
108+
border-color: rgba(255, 54, 46, 0.75) rgba(255, 54, 46, 0.75) rgba(255, 54, 46, 0.75) transparent;
109+
}
110+
.datetime-range.time .end-datetime.warning.active::before,
111+
.datetime-range.time .end-datetime.warning:hover::before {
112+
border-color: rgba(255, 54, 46, 0.75) rgba(255, 54, 46, 0.75) rgba(255, 54, 46, 0.75) transparent;
113+
}
114+
115+
116+
/**
117+
* Presets
118+
*/
119+
.datetime-range.time .presets {
120+
box-sizing: border-box;
121+
position: absolute;
122+
z-index: 5;
123+
top: 4.5em;
124+
width: 100%;
125+
height: auto;
126+
padding: 0;
127+
text-align: center;
128+
}
129+
.datetime-range.time .presets .dots {
130+
display: inline-block;
131+
cursor: pointer;
132+
}
133+
.datetime-range.time .presets .dots .dot {
134+
display: inline-block;
135+
width: 5px;
136+
height: 5px;
137+
margin: 0 3px;
138+
vertical-align: top;
139+
background-color: #efefef;
140+
}
141+
.datetime-range.time .presets .dots:hover .dot {
142+
background-color: #ddd;
143+
}
144+
.datetime-range.time .presets .list {
145+
display: none;
146+
}
147+
.datetime-range.time .presets .list.active {
148+
display: block;
149+
}
150+
.datetime-range.time .presets .list .preset-button {
151+
box-sizing: border-box;
152+
position: relative;
153+
display: block;
154+
cursor: pointer;
155+
color: #777;
156+
width: 100%;
157+
height: auto;
158+
margin-bottom: 10px;
159+
padding: 0 15px;
160+
font-size: 1.5em;
161+
line-height: 2em;
162+
text-align: center;
163+
outline: none;
164+
border: 1px solid #aaa;
165+
background-color: #efefef;
166+
transition: background-color 0.25s ease-out;
167+
}
168+
.datetime-range.time .presets .list .preset-button:hover {
169+
background: #ddd;
170+
}
171+
172+
173+
/**
174+
* Edit datetime popover
175+
*/
176+
.datetime-range.time .edit-popover {
177+
position: absolute;
178+
z-index: 5;
179+
top: 4.5em;
180+
width: 100%;
181+
height: auto;
182+
padding: 0;
183+
background-color: #efefef;
184+
border-radius: 0;
185+
border: 1px solid #aaa;
186+
box-sizing: border-box;
187+
}
188+
.datetime-range.time .edit-popover .header {
189+
width: 100%;
190+
color: #777;
191+
font-size: 1.5em;
192+
line-height: 2em;
193+
cursor: pointer;
194+
transition: background-color 0.25s ease-out;
195+
}
196+
.datetime-range.time .edit-popover .header::before {
197+
content: "";
198+
display: block;
199+
position: absolute;
200+
background-color: #efefef;
201+
width: 1em;
202+
height: 1em;
203+
top: -0.55em;
204+
left: 45%;
205+
z-index: 2;
206+
border-color: #aaa;
207+
border-style: solid;
208+
border-width: 1px 1px 0 0;
209+
transform: rotate(-45deg);
210+
-moz-transform: rotate(-45deg);
211+
-ms-transform: rotate(-45deg);
212+
-o-transform: rotate(-45deg);
213+
-webkit-transform: rotate(-45deg);
214+
transition: background-color 0.25s ease-out;
215+
}
216+
.datetime-range.time .edit-popover .header.start::before {
217+
left: 20%;
218+
}
219+
.datetime-range.time .edit-popover .header.end::before {
220+
left: 74%;
221+
}
222+
223+
224+
/**
225+
* Timer
226+
*/
227+
.datetime-range.time .timer {
228+
display: flex;
229+
justify-content: space-between;
230+
background-color: #fff;
231+
}
232+
.datetime-range.time .timer .timer-hours,
233+
.datetime-range.time .timer .timer-minutes,
234+
.datetime-range.time .timer .timer-seconds {
235+
cursor: default;
236+
width: 3em;
237+
display: inline-block;
238+
font-size: 3em;
239+
line-height: 1.5em;
240+
position: relative;
241+
}
242+
.datetime-range.time .timer .timer-hours .arrow,
243+
.datetime-range.time .timer .timer-minutes .arrow,
244+
.datetime-range.time .timer .timer-seconds .arrow {
245+
position: relative;
246+
color: #ddd;
247+
cursor: pointer;
248+
height: 1em;
249+
margin: 0 0.5em;
250+
line-height: 1em;
251+
font-size: 0.75em;
252+
}
253+
.datetime-range.time .timer .timer-hours .arrow.arrow-up::before,
254+
.datetime-range.time .timer .timer-minutes .arrow.arrow-up::before,
255+
.datetime-range.time .timer .timer-seconds .arrow.arrow-up::before {
256+
content: "";
257+
position: absolute;
258+
top: 50%;
259+
left: calc(50% - 0.4em);
260+
border-left: 0.5em solid transparent;
261+
border-right: 0.5em solid transparent;
262+
border-bottom: 0.5em solid #ddd;
263+
transition: border 0.25s ease-out;
264+
}
265+
.datetime-range.time .timer .timer-hours .arrow.arrow-up:hover::before,
266+
.datetime-range.time .timer .timer-minutes .arrow.arrow-up:hover::before,
267+
.datetime-range.time .timer .timer-seconds .arrow.arrow-up:hover::before {
268+
border-bottom-color: #999;
269+
}
270+
.datetime-range.time .timer .timer-hours .arrow.arrow-down::before,
271+
.datetime-range.time .timer .timer-minutes .arrow.arrow-down::before,
272+
.datetime-range.time .timer .timer-seconds .arrow.arrow-down::before {
273+
content: "";
274+
position: absolute;
275+
top: 0;
276+
left: calc(50% - 0.4em);
277+
border-left: 0.5em solid transparent;
278+
border-right: 0.5em solid transparent;
279+
border-top: 0.5em solid #ddd;
280+
transition: border 0.25s ease-out;
281+
}
282+
.datetime-range.time .timer .timer-hours .arrow.arrow-down:hover::before,
283+
.datetime-range.time .timer .timer-minutes .arrow.arrow-down:hover::before,
284+
.datetime-range.time .timer .timer-seconds .arrow.arrow-down:hover::before {
285+
border-top-color: #999;
286+
}
287+
.datetime-range.time .timer .timer-divider {
288+
font-size: 3em;
289+
line-height: 3em;
290+
-webkit-animation-name: blinker;
291+
-webkit-animation-duration: 5s;
292+
-webkit-animation-timing-function: linear;
293+
-webkit-animation-iteration-count: infinite;
294+
-moz-animation-name: blinker;
295+
-moz-animation-duration: 5s;
296+
-moz-animation-timing-function: linear;
297+
-moz-animation-iteration-count: infinite;
298+
animation-name: blinker;
299+
animation-duration: 5s;
300+
animation-timing-function: linear;
301+
animation-iteration-count: infinite;
302+
}
303+
@-moz-keyframes blinker {
304+
0% { opacity: 0.0; }
305+
5% { opacity: 1.0; }
306+
95% { opacity: 1.0; }
307+
100% { opacity: 0.0; }
308+
}
309+
@-webkit-keyframes blinker {
310+
0% { opacity: 0.0; }
311+
5% { opacity: 1.0; }
312+
95% { opacity: 1.0; }
313+
100% { opacity: 0.0; }
314+
}
315+
@keyframes blinker {
316+
0% { opacity: 0.0; }
317+
5% { opacity: 1.0; }
318+
95% { opacity: 1.0; }
319+
100% { opacity: 0.0; }
320+
}
321+
322+
323+
/**
324+
* Close button
325+
*/
326+
.datetime-range.time .close-button {
327+
position: absolute;
328+
z-index: 5;
329+
left: -1px;
330+
cursor: pointer;
331+
outline: none;
332+
border-top: 1px solid #aaa;
333+
border-left: 1px solid #aaa;
334+
border-bottom: 1px solid #aaa;
335+
color: #777;
336+
width: 25%;
337+
height: auto;
338+
margin-top: 10px;
339+
font-size: 1.5em;
340+
line-height: 2em;
341+
box-sizing: border-box;
342+
background-color: #efefef;
343+
transition: background-color 0.25s ease-out;
344+
}
345+
.datetime-range.time .close-button::before {
346+
content: "";
347+
position: absolute;
348+
right: -0.5em;
349+
top: -1px;
350+
width: 1em;
351+
height: 2em;
352+
background: #efefef;
353+
border-top: 1px solid #aaa;
354+
border-right: 1px solid #aaa;
355+
transition: background 0.25s ease-out;
356+
transform: skewX(-26deg);
357+
}
358+
.datetime-range.time .close-button:hover,
359+
.datetime-range.time .close-button:hover::before {
360+
background: #ddd;
361+
}

0 commit comments

Comments
 (0)