materialize-sass 0.97.5 → 0.97.6

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 (52) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/materialize.js +230 -141
  3. data/app/assets/javascripts/materialize.min.js +6 -6
  4. data/app/assets/javascripts/materialize/character_counter.js +20 -7
  5. data/app/assets/javascripts/materialize/collapsible.js +1 -1
  6. data/app/assets/javascripts/materialize/date_picker/picker.js +5 -5
  7. data/app/assets/javascripts/materialize/dropdown.js +12 -3
  8. data/app/assets/javascripts/materialize/extras/nouislider.js +1 -1
  9. data/app/assets/javascripts/materialize/extras/nouislider.min.js +0 -5
  10. data/app/assets/javascripts/materialize/forms.js +6 -5
  11. data/app/assets/javascripts/materialize/init.js +26 -9
  12. data/app/assets/javascripts/materialize/initial.js +2 -2
  13. data/app/assets/javascripts/materialize/leanModal.js +19 -6
  14. data/app/assets/javascripts/materialize/materialbox.js +9 -9
  15. data/app/assets/javascripts/materialize/pushpin.js +48 -53
  16. data/app/assets/javascripts/materialize/scrollFire.js +7 -3
  17. data/app/assets/javascripts/materialize/scrollspy.js +6 -6
  18. data/app/assets/javascripts/materialize/sideNav.js +66 -37
  19. data/app/assets/javascripts/materialize/slider.js +2 -2
  20. data/app/assets/javascripts/materialize/tabs.js +12 -6
  21. data/app/assets/stylesheets/materialize.scss +1 -1
  22. data/app/assets/stylesheets/materialize/components/_buttons.scss +49 -33
  23. data/app/assets/stylesheets/materialize/components/_cards.scss +9 -5
  24. data/app/assets/stylesheets/materialize/components/_color.scss +21 -21
  25. data/app/assets/stylesheets/materialize/components/_global.scss +27 -11
  26. data/app/assets/stylesheets/materialize/components/_icons-material-design.scss +0 -3258
  27. data/app/assets/stylesheets/materialize/components/_materialbox.scss +1 -1
  28. data/app/assets/stylesheets/materialize/components/_navbar.scss +1 -1
  29. data/app/assets/stylesheets/materialize/components/_normalize.scss +9 -12
  30. data/app/assets/stylesheets/materialize/components/_sideNav.scss +16 -11
  31. data/app/assets/stylesheets/materialize/components/_tooltip.scss +1 -0
  32. data/app/assets/stylesheets/materialize/components/_variables.scss +181 -34
  33. data/app/assets/stylesheets/materialize/components/date_picker/_default.date.scss +1 -1
  34. data/app/assets/stylesheets/materialize/components/date_picker/_default.scss +2 -2
  35. data/app/assets/stylesheets/materialize/components/forms/_checkboxes.scss +220 -0
  36. data/app/assets/stylesheets/materialize/components/forms/_file-input.scss +38 -0
  37. data/app/assets/stylesheets/materialize/components/forms/_forms.scss +22 -0
  38. data/app/assets/stylesheets/materialize/components/forms/_input-fields.scss +254 -0
  39. data/app/assets/stylesheets/materialize/components/forms/_radio-buttons.scss +119 -0
  40. data/app/assets/stylesheets/materialize/components/forms/_range.scss +159 -0
  41. data/app/assets/stylesheets/materialize/components/forms/_select.scss +116 -0
  42. data/app/assets/stylesheets/materialize/components/forms/_switches.scss +78 -0
  43. data/app/assets/stylesheets/materialize/extras/nouislider.css +2 -1
  44. data/lib/materialize-sass/version.rb +1 -1
  45. metadata +10 -9
  46. data/app/assets/fonts/material-design-icons/LICENSE.txt +0 -428
  47. data/app/assets/fonts/material-design-icons/Material-Design-Icons.eot +0 -0
  48. data/app/assets/fonts/material-design-icons/Material-Design-Icons.svg +0 -769
  49. data/app/assets/fonts/material-design-icons/Material-Design-Icons.ttf +0 -0
  50. data/app/assets/fonts/material-design-icons/Material-Design-Icons.woff +0 -0
  51. data/app/assets/fonts/material-design-icons/Material-Design-Icons.woff2 +0 -0
  52. data/app/assets/stylesheets/materialize/components/_form.scss +0 -954
@@ -1,954 +0,0 @@
1
- /* Remove Focus Boxes */
2
- select:focus {
3
- outline: 1px solid lighten($secondary-color, 47%);
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
- // Style Placeholders
20
- ::-webkit-input-placeholder {
21
- color: lighten($input-border-color, 20%);
22
- }
23
-
24
- :-moz-placeholder { /* Firefox 18- */
25
- color: lighten($input-border-color, 20%);
26
- }
27
-
28
- ::-moz-placeholder { /* Firefox 19+ */
29
- color: lighten($input-border-color, 20%);
30
- }
31
-
32
- :-ms-input-placeholder {
33
- color: lighten($input-border-color, 20%);
34
- }
35
-
36
- // Text inputs
37
- input:not([type]),
38
- input[type=text],
39
- input[type=password],
40
- input[type=email],
41
- input[type=url],
42
- input[type=time],
43
- input[type=date],
44
- input[type=datetime-local],
45
- input[type=tel],
46
- input[type=number],
47
- input[type=search],
48
- textarea.materialize-textarea {
49
-
50
- // General Styles
51
- background-color: transparent;
52
- border: none;
53
- border-bottom: 1px solid $input-border-color;
54
- border-radius: 0;
55
- outline: none;
56
- height: 3rem;
57
- width: 100%;
58
- font-size: 1rem;
59
- margin: 0 0 15px 0;
60
- padding: 0;
61
- box-shadow: none;
62
- box-sizing: content-box;
63
- transition: all .3s;
64
-
65
-
66
- // Disabled input style
67
- &:disabled, &[readonly="readonly"] {
68
- color: $input-disabled-color;
69
- border-bottom: 1px dotted $input-disabled-color;
70
- }
71
- // Disabled label style
72
- &:disabled+label, &[readonly="readonly"]+label {
73
- color: $input-disabled-color;
74
- }
75
- // Focused input style
76
- &:focus:not([readonly]) {
77
- border-bottom: 1px solid $input-focus-color;
78
- box-shadow: 0 1px 0 0 $input-focus-color;
79
- }
80
- // Focused label style
81
- &:focus:not([readonly])+label {
82
- color: $input-focus-color;
83
- }
84
- // Valid Input Style
85
- &.valid,
86
- &:focus.valid {
87
- border-bottom: 1px solid $input-success-color;
88
- box-shadow: 0 1px 0 0 $input-success-color;
89
- }
90
- // Custom Success Message
91
- &.valid + label:after,
92
- &:focus.valid + label:after {
93
- content: attr(data-success);
94
- color: $input-success-color;
95
- opacity: 1;
96
- }
97
- // Invalid Input Style
98
- &.invalid,
99
- &:focus.invalid {
100
- border-bottom: 1px solid $input-error-color;
101
- box-shadow: 0 1px 0 0 $input-error-color;
102
- }
103
- // Custom Error message
104
- &.invalid + label:after,
105
- &:focus.invalid + label:after {
106
- content: attr(data-error);
107
- color: $input-error-color;
108
- opacity: 1;
109
- }
110
- // Full width label when using validate for error messages
111
- &.validate + label {
112
- width: 100%;
113
- z-index: -1;
114
- }
115
-
116
- // Form Message Shared Styles
117
- & + label:after {
118
- display: block;
119
- content: "";
120
- position: absolute;
121
- top: 65px;
122
- opacity: 0;
123
- transition: .2s opacity ease-out, .2s color ease-out;
124
- }
125
- }
126
-
127
- // Styling for input field wrapper
128
- .input-field {
129
- position: relative;
130
- margin-top: 1rem;
131
-
132
- label {
133
- color: $input-border-color;
134
- position: absolute;
135
- top: 0.8rem;
136
- left: $gutter-width / 2;
137
- font-size: 1rem;
138
- cursor: text;
139
- transition: .2s ease-out;
140
- }
141
- label.active {
142
- font-size: $label-font-size;
143
- transform: translateY(-140%);
144
- }
145
-
146
- // Prefix Icons
147
- .prefix {
148
- position: absolute;
149
- width: 3rem;
150
- font-size: 2rem;
151
- transition: color .2s;
152
-
153
- &.active { color: $input-focus-color; }
154
- }
155
- .prefix ~ input,
156
- .prefix ~ textarea {
157
- margin-left: 3rem;
158
- width: 92%;
159
- width: calc(100% - 3rem);
160
- }
161
- .prefix ~ textarea { padding-top: .8rem; }
162
- .prefix ~ label { margin-left: 3rem; }
163
-
164
- @media #{$medium-and-down} {
165
- .prefix ~ input {
166
- width: 86%;
167
- width: calc(100% - 3rem);
168
- }
169
- }
170
- @media #{$small-and-down} {
171
- .prefix ~ input {
172
- width: 80%;
173
- width: calc(100% - 3rem);
174
- }
175
- }
176
- }
177
-
178
- // Search Field
179
- .input-field input[type=search] {
180
- display: block;
181
- line-height: inherit;
182
- padding-left: 4rem;
183
- width: calc(100% - 4rem);
184
-
185
- &:focus {
186
- background-color: $input-bg-color;
187
- border: 0;
188
- box-shadow: none;
189
- color: #444;
190
-
191
- & + label i,
192
- & ~ .mdi-navigation-close,
193
- & ~ .material-icons {
194
- color: #444;
195
- }
196
- }
197
-
198
- & + label {
199
- left: 1rem;
200
- }
201
-
202
- & ~ .mdi-navigation-close,
203
- & ~ .material-icons {
204
- position: absolute;
205
- top: 0;
206
- right: 1rem;
207
- color: transparent;
208
- cursor: pointer;
209
- font-size: 2rem;
210
- transition: .3s color;
211
- }
212
- }
213
-
214
-
215
- // Default textarea
216
- textarea {
217
- width: 100%;
218
- height: 3rem;
219
- background-color: transparent;
220
-
221
- &.materialize-textarea {
222
- overflow-y: hidden; /* prevents scroll bar flash */
223
- padding: 1.6rem 0; /* prevents text jump on Enter keypress */
224
- resize: none;
225
- min-height: 3rem;
226
- }
227
- }
228
-
229
- // For textarea autoresize
230
- .hiddendiv {
231
- display: none;
232
- white-space: pre-wrap;
233
- word-wrap: break-word;
234
- overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
235
- padding-top: 1.2rem; /* prevents text jump on Enter keypress */
236
- }
237
-
238
-
239
- /***************
240
- Radio Buttons
241
- ***************/
242
-
243
- /* Remove default Radio Buttons */
244
- [type="radio"]:not(:checked),
245
- [type="radio"]:checked {
246
- position: absolute;
247
- left: -9999px;
248
- opacity: 0;
249
- }
250
-
251
- [type="radio"]:not(:checked) + label,
252
- [type="radio"]:checked + label {
253
- position: relative;
254
- padding-left: 35px;
255
- cursor: pointer;
256
- display: inline-block;
257
- height: 25px;
258
- line-height: 25px;
259
- font-size: 1rem;
260
- transition: .28s ease;
261
-
262
- -khtml-user-select: none; /* webkit (konqueror) browsers */
263
- user-select: none;
264
- }
265
-
266
- [type="radio"] + label:before,
267
- [type="radio"] + label:after {
268
- content: '';
269
- position: absolute;
270
- left: 0;
271
- top: 0;
272
- margin: 4px;
273
- width: 16px;
274
- height: 16px;
275
- z-index: 0;
276
- transition: .28s ease;
277
- }
278
-
279
- /* Unchecked styles */
280
- [type="radio"]:not(:checked) + label:before {
281
- border-radius: 50%;
282
- border: 2px solid $radio-empty-color;
283
- }
284
- [type="radio"]:not(:checked) + label:after {
285
- border-radius: 50%;
286
- border: 2px solid $radio-empty-color;
287
- z-index: -1;
288
-
289
- transform: scale(0);
290
- }
291
-
292
- /* Checked styles */
293
- [type="radio"]:checked + label:before {
294
- border-radius: 50%;
295
- border: 2px solid transparent;
296
- }
297
- [type="radio"]:checked + label:after {
298
- border-radius: 50%;
299
- border: 2px solid $radio-fill-color;
300
- background-color: $radio-fill-color;
301
- z-index: 0;
302
- transform: scale(1.02);
303
- }
304
-
305
- /* Radio With gap */
306
- [type="radio"].with-gap:checked + label:before {
307
- border-radius: 50%;
308
- border: 2px solid $radio-fill-color;
309
- }
310
- [type="radio"].with-gap:checked + label:after {
311
- border-radius: 50%;
312
- border: 2px solid $radio-fill-color;
313
- background-color: $radio-fill-color;
314
- z-index: 0;
315
- transform: scale(.5);
316
- }
317
-
318
- /* Focused styles */
319
- [type="radio"].tabbed:focus + label:before {
320
- box-shadow: 0px 0px 0px 10px rgba(0,0,0,.1);
321
- }
322
-
323
- /* Disabled Radio With gap */
324
- [type="radio"].with-gap:disabled:checked + label:before {
325
- border: 2px solid $input-disabled-color;
326
- }
327
- [type="radio"].with-gap:disabled:checked + label:after {
328
- border: none;
329
- background-color: $input-disabled-color;
330
- }
331
-
332
- /* Disabled style */
333
- [type="radio"]:disabled:not(:checked) + label:before,
334
- [type="radio"]:disabled:checked + label:before {
335
- background-color: transparent;
336
- border-color: $input-disabled-color;
337
- }
338
- [type="radio"]:disabled + label {
339
- color: $input-disabled-color;
340
- }
341
- [type="radio"]:disabled:not(:checked) + label:before {
342
- border-color: $input-disabled-color;
343
- }
344
- [type="radio"]:disabled:checked + label:after {
345
- background-color: $input-disabled-color;
346
- border-color: $input-disabled-solid-color;
347
- }
348
-
349
- /***************
350
- Checkboxes
351
- ***************/
352
-
353
- /* CUSTOM CSS CHECKBOXES */
354
- form p {
355
- margin-bottom: 10px;
356
- text-align: left;
357
- }
358
- form p:last-child {
359
- margin-bottom: 0;
360
- }
361
-
362
- /* Remove default checkbox */
363
- [type="checkbox"]:not(:checked),
364
- [type="checkbox"]:checked {
365
- position: absolute;
366
- left: -9999px;
367
- opacity: 0;
368
- }
369
-
370
- // Checkbox Styles
371
- [type="checkbox"] {
372
-
373
- // Text Label Style
374
- + label {
375
- position: relative;
376
- padding-left: 35px;
377
- cursor: pointer;
378
- display: inline-block;
379
- height: 25px;
380
- line-height: 25px;
381
- font-size: 1rem;
382
-
383
- -webkit-user-select: none; /* webkit (safari, chrome) browsers */
384
- -moz-user-select: none; /* mozilla browsers */
385
- -khtml-user-select: none; /* webkit (konqueror) browsers */
386
- -ms-user-select: none; /* IE10+ */
387
- }
388
-
389
- /* checkbox aspect */
390
- + label:before,
391
- &:not(.filled-in) + label:after {
392
- content: '';
393
- position: absolute;
394
- top: 0;
395
- left: 0;
396
- width: 18px;
397
- height: 18px;
398
- z-index: 0;
399
- border: 2px solid $radio-empty-color;
400
- border-radius: 1px;
401
- margin-top: 2px;
402
- transition: .2s;
403
- }
404
- &:not(.filled-in) + label:after {
405
- border: 0;
406
- transform: scale(0);
407
- }
408
-
409
- &:not(:checked):disabled + label:before {
410
- border: none;
411
- background-color: $input-disabled-color;
412
- }
413
-
414
- // Focused styles
415
- &.tabbed:focus + label:after {
416
- transform: scale(1);
417
- border: 0;
418
- border-radius: 50%;
419
- box-shadow: 0px 0px 0px 10px rgba(0,0,0,.1);
420
- background-color: rgba(0,0,0,.1);
421
- }
422
- }
423
-
424
- [type="checkbox"]:checked {
425
- + label:before {
426
- top: -4px;
427
- left: -5px;
428
- width: 12px; height: 22px;
429
- border-top: 2px solid transparent;
430
- border-left: 2px solid transparent;
431
- border-right: 2px solid $radio-fill-color;
432
- border-bottom: 2px solid $radio-fill-color;
433
- transform: rotate(40deg);
434
- backface-visibility: hidden;
435
- transform-origin: 100% 100%;
436
- }
437
-
438
- &:disabled + label:before {
439
- border-right: 2px solid $input-disabled-color;
440
- border-bottom: 2px solid $input-disabled-color;
441
- }
442
- }
443
-
444
- /* Indeterminate checkbox */
445
- [type="checkbox"]:indeterminate {
446
- +label:before {
447
- top: -11px;
448
- left: -12px;
449
- width: 10px; height: 22px;
450
- border-top: none;
451
- border-left: none;
452
- border-right: 2px solid $radio-fill-color;
453
- border-bottom: none;
454
- transform: rotate(90deg);
455
- backface-visibility: hidden;
456
- transform-origin: 100% 100%;
457
- }
458
-
459
- // Disabled indeterminate
460
- &:disabled + label:before {
461
- border-right: 2px solid $input-disabled-color;
462
- background-color: transparent;
463
- }
464
- }
465
-
466
- // Filled in Style
467
- [type="checkbox"].filled-in {
468
- // General
469
- + label:after {
470
- border-radius: 2px;
471
- }
472
- + label:before,
473
- + label:after {
474
- content: '';
475
- left: 0;
476
- position: absolute;
477
- /* .1s delay is for check animation */
478
- transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s;
479
- z-index: 1;
480
- }
481
-
482
- // Unchecked style
483
- &:not(:checked) + label:before {
484
- width: 0;
485
- height: 0;
486
- border: 3px solid transparent;
487
- left: 6px;
488
- top: 10px;
489
-
490
- -webkit-transform: rotateZ(37deg);
491
- transform: rotateZ(37deg);
492
- -webkit-transform-origin: 20% 40%;
493
- transform-origin: 100% 100%;
494
- }
495
-
496
- &:not(:checked) + label:after {
497
- height: 20px;
498
- width: 20px;
499
- background-color: transparent;
500
- border: 2px solid $radio-empty-color;
501
- top: 0px;
502
- z-index: 0;
503
- }
504
-
505
- // Checked style
506
- &:checked {
507
- + label:before {
508
- top: 0;
509
- left: 1px;
510
- width: 8px;
511
- height: 13px;
512
- border-top: 2px solid transparent;
513
- border-left: 2px solid transparent;
514
- border-right: 2px solid $input-bg-color;
515
- border-bottom: 2px solid $input-bg-color;
516
- -webkit-transform: rotateZ(37deg);
517
- transform: rotateZ(37deg);
518
-
519
- -webkit-transform-origin: 100% 100%;
520
- transform-origin: 100% 100%;
521
- }
522
-
523
- + label:after {
524
- top: 0px;
525
- width: 20px;
526
- height: 20px;
527
- border: 2px solid $secondary-color;
528
- background-color: $secondary-color;
529
- z-index: 0;
530
- }
531
- }
532
-
533
- // Focused styles
534
- &.tabbed:focus + label:after {
535
- border-radius: 2px;
536
- border-color: $radio-empty-color;
537
- background-color: rgba(0,0,0,.1);
538
- }
539
- &.tabbed:checked:focus + label:after {
540
- border-radius: 2px;
541
- background-color: $secondary-color;
542
- border-color: $secondary-color;
543
- }
544
-
545
- // Disabled style
546
- &:disabled:not(:checked) + label:before {
547
- background-color: transparent;
548
- border: 2px solid transparent;
549
- }
550
-
551
- &:disabled:not(:checked) + label:after {
552
- border-color: transparent;
553
- background-color: $input-disabled-solid-color;
554
- }
555
-
556
- &:disabled:checked + label:before {
557
- background-color: transparent;
558
- }
559
-
560
- &:disabled:checked + label:after {
561
- background-color: $input-disabled-solid-color;
562
- border-color: $input-disabled-solid-color;
563
- }
564
- }
565
-
566
- /***************
567
- Switch
568
- ***************/
569
- .switch,
570
- .switch * {
571
- -webkit-user-select: none;
572
- -moz-user-select: none;
573
- -khtml-user-select: none;
574
- -ms-user-select: none;
575
- }
576
-
577
- .switch label {
578
- cursor: pointer;
579
- }
580
-
581
- .switch label input[type=checkbox]{
582
- opacity: 0;
583
- width: 0;
584
- height: 0;
585
- }
586
-
587
- .switch label input[type=checkbox]:checked + .lever {
588
- background-color: $switch-checked-lever-bg;
589
- }
590
-
591
- .switch label input[type=checkbox]:checked + .lever:after {
592
- background-color: $switch-bg-color;
593
- }
594
-
595
- .switch label .lever {
596
- content: "";
597
- display: inline-block;
598
- position: relative;
599
- width: 40px;
600
- height: 15px;
601
- background-color: $switch-unchecked-lever-bg;
602
- border-radius: 15px;
603
- margin-right: 10px;
604
- transition: background 0.3s ease;
605
- vertical-align: middle;
606
- margin: 0 16px;
607
- }
608
-
609
- .switch label .lever:after {
610
- content: "";
611
- position: absolute;
612
- display: inline-block;
613
- width: 21px;
614
- height: 21px;
615
- background-color: $switch-unchecked-bg;
616
- border-radius: 21px;
617
- box-shadow: 0 1px 3px 1px rgba(0,0,0,.4);
618
- left: -5px;
619
- top: -3px;
620
- transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;
621
- }
622
-
623
- // Switch active style
624
- input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after {
625
- box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px transparentize($switch-bg-color, .9);
626
- }
627
-
628
- input[type=checkbox]:not(:disabled) ~ .lever:active:after {
629
- box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px rgba(0, 0, 0, .08);
630
- }
631
-
632
- .switch label input[type=checkbox]:checked + .lever:after {
633
- left: 24px;
634
- }
635
-
636
- // Disabled Styles
637
- .switch input[type=checkbox][disabled] + .lever{
638
- cursor: default;
639
- }
640
- .switch label input[type=checkbox][disabled] + .lever:after,
641
- .switch label input[type=checkbox][disabled]:checked + .lever:after {
642
- background-color: $input-disabled-solid-color;
643
- }
644
-
645
- /***************
646
- Select Field
647
- ***************/
648
- .select-label {
649
- position: absolute;
650
- }
651
-
652
- .select-wrapper {
653
- position: relative;
654
-
655
- input.select-dropdown {
656
- position: relative;
657
- cursor: pointer;
658
- // color: #444;
659
- background-color: transparent;
660
- border: none;
661
- border-bottom: 1px solid $input-border-color;
662
- outline: none;
663
- height: 3rem;
664
- line-height: 3rem;
665
- width: 100%;
666
- font-size: 1rem;
667
- margin: 0 0 15px 0;
668
- padding: 0;
669
- display: block;
670
- }
671
-
672
- span.caret {
673
- color: initial;
674
- position: absolute;
675
- right: 0;
676
- top: 16px;
677
- font-size: 10px;
678
- &.disabled {
679
- color: $input-disabled-color;
680
- }
681
- }
682
-
683
- & + label {
684
- position: absolute;
685
- top: -14px;
686
- font-size: $label-font-size;
687
- }
688
- }
689
-
690
- select { display: none; }
691
- select.browser-default { display: block; }
692
-
693
- // Disabled styles
694
- select:disabled {
695
- color: rgba(0,0,0,.3);
696
- }
697
-
698
- .select-wrapper input.select-dropdown:disabled {
699
- color: rgba(0,0,0,.3);
700
- cursor: default;
701
- -webkit-user-select: none; /* webkit (safari, chrome) browsers */
702
- -moz-user-select: none; /* mozilla browsers */
703
- -ms-user-select: none; /* IE10+ */
704
- border-bottom: 1px solid rgba(0,0,0,.3);
705
- }
706
-
707
- .select-wrapper i {
708
- color: rgba(0,0,0,.3);
709
- }
710
-
711
- .select-dropdown li.disabled,
712
- .select-dropdown li.disabled > span,
713
- .select-dropdown li.optgroup {
714
- color: rgba(0,0,0,.3);
715
- background-color: transparent;
716
- }
717
-
718
- // Icons
719
- .select-dropdown li {
720
- img {
721
- height: $dropdown-item-height - 10;
722
- width: $dropdown-item-height - 10;
723
- margin: 5px 15px;
724
- float: right;
725
- }
726
- }
727
-
728
- // Optgroup styles
729
- .select-dropdown li.optgroup {
730
- border-top: 1px solid $dropdown-hover-bg-color;
731
-
732
- &.selected > span {
733
- color: rgba(0, 0, 0, .7);
734
- }
735
-
736
- & > span {
737
- color: rgba(0, 0, 0, .4);
738
- }
739
-
740
- & ~ li:not(.optgroup) {
741
- padding-left: 1rem;
742
- }
743
- }
744
-
745
- /*********************
746
- File Input
747
- **********************/
748
- .file-field {
749
- position: relative;
750
-
751
- .file-path-wrapper {
752
- overflow: hidden;
753
- padding-left: 10px;
754
- }
755
-
756
- input.file-path { width: 100%; }
757
-
758
- .btn {
759
- float: left;
760
- height: 3rem;
761
- line-height: 3rem;
762
- }
763
-
764
- span {
765
- cursor: pointer;
766
- }
767
-
768
- input[type=file] {
769
- position: absolute;
770
- top: 0;
771
- right: 0;
772
- left: 0;
773
- bottom: 0;
774
- width: 100%;
775
- margin: 0;
776
- padding: 0;
777
- font-size: 20px;
778
- cursor: pointer;
779
- opacity: 0;
780
- filter: alpha(opacity=0);
781
- }
782
- }
783
-
784
- /***************
785
- Range
786
- ***************/
787
-
788
- .range-field {
789
- position: relative;
790
- }
791
-
792
- input[type=range], input[type=range] + .thumb {
793
- @extend .no-select;
794
- cursor: pointer;
795
- }
796
-
797
- input[type=range] {
798
- position: relative;
799
- background-color: transparent;
800
- border: none;
801
- outline: none;
802
- width: 100%;
803
- margin: 15px 0px;
804
- padding: 0;
805
- }
806
- input[type=range] + .thumb {
807
- position: absolute;
808
- border: none;
809
- height: 0;
810
- width: 0;
811
- border-radius: 50%;
812
- background-color: $radio-fill-color;
813
- top: 10px;
814
- margin-left: -6px;
815
-
816
- transform-origin: 50% 50%;
817
- transform: rotate(-45deg);
818
-
819
- .value {
820
- display: block;
821
- width: 30px;
822
- text-align: center;
823
- color: $radio-fill-color;
824
- font-size: 0;
825
- transform: rotate(45deg);
826
- }
827
-
828
- &.active {
829
- border-radius: 50% 50% 50% 0;
830
-
831
- .value {
832
- color: $input-bg-color;
833
- margin-left: -1px;
834
- margin-top: 8px;
835
- font-size: 10px;
836
- }
837
- }
838
- }
839
-
840
-
841
- input[type=range]:focus {
842
- outline: none;
843
- }
844
-
845
- // WebKit
846
- input[type=range]{
847
- -webkit-appearance: none;
848
- }
849
-
850
- input[type=range]::-webkit-slider-runnable-track {
851
- height: 3px;
852
- background: #c2c0c2;
853
- border: none;
854
- }
855
-
856
- input[type=range]::-webkit-slider-thumb {
857
- -webkit-appearance: none;
858
- border: none;
859
- height: 14px;
860
- width: 14px;
861
- border-radius: 50%;
862
- background-color: $radio-fill-color;
863
- transform-origin: 50% 50%;
864
- margin: -5px 0 0 0;
865
- transition: .3s;
866
- }
867
-
868
- input[type=range]:focus::-webkit-slider-runnable-track {
869
- background: #ccc;
870
- }
871
-
872
- // FireFox
873
- input[type=range]{
874
- /* fix for FF unable to apply focus style bug */
875
- border: 1px solid white;
876
-
877
- /*required for proper track sizing in FF*/
878
- }
879
-
880
- input[type=range]::-moz-range-track {
881
- height: 3px;
882
- background: #ddd;
883
- border: none;
884
- }
885
-
886
- input[type=range]::-moz-range-thumb {
887
- border: none;
888
- height: 14px;
889
- width: 14px;
890
- border-radius: 50%;
891
- background: $radio-fill-color;
892
- margin-top: -5px;
893
- }
894
-
895
- /*hide the outline behind the border*/
896
- input[type=range]:-moz-focusring{
897
- outline: 1px solid white;
898
- outline-offset: -1px;
899
- }
900
-
901
- input[type=range]:focus::-moz-range-track {
902
- background: #ccc;
903
- }
904
-
905
- // IE 10+
906
- input[type=range]::-ms-track {
907
- height: 3px;
908
-
909
- /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
910
- background: transparent;
911
-
912
- /*leave room for the larger thumb to overflow with a transparent border */
913
- border-color: transparent;
914
- border-width: 6px 0;
915
-
916
- /*remove default tick marks*/
917
- color: transparent;
918
- }
919
-
920
- input[type=range]::-ms-fill-lower {
921
- background: #777;
922
- }
923
-
924
- input[type=range]::-ms-fill-upper {
925
- background: #ddd;
926
- }
927
-
928
- input[type=range]::-ms-thumb {
929
- border: none;
930
- height: 14px;
931
- width: 14px;
932
- border-radius: 50%;
933
- background: $radio-fill-color;
934
- }
935
-
936
- input[type=range]:focus::-ms-fill-lower {
937
- background: #888;
938
- }
939
-
940
- input[type=range]:focus::-ms-fill-upper {
941
- background: #ccc;
942
- }
943
-
944
- /***************************
945
- Text Inputs + Textarea
946
- ****************************/
947
- select {
948
- background-color: rgba(255, 255, 255, 0.90);
949
- width: 100%;
950
- padding: 5px;
951
- border: 1px solid #f2f2f2;
952
- border-radius: 2px;
953
- height: 3rem;
954
- }