materialize-sass 0.95.3.3 → 0.95.3.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (51) hide show
  1. checksums.yaml +7 -0
  2. data/README.md +1 -1
  3. data/app/assets/fonts/roboto/Roboto-Bold.woff +0 -0
  4. data/app/assets/fonts/roboto/Roboto-Bold.woff2 +0 -0
  5. data/app/assets/fonts/roboto/Roboto-Light.woff +0 -0
  6. data/app/assets/fonts/roboto/Roboto-Light.woff2 +0 -0
  7. data/app/assets/fonts/roboto/Roboto-Medium.woff +0 -0
  8. data/app/assets/fonts/roboto/Roboto-Medium.woff2 +0 -0
  9. data/app/assets/fonts/roboto/Roboto-Regular.woff +0 -0
  10. data/app/assets/fonts/roboto/Roboto-Regular.woff2 +0 -0
  11. data/app/assets/fonts/roboto/Roboto-Thin.woff +0 -0
  12. data/app/assets/fonts/roboto/Roboto-Thin.woff2 +0 -0
  13. data/app/assets/javascripts/materialize-sprockets.js +2 -1
  14. data/app/assets/javascripts/materialize/buttons.js +4 -4
  15. data/app/assets/javascripts/materialize/collapsible.js +11 -14
  16. data/app/assets/javascripts/materialize/dropdown.js +5 -1
  17. data/app/assets/javascripts/materialize/forms.js +157 -151
  18. data/app/assets/javascripts/materialize/global.js +18 -0
  19. data/app/assets/javascripts/materialize/init.js +5 -1
  20. data/app/assets/javascripts/materialize/leanModal.js +0 -1
  21. data/app/assets/javascripts/materialize/pushpin.js +1 -14
  22. data/app/assets/javascripts/materialize/scrollFire.js +60 -21
  23. data/app/assets/javascripts/materialize/scrollspy.js +4 -7
  24. data/app/assets/javascripts/materialize/sideNav.js +58 -21
  25. data/app/assets/javascripts/materialize/slider.js +1 -1
  26. data/app/assets/javascripts/materialize/toasts.js +90 -73
  27. data/app/assets/javascripts/materialize/transitions.js +57 -61
  28. data/app/assets/javascripts/materialize/waves.js +6 -3
  29. data/app/assets/stylesheets/materialize/components/_buttons.scss +3 -3
  30. data/app/assets/stylesheets/materialize/components/_cards.scss +5 -7
  31. data/app/assets/stylesheets/materialize/components/_collapsible.scss +3 -11
  32. data/app/assets/stylesheets/materialize/components/_dropdown.scss +1 -1
  33. data/app/assets/stylesheets/materialize/components/_form.scss +178 -162
  34. data/app/assets/stylesheets/materialize/components/_global.scss +11 -10
  35. data/app/assets/stylesheets/materialize/components/_icons-material-design.scss +766 -2230
  36. data/app/assets/stylesheets/materialize/components/_materialbox.scss +2 -3
  37. data/app/assets/stylesheets/materialize/components/_modal.scss +3 -3
  38. data/app/assets/stylesheets/materialize/components/_navbar.scss +4 -7
  39. data/app/assets/stylesheets/materialize/components/_prefixer.scss +0 -40
  40. data/app/assets/stylesheets/materialize/components/_preloader.scss +2 -4
  41. data/app/assets/stylesheets/materialize/components/_sideNav.scss +9 -9
  42. data/app/assets/stylesheets/materialize/components/_slider.scss +6 -6
  43. data/app/assets/stylesheets/materialize/components/_table_of_contents.scss +1 -1
  44. data/app/assets/stylesheets/materialize/components/_tabs.scss +2 -2
  45. data/app/assets/stylesheets/materialize/components/_toast.scss +4 -5
  46. data/app/assets/stylesheets/materialize/components/_tooltip.scss +2 -2
  47. data/app/assets/stylesheets/materialize/components/date_picker/_default.date.scss +20 -47
  48. data/lib/materialize-sass.rb +75 -6
  49. data/lib/materialize-sass/engine.rb +13 -0
  50. data/lib/materialize-sass/version.rb +1 -1
  51. metadata +9 -15
@@ -1,35 +1,64 @@
1
1
  (function ($) {
2
- $(document).ready(function() {
3
-
4
-
5
- // Horizontal staggered list
6
- showStaggeredList = function(selector) {
7
- var time = 0;
8
- $(selector).find('li').velocity(
9
- { translateX: "-100px"},
10
- { duration: 0 });
11
-
12
- $(selector).find('li').each(function() {
13
- $(this).velocity(
14
- { opacity: "1", translateX: "0"},
15
- { duration: 800, delay: time, easing: [60, 10] });
16
- time += 120;
2
+ // Image transition function
3
+ Materialize.fadeInImage = function(selector){
4
+ var element = $(selector);
5
+ element.css({opacity: 0});
6
+ $(element).velocity({opacity: 1}, {
7
+ duration: 650,
8
+ queue: false,
9
+ easing: 'easeOutSine'
17
10
  });
18
- }
19
-
20
- // Hardcoded .staggered-list scrollFire
21
- var staggeredListOptions = [];
22
- $('ul.staggered-list').each(function (i) {
23
-
24
- var label = 'scrollFire-' + i;
25
- $(this).addClass(label);
26
- staggeredListOptions.push(
27
- {selector: 'ul.staggered-list.' + label,
28
- offset: 200,
29
- callback: 'showStaggeredList("ul.staggered-list.' + label + '")'});
11
+ $(element).velocity({opacity: 1}, {
12
+ duration: 1300,
13
+ queue: false,
14
+ easing: 'swing',
15
+ step: function(now, fx) {
16
+ fx.start = 100;
17
+ var grayscale_setting = now/100;
18
+ var brightness_setting = 150 - (100 - now)/1.75;
19
+
20
+ if (brightness_setting < 100) {
21
+ brightness_setting = 100;
22
+ }
23
+ if (now >= 0) {
24
+ $(this).css({
25
+ "-webkit-filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)",
26
+ "filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)"
27
+ });
28
+ }
29
+ }
30
+ });
31
+ };
32
+
33
+ // Horizontal staggered list
34
+ Materialize.showStaggeredList = function(selector) {
35
+ var time = 0;
36
+ $(selector).find('li').velocity(
37
+ { translateX: "-100px"},
38
+ { duration: 0 });
39
+
40
+ $(selector).find('li').each(function() {
41
+ $(this).velocity(
42
+ { opacity: "1", translateX: "0"},
43
+ { duration: 800, delay: time, easing: [60, 10] });
44
+ time += 120;
30
45
  });
31
- scrollFire(staggeredListOptions);
46
+ };
47
+
32
48
 
49
+ $(document).ready(function() {
50
+ // Hardcoded .staggered-list scrollFire
51
+ // var staggeredListOptions = [];
52
+ // $('ul.staggered-list').each(function (i) {
53
+
54
+ // var label = 'scrollFire-' + i;
55
+ // $(this).addClass(label);
56
+ // staggeredListOptions.push(
57
+ // {selector: 'ul.staggered-list.' + label,
58
+ // offset: 200,
59
+ // callback: 'showStaggeredList("ul.staggered-list.' + label + '")'});
60
+ // });
61
+ // scrollFire(staggeredListOptions);
33
62
 
34
63
  // HammerJS, Swipe navigation
35
64
 
@@ -112,38 +141,5 @@
112
141
  // { opacity: "1", scaleX: 1, scaleY: 1, translateX: 0},
113
142
  // { duration: 800, easing: [60, 10] });
114
143
  // });
115
-
116
-
117
- // Image transition function
118
- fadeInImage = function(selector){
119
- var element = $(selector);
120
- element.css({opacity: 0});
121
- $(element).velocity({opacity: 1}, {
122
- duration: 650,
123
- queue: false,
124
- easing: 'easeOutSine'
125
- });
126
- $(element).animate({opacity: 1}, {
127
- duration: 1300,
128
- queue: false,
129
- easing: 'swing',
130
- step: function(now, fx) {
131
- fx.start = 100;
132
- var grayscale_setting = now/100;
133
- var brightness_setting = 150 - (100 - now)/1.75;
134
-
135
- if (brightness_setting < 100) {
136
- brightness_setting = 100;
137
- }
138
- if (now >= 0) {
139
- $(this).css({
140
- "-webkit-filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)",
141
- "filter": "grayscale("+grayscale_setting+")" + "brightness("+brightness_setting+"%)"
142
- });
143
- }
144
- }
145
- });
146
- };
147
-
148
144
  });
149
145
  }( jQuery ));
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Waves v0.6.0
2
+ * Waves v0.6.4
3
3
  * http://fian.my.id/Waves
4
4
  *
5
5
  * Copyright 2014 Alfiana E. Sibuea and other contributors
@@ -259,7 +259,10 @@
259
259
  var target = e.target || e.srcElement;
260
260
 
261
261
  while (target.parentElement !== null) {
262
- if (target.className.indexOf('waves-effect') !== -1) {
262
+ if (!(target instanceof SVGElement) && target.className.indexOf('waves-effect') !== -1) {
263
+ element = target;
264
+ break;
265
+ } else if (target.classList.contains('waves-effect')) {
263
266
  element = target;
264
267
  break;
265
268
  }
@@ -332,4 +335,4 @@
332
335
  Waves.displayEffect();
333
336
  }, false);
334
337
 
335
- })(window);
338
+ })(window);
@@ -4,7 +4,7 @@
4
4
  height: $button-height;
5
5
  margin-bottom: 15px;
6
6
  padding: 0 2rem;
7
- @include border-radius(2px);
7
+ border-radius: 2px;
8
8
  line-height: $button-line-height;
9
9
  text-transform: uppercase;
10
10
  border: none;
@@ -60,7 +60,7 @@
60
60
  line-height: $button-floating-size;
61
61
  padding: 0;
62
62
  background-color: $button-color;
63
- @include border-radius(50%);
63
+ border-radius: 50%;
64
64
  @extend .z-depth-1;
65
65
  @include transition(.3s);
66
66
  cursor: pointer;
@@ -112,7 +112,7 @@ button.btn-floating {
112
112
  }
113
113
 
114
114
  a.btn-floating {
115
- @include opacity(0);
115
+ opacity: 0;
116
116
  }
117
117
  }
118
118
  }
@@ -3,7 +3,7 @@
3
3
  .card-panel {
4
4
  padding: $card-padding;
5
5
  margin: $element-top-margin 0 $element-bottom-margin 0;
6
- @include border-radius(2px);
6
+ border-radius: 2px;
7
7
  @extend .z-depth-1;
8
8
  background-color: $card-bg-color;
9
9
  }
@@ -13,8 +13,7 @@
13
13
  overflow: hidden;
14
14
  margin: $element-top-margin 0 $element-bottom-margin 0;
15
15
  background-color: $card-bg-color;
16
- @include box-sizing(border-box);
17
- @include border-radius(2px);
16
+ border-radius: 2px;
18
17
  @extend .z-depth-1;
19
18
 
20
19
 
@@ -94,7 +93,7 @@
94
93
 
95
94
  // Image background for content
96
95
  img {
97
- @include border-radius(2px 2px 0 0);
96
+ border-radius: 2px 2px 0 0;
98
97
  position: relative;
99
98
  left: 0;
100
99
  right: 0;
@@ -114,8 +113,8 @@
114
113
 
115
114
  .card-content {
116
115
  padding: $card-padding;
117
- @include border-radius(0 0 2px 2px);
118
- @include box-sizing(border-box);
116
+ border-radius: 0 0 2px 2px;
117
+
119
118
 
120
119
  p {
121
120
  margin: 0;
@@ -147,6 +146,5 @@
147
146
  display: block;
148
147
  }
149
148
 
150
- @include box-sizing(border-box);
151
149
  }
152
150
  }
@@ -5,9 +5,6 @@
5
5
  margin: $element-top-margin 0 $element-bottom-margin 0;
6
6
  @extend .z-depth-1;
7
7
 
8
- li {
9
- @include transition(.3s);
10
- }
11
8
  }
12
9
 
13
10
  .collapsible-header {
@@ -42,16 +39,12 @@
42
39
  }
43
40
  }
44
41
 
45
- li.active .collapsible-body {
46
-
47
- }
48
-
49
42
  // sideNav collapsible styling
50
- ul.side-nav {
43
+ .side-nav {
51
44
 
52
- ul.collapsible {
45
+ .collapsible {
53
46
  border: none;
54
- @include box-shadow(none);
47
+ box-shadow: none;
55
48
 
56
49
  li { padding: 0; }
57
50
  }
@@ -75,4 +68,3 @@ ul.side-nav {
75
68
 
76
69
  }
77
70
 
78
- li.no-padding { padding: 0 !important; }
@@ -3,7 +3,7 @@
3
3
  @extend .z-depth-1;
4
4
  position: absolute;
5
5
  background-color: #FFFFFF;
6
- margin: 0px;
6
+ margin: 0;
7
7
  min-width: 100px;
8
8
  z-index: 1000;
9
9
  max-height: 70%;
@@ -1,6 +1,6 @@
1
1
  /* Remove Focus Boxes */
2
2
  select:focus {
3
- outline: 1px solid color("materialize-red", "lighten-4");
3
+ outline: 1px solid lighten($secondary-color, 47%);
4
4
  }
5
5
  button:focus {
6
6
  outline: none;
@@ -16,6 +16,83 @@ label {
16
16
  Text Inputs + Textarea
17
17
  ****************************/
18
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[type=text],
38
+ input[type=password],
39
+ input[type=email],
40
+ input[type=url],
41
+ input[type=time],
42
+ input[type=date],
43
+ input[type=datetime-local],
44
+ input[type=tel],
45
+ input[type=number],
46
+ input[type=search],
47
+ textarea.materialize-textarea {
48
+
49
+ // General Styles
50
+ background-color: transparent;
51
+ border: none;
52
+ border-bottom: 1px solid $input-border-color;
53
+ outline: none;
54
+ height: 3rem;
55
+ width: 100%;
56
+
57
+ font-size: 1rem;
58
+ margin: 0 0 15px 0;
59
+ padding: 0;
60
+ box-shadow: none;
61
+ @include box-sizing(content-box);
62
+ transition: all .3s;
63
+
64
+
65
+ // Disabled input style
66
+ &:disabled, &[readonly="readonly"] {
67
+ color: $input-disabled-color;
68
+ border-bottom: 1px dotted $input-disabled-color;
69
+ }
70
+ // Disabled label style
71
+ &:disabled+label, &[readonly="readonly"]+label {
72
+ color: $input-disabled-color;
73
+ }
74
+ // Focused input style
75
+ &:focus:not([readonly]) {
76
+ border-bottom: 1px solid $input-focus-color;
77
+ box-shadow: 0 1px 0 0 $input-focus-color;
78
+ }
79
+ // Focused label style
80
+ &:focus:not([readonly])+label {
81
+ color: $input-focus-color;
82
+ }
83
+ // Valid Input Style
84
+ &.valid {
85
+ border-bottom: 1px solid $input-success-color;
86
+ box-shadow: 0 1px 0 0 $input-success-color;
87
+ }
88
+ // Invalid Input Style
89
+ &.invalid {
90
+ border-bottom: 1px solid $input-error-color;
91
+ box-shadow: 0 1px 0 0 $input-error-color;
92
+ }
93
+ }
94
+
95
+ // Styling for input field wrapper
19
96
  .input-field {
20
97
  position: relative;
21
98
  margin-top: 1rem;
@@ -34,43 +111,6 @@ label {
34
111
  @include transform(translateY(-140%));
35
112
  }
36
113
 
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
114
 
75
115
  // Prefix Icons
76
116
  .prefix {
@@ -110,51 +150,15 @@ textarea {
110
150
  width: 100%;
111
151
  height: 3rem;
112
152
  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
153
 
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);
154
+ &.materialize-textarea {
155
+ overflow-y: hidden; /* prevents scroll bar flash */
156
+ padding: 1.6rem 0; /* prevents text jump on Enter keypress */
157
+ resize: none;
158
+ min-height: 3rem;
159
+ }
137
160
  }
138
161
 
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
162
 
159
163
  // For textarea autoresize
160
164
  .hiddendiv {
@@ -198,8 +202,8 @@ textarea.materialize-textarea {
198
202
  [type="radio"] + label:after {
199
203
  content: '';
200
204
  position: absolute;
201
- left: 0px;
202
- top: 0px;
205
+ left: 0;
206
+ top: 0;
203
207
  margin: 4px;
204
208
  width: 16px;
205
209
  height: 16px;
@@ -270,9 +274,9 @@ form p {
270
274
  margin-bottom: 10px;
271
275
  text-align: left;
272
276
  }
273
- form p:last-child {
274
- margin-bottom: 0px;
275
- }
277
+ form p:last-child {
278
+ margin-bottom: 0;
279
+ }
276
280
 
277
281
  /* Remove default checkbox */
278
282
  [type="checkbox"]:not(:checked),
@@ -280,85 +284,92 @@ form p {
280
284
  position: absolute;
281
285
  left: -9999px;
282
286
  }
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
287
 
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
288
 
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
- }
289
+ // Checkbox Styles
290
+ [type="checkbox"] {
291
+
292
+ // Text Label Style
293
+ + label {
294
+ position: relative;
295
+ padding-left: 35px;
296
+ cursor: pointer;
297
+ display: inline-block;
298
+ height: 25px;
299
+ line-height: 25px;
300
+ font-size: 1rem;
301
+
302
+ -webkit-user-select: none; /* webkit (safari, chrome) browsers */
303
+ -moz-user-select: none; /* mozilla browsers */
304
+ -khtml-user-select: none; /* webkit (konqueror) browsers */
305
+ -ms-user-select: none; /* IE10+ */
306
+
307
+ }
308
+
309
+ /* checkbox aspect */
310
+ + label:before {
311
+ content: '';
312
+ position: absolute;
313
+ top: 0;
314
+ left: 0;
315
+ width: 18px;
316
+ height: 18px;
317
+ z-index: 0;
318
+ border: 2px solid $radio-empty-color;
319
+ border-radius: 1px;
320
+ margin-top: 2px;
321
+ @include transition(.2s);
322
+ }
323
+
324
+ &:not(:checked):disabled + label:before {
325
+ border: none;
326
+ background-color: $input-disabled-color;
327
+ }
315
328
 
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
329
  }
358
- [type="checkbox"]:disabled:not(:checked) + label:hover:before {
359
- border-color: $input-disabled-color;
330
+
331
+ [type="checkbox"]:checked {
332
+ + label:before {
333
+ top: -4px;
334
+ left: -3px;
335
+ width: 12px; height: 22px;
336
+ border-top: 2px solid transparent;
337
+ border-left: 2px solid transparent;
338
+ border-right: 2px solid $radio-fill-color;
339
+ border-bottom: 2px solid $radio-fill-color;
340
+ @include transform(rotate(40deg));
341
+ -webkit-backface-visibility: hidden;
342
+ @include transform-origin(100% 100%);
343
+ }
344
+
345
+ &:disabled + label:before {
346
+ border-right: 2px solid $input-disabled-color;
347
+ border-bottom: 2px solid $input-disabled-color;
348
+ }
349
+
360
350
  }
361
351
 
352
+ /* Indeterminate checkbox */
353
+ [type="checkbox"]:indeterminate {
354
+ +label:before {
355
+ left: -10px;
356
+ top: -11px;
357
+ width: 10px; height: 22px;
358
+ border-top: none;
359
+ border-left: none;
360
+ border-right: 2px solid $radio-fill-color;
361
+ border-bottom: none;
362
+ @include transform(rotate(90deg));
363
+ -webkit-backface-visibility: hidden;
364
+ @include transform-origin(100% 100%);
365
+ }
366
+
367
+ // Disabled indeterminate
368
+ &:disabled + label:before {
369
+ border-right: 2px solid $input-disabled-color;
370
+ background-color: transparent;
371
+ }
372
+ }
362
373
 
363
374
  /***************
364
375
  Switch
@@ -367,6 +378,7 @@ form p {
367
378
  .switch * {
368
379
  -webkit-user-select: none;
369
380
  -moz-user-select: none;
381
+ -khtml-user-select: none;
370
382
  -ms-user-select: none;
371
383
  }
372
384
  .switch label {
@@ -394,7 +406,7 @@ form p {
394
406
  margin-right: 10px;
395
407
  transition: background 0.3s ease;
396
408
  vertical-align: middle;
397
- margin: 0px 16px;
409
+ margin: 0 16px;
398
410
  }
399
411
  .switch label .lever:after {
400
412
  content: "";
@@ -448,7 +460,7 @@ input[type=checkbox]:not(:disabled) ~ .lever:active:after {
448
460
  input.select-dropdown {
449
461
  position: relative;
450
462
  cursor: pointer;
451
- color: #444;
463
+ // color: #444;
452
464
  background-color: transparent;
453
465
  border: none;
454
466
  border-bottom: 1px solid $input-border-color;
@@ -462,10 +474,14 @@ input[type=checkbox]:not(:disabled) ~ .lever:active:after {
462
474
  display: block;
463
475
  }
464
476
  .mdi-navigation-arrow-drop-down {
477
+ color: initial;
465
478
  position: absolute;
466
479
  right: 0;
467
480
  top: 0;
468
481
  font-size: 23px;
482
+ &.disabled {
483
+ color: $input-disabled-color;
484
+ }
469
485
  }
470
486
  }
471
487
 
@@ -571,7 +587,7 @@ input[type=range] + .thumb {
571
587
  width: 30px;
572
588
  text-align: center;
573
589
  color: $radio-fill-color;
574
- font-size: 0px;
590
+ font-size: 0;
575
591
  @include transform(rotate(45deg));
576
592
  }
577
593
 
@@ -693,7 +709,7 @@ input[type=range]:focus::-ms-fill-upper {
693
709
  ****************************/
694
710
 
695
711
  select {
696
- background-color: #fffafa;
712
+ background-color: rgba(255, 255, 255, 0.90);
697
713
  width: 100%;
698
714
  padding: 5px;
699
715
  border: 1px solid #f2f2f2;