materialize-sass 0.95.3.3 → 0.95.3.4
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.
- checksums.yaml +7 -0
- data/README.md +1 -1
- data/app/assets/fonts/roboto/Roboto-Bold.woff +0 -0
- data/app/assets/fonts/roboto/Roboto-Bold.woff2 +0 -0
- data/app/assets/fonts/roboto/Roboto-Light.woff +0 -0
- data/app/assets/fonts/roboto/Roboto-Light.woff2 +0 -0
- data/app/assets/fonts/roboto/Roboto-Medium.woff +0 -0
- data/app/assets/fonts/roboto/Roboto-Medium.woff2 +0 -0
- data/app/assets/fonts/roboto/Roboto-Regular.woff +0 -0
- data/app/assets/fonts/roboto/Roboto-Regular.woff2 +0 -0
- data/app/assets/fonts/roboto/Roboto-Thin.woff +0 -0
- data/app/assets/fonts/roboto/Roboto-Thin.woff2 +0 -0
- data/app/assets/javascripts/materialize-sprockets.js +2 -1
- data/app/assets/javascripts/materialize/buttons.js +4 -4
- data/app/assets/javascripts/materialize/collapsible.js +11 -14
- data/app/assets/javascripts/materialize/dropdown.js +5 -1
- data/app/assets/javascripts/materialize/forms.js +157 -151
- data/app/assets/javascripts/materialize/global.js +18 -0
- data/app/assets/javascripts/materialize/init.js +5 -1
- data/app/assets/javascripts/materialize/leanModal.js +0 -1
- data/app/assets/javascripts/materialize/pushpin.js +1 -14
- data/app/assets/javascripts/materialize/scrollFire.js +60 -21
- data/app/assets/javascripts/materialize/scrollspy.js +4 -7
- data/app/assets/javascripts/materialize/sideNav.js +58 -21
- data/app/assets/javascripts/materialize/slider.js +1 -1
- data/app/assets/javascripts/materialize/toasts.js +90 -73
- data/app/assets/javascripts/materialize/transitions.js +57 -61
- data/app/assets/javascripts/materialize/waves.js +6 -3
- data/app/assets/stylesheets/materialize/components/_buttons.scss +3 -3
- data/app/assets/stylesheets/materialize/components/_cards.scss +5 -7
- data/app/assets/stylesheets/materialize/components/_collapsible.scss +3 -11
- data/app/assets/stylesheets/materialize/components/_dropdown.scss +1 -1
- data/app/assets/stylesheets/materialize/components/_form.scss +178 -162
- data/app/assets/stylesheets/materialize/components/_global.scss +11 -10
- data/app/assets/stylesheets/materialize/components/_icons-material-design.scss +766 -2230
- data/app/assets/stylesheets/materialize/components/_materialbox.scss +2 -3
- data/app/assets/stylesheets/materialize/components/_modal.scss +3 -3
- data/app/assets/stylesheets/materialize/components/_navbar.scss +4 -7
- data/app/assets/stylesheets/materialize/components/_prefixer.scss +0 -40
- data/app/assets/stylesheets/materialize/components/_preloader.scss +2 -4
- data/app/assets/stylesheets/materialize/components/_sideNav.scss +9 -9
- data/app/assets/stylesheets/materialize/components/_slider.scss +6 -6
- data/app/assets/stylesheets/materialize/components/_table_of_contents.scss +1 -1
- data/app/assets/stylesheets/materialize/components/_tabs.scss +2 -2
- data/app/assets/stylesheets/materialize/components/_toast.scss +4 -5
- data/app/assets/stylesheets/materialize/components/_tooltip.scss +2 -2
- data/app/assets/stylesheets/materialize/components/date_picker/_default.date.scss +20 -47
- data/lib/materialize-sass.rb +75 -6
- data/lib/materialize-sass/engine.rb +13 -0
- data/lib/materialize-sass/version.rb +1 -1
- metadata +9 -15
@@ -1,35 +1,64 @@
|
|
1
1
|
(function ($) {
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
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
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
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
|
-
|
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.
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
118
|
-
|
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
|
-
|
43
|
+
.side-nav {
|
51
44
|
|
52
|
-
|
45
|
+
.collapsible {
|
53
46
|
border: none;
|
54
|
-
|
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; }
|
@@ -1,6 +1,6 @@
|
|
1
1
|
/* Remove Focus Boxes */
|
2
2
|
select:focus {
|
3
|
-
outline: 1px solid
|
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
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
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:
|
202
|
-
top:
|
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
|
-
|
274
|
-
|
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
|
-
|
300
|
-
[type="checkbox"]
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
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
|
-
|
359
|
-
|
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:
|
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:
|
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:
|
712
|
+
background-color: rgba(255, 255, 255, 0.90);
|
697
713
|
width: 100%;
|
698
714
|
padding: 5px;
|
699
715
|
border: 1px solid #f2f2f2;
|