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.
- 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;
|