materialize-sass 0.95.2 → 0.95.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (16) hide show
  1. checksums.yaml +7 -0
  2. data/app/assets/javascripts/materialize.js +5692 -5641
  3. data/app/assets/stylesheets/materialize/components/_cards.scss +151 -150
  4. data/app/assets/stylesheets/materialize/components/_form.scss +700 -698
  5. data/app/assets/stylesheets/materialize/components/_global.scss +707 -632
  6. data/app/assets/stylesheets/materialize/components/_grid.scss +119 -119
  7. data/app/assets/stylesheets/materialize/components/_icons-material-design.scss +2247 -2247
  8. data/app/assets/stylesheets/materialize/components/_navbar.scss +154 -134
  9. data/app/assets/stylesheets/materialize/components/_preloader.scss +338 -320
  10. data/app/assets/stylesheets/materialize/components/_slider.scss +92 -91
  11. data/app/assets/stylesheets/materialize/components/_variables.scss +135 -132
  12. data/app/assets/stylesheets/materialize/components/_waves.scss +168 -167
  13. data/app/assets/stylesheets/materialize/components/date_picker/_default.date.scss +462 -431
  14. data/lib/materialize-sass/version.rb +6 -6
  15. data/materialize-sass.gemspec +27 -27
  16. metadata +9 -17
data/app/assets/stylesheets/materialize/components/_cards.scss CHANGED
@@ -1,150 +1,151 @@
1
-
2
-
3
- .card-panel {
4
- padding: $card-padding;
5
- margin: $element-top-margin 0 $element-bottom-margin 0;
6
- @include border-radius(2px);
7
- @extend .z-depth-1;
8
- background-color: $card-bg-color;
9
- }
10
-
11
- .card {
12
- position: relative;
13
- margin: $element-top-margin 0 $element-bottom-margin 0;
14
- background-color: $card-bg-color;
15
- @include box-sizing(border-box);
16
- @include border-radius(2px);
17
- @extend .z-depth-1;
18
-
19
-
20
- .card-title {
21
- color: #fff;
22
- font-size: 24px;
23
- font-weight: 300;
24
- &.activator {
25
- cursor: pointer;
26
- }
27
- }
28
-
29
- a {
30
- color: color("orange", "accent-2");
31
- margin-right: $card-padding;
32
- @include transition(color .3s ease);
33
- text-transform: uppercase;
34
-
35
- &:hover { color: lighten(color("orange", "accent-2"), 20%); }
36
- }
37
-
38
- // Card Sizes
39
- &.small, &.medium, &.large {
40
- position: relative;
41
-
42
- .card-image {
43
- overflow: hidden;
44
- }
45
- .card-content {
46
- overflow: hidden;
47
- }
48
- .card-action {
49
- position: absolute;
50
- bottom: 0;
51
- left: 0;
52
- right: 0;
53
- }
54
- }
55
-
56
- &.small {
57
- height: 300px;
58
-
59
- .card-image {
60
- height: 150px;
61
- }
62
- .card-content {
63
- height: 150px;
64
- }
65
-
66
- }
67
-
68
- &.medium {
69
- height: 400px;
70
-
71
- .card-image {
72
- height: 250px;
73
- }
74
- .card-content {
75
- height: 150px;
76
- }
77
- }
78
-
79
- &.large {
80
- height: 500px;
81
-
82
- .card-image {
83
- height: 330px;
84
- }
85
- .card-content {
86
- height: 170px;
87
- }
88
- }
89
-
90
-
91
- .card-image {
92
- position: relative;
93
-
94
- // Image background for content
95
- img {
96
- @include border-radius(2px 2px 0 0);
97
- position: relative;
98
- left: 0;
99
- right: 0;
100
- top: 0;
101
- bottom: 0;
102
- width: 100%;
103
- }
104
-
105
- .card-title {
106
- position: absolute;
107
- bottom: 0;
108
- left: 0;
109
- padding: $card-padding;
110
- }
111
-
112
- }
113
-
114
- .card-content {
115
- padding: $card-padding;
116
- @include border-radius(0 0 2px 2px);
117
- @include box-sizing(border-box);
118
-
119
- p {
120
- margin: 0;
121
- color: inherit;
122
- }
123
- .card-title {
124
- line-height: 48px;
125
- }
126
- }
127
-
128
- .card-action {
129
- border-top: 1px solid rgba(160,160,160,.2);
130
- padding: $card-padding;
131
- }
132
-
133
- .card-reveal {
134
- padding: $card-padding;
135
- position: absolute;
136
- background-color: #FFF;
137
- width: 100%;
138
- overflow-y: auto;
139
- top: 100%;
140
- height: 100%;
141
- z-index: 1;
142
-
143
- .card-title {
144
- cursor: pointer;
145
- display: block;
146
- }
147
-
148
- @include box-sizing(border-box);
149
- }
150
- }
1
+
2
+
3
+ .card-panel {
4
+ padding: $card-padding;
5
+ margin: $element-top-margin 0 $element-bottom-margin 0;
6
+ @include border-radius(2px);
7
+ @extend .z-depth-1;
8
+ background-color: $card-bg-color;
9
+ }
10
+
11
+ .card {
12
+ position: relative;
13
+ overflow: hidden;
14
+ margin: $element-top-margin 0 $element-bottom-margin 0;
15
+ background-color: $card-bg-color;
16
+ @include box-sizing(border-box);
17
+ @include border-radius(2px);
18
+ @extend .z-depth-1;
19
+
20
+
21
+ .card-title {
22
+ color: #fff;
23
+ font-size: 24px;
24
+ font-weight: 300;
25
+ &.activator {
26
+ cursor: pointer;
27
+ }
28
+ }
29
+
30
+ a {
31
+ color: color("orange", "accent-2");
32
+ margin-right: $card-padding;
33
+ @include transition(color .3s ease);
34
+ text-transform: uppercase;
35
+
36
+ &:hover { color: lighten(color("orange", "accent-2"), 20%); }
37
+ }
38
+
39
+ // Card Sizes
40
+ &.small, &.medium, &.large {
41
+ position: relative;
42
+
43
+ .card-image {
44
+ overflow: hidden;
45
+ }
46
+ .card-content {
47
+ overflow: hidden;
48
+ }
49
+ .card-action {
50
+ position: absolute;
51
+ bottom: 0;
52
+ left: 0;
53
+ right: 0;
54
+ }
55
+ }
56
+
57
+ &.small {
58
+ height: 300px;
59
+
60
+ .card-image {
61
+ height: 150px;
62
+ }
63
+ .card-content {
64
+ height: 150px;
65
+ }
66
+
67
+ }
68
+
69
+ &.medium {
70
+ height: 400px;
71
+
72
+ .card-image {
73
+ height: 250px;
74
+ }
75
+ .card-content {
76
+ height: 150px;
77
+ }
78
+ }
79
+
80
+ &.large {
81
+ height: 500px;
82
+
83
+ .card-image {
84
+ height: 330px;
85
+ }
86
+ .card-content {
87
+ height: 170px;
88
+ }
89
+ }
90
+
91
+
92
+ .card-image {
93
+ position: relative;
94
+
95
+ // Image background for content
96
+ img {
97
+ @include border-radius(2px 2px 0 0);
98
+ position: relative;
99
+ left: 0;
100
+ right: 0;
101
+ top: 0;
102
+ bottom: 0;
103
+ width: 100%;
104
+ }
105
+
106
+ .card-title {
107
+ position: absolute;
108
+ bottom: 0;
109
+ left: 0;
110
+ padding: $card-padding;
111
+ }
112
+
113
+ }
114
+
115
+ .card-content {
116
+ padding: $card-padding;
117
+ @include border-radius(0 0 2px 2px);
118
+ @include box-sizing(border-box);
119
+
120
+ p {
121
+ margin: 0;
122
+ color: inherit;
123
+ }
124
+ .card-title {
125
+ line-height: 48px;
126
+ }
127
+ }
128
+
129
+ .card-action {
130
+ border-top: 1px solid rgba(160,160,160,.2);
131
+ padding: $card-padding;
132
+ }
133
+
134
+ .card-reveal {
135
+ padding: $card-padding;
136
+ position: absolute;
137
+ background-color: #FFF;
138
+ width: 100%;
139
+ overflow-y: auto;
140
+ top: 100%;
141
+ height: 100%;
142
+ z-index: 1;
143
+
144
+ .card-title {
145
+ cursor: pointer;
146
+ display: block;
147
+ }
148
+
149
+ @include box-sizing(border-box);
150
+ }
151
+ }
data/app/assets/stylesheets/materialize/components/_form.scss CHANGED
@@ -1,698 +1,700 @@
1
- /* Remove Focus Boxes */
2
- select:focus {
3
- outline: 1px solid color("materialize-red", "lighten-4");
4
- }
5
- button:focus {
6
- outline: none;
7
- background-color: lighten($button-color, 10%);
8
- }
9
-
10
- label {
11
- font-size: $label-font-size;
12
- color: $input-border-color;
13
- }
14
-
15
- /***************************
16
- Text Inputs + Textarea
17
- ****************************/
18
-
19
- .input-field {
20
- position: relative;
21
- margin-top: 1rem;
22
-
23
- label {
24
- color: $input-border-color;
25
- position: absolute;
26
- top: 0.8rem;
27
- left: $gutter-width / 2;
28
- font-size: 1rem;
29
- cursor: text;
30
- @include transition(.2s ease-out);
31
- }
32
- label.active {
33
- font-size: $label-font-size;
34
- @include transform(translateY(-140%));
35
- }
36
-
37
- input[type=text]:focus + label,
38
- input[type=password]:focus + label,
39
- input[type=email]:focus + label,
40
- input[type=url]:focus + label,
41
- input[type=date]:focus + label,
42
- input[type=tel]:focus + label,
43
- input[type=number]:focus + label,
44
- input[type=search]:focus + label,
45
- textarea:focus.materialize-textarea + label {
46
- color: $input-focus-color;
47
- }
48
-
49
- input[type=text].valid,
50
- input[type=password].valid,
51
- input[type=email].valid,
52
- input[type=url].valid,
53
- input[type=date].valid,
54
- input[type=tel].valid,
55
- input[type=number].valid,
56
- input[type=search].valid,
57
- textarea.materialize-textarea.valid {
58
- border-bottom: 1px solid $input-success-color;
59
- @include box-shadow(0 1px 0 0 $input-success-color);
60
- }
61
-
62
- input[type=text].invalid,
63
- input[type=password].invalid,
64
- input[type=email].invalid,
65
- input[type=url].invalid,
66
- input[type=date].invalid,
67
- input[type=tel].invalid,
68
- input[type=number].invalid,
69
- input[type=search].invalid,
70
- textarea.materialize-textarea.invalid {
71
- border-bottom: 1px solid $input-error-color;
72
- @include box-shadow(0 1px 0 0 $input-error-color);
73
- }
74
-
75
- // Prefix Icons
76
- .prefix {
77
- position: absolute;
78
- width: 3rem;
79
- font-size: 2rem;
80
- @include transition(color .2s);
81
-
82
- &.active { color: $input-focus-color; }
83
- }
84
- .prefix ~ input,
85
- .prefix ~ textarea {
86
- margin-left: 3rem;
87
- width: 92%;
88
- width: calc(100% - 3rem);
89
- }
90
- .prefix ~ textarea { padding-top: .8rem; }
91
- .prefix ~ label { margin-left: 3rem; }
92
-
93
- @media #{$medium-and-down} {
94
- .prefix ~ input {
95
- width: 86%;
96
- width: calc(100% - 3rem);
97
- }
98
- }
99
- @media #{$small-and-down} {
100
- .prefix ~ input {
101
- width: 80%;
102
- width: calc(100% - 3rem);
103
- }
104
- }
105
-
106
- }
107
-
108
- // Default textarea
109
- textarea {
110
- width: 100%;
111
- height: 3rem;
112
- background-color: transparent;
113
- }
114
-
115
- input[type=text],
116
- input[type=password],
117
- input[type=email],
118
- input[type=url],
119
- input[type=date],
120
- input[type=tel],
121
- input[type=number],
122
- input[type=search],
123
- textarea.materialize-textarea {
124
- background-color: transparent;
125
- border: none;
126
- border-bottom: 1px solid $input-border-color;
127
- outline: none;
128
- height: 3rem;
129
- width: 100%;
130
-
131
- font-size: 1rem;
132
- margin: 0 0 15px 0;
133
- padding: 0;
134
- @include box-shadow(none);
135
- @include box-sizing(content-box);
136
- @include transition(.3s);
137
- }
138
-
139
- input[type=text]:focus,
140
- input[type=password]:focus,
141
- input[type=email]:focus,
142
- input[type=url]:focus,
143
- input[type=date]:focus,
144
- input[type=tel]:focus,
145
- input[type=number]:focus,
146
- input[type=search]:focus,
147
- textarea:focus.materialize-textarea {
148
- border-bottom: 1px solid $input-focus-color;
149
- @include box-shadow(0 1px 0 0 $input-focus-color);
150
- }
151
-
152
- textarea.materialize-textarea {
153
- overflow-y: hidden; /* prevents scroll bar flash */
154
- padding: 1.6rem 0; /* prevents text jump on Enter keypress */
155
- resize: none;
156
- min-height: 3rem;
157
- }
158
-
159
- // For textarea autoresize
160
- .hiddendiv {
161
- display: none;
162
- white-space: pre-wrap;
163
- word-wrap: break-word;
164
- overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
165
- padding-top: 1.2rem; /* prevents text jump on Enter keypress */
166
- }
167
-
168
-
169
- /***************
170
- Radio Buttons
171
- ***************/
172
-
173
- /* Remove default Radio Buttons */
174
- [type="radio"]:not(:checked),
175
- [type="radio"]:checked {
176
- position: absolute;
177
- left: -9999px;
178
- }
179
-
180
- [type="radio"]:not(:checked) + label,
181
- [type="radio"]:checked + label {
182
- position: relative;
183
- padding-left: 35px;
184
- cursor: pointer;
185
- display: inline-block;
186
- height: 25px;
187
- line-height: 25px;
188
- font-size: 1rem;
189
- @include transition(.28s ease);
190
-
191
- -webkit-user-select: none; /* webkit (safari, chrome) browsers */
192
- -moz-user-select: none; /* mozilla browsers */
193
- -khtml-user-select: none; /* webkit (konqueror) browsers */
194
- -ms-user-select: none; /* IE10+ */
195
- }
196
-
197
- [type="radio"] + label:before,
198
- [type="radio"] + label:after {
199
- content: '';
200
- position: absolute;
201
- left: 0px;
202
- top: 0px;
203
- margin: 4px;
204
- width: 16px;
205
- height: 16px;
206
- z-index: 0;
207
- @include transition(.28s ease);
208
- }
209
-
210
-
211
- /* Unchecked styles */
212
- [type="radio"]:not(:checked) + label:before {
213
- border-radius: 50%;
214
- border: 2px solid $radio-empty-color;
215
- }
216
- [type="radio"]:not(:checked) + label:after {
217
- border-radius: 50%;
218
- border: 2px solid $radio-empty-color;
219
- z-index: -1;
220
-
221
- @include transform(scale(0));
222
- }
223
-
224
- /* Checked styles */
225
- [type="radio"]:checked + label:before {
226
- border-radius: 50%;
227
- border: 2px solid transparent;
228
- }
229
- [type="radio"]:checked + label:after {
230
- border-radius: 50%;
231
- border: 2px solid $radio-fill-color;
232
- background-color: $radio-fill-color;
233
- z-index: 0;
234
- @include transform(scale(1.02));
235
- }
236
-
237
- /* Radio With gap */
238
- [type="radio"].with-gap:checked + label:before {
239
- border-radius: 50%;
240
- border: 2px solid $radio-fill-color;
241
- }
242
- [type="radio"].with-gap:checked + label:after {
243
- border-radius: 50%;
244
- border: 2px solid $radio-fill-color;
245
- background-color: $radio-fill-color;
246
- z-index: 0;
247
- @include transform(scale(.5));
248
- }
249
-
250
- /* Disabled style */
251
- [type="radio"]:disabled:not(:checked) + label:before,
252
- [type="radio"]:disabled:checked + label:before {
253
- background-color: transparent;
254
- border-color: $input-disabled-color;
255
- }
256
- [type="radio"]:disabled + label {
257
- color: $input-disabled-color;
258
- }
259
- [type="radio"]:disabled:not(:checked) + label:hover:before {
260
- border-color: $input-disabled-color;
261
- }
262
-
263
-
264
- /***************
265
- Checkboxes
266
- ***************/
267
-
268
- /* CUSTOM CSS CHECKBOXES */
269
- form p {
270
- margin-bottom: 10px;
271
- text-align: left;
272
- }
273
- form p:last-child {
274
- margin-bottom: 0px;
275
- }
276
-
277
- /* Remove default checkbox */
278
- [type="checkbox"]:not(:checked),
279
- [type="checkbox"]:checked {
280
- position: absolute;
281
- left: -9999px;
282
- }
283
- [type="checkbox"]:not(:checked) + label,
284
- [type="checkbox"]:checked + label {
285
- position: relative;
286
- padding-left: 35px;
287
- cursor: pointer;
288
- display: inline-block;
289
- height: 25px;
290
- line-height: 25px;
291
- font-size: 1rem;
292
-
293
- -webkit-user-select: none; /* webkit (safari, chrome) browsers */
294
- -moz-user-select: none; /* mozilla browsers */
295
- -khtml-user-select: none; /* webkit (konqueror) browsers */
296
- -ms-user-select: none; /* IE10+ */
297
- }
298
-
299
- /* checkbox aspect */
300
- [type="checkbox"] + label:before {
301
- content: '';
302
- position: absolute;
303
- margin-top: 2px;
304
- left: 0;
305
- z-index: 0;
306
- @include border-radius(1px);
307
- @include transition(.2s);
308
- }
309
- /* Unchecked styles */
310
- [type="checkbox"]:not(:checked) + label:before {
311
- top: 0px;
312
- width: 18px; height: 18px;
313
- border: 2px solid $radio-empty-color;
314
- }
315
-
316
- /* Checked styles */
317
- [type="checkbox"]:checked + label:before {
318
- left: -3px;
319
- top: -4px;
320
- width: 12px; height: 22px;
321
- border-top: 2px solid transparent;
322
- border-left: 2px solid transparent;
323
- border-right: 2px solid $radio-fill-color;
324
- border-bottom: 2px solid $radio-fill-color;
325
- @include transform(rotateZ(40deg));
326
- -webkit-backface-visibility: hidden;
327
-
328
- @include transform-origin(100% 100%);
329
- }
330
-
331
- /* disabled checkbox */
332
- [type="checkbox"]:disabled:not(:checked) + label:before {
333
- top: 0;
334
- left: 0;
335
- box-shadow: none;
336
- background-color: $input-disabled-color;
337
- width: 18px; height: 18px;
338
- border: 2px solid $input-disabled-color;
339
- @include transform(rotateZ(0deg));
340
- }
341
-
342
- [type="checkbox"]:disabled:checked + label:before {
343
- left: -3px;
344
- top: -4px;
345
- width: 12px; height: 22px;
346
- border-top: 2px solid transparent;
347
- border-left: 2px solid transparent;
348
- border-right: 2px solid $input-disabled-color;
349
- border-bottom: 2px solid $input-disabled-color;
350
- @include transform(rotateZ(40deg));
351
- -webkit-backface-visibility: hidden;
352
-
353
- @include transform-origin(100% 100%);
354
- }
355
- [type="checkbox"]:disabled:checked + label {
356
- color: $input-disabled-color;
357
- }
358
- [type="checkbox"]:disabled:not(:checked) + label:hover:before {
359
- border-color: $input-disabled-color;
360
- }
361
-
362
-
363
- // Switch
364
- .switch,
365
- .switch * {
366
- -webkit-user-select: none;
367
- -moz-user-select: none;
368
- -ms-user-select: none;
369
- }
370
- .switch label {
371
- cursor: pointer;
372
- }
373
- .switch label input[type=checkbox]:first-child {
374
- opacity: 0;
375
- width: 0;
376
- height: 0;
377
- }
378
- .switch label input[type=checkbox]:first-child:checked + .lever {
379
- background-color: #7bc5be;
380
- }
381
- .switch label input[type=checkbox]:first-child:checked + .lever:after {
382
- background-color: #009587;
383
- }
384
- .switch label .lever,
385
- .switch label input[type=checkbox][disabled]:first-child + .lever {
386
- content: "";
387
- display: inline-block;
388
- width: 45px;
389
- height: 15px;
390
- background-color: #818181;
391
- border-radius: 15px;
392
- margin-right: 10px;
393
- transition: background 0.3s ease;
394
- vertical-align: middle;
395
- margin: 0px 16px;
396
- }
397
- .switch label .lever:after {
398
- content: "";
399
- display: inline-block;
400
- width: 20px;
401
- height: 20px;
402
- background-color: #F1F1F1;
403
- border-radius: 20px;
404
- position: relative;
405
- box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4);
406
- left: -5px;
407
- top: -2px;
408
- transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
409
- }
410
- // Switch active style
411
- input[type=checkbox]:first-child:checked:not(:disabled) ~ .lever:active:after {
412
- box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
413
- }
414
- input[type=checkbox]:first-child:not(:disabled) ~ .lever:active:after {
415
- box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
416
- }
417
-
418
- // Disabled Styles
419
- .switch label input[type=checkbox][disabled]:first-child + .lever:after,
420
- .switch label input[type=checkbox][disabled]:checked:first-child + .lever:after {
421
- background-color: #BDBDBD;
422
- }
423
-
424
- .switch label input[type=checkbox]:first-child:checked + .lever:after {
425
- left: 30px;
426
- }
427
-
428
-
429
-
430
-
431
-
432
- /***************
433
- Select Field
434
- ***************/
435
-
436
- .select-label {
437
- position: absolute;
438
- }
439
-
440
- .select-wrapper {
441
- position: relative;
442
- margin-top: 15px;
443
-
444
- input.select-dropdown {
445
- position: relative;
446
- cursor: pointer;
447
- color: #444;
448
- background-color: transparent;
449
- border: none;
450
- border-bottom: 1px solid $input-border-color;
451
- outline: none;
452
- height: 3rem;
453
- line-height: 3rem;
454
- width: 100%;
455
- font-size: 1rem;
456
- margin: 0 0 15px 0;
457
- padding: 0;
458
- display: block;
459
- }
460
- .mdi-navigation-arrow-drop-down {
461
- position: absolute;
462
- right: 0;
463
- top: 0;
464
- font-size: 23px;
465
- }
466
- }
467
-
468
- select { display: none; }
469
- select.browser-default { display: block; }
470
-
471
-
472
- // Disabled styles
473
- select:disabled {
474
- color: rgba(0,0,0,.3);
475
- }
476
- .select-wrapper input.select-dropdown:disabled {
477
- color: rgba(0,0,0,.3);
478
- border-bottom: 1px solid rgba(0,0,0,.3);
479
- }
480
- .select-wrapper i {
481
- color: rgba(0,0,0,.3);
482
- }
483
- .select-dropdown li.disabled {
484
- color: rgba(0,0,0,.3);
485
-
486
- &:hover { background-color: transparent; }
487
- }
488
-
489
-
490
- /*********************
491
- File Input
492
- **********************/
493
- .file-field {
494
- position: relative;
495
- overflow: hidden;
496
-
497
- input.file-path {
498
- margin-left: 100px;
499
- }
500
-
501
- .btn {
502
- position: absolute;
503
- top: 0;
504
- height: 3rem;
505
- line-height: 3rem;
506
- }
507
-
508
- span {
509
- cursor: pointer;
510
- }
511
-
512
- input[type=file] {
513
- position: absolute;
514
- top: 0;
515
- right: 0;
516
- left: 0;
517
- bottom: 0;
518
- width: 100%;
519
- margin: 0;
520
- padding: 0;
521
- font-size: 20px;
522
- cursor: pointer;
523
- opacity: 0;
524
- filter: alpha(opacity=0);
525
- }
526
- }
527
-
528
-
529
-
530
- /***************
531
- Range
532
- ***************/
533
-
534
- .range-field {
535
- position: relative;
536
- }
537
-
538
- input[type=range], input[type=range] + .thumb {
539
- @extend .no-select;
540
- cursor: pointer;
541
- }
542
-
543
- input[type=range] {
544
- position: relative;
545
- background-color: transparent;
546
- border: none;
547
- outline: none;
548
- width: 100%;
549
- margin: 15px 0px;
550
- padding: 0;
551
- }
552
- input[type=range] + .thumb {
553
- position: absolute;
554
- border: none;
555
- height: 0;
556
- width: 0;
557
- border-radius: 50%;
558
- background-color: $radio-fill-color;
559
- top: 10px;
560
- margin-left: -6px;
561
-
562
- @include transform-origin(50% 50%);
563
- @include transform(rotate(-45deg));
564
-
565
- .value {
566
- display: block;
567
- width: 30px;
568
- text-align: center;
569
- color: $radio-fill-color;
570
- font-size: 0px;
571
- @include transform(rotate(45deg));
572
- }
573
-
574
- &.active {
575
- border-radius: 50% 50% 50% 0;
576
-
577
- .value {
578
- color: #fff;
579
- margin-left: -1px;
580
- margin-top: 8px;
581
- font-size: 10px;
582
- }
583
- }
584
- }
585
-
586
-
587
- input[type=range]:focus {
588
- outline: none;
589
- }
590
-
591
-
592
-
593
- // WebKit
594
- input[type=range]{
595
- -webkit-appearance: none;
596
- }
597
-
598
- input[type=range]::-webkit-slider-runnable-track {
599
- height: 3px;
600
- background: #c2c0c2;
601
- border: none;
602
- }
603
-
604
- input[type=range]::-webkit-slider-thumb {
605
- -webkit-appearance: none;
606
- border: none;
607
- height: 14px;
608
- width: 14px;
609
- border-radius: 50%;
610
- background-color: $radio-fill-color;
611
- transform-origin: 50% 50%;
612
- margin: -5px 0 0 0;
613
- @include transition(.3s);
614
- }
615
-
616
- input[type=range]:focus::-webkit-slider-runnable-track {
617
- background: #ccc;
618
- }
619
-
620
- // FireFox
621
- input[type=range]{
622
- /* fix for FF unable to apply focus style bug */
623
- border: 1px solid white;
624
-
625
- /*required for proper track sizing in FF*/
626
- }
627
-
628
- input[type=range]::-moz-range-track {
629
- height: 3px;
630
- background: #ddd;
631
- border: none;
632
- }
633
-
634
- input[type=range]::-moz-range-thumb {
635
- border: none;
636
- height: 14px;
637
- width: 14px;
638
- border-radius: 50%;
639
- background: $radio-fill-color;
640
- margin-top: -5px;
641
- }
642
-
643
- /*hide the outline behind the border*/
644
- input[type=range]:-moz-focusring{
645
- outline: 1px solid white;
646
- outline-offset: -1px;
647
- }
648
-
649
- input[type=range]:focus::-moz-range-track {
650
- background: #ccc;
651
- }
652
-
653
- // IE 10+
654
- input[type=range]::-ms-track {
655
- height: 3px;
656
-
657
- /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
658
- background: transparent;
659
-
660
- /*leave room for the larger thumb to overflow with a transparent border */
661
- border-color: transparent;
662
- border-width: 6px 0;
663
-
664
- /*remove default tick marks*/
665
- color: transparent;
666
- }
667
- input[type=range]::-ms-fill-lower {
668
- background: #777;
669
- }
670
- input[type=range]::-ms-fill-upper {
671
- background: #ddd;
672
- }
673
- input[type=range]::-ms-thumb {
674
- border: none;
675
- height: 14px;
676
- width: 14px;
677
- border-radius: 50%;
678
- background: $radio-fill-color;
679
- }
680
- input[type=range]:focus::-ms-fill-lower {
681
- background: #888;
682
- }
683
- input[type=range]:focus::-ms-fill-upper {
684
- background: #ccc;
685
- }
686
-
687
- /***************************
688
- Text Inputs + Textarea
689
- ****************************/
690
-
691
- select {
692
- background-color: #fffafa;
693
- width: 100%;
694
- padding: 5px;
695
- border: 1px solid #f2f2f2;
696
- border-radius: 2px;
697
- height: 3rem;
698
- }
1
+ /* Remove Focus Boxes */
2
+ select:focus {
3
+ outline: 1px solid color("materialize-red", "lighten-4");
4
+ }
5
+ button:focus {
6
+ outline: none;
7
+ // background-color: lighten($button-color, 10%);
8
+ background-color: #2ab7a9;
9
+ }
10
+
11
+ label {
12
+ font-size: $label-font-size;
13
+ color: $input-border-color;
14
+ }
15
+
16
+ /***************************
17
+ Text Inputs + Textarea
18
+ ****************************/
19
+
20
+ .input-field {
21
+ position: relative;
22
+ margin-top: 1rem;
23
+
24
+ label {
25
+ color: $input-border-color;
26
+ position: absolute;
27
+ top: 0.8rem;
28
+ left: $gutter-width / 2;
29
+ font-size: 1rem;
30
+ cursor: text;
31
+ @include transition(.2s ease-out);
32
+ }
33
+ label.active {
34
+ font-size: $label-font-size;
35
+ @include transform(translateY(-140%));
36
+ }
37
+
38
+ input[type=text]:focus + label,
39
+ input[type=password]:focus + label,
40
+ input[type=email]:focus + label,
41
+ input[type=url]:focus + label,
42
+ input[type=date]:focus + label,
43
+ input[type=tel]:focus + label,
44
+ input[type=number]:focus + label,
45
+ input[type=search]:focus + label,
46
+ textarea:focus.materialize-textarea + label {
47
+ color: $input-focus-color;
48
+ }
49
+
50
+ input[type=text].valid,
51
+ input[type=password].valid,
52
+ input[type=email].valid,
53
+ input[type=url].valid,
54
+ input[type=date].valid,
55
+ input[type=tel].valid,
56
+ input[type=number].valid,
57
+ input[type=search].valid,
58
+ textarea.materialize-textarea.valid {
59
+ border-bottom: 1px solid $input-success-color;
60
+ @include box-shadow(0 1px 0 0 $input-success-color);
61
+ }
62
+
63
+ input[type=text].invalid,
64
+ input[type=password].invalid,
65
+ input[type=email].invalid,
66
+ input[type=url].invalid,
67
+ input[type=date].invalid,
68
+ input[type=tel].invalid,
69
+ input[type=number].invalid,
70
+ input[type=search].invalid,
71
+ textarea.materialize-textarea.invalid {
72
+ border-bottom: 1px solid $input-error-color;
73
+ @include box-shadow(0 1px 0 0 $input-error-color);
74
+ }
75
+
76
+ // Prefix Icons
77
+ .prefix {
78
+ position: absolute;
79
+ width: 3rem;
80
+ font-size: 2rem;
81
+ @include transition(color .2s);
82
+
83
+ &.active { color: $input-focus-color; }
84
+ }
85
+ .prefix ~ input,
86
+ .prefix ~ textarea {
87
+ margin-left: 3rem;
88
+ width: 92%;
89
+ width: calc(100% - 3rem);
90
+ }
91
+ .prefix ~ textarea { padding-top: .8rem; }
92
+ .prefix ~ label { margin-left: 3rem; }
93
+
94
+ @media #{$medium-and-down} {
95
+ .prefix ~ input {
96
+ width: 86%;
97
+ width: calc(100% - 3rem);
98
+ }
99
+ }
100
+ @media #{$small-and-down} {
101
+ .prefix ~ input {
102
+ width: 80%;
103
+ width: calc(100% - 3rem);
104
+ }
105
+ }
106
+
107
+ }
108
+
109
+ // Default textarea
110
+ textarea {
111
+ width: 100%;
112
+ height: 3rem;
113
+ background-color: transparent;
114
+ }
115
+
116
+ input[type=text],
117
+ input[type=password],
118
+ input[type=email],
119
+ input[type=url],
120
+ input[type=date],
121
+ input[type=tel],
122
+ input[type=number],
123
+ input[type=search],
124
+ textarea.materialize-textarea {
125
+ background-color: transparent;
126
+ border: none;
127
+ border-bottom: 1px solid $input-border-color;
128
+ outline: none;
129
+ height: 3rem;
130
+ width: 100%;
131
+
132
+ font-size: 1rem;
133
+ margin: 0 0 15px 0;
134
+ padding: 0;
135
+ @include box-shadow(none);
136
+ @include box-sizing(content-box);
137
+ @include transition(.3s);
138
+ }
139
+
140
+ input[type=text]:focus,
141
+ input[type=password]:focus,
142
+ input[type=email]:focus,
143
+ input[type=url]:focus,
144
+ input[type=date]:focus,
145
+ input[type=tel]:focus,
146
+ input[type=number]:focus,
147
+ input[type=search]:focus,
148
+ textarea:focus.materialize-textarea {
149
+ border-bottom: 1px solid $input-focus-color;
150
+ @include box-shadow(0 1px 0 0 $input-focus-color);
151
+ }
152
+
153
+ textarea.materialize-textarea {
154
+ overflow-y: hidden; /* prevents scroll bar flash */
155
+ padding: 1.6rem 0; /* prevents text jump on Enter keypress */
156
+ resize: none;
157
+ min-height: 3rem;
158
+ }
159
+
160
+ // For textarea autoresize
161
+ .hiddendiv {
162
+ display: none;
163
+ white-space: pre-wrap;
164
+ word-wrap: break-word;
165
+ overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
166
+ padding-top: 1.2rem; /* prevents text jump on Enter keypress */
167
+ }
168
+
169
+
170
+ /***************
171
+ Radio Buttons
172
+ ***************/
173
+
174
+ /* Remove default Radio Buttons */
175
+ [type="radio"]:not(:checked),
176
+ [type="radio"]:checked {
177
+ position: absolute;
178
+ left: -9999px;
179
+ }
180
+
181
+ [type="radio"]:not(:checked) + label,
182
+ [type="radio"]:checked + label {
183
+ position: relative;
184
+ padding-left: 35px;
185
+ cursor: pointer;
186
+ display: inline-block;
187
+ height: 25px;
188
+ line-height: 25px;
189
+ font-size: 1rem;
190
+ @include transition(.28s ease);
191
+
192
+ -webkit-user-select: none; /* webkit (safari, chrome) browsers */
193
+ -moz-user-select: none; /* mozilla browsers */
194
+ -khtml-user-select: none; /* webkit (konqueror) browsers */
195
+ -ms-user-select: none; /* IE10+ */
196
+ }
197
+
198
+ [type="radio"] + label:before,
199
+ [type="radio"] + label:after {
200
+ content: '';
201
+ position: absolute;
202
+ left: 0px;
203
+ top: 0px;
204
+ margin: 4px;
205
+ width: 16px;
206
+ height: 16px;
207
+ z-index: 0;
208
+ @include transition(.28s ease);
209
+ }
210
+
211
+
212
+ /* Unchecked styles */
213
+ [type="radio"]:not(:checked) + label:before {
214
+ border-radius: 50%;
215
+ border: 2px solid $radio-empty-color;
216
+ }
217
+ [type="radio"]:not(:checked) + label:after {
218
+ border-radius: 50%;
219
+ border: 2px solid $radio-empty-color;
220
+ z-index: -1;
221
+
222
+ @include transform(scale(0));
223
+ }
224
+
225
+ /* Checked styles */
226
+ [type="radio"]:checked + label:before {
227
+ border-radius: 50%;
228
+ border: 2px solid transparent;
229
+ }
230
+ [type="radio"]:checked + label:after {
231
+ border-radius: 50%;
232
+ border: 2px solid $radio-fill-color;
233
+ background-color: $radio-fill-color;
234
+ z-index: 0;
235
+ @include transform(scale(1.02));
236
+ }
237
+
238
+ /* Radio With gap */
239
+ [type="radio"].with-gap:checked + label:before {
240
+ border-radius: 50%;
241
+ border: 2px solid $radio-fill-color;
242
+ }
243
+ [type="radio"].with-gap:checked + label:after {
244
+ border-radius: 50%;
245
+ border: 2px solid $radio-fill-color;
246
+ background-color: $radio-fill-color;
247
+ z-index: 0;
248
+ @include transform(scale(.5));
249
+ }
250
+
251
+ /* Disabled style */
252
+ [type="radio"]:disabled:not(:checked) + label:before,
253
+ [type="radio"]:disabled:checked + label:before {
254
+ background-color: transparent;
255
+ border-color: $input-disabled-color;
256
+ }
257
+ [type="radio"]:disabled + label {
258
+ color: $input-disabled-color;
259
+ }
260
+ [type="radio"]:disabled:not(:checked) + label:hover:before {
261
+ border-color: $input-disabled-color;
262
+ }
263
+
264
+
265
+ /***************
266
+ Checkboxes
267
+ ***************/
268
+
269
+ /* CUSTOM CSS CHECKBOXES */
270
+ form p {
271
+ margin-bottom: 10px;
272
+ text-align: left;
273
+ }
274
+ form p:last-child {
275
+ margin-bottom: 0px;
276
+ }
277
+
278
+ /* Remove default checkbox */
279
+ [type="checkbox"]:not(:checked),
280
+ [type="checkbox"]:checked {
281
+ position: absolute;
282
+ left: -9999px;
283
+ }
284
+ [type="checkbox"]:not(:checked) + label,
285
+ [type="checkbox"]:checked + label {
286
+ position: relative;
287
+ padding-left: 35px;
288
+ cursor: pointer;
289
+ display: inline-block;
290
+ height: 25px;
291
+ line-height: 25px;
292
+ font-size: 1rem;
293
+
294
+ -webkit-user-select: none; /* webkit (safari, chrome) browsers */
295
+ -moz-user-select: none; /* mozilla browsers */
296
+ -khtml-user-select: none; /* webkit (konqueror) browsers */
297
+ -ms-user-select: none; /* IE10+ */
298
+ }
299
+
300
+ /* checkbox aspect */
301
+ [type="checkbox"] + label:before {
302
+ content: '';
303
+ position: absolute;
304
+ margin-top: 2px;
305
+ left: 0;
306
+ z-index: 0;
307
+ @include border-radius(1px);
308
+ @include transition(.2s);
309
+ }
310
+ /* Unchecked styles */
311
+ [type="checkbox"]:not(:checked) + label:before {
312
+ top: 0px;
313
+ width: 18px; height: 18px;
314
+ border: 2px solid $radio-empty-color;
315
+ }
316
+
317
+ /* Checked styles */
318
+ [type="checkbox"]:checked + label:before {
319
+ left: -3px;
320
+ top: -4px;
321
+ width: 12px; height: 22px;
322
+ border-top: 2px solid transparent;
323
+ border-left: 2px solid transparent;
324
+ border-right: 2px solid $radio-fill-color;
325
+ border-bottom: 2px solid $radio-fill-color;
326
+ @include transform(rotateZ(40deg));
327
+ -webkit-backface-visibility: hidden;
328
+
329
+ @include transform-origin(100% 100%);
330
+ }
331
+
332
+ /* disabled checkbox */
333
+ [type="checkbox"]:disabled:not(:checked) + label:before {
334
+ top: 0;
335
+ left: 0;
336
+ box-shadow: none;
337
+ background-color: $input-disabled-color;
338
+ width: 18px; height: 18px;
339
+ border: 2px solid $input-disabled-color;
340
+ @include transform(rotateZ(0deg));
341
+ }
342
+
343
+ [type="checkbox"]:disabled:checked + label:before {
344
+ left: -3px;
345
+ top: -4px;
346
+ width: 12px; height: 22px;
347
+ border-top: 2px solid transparent;
348
+ border-left: 2px solid transparent;
349
+ border-right: 2px solid $input-disabled-color;
350
+ border-bottom: 2px solid $input-disabled-color;
351
+ @include transform(rotateZ(40deg));
352
+ -webkit-backface-visibility: hidden;
353
+
354
+ @include transform-origin(100% 100%);
355
+ }
356
+ [type="checkbox"]:disabled:checked + label {
357
+ color: $input-disabled-color;
358
+ }
359
+ [type="checkbox"]:disabled:not(:checked) + label:hover:before {
360
+ border-color: $input-disabled-color;
361
+ }
362
+
363
+
364
+ // Switch
365
+ .switch,
366
+ .switch * {
367
+ -webkit-user-select: none;
368
+ -moz-user-select: none;
369
+ -ms-user-select: none;
370
+ }
371
+ .switch label {
372
+ cursor: pointer;
373
+ }
374
+ .switch label input[type=checkbox] {
375
+ opacity: 0;
376
+ width: 0;
377
+ height: 0;
378
+ }
379
+ .switch label input[type=checkbox]:checked + .lever {
380
+ background-color: #84c7c1;
381
+ }
382
+ .switch label input[type=checkbox]:checked + .lever:after {
383
+ background-color: #26a69a;
384
+ }
385
+ .switch label .lever {
386
+ content: "";
387
+ display: inline-block;
388
+ width: 40px;
389
+ height: 15px;
390
+ position: relative;
391
+ background-color: #818181;
392
+ border-radius: 15px;
393
+ margin-right: 10px;
394
+ transition: background 0.3s ease;
395
+ vertical-align: middle;
396
+ margin: 0px 16px;
397
+ }
398
+ .switch label .lever:after {
399
+ position: absolute;
400
+ content: "";
401
+ display: inline-block;
402
+ width: 21px;
403
+ height: 21px;
404
+ background-color: #F1F1F1;
405
+ border-radius: 21px;
406
+ position: relative;
407
+ box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4);
408
+ left: -5px;
409
+ top: -3px;
410
+ transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
411
+ }
412
+ // Switch active style
413
+ input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after {
414
+ box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 166, 154, 0.1);
415
+ }
416
+ input[type=checkbox]:not(:disabled) ~ .lever:active:after {
417
+ box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.08);
418
+ }
419
+
420
+ // Disabled Styles
421
+ .switch label input[type=checkbox]:checked + .lever:after {
422
+ left: 24px;
423
+ }
424
+
425
+ .switch input[type=checkbox][disabled] + .lever {
426
+ cursor: default;
427
+ }
428
+
429
+ .switch label input[type=checkbox][disabled] + .lever:after,
430
+ .switch label input[type=checkbox][disabled]:checked + .lever:after {
431
+ background-color: #BDBDBD;
432
+ }
433
+
434
+ /***************
435
+ Select Field
436
+ ***************/
437
+
438
+ .select-label {
439
+ position: absolute;
440
+ }
441
+
442
+ .select-wrapper {
443
+ position: relative;
444
+ margin-top: 15px;
445
+
446
+ input.select-dropdown {
447
+ position: relative;
448
+ cursor: pointer;
449
+ color: #444;
450
+ background-color: transparent;
451
+ border: none;
452
+ border-bottom: 1px solid $input-border-color;
453
+ outline: none;
454
+ height: 3rem;
455
+ line-height: 3rem;
456
+ width: 100%;
457
+ font-size: 1rem;
458
+ margin: 0 0 15px 0;
459
+ padding: 0;
460
+ display: block;
461
+ }
462
+ .mdi-navigation-arrow-drop-down {
463
+ position: absolute;
464
+ right: 0;
465
+ top: 0;
466
+ font-size: 23px;
467
+ }
468
+ }
469
+
470
+ select { display: none; }
471
+ select.browser-default { display: block; }
472
+
473
+
474
+ // Disabled styles
475
+ select:disabled {
476
+ color: rgba(0,0,0,.3);
477
+ }
478
+ .select-wrapper input.select-dropdown:disabled {
479
+ color: rgba(0,0,0,.3);
480
+ border-bottom: 1px solid rgba(0,0,0,.3);
481
+ }
482
+ .select-wrapper i {
483
+ color: rgba(0,0,0,.3);
484
+ }
485
+ .select-dropdown li.disabled {
486
+ color: rgba(0,0,0,.3);
487
+
488
+ &:hover { background-color: transparent; }
489
+ }
490
+
491
+
492
+ /*********************
493
+ File Input
494
+ **********************/
495
+ .file-field {
496
+ position: relative;
497
+ overflow: hidden;
498
+
499
+ input.file-path {
500
+ margin-left: 100px;
501
+ }
502
+
503
+ .btn {
504
+ position: absolute;
505
+ top: 0;
506
+ height: 3rem;
507
+ line-height: 3rem;
508
+ }
509
+
510
+ span {
511
+ cursor: pointer;
512
+ }
513
+
514
+ input[type=file] {
515
+ position: absolute;
516
+ top: 0;
517
+ right: 0;
518
+ left: 0;
519
+ bottom: 0;
520
+ width: 100%;
521
+ margin: 0;
522
+ padding: 0;
523
+ font-size: 20px;
524
+ cursor: pointer;
525
+ opacity: 0;
526
+ filter: alpha(opacity=0);
527
+ }
528
+ }
529
+
530
+
531
+
532
+ /***************
533
+ Range
534
+ ***************/
535
+
536
+ .range-field {
537
+ position: relative;
538
+ }
539
+
540
+ input[type=range], input[type=range] + .thumb {
541
+ @extend .no-select;
542
+ cursor: pointer;
543
+ }
544
+
545
+ input[type=range] {
546
+ position: relative;
547
+ background-color: transparent;
548
+ border: none;
549
+ outline: none;
550
+ width: 100%;
551
+ margin: 15px 0px;
552
+ padding: 0;
553
+ }
554
+ input[type=range] + .thumb {
555
+ position: absolute;
556
+ border: none;
557
+ height: 0;
558
+ width: 0;
559
+ border-radius: 50%;
560
+ background-color: $radio-fill-color;
561
+ top: 10px;
562
+ margin-left: -6px;
563
+
564
+ @include transform-origin(50% 50%);
565
+ @include transform(rotate(-45deg));
566
+
567
+ .value {
568
+ display: block;
569
+ width: 30px;
570
+ text-align: center;
571
+ color: $radio-fill-color;
572
+ font-size: 0px;
573
+ @include transform(rotate(45deg));
574
+ }
575
+
576
+ &.active {
577
+ border-radius: 50% 50% 50% 0;
578
+
579
+ .value {
580
+ color: #fff;
581
+ margin-left: -1px;
582
+ margin-top: 8px;
583
+ font-size: 10px;
584
+ }
585
+ }
586
+ }
587
+
588
+
589
+ input[type=range]:focus {
590
+ outline: none;
591
+ }
592
+
593
+
594
+
595
+ // WebKit
596
+ input[type=range]{
597
+ -webkit-appearance: none;
598
+ }
599
+
600
+ input[type=range]::-webkit-slider-runnable-track {
601
+ height: 3px;
602
+ background: #c2c0c2;
603
+ border: none;
604
+ }
605
+
606
+ input[type=range]::-webkit-slider-thumb {
607
+ -webkit-appearance: none;
608
+ border: none;
609
+ height: 14px;
610
+ width: 14px;
611
+ border-radius: 50%;
612
+ background-color: $radio-fill-color;
613
+ transform-origin: 50% 50%;
614
+ margin: -5px 0 0 0;
615
+ @include transition(.3s);
616
+ }
617
+
618
+ input[type=range]:focus::-webkit-slider-runnable-track {
619
+ background: #ccc;
620
+ }
621
+
622
+ // FireFox
623
+ input[type=range]{
624
+ /* fix for FF unable to apply focus style bug */
625
+ border: 1px solid white;
626
+
627
+ /*required for proper track sizing in FF*/
628
+ }
629
+
630
+ input[type=range]::-moz-range-track {
631
+ height: 3px;
632
+ background: #ddd;
633
+ border: none;
634
+ }
635
+
636
+ input[type=range]::-moz-range-thumb {
637
+ border: none;
638
+ height: 14px;
639
+ width: 14px;
640
+ border-radius: 50%;
641
+ background: $radio-fill-color;
642
+ margin-top: -5px;
643
+ }
644
+
645
+ /*hide the outline behind the border*/
646
+ input[type=range]:-moz-focusring{
647
+ outline: 1px solid white;
648
+ outline-offset: -1px;
649
+ }
650
+
651
+ input[type=range]:focus::-moz-range-track {
652
+ background: #ccc;
653
+ }
654
+
655
+ // IE 10+
656
+ input[type=range]::-ms-track {
657
+ height: 3px;
658
+
659
+ /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
660
+ background: transparent;
661
+
662
+ /*leave room for the larger thumb to overflow with a transparent border */
663
+ border-color: transparent;
664
+ border-width: 6px 0;
665
+
666
+ /*remove default tick marks*/
667
+ color: transparent;
668
+ }
669
+ input[type=range]::-ms-fill-lower {
670
+ background: #777;
671
+ }
672
+ input[type=range]::-ms-fill-upper {
673
+ background: #ddd;
674
+ }
675
+ input[type=range]::-ms-thumb {
676
+ border: none;
677
+ height: 14px;
678
+ width: 14px;
679
+ border-radius: 50%;
680
+ background: $radio-fill-color;
681
+ }
682
+ input[type=range]:focus::-ms-fill-lower {
683
+ background: #888;
684
+ }
685
+ input[type=range]:focus::-ms-fill-upper {
686
+ background: #ccc;
687
+ }
688
+
689
+ /***************************
690
+ Text Inputs + Textarea
691
+ ****************************/
692
+
693
+ select {
694
+ background-color: #fffafa;
695
+ width: 100%;
696
+ padding: 5px;
697
+ border: 1px solid #f2f2f2;
698
+ border-radius: 2px;
699
+ height: 3rem;
700
+ }