materialize-sass 0.95.2 → 0.95.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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
+ }