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.
Files changed (18) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +59 -59
  3. data/app/assets/javascripts/materialize.js +5692 -5692
  4. data/app/assets/stylesheets/materialize/components/_cards.scss +152 -151
  5. data/app/assets/stylesheets/materialize/components/_form.scss +702 -700
  6. data/app/assets/stylesheets/materialize/components/_global.scss +665 -707
  7. data/app/assets/stylesheets/materialize/components/_grid.scss +118 -119
  8. data/app/assets/stylesheets/materialize/components/_icons-material-design.scss +2247 -2247
  9. data/app/assets/stylesheets/materialize/components/_navbar.scss +154 -154
  10. data/app/assets/stylesheets/materialize/components/_preloader.scss +338 -338
  11. data/app/assets/stylesheets/materialize/components/_slider.scss +92 -92
  12. data/app/assets/stylesheets/materialize/components/_typography.scss +6 -6
  13. data/app/assets/stylesheets/materialize/components/_variables.scss +135 -135
  14. data/app/assets/stylesheets/materialize/components/_waves.scss +168 -168
  15. data/app/assets/stylesheets/materialize/components/date_picker/_default.date.scss +462 -462
  16. data/lib/materialize-sass/version.rb +6 -6
  17. data/materialize-sass.gemspec +27 -27
  18. metadata +2 -2
data/app/assets/stylesheets/materialize/components/_cards.scss CHANGED
@@ -1,151 +1,152 @@
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
- }
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
+ display: none;
144
+
145
+ .card-title {
146
+ cursor: pointer;
147
+ display: block;
148
+ }
149
+
150
+ @include box-sizing(border-box);
151
+ }
152
+ }
data/app/assets/stylesheets/materialize/components/_form.scss CHANGED
@@ -1,700 +1,702 @@
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
- }
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, 4%);
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(rotate(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(rotate(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(rotate(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
+ /***************
364
+ Switch
365
+ ***************/
366
+ .switch,
367
+ .switch * {
368
+ -webkit-user-select: none;
369
+ -moz-user-select: none;
370
+ -ms-user-select: none;
371
+ }
372
+ .switch label {
373
+ cursor: pointer;
374
+ }
375
+ .switch label input[type=checkbox]{
376
+ opacity: 0;
377
+ width: 0;
378
+ height: 0;
379
+ }
380
+ .switch label input[type=checkbox]:checked + .lever {
381
+ background-color: $switch-checked-lever-bg;
382
+ }
383
+ .switch label input[type=checkbox]:checked + .lever:after {
384
+ background-color: $switch-bg-color;
385
+ }
386
+ .switch label .lever {
387
+ content: "";
388
+ display: inline-block;
389
+ position: relative;
390
+ width: 40px;
391
+ height: 15px;
392
+ background-color: $switch-unchecked-lever-bg;
393
+ border-radius: 15px;
394
+ margin-right: 10px;
395
+ transition: background 0.3s ease;
396
+ vertical-align: middle;
397
+ margin: 0px 16px;
398
+ }
399
+ .switch label .lever:after {
400
+ content: "";
401
+ position: absolute;
402
+ display: inline-block;
403
+ width: 21px;
404
+ height: 21px;
405
+ background-color: $switch-unchecked-bg;
406
+ border-radius: 21px;
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 transparentize($switch-bg-color, .9);
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
+ .switch label input[type=checkbox]:checked + .lever:after {
420
+ left: 24px;
421
+ }
422
+
423
+ // Disabled Styles
424
+
425
+ .switch input[type=checkbox][disabled] + .lever{
426
+ cursor: default;
427
+ }
428
+ .switch label input[type=checkbox][disabled] + .lever:after,
429
+ .switch label input[type=checkbox][disabled]:checked + .lever:after {
430
+ background-color: $input-disabled-solid-color;
431
+ }
432
+
433
+
434
+
435
+
436
+ /***************
437
+ Select Field
438
+ ***************/
439
+
440
+ .select-label {
441
+ position: absolute;
442
+ }
443
+
444
+ .select-wrapper {
445
+ position: relative;
446
+ margin-top: 15px;
447
+
448
+ input.select-dropdown {
449
+ position: relative;
450
+ cursor: pointer;
451
+ color: #444;
452
+ background-color: transparent;
453
+ border: none;
454
+ border-bottom: 1px solid $input-border-color;
455
+ outline: none;
456
+ height: 3rem;
457
+ line-height: 3rem;
458
+ width: 100%;
459
+ font-size: 1rem;
460
+ margin: 0 0 15px 0;
461
+ padding: 0;
462
+ display: block;
463
+ }
464
+ .mdi-navigation-arrow-drop-down {
465
+ position: absolute;
466
+ right: 0;
467
+ top: 0;
468
+ font-size: 23px;
469
+ }
470
+ }
471
+
472
+ select { display: none; }
473
+ select.browser-default { display: block; }
474
+
475
+
476
+ // Disabled styles
477
+ select:disabled {
478
+ color: rgba(0,0,0,.3);
479
+ }
480
+ .select-wrapper input.select-dropdown:disabled {
481
+ color: rgba(0,0,0,.3);
482
+ border-bottom: 1px solid rgba(0,0,0,.3);
483
+ }
484
+ .select-wrapper i {
485
+ color: rgba(0,0,0,.3);
486
+ }
487
+ .select-dropdown li.disabled {
488
+ color: rgba(0,0,0,.3);
489
+
490
+ &:hover { background-color: transparent; }
491
+ }
492
+
493
+
494
+ /*********************
495
+ File Input
496
+ **********************/
497
+ .file-field {
498
+ position: relative;
499
+ overflow: hidden;
500
+
501
+ input.file-path {
502
+ margin-left: 100px;
503
+ }
504
+
505
+ .btn {
506
+ position: absolute;
507
+ top: 0;
508
+ height: 3rem;
509
+ line-height: 3rem;
510
+ }
511
+
512
+ span {
513
+ cursor: pointer;
514
+ }
515
+
516
+ input[type=file] {
517
+ position: absolute;
518
+ top: 0;
519
+ right: 0;
520
+ left: 0;
521
+ bottom: 0;
522
+ width: 100%;
523
+ margin: 0;
524
+ padding: 0;
525
+ font-size: 20px;
526
+ cursor: pointer;
527
+ opacity: 0;
528
+ filter: alpha(opacity=0);
529
+ }
530
+ }
531
+
532
+
533
+
534
+ /***************
535
+ Range
536
+ ***************/
537
+
538
+ .range-field {
539
+ position: relative;
540
+ }
541
+
542
+ input[type=range], input[type=range] + .thumb {
543
+ @extend .no-select;
544
+ cursor: pointer;
545
+ }
546
+
547
+ input[type=range] {
548
+ position: relative;
549
+ background-color: transparent;
550
+ border: none;
551
+ outline: none;
552
+ width: 100%;
553
+ margin: 15px 0px;
554
+ padding: 0;
555
+ }
556
+ input[type=range] + .thumb {
557
+ position: absolute;
558
+ border: none;
559
+ height: 0;
560
+ width: 0;
561
+ border-radius: 50%;
562
+ background-color: $radio-fill-color;
563
+ top: 10px;
564
+ margin-left: -6px;
565
+
566
+ @include transform-origin(50% 50%);
567
+ @include transform(rotate(-45deg));
568
+
569
+ .value {
570
+ display: block;
571
+ width: 30px;
572
+ text-align: center;
573
+ color: $radio-fill-color;
574
+ font-size: 0px;
575
+ @include transform(rotate(45deg));
576
+ }
577
+
578
+ &.active {
579
+ border-radius: 50% 50% 50% 0;
580
+
581
+ .value {
582
+ color: #fff;
583
+ margin-left: -1px;
584
+ margin-top: 8px;
585
+ font-size: 10px;
586
+ }
587
+ }
588
+ }
589
+
590
+
591
+ input[type=range]:focus {
592
+ outline: none;
593
+ }
594
+
595
+
596
+
597
+ // WebKit
598
+ input[type=range]{
599
+ -webkit-appearance: none;
600
+ }
601
+
602
+ input[type=range]::-webkit-slider-runnable-track {
603
+ height: 3px;
604
+ background: #c2c0c2;
605
+ border: none;
606
+ }
607
+
608
+ input[type=range]::-webkit-slider-thumb {
609
+ -webkit-appearance: none;
610
+ border: none;
611
+ height: 14px;
612
+ width: 14px;
613
+ border-radius: 50%;
614
+ background-color: $radio-fill-color;
615
+ transform-origin: 50% 50%;
616
+ margin: -5px 0 0 0;
617
+ @include transition(.3s);
618
+ }
619
+
620
+ input[type=range]:focus::-webkit-slider-runnable-track {
621
+ background: #ccc;
622
+ }
623
+
624
+ // FireFox
625
+ input[type=range]{
626
+ /* fix for FF unable to apply focus style bug */
627
+ border: 1px solid white;
628
+
629
+ /*required for proper track sizing in FF*/
630
+ }
631
+
632
+ input[type=range]::-moz-range-track {
633
+ height: 3px;
634
+ background: #ddd;
635
+ border: none;
636
+ }
637
+
638
+ input[type=range]::-moz-range-thumb {
639
+ border: none;
640
+ height: 14px;
641
+ width: 14px;
642
+ border-radius: 50%;
643
+ background: $radio-fill-color;
644
+ margin-top: -5px;
645
+ }
646
+
647
+ /*hide the outline behind the border*/
648
+ input[type=range]:-moz-focusring{
649
+ outline: 1px solid white;
650
+ outline-offset: -1px;
651
+ }
652
+
653
+ input[type=range]:focus::-moz-range-track {
654
+ background: #ccc;
655
+ }
656
+
657
+ // IE 10+
658
+ input[type=range]::-ms-track {
659
+ height: 3px;
660
+
661
+ /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
662
+ background: transparent;
663
+
664
+ /*leave room for the larger thumb to overflow with a transparent border */
665
+ border-color: transparent;
666
+ border-width: 6px 0;
667
+
668
+ /*remove default tick marks*/
669
+ color: transparent;
670
+ }
671
+ input[type=range]::-ms-fill-lower {
672
+ background: #777;
673
+ }
674
+ input[type=range]::-ms-fill-upper {
675
+ background: #ddd;
676
+ }
677
+ input[type=range]::-ms-thumb {
678
+ border: none;
679
+ height: 14px;
680
+ width: 14px;
681
+ border-radius: 50%;
682
+ background: $radio-fill-color;
683
+ }
684
+ input[type=range]:focus::-ms-fill-lower {
685
+ background: #888;
686
+ }
687
+ input[type=range]:focus::-ms-fill-upper {
688
+ background: #ccc;
689
+ }
690
+
691
+ /***************************
692
+ Text Inputs + Textarea
693
+ ****************************/
694
+
695
+ select {
696
+ background-color: #fffafa;
697
+ width: 100%;
698
+ padding: 5px;
699
+ border: 1px solid #f2f2f2;
700
+ border-radius: 2px;
701
+ height: 3rem;
702
+ }