materialize-sass 0.95.3 → 0.95.3.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,168 +1,168 @@
1
-
2
- /*!
3
- * Waves v0.6.0
4
- * http://fian.my.id/Waves
5
- *
6
- * Copyright 2014 Alfiana E. Sibuea and other contributors
7
- * Released under the MIT license
8
- * https://github.com/fians/Waves/blob/master/LICENSE
9
- */
10
-
11
-
12
- .waves-effect {
13
- position: relative;
14
- cursor: pointer;
15
- display: inline-block;
16
- overflow: hidden;
17
- -webkit-user-select: none;
18
- -moz-user-select: none;
19
- -ms-user-select: none;
20
- user-select: none;
21
- -webkit-tap-highlight-color: transparent;
22
- // white-space: nowrap;
23
- // outline: 0;
24
-
25
- // vertical-align: middle;
26
- // cursor: pointer;
27
- // border: none;
28
- // outline: none;
29
- // color: inherit;
30
- // background-color: rgba(0, 0, 0, 0);
31
- // font-size: 1em;
32
- // line-height:1em;
33
- // text-align: center;
34
- // text-decoration: none;
35
- vertical-align: middle;
36
- z-index: 1;
37
- will-change: opacity, transform;
38
- @include transition(all .3s ease-out);
39
-
40
- .waves-ripple {
41
- position: absolute;
42
- border-radius: 50%;
43
- width: 20px;
44
- height: 20px;
45
- margin-top:-10px;
46
- margin-left:-10px;
47
- opacity: 0;
48
-
49
- background: rgba(0,0,0,0.2);
50
- // $gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%;
51
- // background: -webkit-radial-gradient($gradient);
52
- // background: -o-radial-gradient($gradient);
53
- // background: -moz-radial-gradient($gradient);
54
- // background: radial-gradient($gradient);
55
- @include transition(all 0.7s ease-out);
56
- -webkit-transition-property: -webkit-transform, opacity;
57
- -moz-transition-property: -moz-transform, opacity;
58
- -o-transition-property: -o-transform, opacity;
59
- transition-property: transform, opacity;
60
- @include transform(scale(0));
61
- pointer-events: none;
62
- }
63
-
64
- // Waves Colors
65
- &.waves-light .waves-ripple {
66
- background-color: rgba(255, 255, 255, 0.45);
67
- }
68
-
69
- &.waves-red .waves-ripple {
70
- background-color: rgba(244, 67, 54, .70);
71
- }
72
- &.waves-yellow .waves-ripple {
73
- background-color: rgba(255, 235, 59, .70);
74
- }
75
- &.waves-orange .waves-ripple {
76
- background-color: rgba(255, 152, 0, .70);
77
- }
78
- &.waves-purple .waves-ripple {
79
- background-color: rgba(156, 39, 176, 0.70);
80
- }
81
- &.waves-green .waves-ripple {
82
- background-color: rgba(76, 175, 80, 0.70);
83
- }
84
- &.waves-teal .waves-ripple {
85
- background-color: rgba(0, 150, 136, 0.70);
86
- }
87
-
88
- }
89
-
90
- .waves-notransition {
91
- @include transition(none #{"!important"});
92
- }
93
-
94
- .waves-circle {
95
- @include transform(translateZ(0));
96
- -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
97
- }
98
-
99
- // .waves-button,
100
- // .waves-button:hover,
101
- // .waves-button:visited,
102
- // .waves-button-input {
103
- // white-space: nowrap;
104
- // vertical-align: middle;
105
- // cursor: pointer;
106
- // border: none;
107
- // outline: none;
108
- // color: inherit;
109
- // background-color: rgba(0, 0, 0, 0);
110
- // font-size: 1em;
111
- // line-height:1em;
112
- // text-align: center;
113
- // text-decoration: none;
114
- // z-index: 1;
115
- // }
116
-
117
- // .waves-button {
118
- // padding: 0.85em 1.1em;
119
- // border-radius: 0.2em;
120
- // }
121
-
122
- // .waves-button-input {
123
- // margin: 0;
124
- // padding: 0.85em 1.1em;
125
- // }
126
-
127
- .waves-input-wrapper {
128
- border-radius: 0.2em;
129
- vertical-align: bottom;
130
-
131
- // &.waves-button {
132
- // padding: 0;
133
- // }
134
-
135
- .waves-button-input {
136
- position: relative;
137
- top: 0;
138
- left: 0;
139
- z-index: 1;
140
- }
141
- }
142
-
143
- .waves-circle {
144
- text-align: center;
145
- width: 2.5em;
146
- height: 2.5em;
147
- line-height: 2.5em;
148
- border-radius: 50%;
149
- -webkit-mask-image: none;
150
- }
151
-
152
- // .waves-float {
153
- // -webkit-mask-image: none;
154
- // @include box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12));
155
-
156
- // &:active {
157
- // @include box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30));
158
- // }
159
- // }
160
-
161
- .waves-block {
162
- display: block;
163
- }
164
-
165
- /* Firefox Bug: link not triggered */
166
- a.waves-effect .waves-ripple {
167
- z-index: -1;
168
- }
1
+
2
+ /*!
3
+ * Waves v0.6.0
4
+ * http://fian.my.id/Waves
5
+ *
6
+ * Copyright 2014 Alfiana E. Sibuea and other contributors
7
+ * Released under the MIT license
8
+ * https://github.com/fians/Waves/blob/master/LICENSE
9
+ */
10
+
11
+
12
+ .waves-effect {
13
+ position: relative;
14
+ cursor: pointer;
15
+ display: inline-block;
16
+ overflow: hidden;
17
+ -webkit-user-select: none;
18
+ -moz-user-select: none;
19
+ -ms-user-select: none;
20
+ user-select: none;
21
+ -webkit-tap-highlight-color: transparent;
22
+ // white-space: nowrap;
23
+ // outline: 0;
24
+
25
+ // vertical-align: middle;
26
+ // cursor: pointer;
27
+ // border: none;
28
+ // outline: none;
29
+ // color: inherit;
30
+ // background-color: rgba(0, 0, 0, 0);
31
+ // font-size: 1em;
32
+ // line-height:1em;
33
+ // text-align: center;
34
+ // text-decoration: none;
35
+ vertical-align: middle;
36
+ z-index: 1;
37
+ will-change: opacity, transform;
38
+ @include transition(all .3s ease-out);
39
+
40
+ .waves-ripple {
41
+ position: absolute;
42
+ border-radius: 50%;
43
+ width: 20px;
44
+ height: 20px;
45
+ margin-top:-10px;
46
+ margin-left:-10px;
47
+ opacity: 0;
48
+
49
+ background: rgba(0,0,0,0.2);
50
+ // $gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%;
51
+ // background: -webkit-radial-gradient($gradient);
52
+ // background: -o-radial-gradient($gradient);
53
+ // background: -moz-radial-gradient($gradient);
54
+ // background: radial-gradient($gradient);
55
+ @include transition(all 0.7s ease-out);
56
+ -webkit-transition-property: -webkit-transform, opacity;
57
+ -moz-transition-property: -moz-transform, opacity;
58
+ -o-transition-property: -o-transform, opacity;
59
+ transition-property: transform, opacity;
60
+ @include transform(scale(0));
61
+ pointer-events: none;
62
+ }
63
+
64
+ // Waves Colors
65
+ &.waves-light .waves-ripple {
66
+ background-color: rgba(255, 255, 255, 0.45);
67
+ }
68
+
69
+ &.waves-red .waves-ripple {
70
+ background-color: rgba(244, 67, 54, .70);
71
+ }
72
+ &.waves-yellow .waves-ripple {
73
+ background-color: rgba(255, 235, 59, .70);
74
+ }
75
+ &.waves-orange .waves-ripple {
76
+ background-color: rgba(255, 152, 0, .70);
77
+ }
78
+ &.waves-purple .waves-ripple {
79
+ background-color: rgba(156, 39, 176, 0.70);
80
+ }
81
+ &.waves-green .waves-ripple {
82
+ background-color: rgba(76, 175, 80, 0.70);
83
+ }
84
+ &.waves-teal .waves-ripple {
85
+ background-color: rgba(0, 150, 136, 0.70);
86
+ }
87
+
88
+ }
89
+
90
+ .waves-notransition {
91
+ @include transition(none #{"!important"});
92
+ }
93
+
94
+ .waves-circle {
95
+ @include transform(translateZ(0));
96
+ -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
97
+ }
98
+
99
+ // .waves-button,
100
+ // .waves-button:hover,
101
+ // .waves-button:visited,
102
+ // .waves-button-input {
103
+ // white-space: nowrap;
104
+ // vertical-align: middle;
105
+ // cursor: pointer;
106
+ // border: none;
107
+ // outline: none;
108
+ // color: inherit;
109
+ // background-color: rgba(0, 0, 0, 0);
110
+ // font-size: 1em;
111
+ // line-height:1em;
112
+ // text-align: center;
113
+ // text-decoration: none;
114
+ // z-index: 1;
115
+ // }
116
+
117
+ // .waves-button {
118
+ // padding: 0.85em 1.1em;
119
+ // border-radius: 0.2em;
120
+ // }
121
+
122
+ // .waves-button-input {
123
+ // margin: 0;
124
+ // padding: 0.85em 1.1em;
125
+ // }
126
+
127
+ .waves-input-wrapper {
128
+ border-radius: 0.2em;
129
+ vertical-align: bottom;
130
+
131
+ // &.waves-button {
132
+ // padding: 0;
133
+ // }
134
+
135
+ .waves-button-input {
136
+ position: relative;
137
+ top: 0;
138
+ left: 0;
139
+ z-index: 1;
140
+ }
141
+ }
142
+
143
+ .waves-circle {
144
+ text-align: center;
145
+ width: 2.5em;
146
+ height: 2.5em;
147
+ line-height: 2.5em;
148
+ border-radius: 50%;
149
+ -webkit-mask-image: none;
150
+ }
151
+
152
+ // .waves-float {
153
+ // -webkit-mask-image: none;
154
+ // @include box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12));
155
+
156
+ // &:active {
157
+ // @include box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30));
158
+ // }
159
+ // }
160
+
161
+ .waves-block {
162
+ display: block;
163
+ }
164
+
165
+ /* Firefox Bug: link not triggered */
166
+ a.waves-effect .waves-ripple {
167
+ z-index: -1;
168
+ }
@@ -1,462 +1,462 @@
1
- /* ==========================================================================
2
- $BASE-DATE-PICKER
3
- ========================================================================== */
4
- /**
5
- * The picker box.
6
- */
7
- .picker__box {
8
- padding: 0 1em;
9
- }
10
- /**
11
- * The header containing the month and year stuff.
12
- */
13
- .picker__header {
14
- text-align: center;
15
- position: relative;
16
- margin-top: .75em;
17
- }
18
- /**
19
- * The month and year labels.
20
- */
21
- .picker__month,
22
- .picker__year {
23
- // font-weight: 500;
24
- display: inline-block;
25
- margin-left: .25em;
26
- margin-right: .25em;
27
- }
28
- /**
29
- * The month and year selectors.
30
- */
31
- .picker__select--month,
32
- .picker__select--year {
33
-
34
-
35
- // border: 1px solid #b7b7b7;
36
-
37
- height: 2em;
38
- padding: .5em;
39
- margin-left: .25em;
40
- margin-right: .25em;
41
- }
42
- @media (min-width: 24.5em) {
43
- .picker__select--month,
44
- .picker__select--year {
45
- margin-top: -0.5em;
46
- }
47
- }
48
-
49
- .picker__select--month.browser-default {
50
- display: inline;
51
- background-color: #FFFFFF;
52
- width: 40%;
53
- }
54
-
55
- .picker__select--year.browser-default {
56
- display: inline;
57
- background-color: #FFFFFF;
58
- width: 25%;
59
- }
60
-
61
- .picker__select--month:focus,
62
- .picker__select--year:focus {
63
- // border-color: #0089ec;
64
- border-color: rgba(0, 0, 0, 0.05);
65
- }
66
- /**
67
- * The month navigation buttons.
68
- */
69
- .picker__nav--prev,
70
- .picker__nav--next {
71
- position: absolute;
72
- padding: .5em 1.25em;
73
- width: 1em;
74
- height: 1em;
75
- box-sizing: content-box;
76
- top: -0.25em;
77
- }
78
- //@media (min-width: 24.5em) {
79
- // .picker__nav--prev,
80
- // .picker__nav--next {
81
- // top: -0.33em;
82
- // }
83
- //}
84
- .picker__nav--prev {
85
- left: -1em;
86
- padding-right: 1.25em;
87
- }
88
- //@media (min-width: 24.5em) {
89
- // .picker__nav--prev {
90
- // padding-right: 1.5em;
91
- // }
92
- //}
93
- .picker__nav--next {
94
- right: -1em;
95
- padding-left: 1.25em;
96
- }
97
- //@media (min-width: 24.5em) {
98
- // .picker__nav--next {
99
- // padding-left: 1.5em;
100
- // }
101
- //}
102
-
103
- // .picker__nav--prev:hover,
104
- // .picker__nav--next:hover {
105
- // cursor: pointer;
106
- // color: #000000;
107
- // background: #b1dcfb;
108
- // }
109
-
110
- .picker__nav--disabled,
111
- .picker__nav--disabled:hover,
112
- .picker__nav--disabled:before,
113
- .picker__nav--disabled:before:hover {
114
- cursor: default;
115
- background: none;
116
- border-right-color: #f5f5f5;
117
- border-left-color: #f5f5f5;
118
- }
119
- /**
120
- * The calendar table of dates
121
- */
122
- .picker__table {
123
- text-align: center;
124
- border-collapse: collapse;
125
- border-spacing: 0;
126
- table-layout: fixed;
127
- font-size: 1rem;
128
- width: 100%;
129
- margin-top: .75em;
130
- margin-bottom: .5em;
131
- }
132
-
133
-
134
-
135
- .picker__table th, .picker__table td {
136
- text-align: center;
137
- }
138
-
139
-
140
-
141
-
142
-
143
-
144
- .picker__table td {
145
- margin: 0;
146
- padding: 0;
147
- }
148
- /**
149
- * The weekday labels
150
- */
151
- .picker__weekday {
152
- width: 14.285714286%;
153
- font-size: .75em;
154
- padding-bottom: .25em;
155
- color: #999999;
156
- font-weight: 500;
157
- /* Increase the spacing a tad */
158
- }
159
- @media (min-height: 33.875em) {
160
- .picker__weekday {
161
- padding-bottom: .5em;
162
- }
163
- }
164
- /**
165
- * The days on the calendar
166
- */
167
-
168
- .picker__day--today {
169
- position: relative;
170
- color: #595959;
171
- letter-spacing: -.3;
172
- padding: .75rem 0;
173
- font-weight: 400;
174
- border: 1px solid transparent;
175
-
176
- }
177
-
178
- //.picker__day--today:before {
179
- // content: " ";
180
- // position: absolute;
181
- // top: 2px;
182
- // right: 2px;
183
- // width: 0;
184
- // height: 0;
185
- // border-top: 0.5em solid #0059bc;
186
- // border-left: .5em solid transparent;
187
- //}
188
- .picker__day--disabled:before {
189
- border-top-color: #aaaaaa;
190
- }
191
-
192
-
193
-
194
- .picker__day--infocus:hover{
195
- cursor: pointer;
196
- color: #000;
197
- font-weight: 500;
198
- }
199
-
200
- .picker__day--outfocus {
201
-
202
- padding: .75rem 0;
203
- color: #fff;
204
-
205
- }
206
- .picker__day--outfocus:hover {
207
- cursor: pointer;
208
- color: #dddddd;
209
- // background: #b1dcfb;
210
- font-weight: 500;
211
- }
212
-
213
-
214
- .picker__day--highlighted {
215
- // border-color: #0089ec;
216
- }
217
- .picker__day--highlighted:hover,
218
- .picker--focused .picker__day--highlighted {
219
- cursor: pointer;
220
- // color: #000000;
221
- // background: #b1dcfb;
222
- // font-weight: 500;
223
- }
224
- .picker__day--selected,
225
- .picker__day--selected:hover,
226
- .picker--focused .picker__day--selected {
227
-
228
-
229
- // Circle background
230
- border-radius: 50%;
231
- @include transform(scale(.75));
232
-
233
-
234
- background: #0089ec;
235
- color: #ffffff;
236
- }
237
- .picker__day--disabled,
238
- .picker__day--disabled:hover,
239
- .picker--focused .picker__day--disabled {
240
- background: #f5f5f5;
241
- border-color: #f5f5f5;
242
- color: #dddddd;
243
- cursor: default;
244
- }
245
- .picker__day--highlighted.picker__day--disabled,
246
- .picker__day--highlighted.picker__day--disabled:hover {
247
- background: #bbbbbb;
248
- }
249
- /**
250
- * The footer containing the "today", "clear", and "close" buttons.
251
- */
252
- .picker__footer {
253
- text-align: center;
254
- display: flex;
255
- align-items: center;
256
- justify-content: space-between;
257
- }
258
- .picker__button--today,
259
- .picker__button--clear,
260
- .picker__button--close {
261
- border: 1px solid #ffffff;
262
- background: #ffffff;
263
- font-size: .8em;
264
- padding: .66em 0;
265
- font-weight: bold;
266
- width: 33%;
267
- display: inline-block;
268
- vertical-align: bottom;
269
- }
270
- .picker__button--today:hover,
271
- .picker__button--clear:hover,
272
- .picker__button--close:hover {
273
- cursor: pointer;
274
- color: #000000;
275
- background: #b1dcfb;
276
- border-bottom-color: #b1dcfb;
277
- }
278
- .picker__button--today:focus,
279
- .picker__button--clear:focus,
280
- .picker__button--close:focus {
281
- background: #b1dcfb;
282
- border-color: rgba(0, 0, 0, 0.05);
283
- outline: none;
284
- }
285
- .picker__button--today:before,
286
- .picker__button--clear:before,
287
- .picker__button--close:before {
288
- position: relative;
289
- display: inline-block;
290
- height: 0;
291
- }
292
- .picker__button--today:before,
293
- .picker__button--clear:before {
294
- content: " ";
295
- margin-right: .45em;
296
- }
297
- .picker__button--today:before {
298
- top: -0.05em;
299
- width: 0;
300
- border-top: 0.66em solid #0059bc;
301
- border-left: .66em solid transparent;
302
- }
303
- .picker__button--clear:before {
304
- top: -0.25em;
305
- width: .66em;
306
- border-top: 3px solid #ee2200;
307
- }
308
- .picker__button--close:before {
309
- content: "\D7";
310
- top: -0.1em;
311
- vertical-align: top;
312
- font-size: 1.1em;
313
- margin-right: .35em;
314
- color: #777777;
315
- }
316
- .picker__button--today[disabled],
317
- .picker__button--today[disabled]:hover {
318
- background: #f5f5f5;
319
- border-color: #f5f5f5;
320
- color: #dddddd;
321
- cursor: default;
322
- }
323
- .picker__button--today[disabled]:before {
324
- border-top-color: #aaaaaa;
325
- }
326
-
327
- /* ==========================================================================
328
- CUSTOM MATERIALIZE STYLES
329
- ========================================================================== */
330
- .picker__box {
331
- border-radius: 2px;
332
- overflow: hidden;
333
- }
334
-
335
- .picker__date-display {
336
- text-align: center;
337
- background-color: color("teal", "lighten-1");
338
- color: #fff;
339
- padding-bottom: 15px;
340
- font-weight: 300;
341
- }
342
-
343
- .picker__nav--prev:hover, .picker__nav--next:hover {
344
- cursor: pointer;
345
- color: #000000;
346
- background: #a1ded8;
347
- }
348
-
349
- .picker__weekday-display {
350
- // background-color: color("teal", "darken-1");
351
- background-color: #1f897f;
352
- padding: 10px;
353
- font-weight: 200;
354
- letter-spacing: .5;
355
- font-size: 1rem;
356
- margin-bottom: 15px;
357
- }
358
-
359
- .picker__month-display {
360
- text-transform: uppercase;
361
- font-size: 2rem;
362
- }
363
- .picker__day-display {
364
-
365
- font-size: 4.5rem;
366
- font-weight: 400;
367
- }
368
- .picker__year-display {
369
- font-size: 1.8rem;
370
- // color: color("teal", "lighten-3");
371
- color: rgba(255, 255, 255, 0.4);
372
- }
373
-
374
- .picker__box {
375
- padding: 0;
376
- }
377
- .picker__calendar-container {
378
- padding: 0 1rem;
379
-
380
- thead {
381
- border: none;
382
- }
383
- }
384
-
385
- // Calendar
386
- .picker__table {
387
- margin-top: 0;
388
- margin-bottom: .5em;
389
- }
390
-
391
- .picker__day--infocus {
392
- color: #595959;
393
- letter-spacing: -.3;
394
- padding: .75rem 0;
395
- font-weight: 400;
396
- border: 1px solid transparent;
397
- }
398
-
399
- //Today style
400
- .picker__day.picker__day--today {
401
- color: color("teal", "lighten-1");
402
- }
403
-
404
- .picker__day.picker__day--today.picker__day--selected {
405
- color: #fff;
406
- }
407
-
408
- // Table Header
409
- .picker__weekday {
410
- font-size: .9rem;
411
- }
412
-
413
-
414
- .picker__day--selected, .picker__day--selected:hover,
415
- .picker--focused .picker__day--selected {
416
- // Circle background
417
- border-radius: 50%;
418
- @include transform(scale(.9));
419
- // background-color: color("teal", "base");
420
- background-color: #26a69a;
421
- &.picker__day--outfocus,
422
- &:hover.picker__day--outfocus,
423
- &.picker__day--outfocus {
424
- background-color: #a1ded8;
425
- }
426
- color: #ffffff;
427
- }
428
-
429
- .picker__footer {
430
- text-align: right;
431
- padding: 5px 10px;
432
- }
433
-
434
- // Materialize modified
435
- .picker__close, .picker__today {
436
- font-size: 1.1rem;
437
- padding: 0 1rem;
438
- color: color("teal", "lighten-1");
439
- }
440
-
441
- //month nav buttons
442
- .picker__nav--prev:before,
443
- .picker__nav--next:before {
444
- content: " ";
445
- border-top: .5em solid transparent;
446
- border-bottom: .5em solid transparent;
447
- border-right: 0.75em solid #676767;
448
- width: 0;
449
- height: 0;
450
- display: block;
451
- margin: 0 auto;
452
- }
453
- .picker__nav--next:before {
454
- border-right: 0;
455
- border-left: 0.75em solid #676767;
456
- }
457
-
458
- button.picker__today:focus,
459
- button.picker__clear:focus,
460
- button.picker__close:focus {
461
- background-color: #a1ded8;
462
- }
1
+ /* ==========================================================================
2
+ $BASE-DATE-PICKER
3
+ ========================================================================== */
4
+ /**
5
+ * The picker box.
6
+ */
7
+ .picker__box {
8
+ padding: 0 1em;
9
+ }
10
+ /**
11
+ * The header containing the month and year stuff.
12
+ */
13
+ .picker__header {
14
+ text-align: center;
15
+ position: relative;
16
+ margin-top: .75em;
17
+ }
18
+ /**
19
+ * The month and year labels.
20
+ */
21
+ .picker__month,
22
+ .picker__year {
23
+ // font-weight: 500;
24
+ display: inline-block;
25
+ margin-left: .25em;
26
+ margin-right: .25em;
27
+ }
28
+ /**
29
+ * The month and year selectors.
30
+ */
31
+ .picker__select--month,
32
+ .picker__select--year {
33
+
34
+
35
+ // border: 1px solid #b7b7b7;
36
+
37
+ height: 2em;
38
+ padding: .5em;
39
+ margin-left: .25em;
40
+ margin-right: .25em;
41
+ }
42
+ @media (min-width: 24.5em) {
43
+ .picker__select--month,
44
+ .picker__select--year {
45
+ margin-top: -0.5em;
46
+ }
47
+ }
48
+
49
+ .picker__select--month.browser-default {
50
+ display: inline;
51
+ background-color: #FFFFFF;
52
+ width: 40%;
53
+ }
54
+
55
+ .picker__select--year.browser-default {
56
+ display: inline;
57
+ background-color: #FFFFFF;
58
+ width: 25%;
59
+ }
60
+
61
+ .picker__select--month:focus,
62
+ .picker__select--year:focus {
63
+ // border-color: #0089ec;
64
+ border-color: rgba(0, 0, 0, 0.05);
65
+ }
66
+ /**
67
+ * The month navigation buttons.
68
+ */
69
+ .picker__nav--prev,
70
+ .picker__nav--next {
71
+ position: absolute;
72
+ padding: .5em 1.25em;
73
+ width: 1em;
74
+ height: 1em;
75
+ box-sizing: content-box;
76
+ top: -0.25em;
77
+ }
78
+ //@media (min-width: 24.5em) {
79
+ // .picker__nav--prev,
80
+ // .picker__nav--next {
81
+ // top: -0.33em;
82
+ // }
83
+ //}
84
+ .picker__nav--prev {
85
+ left: -1em;
86
+ padding-right: 1.25em;
87
+ }
88
+ //@media (min-width: 24.5em) {
89
+ // .picker__nav--prev {
90
+ // padding-right: 1.5em;
91
+ // }
92
+ //}
93
+ .picker__nav--next {
94
+ right: -1em;
95
+ padding-left: 1.25em;
96
+ }
97
+ //@media (min-width: 24.5em) {
98
+ // .picker__nav--next {
99
+ // padding-left: 1.5em;
100
+ // }
101
+ //}
102
+
103
+ // .picker__nav--prev:hover,
104
+ // .picker__nav--next:hover {
105
+ // cursor: pointer;
106
+ // color: #000000;
107
+ // background: #b1dcfb;
108
+ // }
109
+
110
+ .picker__nav--disabled,
111
+ .picker__nav--disabled:hover,
112
+ .picker__nav--disabled:before,
113
+ .picker__nav--disabled:before:hover {
114
+ cursor: default;
115
+ background: none;
116
+ border-right-color: #f5f5f5;
117
+ border-left-color: #f5f5f5;
118
+ }
119
+ /**
120
+ * The calendar table of dates
121
+ */
122
+ .picker__table {
123
+ text-align: center;
124
+ border-collapse: collapse;
125
+ border-spacing: 0;
126
+ table-layout: fixed;
127
+ font-size: 1rem;
128
+ width: 100%;
129
+ margin-top: .75em;
130
+ margin-bottom: .5em;
131
+ }
132
+
133
+
134
+
135
+ .picker__table th, .picker__table td {
136
+ text-align: center;
137
+ }
138
+
139
+
140
+
141
+
142
+
143
+
144
+ .picker__table td {
145
+ margin: 0;
146
+ padding: 0;
147
+ }
148
+ /**
149
+ * The weekday labels
150
+ */
151
+ .picker__weekday {
152
+ width: 14.285714286%;
153
+ font-size: .75em;
154
+ padding-bottom: .25em;
155
+ color: #999999;
156
+ font-weight: 500;
157
+ /* Increase the spacing a tad */
158
+ }
159
+ @media (min-height: 33.875em) {
160
+ .picker__weekday {
161
+ padding-bottom: .5em;
162
+ }
163
+ }
164
+ /**
165
+ * The days on the calendar
166
+ */
167
+
168
+ .picker__day--today {
169
+ position: relative;
170
+ color: #595959;
171
+ letter-spacing: -.3;
172
+ padding: .75rem 0;
173
+ font-weight: 400;
174
+ border: 1px solid transparent;
175
+
176
+ }
177
+
178
+ //.picker__day--today:before {
179
+ // content: " ";
180
+ // position: absolute;
181
+ // top: 2px;
182
+ // right: 2px;
183
+ // width: 0;
184
+ // height: 0;
185
+ // border-top: 0.5em solid #0059bc;
186
+ // border-left: .5em solid transparent;
187
+ //}
188
+ .picker__day--disabled:before {
189
+ border-top-color: #aaaaaa;
190
+ }
191
+
192
+
193
+
194
+ .picker__day--infocus:hover{
195
+ cursor: pointer;
196
+ color: #000;
197
+ font-weight: 500;
198
+ }
199
+
200
+ .picker__day--outfocus {
201
+
202
+ padding: .75rem 0;
203
+ color: #fff;
204
+
205
+ }
206
+ .picker__day--outfocus:hover {
207
+ cursor: pointer;
208
+ color: #dddddd;
209
+ // background: #b1dcfb;
210
+ font-weight: 500;
211
+ }
212
+
213
+
214
+ .picker__day--highlighted {
215
+ // border-color: #0089ec;
216
+ }
217
+ .picker__day--highlighted:hover,
218
+ .picker--focused .picker__day--highlighted {
219
+ cursor: pointer;
220
+ // color: #000000;
221
+ // background: #b1dcfb;
222
+ // font-weight: 500;
223
+ }
224
+ .picker__day--selected,
225
+ .picker__day--selected:hover,
226
+ .picker--focused .picker__day--selected {
227
+
228
+
229
+ // Circle background
230
+ border-radius: 50%;
231
+ @include transform(scale(.75));
232
+
233
+
234
+ background: #0089ec;
235
+ color: #ffffff;
236
+ }
237
+ .picker__day--disabled,
238
+ .picker__day--disabled:hover,
239
+ .picker--focused .picker__day--disabled {
240
+ background: #f5f5f5;
241
+ border-color: #f5f5f5;
242
+ color: #dddddd;
243
+ cursor: default;
244
+ }
245
+ .picker__day--highlighted.picker__day--disabled,
246
+ .picker__day--highlighted.picker__day--disabled:hover {
247
+ background: #bbbbbb;
248
+ }
249
+ /**
250
+ * The footer containing the "today", "clear", and "close" buttons.
251
+ */
252
+ .picker__footer {
253
+ text-align: center;
254
+ display: flex;
255
+ align-items: center;
256
+ justify-content: space-between;
257
+ }
258
+ .picker__button--today,
259
+ .picker__button--clear,
260
+ .picker__button--close {
261
+ border: 1px solid #ffffff;
262
+ background: #ffffff;
263
+ font-size: .8em;
264
+ padding: .66em 0;
265
+ font-weight: bold;
266
+ width: 33%;
267
+ display: inline-block;
268
+ vertical-align: bottom;
269
+ }
270
+ .picker__button--today:hover,
271
+ .picker__button--clear:hover,
272
+ .picker__button--close:hover {
273
+ cursor: pointer;
274
+ color: #000000;
275
+ background: #b1dcfb;
276
+ border-bottom-color: #b1dcfb;
277
+ }
278
+ .picker__button--today:focus,
279
+ .picker__button--clear:focus,
280
+ .picker__button--close:focus {
281
+ background: #b1dcfb;
282
+ border-color: rgba(0, 0, 0, 0.05);
283
+ outline: none;
284
+ }
285
+ .picker__button--today:before,
286
+ .picker__button--clear:before,
287
+ .picker__button--close:before {
288
+ position: relative;
289
+ display: inline-block;
290
+ height: 0;
291
+ }
292
+ .picker__button--today:before,
293
+ .picker__button--clear:before {
294
+ content: " ";
295
+ margin-right: .45em;
296
+ }
297
+ .picker__button--today:before {
298
+ top: -0.05em;
299
+ width: 0;
300
+ border-top: 0.66em solid #0059bc;
301
+ border-left: .66em solid transparent;
302
+ }
303
+ .picker__button--clear:before {
304
+ top: -0.25em;
305
+ width: .66em;
306
+ border-top: 3px solid #ee2200;
307
+ }
308
+ .picker__button--close:before {
309
+ content: "\D7";
310
+ top: -0.1em;
311
+ vertical-align: top;
312
+ font-size: 1.1em;
313
+ margin-right: .35em;
314
+ color: #777777;
315
+ }
316
+ .picker__button--today[disabled],
317
+ .picker__button--today[disabled]:hover {
318
+ background: #f5f5f5;
319
+ border-color: #f5f5f5;
320
+ color: #dddddd;
321
+ cursor: default;
322
+ }
323
+ .picker__button--today[disabled]:before {
324
+ border-top-color: #aaaaaa;
325
+ }
326
+
327
+ /* ==========================================================================
328
+ CUSTOM MATERIALIZE STYLES
329
+ ========================================================================== */
330
+ .picker__box {
331
+ border-radius: 2px;
332
+ overflow: hidden;
333
+ }
334
+
335
+ .picker__date-display {
336
+ text-align: center;
337
+ background-color: color("teal", "lighten-1");
338
+ color: #fff;
339
+ padding-bottom: 15px;
340
+ font-weight: 300;
341
+ }
342
+
343
+ .picker__nav--prev:hover, .picker__nav--next:hover {
344
+ cursor: pointer;
345
+ color: #000000;
346
+ background: #a1ded8;
347
+ }
348
+
349
+ .picker__weekday-display {
350
+ // background-color: color("teal", "darken-1");
351
+ background-color: #1f897f;
352
+ padding: 10px;
353
+ font-weight: 200;
354
+ letter-spacing: .5;
355
+ font-size: 1rem;
356
+ margin-bottom: 15px;
357
+ }
358
+
359
+ .picker__month-display {
360
+ text-transform: uppercase;
361
+ font-size: 2rem;
362
+ }
363
+ .picker__day-display {
364
+
365
+ font-size: 4.5rem;
366
+ font-weight: 400;
367
+ }
368
+ .picker__year-display {
369
+ font-size: 1.8rem;
370
+ // color: color("teal", "lighten-3");
371
+ color: rgba(255, 255, 255, 0.4);
372
+ }
373
+
374
+ .picker__box {
375
+ padding: 0;
376
+ }
377
+ .picker__calendar-container {
378
+ padding: 0 1rem;
379
+
380
+ thead {
381
+ border: none;
382
+ }
383
+ }
384
+
385
+ // Calendar
386
+ .picker__table {
387
+ margin-top: 0;
388
+ margin-bottom: .5em;
389
+ }
390
+
391
+ .picker__day--infocus {
392
+ color: #595959;
393
+ letter-spacing: -.3;
394
+ padding: .75rem 0;
395
+ font-weight: 400;
396
+ border: 1px solid transparent;
397
+ }
398
+
399
+ //Today style
400
+ .picker__day.picker__day--today {
401
+ color: color("teal", "lighten-1");
402
+ }
403
+
404
+ .picker__day.picker__day--today.picker__day--selected {
405
+ color: #fff;
406
+ }
407
+
408
+ // Table Header
409
+ .picker__weekday {
410
+ font-size: .9rem;
411
+ }
412
+
413
+
414
+ .picker__day--selected, .picker__day--selected:hover,
415
+ .picker--focused .picker__day--selected {
416
+ // Circle background
417
+ border-radius: 50%;
418
+ @include transform(scale(.9));
419
+ // background-color: color("teal", "base");
420
+ background-color: #26a69a;
421
+ &.picker__day--outfocus,
422
+ &:hover.picker__day--outfocus,
423
+ &.picker__day--outfocus {
424
+ background-color: #a1ded8;
425
+ }
426
+ color: #ffffff;
427
+ }
428
+
429
+ .picker__footer {
430
+ text-align: right;
431
+ padding: 5px 10px;
432
+ }
433
+
434
+ // Materialize modified
435
+ .picker__close, .picker__today {
436
+ font-size: 1.1rem;
437
+ padding: 0 1rem;
438
+ color: color("teal", "lighten-1");
439
+ }
440
+
441
+ //month nav buttons
442
+ .picker__nav--prev:before,
443
+ .picker__nav--next:before {
444
+ content: " ";
445
+ border-top: .5em solid transparent;
446
+ border-bottom: .5em solid transparent;
447
+ border-right: 0.75em solid #676767;
448
+ width: 0;
449
+ height: 0;
450
+ display: block;
451
+ margin: 0 auto;
452
+ }
453
+ .picker__nav--next:before {
454
+ border-right: 0;
455
+ border-left: 0.75em solid #676767;
456
+ }
457
+
458
+ button.picker__today:focus,
459
+ button.picker__clear:focus,
460
+ button.picker__close:focus {
461
+ background-color: #a1ded8;
462
+ }