mtl 1.1.7 → 1.1.8

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 (53) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/mtl.js +1 -1
  3. data/app/assets/stylesheets/mtl/all.scss +4 -0
  4. data/lib/mtl/version.rb +2 -2
  5. data/package.json +1 -1
  6. data/vendor/assets/javascripts/materialize/cards.js +13 -3
  7. data/vendor/assets/javascripts/materialize/carousel.js +78 -28
  8. data/vendor/assets/javascripts/materialize/chips.js +27 -27
  9. data/vendor/assets/javascripts/materialize/collapsible.js +34 -11
  10. data/vendor/assets/javascripts/materialize/date_picker/picker.date.js +137 -136
  11. data/vendor/assets/javascripts/materialize/date_picker/picker.js +0 -1
  12. data/vendor/assets/javascripts/materialize/date_picker/picker.time.js +686 -0
  13. data/vendor/assets/javascripts/materialize/dropdown.js +19 -12
  14. data/vendor/assets/javascripts/materialize/forms.js +98 -72
  15. data/vendor/assets/javascripts/materialize/global.js +14 -1
  16. data/vendor/assets/javascripts/materialize/jquery.easing.1.4.js +166 -0
  17. data/vendor/assets/javascripts/materialize/materialbox.js +48 -44
  18. data/vendor/assets/javascripts/materialize/modal.js +2 -1
  19. data/vendor/assets/javascripts/materialize/scrollspy.js +10 -5
  20. data/vendor/assets/javascripts/materialize/sideNav.js +44 -14
  21. data/vendor/assets/javascripts/materialize/slider.js +3 -3
  22. data/vendor/assets/javascripts/materialize/tabs.js +17 -7
  23. data/vendor/assets/javascripts/materialize/tapTarget.js +187 -0
  24. data/vendor/assets/javascripts/materialize/transitions.js +2 -2
  25. data/vendor/assets/javascripts/materialize/waves.js +1 -1
  26. data/vendor/assets/javascripts/pdfobject.js +1 -1
  27. data/vendor/assets/stylesheets/materialize/_buttons.scss +11 -12
  28. data/vendor/assets/stylesheets/materialize/_cards.scss +3 -0
  29. data/vendor/assets/stylesheets/materialize/_carousel.scss +7 -1
  30. data/vendor/assets/stylesheets/materialize/_chips.scss +6 -1
  31. data/vendor/assets/stylesheets/materialize/_collapsible.scss +1 -0
  32. data/vendor/assets/stylesheets/materialize/_color.scss +1 -1
  33. data/vendor/assets/stylesheets/materialize/_dropdown.scss +3 -0
  34. data/vendor/assets/stylesheets/materialize/_global.scss +18 -23
  35. data/vendor/assets/stylesheets/materialize/_grid.scss +44 -35
  36. data/vendor/assets/stylesheets/materialize/_modal.scss +2 -2
  37. data/vendor/assets/stylesheets/materialize/_preloader.scss +3 -3
  38. data/vendor/assets/stylesheets/materialize/_pulse.scss +34 -0
  39. data/vendor/assets/stylesheets/materialize/_sideNav.scss +17 -11
  40. data/vendor/assets/stylesheets/materialize/_tapTarget.scss +103 -0
  41. data/vendor/assets/stylesheets/materialize/_variables.scss +15 -6
  42. data/vendor/assets/stylesheets/materialize/date_picker/_default.date.scss +48 -27
  43. data/vendor/assets/stylesheets/materialize/date_picker/_default.scss +10 -0
  44. data/vendor/assets/stylesheets/materialize/date_picker/_default.time.scss +155 -13
  45. data/vendor/assets/stylesheets/materialize/forms/_input-fields.scss +18 -12
  46. data/vendor/assets/stylesheets/materialize/forms/_range.scss +3 -2
  47. data/vendor/assets/stylesheets/materialize/forms/_switches.scss +30 -17
  48. metadata +7 -7
  49. data/vendor/assets/javascripts/materialize/init.js +0 -211
  50. data/vendor/assets/javascripts/materialize/jquery.easing.1.3.js +0 -205
  51. data/vendor/assets/javascripts/materialize/jquery.timeago.min.js +0 -1
  52. data/vendor/assets/javascripts/materialize/prism.js +0 -8
  53. data/vendor/assets/stylesheets/materialize/_prefixer.scss +0 -384
@@ -43,11 +43,11 @@
43
43
  .btn-floating,
44
44
  .btn-large,
45
45
  .btn-flat {
46
-
46
+ font-size: $button-font-size;
47
47
  outline: 0;
48
48
 
49
49
  i {
50
- font-size: $button-font-size;
50
+ font-size: $button-icon-font-size;
51
51
  line-height: inherit;
52
52
  }
53
53
  }
@@ -89,6 +89,10 @@
89
89
  }
90
90
 
91
91
  &.btn-large {
92
+ &.halfway-fab {
93
+ bottom: -$button-floating-large-size / 2;
94
+ }
95
+
92
96
  width: $button-floating-large-size;
93
97
  height: $button-floating-large-size;
94
98
  i {
@@ -104,8 +108,7 @@
104
108
 
105
109
  position: absolute;
106
110
  right: 24px;
107
- bottom: 0;
108
- transform: translateY(50%);
111
+ bottom: -$button-floating-size / 2;
109
112
  }
110
113
 
111
114
  display: inline-block;
@@ -180,6 +183,7 @@ button.btn-floating {
180
183
  display: flex;
181
184
  top: 0;
182
185
  bottom: 0;
186
+ z-index: 1;
183
187
 
184
188
  li {
185
189
  flex: 1;
@@ -254,19 +258,14 @@ button.btn-floating {
254
258
  cursor: pointer;
255
259
  transition: background-color .2s;
256
260
 
257
- &:focus,
258
- &:active {
259
- background-color: transparent;
260
- }
261
-
262
261
  &:focus,
263
262
  &:hover {
264
- background-color: rgba(0,0,0,.1);
265
263
  box-shadow: none;
264
+ background-color: transparent;
266
265
  }
267
266
 
268
- &:active {
269
- background-color: rgba(0,0,0,.2);
267
+ &:focus {
268
+ background-color: rgba(0,0,0,.1);
270
269
  }
271
270
 
272
271
  &.disabled {
@@ -158,6 +158,9 @@
158
158
  }
159
159
 
160
160
  .card-action {
161
+ &:last-child {
162
+ border-radius: 0 0 2px 2px;
163
+ }
161
164
  position: relative;
162
165
  background-color: inherit;
163
166
  border-top: 1px solid rgba(160,160,160,.2);
@@ -52,7 +52,7 @@
52
52
  top: 0;
53
53
  left: 0;
54
54
 
55
- img {
55
+ & > img {
56
56
  width: 100%;
57
57
  }
58
58
  }
@@ -82,4 +82,10 @@
82
82
  border-radius: 50%;
83
83
  }
84
84
  }
85
+
86
+ // Materialbox compatibility
87
+ &.scrolling .carousel-item .materialboxed,
88
+ .carousel-item:not(.active) .materialboxed {
89
+ pointer-events: none;
90
+ }
85
91
  }
@@ -11,7 +11,7 @@
11
11
  margin-bottom: $chip-margin;
12
12
  margin-right: $chip-margin;
13
13
 
14
- img {
14
+ > img {
15
15
  float: left;
16
16
  margin: 0 8px 0 -12px;
17
17
  height: 32px;
@@ -69,6 +69,11 @@
69
69
  border: 0 !important;
70
70
  box-shadow: none !important;
71
71
  }
72
+
73
+ // Autocomplete
74
+ .autocomplete-content {
75
+ margin-top: 0;
76
+ }
72
77
  }
73
78
 
74
79
  // Form prefix
@@ -9,6 +9,7 @@
9
9
  .collapsible-header {
10
10
  display: block;
11
11
  cursor: pointer;
12
+ -webkit-tap-highlight-color: transparent;
12
13
  min-height: $collapsible-height;
13
14
  line-height: $collapsible-line-height;
14
15
  padding: 0 1rem;
@@ -359,7 +359,7 @@ $colors: (
359
359
  "blue-grey": $blue-grey,
360
360
  "grey": $grey,
361
361
  "shades": $shades
362
- );
362
+ ) !default;
363
363
 
364
364
 
365
365
  // Color Classes
@@ -52,6 +52,9 @@
52
52
  & > a > i {
53
53
  height: inherit;
54
54
  line-height: inherit;
55
+ float: left;
56
+ margin: 0 24px 0 0;
57
+ width: 24px;
55
58
  }
56
59
  }
57
60
  }
@@ -41,10 +41,6 @@ a {
41
41
  .valign-wrapper {
42
42
  display: flex;
43
43
  align-items: center;
44
-
45
- .valign {
46
- display: block;
47
- }
48
44
  }
49
45
 
50
46
 
@@ -230,32 +226,31 @@ video.responsive-video {
230
226
  }
231
227
  }
232
228
 
233
-
234
229
  // Parallax
235
230
  .parallax-container {
236
231
  position: relative;
237
232
  overflow: hidden;
238
233
  height: 500px;
239
- }
240
-
241
- .parallax {
242
- position: absolute;
243
- top: 0;
244
- left: 0;
245
- right: 0;
246
- bottom: 0;
247
- z-index: -1;
248
234
 
249
- img {
250
- display: none;
235
+ .parallax {
251
236
  position: absolute;
252
- left: 50%;
237
+ top: 0;
238
+ left: 0;
239
+ right: 0;
253
240
  bottom: 0;
254
- min-width: 100%;
255
- min-height: 100%;
256
- -webkit-transform: translate3d(0,0,0);
257
- transform: translate3d(0,0,0);
258
- transform: translateX(-50%);
241
+ z-index: -1;
242
+
243
+ img {
244
+ display: none;
245
+ position: absolute;
246
+ left: 50%;
247
+ bottom: 0;
248
+ min-width: 100%;
249
+ min-height: 100%;
250
+ -webkit-transform: translate3d(0,0,0);
251
+ transform: translate3d(0,0,0);
252
+ transform: translateX(-50%);
253
+ }
259
254
  }
260
255
  }
261
256
 
@@ -344,7 +339,7 @@ ul.staggered-list li {
344
339
  }
345
340
 
346
341
  // Footer
347
- footer.page-footer {
342
+ .page-footer {
348
343
  padding-top: 20px;
349
344
  background-color: $footer-bg-color;
350
345
 
@@ -34,6 +34,25 @@
34
34
  }
35
35
 
36
36
 
37
+ // Mixins to eliminate code repitition
38
+ @mixin reset-offset {
39
+ margin-left: auto;
40
+ left: auto;
41
+ right: auto;
42
+ }
43
+ @mixin grid-classes($size, $i, $perc) {
44
+ &.offset-#{$size}#{$i} {
45
+ margin-left: $perc;
46
+ }
47
+ &.pull-#{$size}#{$i} {
48
+ right: $perc;
49
+ }
50
+ &.push-#{$size}#{$i} {
51
+ left: $perc;
52
+ }
53
+ }
54
+
55
+
37
56
  .row {
38
57
  margin-left: auto;
39
58
  margin-right: auto;
@@ -62,9 +81,7 @@
62
81
  $perc: unquote((100 / ($num-cols / $i)) + "%");
63
82
  &.s#{$i} {
64
83
  width: $perc;
65
- margin-left: auto;
66
- left: auto;
67
- right: auto;
84
+ @include reset-offset;
68
85
  }
69
86
  $i: $i + 1;
70
87
  }
@@ -72,15 +89,7 @@
72
89
  $i: 1;
73
90
  @while $i <= $num-cols {
74
91
  $perc: unquote((100 / ($num-cols / $i)) + "%");
75
- &.offset-s#{$i} {
76
- margin-left: $perc;
77
- }
78
- &.pull-s#{$i} {
79
- right: $perc;
80
- }
81
- &.push-s#{$i} {
82
- left: $perc;
83
- }
92
+ @include grid-classes("s", $i, $perc);
84
93
  $i: $i + 1;
85
94
  }
86
95
 
@@ -91,9 +100,7 @@
91
100
  $perc: unquote((100 / ($num-cols / $i)) + "%");
92
101
  &.m#{$i} {
93
102
  width: $perc;
94
- margin-left: auto;
95
- left: auto;
96
- right: auto;
103
+ @include reset-offset;
97
104
  }
98
105
  $i: $i + 1
99
106
  }
@@ -101,15 +108,7 @@
101
108
  $i: 1;
102
109
  @while $i <= $num-cols {
103
110
  $perc: unquote((100 / ($num-cols / $i)) + "%");
104
- &.offset-m#{$i} {
105
- margin-left: $perc;
106
- }
107
- &.pull-m#{$i} {
108
- right: $perc;
109
- }
110
- &.push-m#{$i} {
111
- left: $perc;
112
- }
111
+ @include grid-classes("m", $i, $perc);
113
112
  $i: $i + 1;
114
113
  }
115
114
  }
@@ -121,9 +120,7 @@
121
120
  $perc: unquote((100 / ($num-cols / $i)) + "%");
122
121
  &.l#{$i} {
123
122
  width: $perc;
124
- margin-left: auto;
125
- left: auto;
126
- right: auto;
123
+ @include reset-offset;
127
124
  }
128
125
  $i: $i + 1;
129
126
  }
@@ -131,17 +128,29 @@
131
128
  $i: 1;
132
129
  @while $i <= $num-cols {
133
130
  $perc: unquote((100 / ($num-cols / $i)) + "%");
134
- &.offset-l#{$i} {
135
- margin-left: $perc;
136
- }
137
- &.pull-l#{$i} {
138
- right: $perc;
139
- }
140
- &.push-l#{$i} {
141
- left: $perc;
131
+ @include grid-classes("l", $i, $perc);
132
+ $i: $i + 1;
133
+ }
134
+ }
135
+
136
+ @media #{$extra-large-and-up} {
137
+
138
+ $i: 1;
139
+ @while $i <= $num-cols {
140
+ $perc: unquote((100 / ($num-cols / $i)) + "%");
141
+ &.xl#{$i} {
142
+ width: $perc;
143
+ @include reset-offset;
142
144
  }
143
145
  $i: $i + 1;
144
146
  }
147
+
148
+ $i: 1;
149
+ @while $i <= $num-cols {
150
+ $perc: unquote((100 / ($num-cols / $i)) + "%");
151
+ @include grid-classes("xl", $i, $perc);
152
+ $i: $i + 1;
153
+ }
145
154
  }
146
155
  }
147
156
  }
@@ -36,9 +36,9 @@
36
36
  padding: 4px 6px;
37
37
  height: 56px;
38
38
  width: 100%;
39
+ text-align: right;
39
40
 
40
41
  .btn, .btn-flat {
41
- float: right;
42
42
  margin: 6px 0;
43
43
  }
44
44
  }
@@ -46,7 +46,7 @@
46
46
  .modal-overlay {
47
47
  position: fixed;
48
48
  z-index: 999;
49
- top: -100px;
49
+ top: -25%;
50
50
  left: 0;
51
51
  bottom: 0;
52
52
  right: 0;
@@ -30,8 +30,8 @@
30
30
  .preloader-wrapper {
31
31
  display: inline-block;
32
32
  position: relative;
33
- width: 48px;
34
- height: 48px;
33
+ width: 50px;
34
+ height: 50px;
35
35
 
36
36
  &.small {
37
37
  width: 36px;
@@ -331,4 +331,4 @@
331
331
  @keyframes fade-out {
332
332
  from { opacity: 1; }
333
333
  to { opacity: 0; }
334
- }
334
+ }
@@ -0,0 +1,34 @@
1
+ .pulse {
2
+ &::before {
3
+ content: '';
4
+ display: block;
5
+ position: absolute;
6
+ width: 100%;
7
+ height: 100%;
8
+ top: 0;
9
+ left: 0;
10
+ background-color: inherit;
11
+ border-radius: inherit;
12
+ transition: opacity .3s, transform .3s;
13
+ animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
14
+ z-index: -1;
15
+ }
16
+
17
+ overflow: initial;
18
+ position: relative;
19
+ }
20
+
21
+ @keyframes pulse-animation {
22
+ 0% {
23
+ opacity: 1;
24
+ transform: scale(1);
25
+ }
26
+ 50% {
27
+ opacity: 0;
28
+ transform: scale(1.5);
29
+ }
30
+ 100% {
31
+ opacity: 0;
32
+ transform: scale(1.5);
33
+ }
34
+ }
@@ -38,7 +38,7 @@
38
38
  &.active { background-color: rgba(0,0,0,.05); }
39
39
  }
40
40
 
41
- a {
41
+ li > a {
42
42
  color: $sidenav-font-color;
43
43
  display: block;
44
44
  font-size: $sidenav-font-size;
@@ -61,19 +61,20 @@
61
61
  &.btn:hover,
62
62
  &.btn-large:hover { background-color: lighten($button-raised-background, 5%); }
63
63
  &.btn-floating:hover { background-color: $button-raised-background; }
64
- }
65
64
 
66
- li > a > i,
67
- li > a > [class^="mdi-"], li > a > [class*="mdi-"],
68
- li > a > i.material-icons {
69
- float: left;
70
- height: $sidenav-item-height;
71
- line-height: $sidenav-line-height;
72
- margin: 0 ($sidenav-padding * 2) 0 0;
73
- width: $sidenav-item-height / 2;
74
- color: rgba(0,0,0,.54);
65
+ & > i,
66
+ & > [class^="mdi-"], li > a > [class*="mdi-"],
67
+ & > i.material-icons {
68
+ float: left;
69
+ height: $sidenav-item-height;
70
+ line-height: $sidenav-line-height;
71
+ margin: 0 ($sidenav-padding * 2) 0 0;
72
+ width: $sidenav-item-height / 2;
73
+ color: rgba(0,0,0,.54);
74
+ }
75
75
  }
76
76
 
77
+
77
78
  .divider {
78
79
  margin: ($sidenav-padding / 2) 0 0 0;
79
80
  }
@@ -91,6 +92,7 @@
91
92
  line-height: $sidenav-line-height;
92
93
  }
93
94
 
95
+ .user-view,
94
96
  .userView {
95
97
  position: relative;
96
98
  padding: ($sidenav-padding * 2) ($sidenav-padding * 2) 0;
@@ -178,6 +180,7 @@
178
180
  padding: 0 $sidenav-padding;
179
181
  }
180
182
 
183
+ .user-view,
181
184
  .userView {
182
185
  padding: $sidenav-padding $sidenav-padding 0;
183
186
  }
@@ -192,6 +195,9 @@
192
195
  color: $sidenav-bg-color;
193
196
  }
194
197
  }
198
+ .side-nav .collapsible-body {
199
+ padding: 0;
200
+ }
195
201
 
196
202
 
197
203
  #sidenav-overlay {
@@ -0,0 +1,103 @@
1
+ .tap-target-wrapper {
2
+ width: 800px;
3
+ height: 800px;
4
+ position: fixed;
5
+ z-index: 1000;
6
+ visibility: hidden;
7
+ transition: visibility 0s .3s;
8
+ }
9
+
10
+ .tap-target-wrapper.open {
11
+ visibility: visible;
12
+ transition: visibility 0s;
13
+
14
+ .tap-target {
15
+ transform: scale(1);
16
+ opacity: .95;
17
+ transition:
18
+ transform .3s cubic-bezier(.42,0,.58,1),
19
+ opacity .3s cubic-bezier(.42,0,.58,1);
20
+ }
21
+
22
+ .tap-target-wave::before {
23
+ transform: scale(1);
24
+ }
25
+ .tap-target-wave::after {
26
+ visibility: visible;
27
+ animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
28
+ transition:
29
+ opacity .3s,
30
+ transform .3s,
31
+ visibility 0s 1s;
32
+ }
33
+ }
34
+
35
+ .tap-target {
36
+ position: absolute;
37
+ font-size: 1rem;
38
+ border-radius: 50%;
39
+ background-color: $primary-color;
40
+ box-shadow: 0 20px 20px 0 rgba(0,0,0,0.14), 0 10px 50px 0 rgba(0,0,0,0.12), 0 30px 10px -20px rgba(0,0,0,0.2);
41
+ width: 100%;
42
+ height: 100%;
43
+ opacity: 0;
44
+ transform: scale(0);
45
+ transition:
46
+ transform .3s cubic-bezier(.42,0,.58,1),
47
+ opacity .3s cubic-bezier(.42,0,.58,1);
48
+ }
49
+
50
+ .tap-target-content {
51
+ position: relative;
52
+ display: table-cell;
53
+ }
54
+
55
+ .tap-target-wave {
56
+ &::before,
57
+ &::after {
58
+ content: '';
59
+ display: block;
60
+ position: absolute;
61
+ width: 100%;
62
+ height: 100%;
63
+ border-radius: 50%;
64
+ background-color: #ffffff;
65
+ }
66
+ &::before {
67
+ transform: scale(0);
68
+ transition: transform .3s;
69
+ }
70
+ &::after {
71
+ visibility: hidden;
72
+ transition:
73
+ opacity .3s,
74
+ transform .3s,
75
+ visibility 0s;
76
+ z-index: -1;
77
+ }
78
+
79
+ position: absolute;
80
+ border-radius: 50%;
81
+ z-index: 10001;
82
+ }
83
+
84
+ .tap-target-origin {
85
+ &:not(.btn),
86
+ &:not(.btn):hover {
87
+ background: none;
88
+ }
89
+
90
+ top: 50%;
91
+ left: 50%;
92
+ transform: translate(-50%,-50%);
93
+
94
+ z-index: 10002;
95
+ position: absolute !important;
96
+ }
97
+
98
+ @media only screen and (max-width: 600px) {
99
+ .tap-target, .tap-target-wrapper {
100
+ width: 600px;
101
+ height: 600px;
102
+ }
103
+ }
@@ -10,8 +10,9 @@
10
10
  // 4. Cards
11
11
  // 5. Collapsible
12
12
  // 6. Chips
13
- // 7. Date Picker
13
+ // 7. Date + Time Picker
14
14
  // 8. Dropdown
15
+ // 9. Fonts
15
16
  // 10. Forms
16
17
  // 11. Global
17
18
  // 12. Grid
@@ -56,7 +57,8 @@ $badge-height: 22px !default;
56
57
  // Shared styles
57
58
  $button-border: none !default;
58
59
  $button-background-focus: lighten($secondary-color, 4%) !default;
59
- $button-font-size: 1.3rem !default;
60
+ $button-font-size: 1rem !default;
61
+ $button-icon-font-size: 1.3rem !default;
60
62
  $button-height: 36px !default;
61
63
  $button-padding: 0 2rem !default;
62
64
  $button-radius: 2px !default;
@@ -114,16 +116,21 @@ $chip-selected-color: #26a69a !default;
114
116
  $chip-margin: 5px !default;
115
117
 
116
118
 
117
- // 7. Date Picker
119
+ // 7. Date + Time Picker
118
120
  // ==========================================================================
119
121
 
122
+ $datepicker-display-font-size: 2.8rem;
123
+ $datepicker-weekday-color: rgba(0, 0, 0, .87) !default;
120
124
  $datepicker-weekday-bg: darken($secondary-color, 7%) !default;
121
125
  $datepicker-date-bg: $secondary-color !default;
122
- $datepicker-year: rgba(255, 255, 255, .4) !default;
126
+ $datepicker-year: rgba(255, 255, 255, .7) !default;
123
127
  $datepicker-focus: rgba(0,0,0, .05) !default;
124
128
  $datepicker-selected: $secondary-color !default;
125
129
  $datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default;
126
130
 
131
+ $timepicker-clock-color: rgba(0, 0, 0, .87) !default;
132
+ $timepicker-clock-plate-bg: #eee;
133
+
127
134
 
128
135
  // 8. Dropdown
129
136
  // ==========================================================================
@@ -152,7 +159,8 @@ $input-error-color: $error-color !default;
152
159
  $input-success-color: $success-color !default;
153
160
  $input-focus-color: $secondary-color !default;
154
161
  $input-font-size: 1rem !default;
155
- $input-margin: 0 0 20px 0 !default;
162
+ $input-margin-bottom: 20px;
163
+ $input-margin: 0 0 $input-margin-bottom 0 !default;
156
164
  $input-padding: 0 !default;
157
165
  $input-transition: all .3s !default;
158
166
  $label-font-size: .8rem !default;
@@ -184,7 +192,7 @@ $select-disabled-color: rgba(0,0,0,.3) !default;
184
192
  $switch-bg-color: $secondary-color !default;
185
193
  $switch-checked-lever-bg: desaturate(lighten($secondary-color, 25%), 25%) !default;
186
194
  $switch-unchecked-bg: #F1F1F1 !default;
187
- $switch-unchecked-lever-bg: #818181 !default;
195
+ $switch-unchecked-lever-bg: rgba(0,0,0,.38) !default;
188
196
  $switch-radius: 15px !default;
189
197
 
190
198
 
@@ -201,6 +209,7 @@ $large-screen: 1200px !default;
201
209
 
202
210
  $medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
203
211
  $large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
212
+ $extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;
204
213
  $small-and-down: "only screen and (max-width : #{$small-screen})" !default;
205
214
  $medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
206
215
  $medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;