Skip to content

Commit 51ec46c

Browse files
joewsjoews
committed
v2.0.1
1 parent 2f3ea7c commit 51ec46c

File tree

7 files changed

+149
-54
lines changed

7 files changed

+149
-54
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changelog
22

3+
## 2.0.1
4+
* Bugfix: fix active hour indicator - #107 by @CasperLaiTW
5+
* Bugfix: show the active time when the picker is opened - #107 by @CasperLaiTW
6+
37
## 2.0.0
48

59
* Breaking: Updated the build process to use rollup instead of browserify. Change the path to compiled files. - #99

‎dist/material-datetime-picker.css‎

Lines changed: 80 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -239,157 +239,157 @@
239239
list-style: none;
240240
/* [2] */
241241
font-size: 14px;
242-
line-height: 36px;
242+
line-height: 50px;
243243
padding: 160px 0 20px 0;
244-
margin: 0 auto;
245-
position: relative; }
244+
margin: 0 auto; }
246245
.c-datepicker__clock .c-datepicker__clock__num {
247246
display: block;
248247
position: absolute;
249248
top: 50%;
250249
left: 50%;
251-
width: 36px;
252-
height: 36px;
253-
margin: -18px; }
250+
width: 50px;
251+
height: 50px;
252+
margin: -25px;
253+
z-index: 98; }
254254
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(1) {
255255
transform: rotate(0deg) translate(100px) rotate(-0deg); }
256-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(1).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands {
256+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(1).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
257257
transform: translate(-50%, -50%) rotate(270deg); }
258-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(1).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
258+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(1).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
259259
opacity: 1;
260-
background: rgba(0, 0, 0, 0.05); }
260+
background: #00bcd4; }
261261
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(1):hover ~ .c-datepicker__clock-hands {
262262
transform: translate(-50%, -50%) rotate(270deg); }
263263
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(1):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
264264
opacity: 1;
265265
background: #00bcd4; }
266266
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(2) {
267267
transform: rotate(30deg) translate(100px) rotate(-30deg); }
268-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(2).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands {
268+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(2).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
269269
transform: translate(-50%, -50%) rotate(300deg); }
270-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(2).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
270+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(2).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
271271
opacity: 1;
272-
background: rgba(0, 0, 0, 0.05); }
272+
background: #00bcd4; }
273273
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(2):hover ~ .c-datepicker__clock-hands {
274274
transform: translate(-50%, -50%) rotate(300deg); }
275275
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(2):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
276276
opacity: 1;
277277
background: #00bcd4; }
278278
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(3) {
279279
transform: rotate(60deg) translate(100px) rotate(-60deg); }
280-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(3).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands {
280+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(3).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
281281
transform: translate(-50%, -50%) rotate(330deg); }
282-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(3).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
282+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(3).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
283283
opacity: 1;
284-
background: rgba(0, 0, 0, 0.05); }
284+
background: #00bcd4; }
285285
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(3):hover ~ .c-datepicker__clock-hands {
286286
transform: translate(-50%, -50%) rotate(330deg); }
287287
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(3):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
288288
opacity: 1;
289289
background: #00bcd4; }
290290
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(4) {
291291
transform: rotate(90deg) translate(100px) rotate(-90deg); }
292-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(4).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands {
292+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(4).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
293293
transform: translate(-50%, -50%) rotate(360deg); }
294-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(4).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
294+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(4).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
295295
opacity: 1;
296-
background: rgba(0, 0, 0, 0.05); }
296+
background: #00bcd4; }
297297
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(4):hover ~ .c-datepicker__clock-hands {
298298
transform: translate(-50%, -50%) rotate(360deg); }
299299
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(4):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
300300
opacity: 1;
301301
background: #00bcd4; }
302302
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(5) {
303303
transform: rotate(120deg) translate(100px) rotate(-120deg); }
304-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(5).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands {
304+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(5).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
305305
transform: translate(-50%, -50%) rotate(390deg); }
306-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(5).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
306+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(5).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
307307
opacity: 1;
308-
background: rgba(0, 0, 0, 0.05); }
308+
background: #00bcd4; }
309309
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(5):hover ~ .c-datepicker__clock-hands {
310310
transform: translate(-50%, -50%) rotate(390deg); }
311311
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(5):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
312312
opacity: 1;
313313
background: #00bcd4; }
314314
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(6) {
315315
transform: rotate(150deg) translate(100px) rotate(-150deg); }
316-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(6).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands {
316+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(6).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
317317
transform: translate(-50%, -50%) rotate(420deg); }
318-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(6).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
318+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(6).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
319319
opacity: 1;
320-
background: rgba(0, 0, 0, 0.05); }
320+
background: #00bcd4; }
321321
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(6):hover ~ .c-datepicker__clock-hands {
322322
transform: translate(-50%, -50%) rotate(420deg); }
323323
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(6):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
324324
opacity: 1;
325325
background: #00bcd4; }
326326
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(7) {
327327
transform: rotate(180deg) translate(100px) rotate(-180deg); }
328-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(7).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands {
328+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(7).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
329329
transform: translate(-50%, -50%) rotate(450deg); }
330-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(7).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
330+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(7).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
331331
opacity: 1;
332-
background: rgba(0, 0, 0, 0.05); }
332+
background: #00bcd4; }
333333
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(7):hover ~ .c-datepicker__clock-hands {
334334
transform: translate(-50%, -50%) rotate(450deg); }
335335
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(7):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
336336
opacity: 1;
337337
background: #00bcd4; }
338338
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(8) {
339339
transform: rotate(210deg) translate(100px) rotate(-210deg); }
340-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(8).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands {
340+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(8).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
341341
transform: translate(-50%, -50%) rotate(480deg); }
342-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(8).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
342+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(8).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
343343
opacity: 1;
344-
background: rgba(0, 0, 0, 0.05); }
344+
background: #00bcd4; }
345345
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(8):hover ~ .c-datepicker__clock-hands {
346346
transform: translate(-50%, -50%) rotate(480deg); }
347347
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(8):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
348348
opacity: 1;
349349
background: #00bcd4; }
350350
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(9) {
351351
transform: rotate(240deg) translate(100px) rotate(-240deg); }
352-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(9).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands {
352+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(9).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
353353
transform: translate(-50%, -50%) rotate(510deg); }
354-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(9).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
354+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(9).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
355355
opacity: 1;
356-
background: rgba(0, 0, 0, 0.05); }
356+
background: #00bcd4; }
357357
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(9):hover ~ .c-datepicker__clock-hands {
358358
transform: translate(-50%, -50%) rotate(510deg); }
359359
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(9):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
360360
opacity: 1;
361361
background: #00bcd4; }
362362
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(10) {
363363
transform: rotate(270deg) translate(100px) rotate(-270deg); }
364-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(10).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands {
364+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(10).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
365365
transform: translate(-50%, -50%) rotate(540deg); }
366-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(10).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
366+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(10).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
367367
opacity: 1;
368-
background: rgba(0, 0, 0, 0.05); }
368+
background: #00bcd4; }
369369
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(10):hover ~ .c-datepicker__clock-hands {
370370
transform: translate(-50%, -50%) rotate(540deg); }
371371
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(10):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
372372
opacity: 1;
373373
background: #00bcd4; }
374374
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(11) {
375375
transform: rotate(300deg) translate(100px) rotate(-300deg); }
376-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(11).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands {
376+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(11).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
377377
transform: translate(-50%, -50%) rotate(570deg); }
378-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(11).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
378+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(11).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
379379
opacity: 1;
380-
background: rgba(0, 0, 0, 0.05); }
380+
background: #00bcd4; }
381381
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(11):hover ~ .c-datepicker__clock-hands {
382382
transform: translate(-50%, -50%) rotate(570deg); }
383383
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(11):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
384384
opacity: 1;
385385
background: #00bcd4; }
386386
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(12) {
387387
transform: rotate(330deg) translate(100px) rotate(-330deg); }
388-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(12).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands {
388+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(12).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
389389
transform: translate(-50%, -50%) rotate(600deg); }
390-
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(12).c-datepicker__clock__num--active ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
390+
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(12).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
391391
opacity: 1;
392-
background: rgba(0, 0, 0, 0.05); }
392+
background: #00bcd4; }
393393
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(12):hover ~ .c-datepicker__clock-hands {
394394
transform: translate(-50%, -50%) rotate(600deg); }
395395
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(12):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
@@ -426,11 +426,13 @@
426426
height: 35px;
427427
z-index: -1; }
428428

429-
.c-datepicker__day-body--active:before, .c-datepicker__clock__num--active:before {
430-
background: rgba(0, 0, 0, 0.05);
431-
width: 35px;
432-
height: 35px;
433-
z-index: -1; }
429+
.c-datepicker__day-body--active:not(.hide-hand), .c-datepicker__clock__num--active:not(.hide-hand) {
430+
color: white; }
431+
.c-datepicker__day-body--active:not(.hide-hand):before, .c-datepicker__clock__num--active:not(.hide-hand):before {
432+
background: #00bcd4;
433+
width: 35px;
434+
height: 35px;
435+
z-index: -1; }
434436

435437
.c-datepicker__clock-hands {
436438
position: absolute;
@@ -456,6 +458,37 @@
456458
transform: translateY(30px) scale(0.6);
457459
opacity: 0; }
458460

461+
.c-datepicker__clock__hours {
462+
height: 200px;
463+
margin: -69px 0 0 0;
464+
width: 200px; }
465+
466+
.c-datepicker__mask {
467+
width: 133px;
468+
height: 132px;
469+
position: absolute;
470+
top: 123px;
471+
left: 35px;
472+
z-index: 99; }
473+
.c-datepicker__mask:after {
474+
content: ' ';
475+
width: 164px;
476+
height: 71px;
477+
display: block;
478+
position: absolute;
479+
top: 33px;
480+
left: 0;
481+
margin-left: -16px; }
482+
.c-datepicker__mask:before {
483+
content: ' ';
484+
width: 75px;
485+
height: 158px;
486+
display: block;
487+
position: absolute;
488+
top: 6px;
489+
left: 29px;
490+
margin-top: -18px; }
491+
459492
.c-datepicker__clock--show-minutes .c-datepicker__clock__minutes {
460493
visibility: visible; }
461494

0 commit comments

Comments
 (0)