material 0.9.27 → 1.0.0

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 (21) hide show
  1. package/package.json +1 -1
  2. package/src/skin/material/_variables.scss +30 -0
  3. package/src/skin/material/button/action.scss +13 -24
  4. package/src/skin/material/button/button.scss +36 -45
  5. package/src/skin/material/button/floating.scss +33 -26
  6. package/src/skin/material/button/raised.scss +33 -26
  7. package/src/skin/material/button/stroked.scss +21 -18
  8. package/src/skin/material/component/component.scss +2 -0
  9. package/src/skin/material/component/progress.scss +17 -11
  10. package/src/skin/material/component/text.scss +2 -1
  11. package/src/skin/material/container/appbar.scss +14 -11
  12. package/src/skin/material/container/dialog.scss +22 -50
  13. package/src/skin/material/container/tabs.scss +5 -3
  14. package/src/skin/material/container/toolbar.scss +10 -22
  15. package/src/skin/material/control/button.scss +30 -25
  16. package/src/skin/material/control/checkbox.scss +6 -8
  17. package/src/skin/material/control/progress.scss +17 -11
  18. package/src/skin/material/control/search.scss +12 -9
  19. package/src/skin/material/control/slider.scss +17 -32
  20. package/src/skin/material/control/switch.scss +26 -52
  21. package/src/skin/material/control/textfield.scss +17 -29
package/src/skin/material/control/search.scss CHANGED
@@ -1,21 +1,23 @@
1
+ @use "../variables" as *;
2
+
1
3
  .search-input {
2
4
  position: relative;
3
5
  height: 40px;
4
6
  width: 100%;
5
7
  display: none;
6
8
  flex-direction: row;
7
- border-bottom: 1px solid rgba(0,0,0,.1);
8
- background-color: rgba(0,0,0,.02);
9
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
10
+ background-color: rgba(0, 0, 0, 0.02);
9
11
  &.show {
10
12
  display: flex;
11
13
  }
12
- >.icon {
14
+ > .icon {
13
15
  padding: 8px 0 8px 24px;
14
16
  svg {
15
17
  fill: $primary-color;
16
18
  }
17
19
  }
18
- >.input {
20
+ > .input {
19
21
  flex: 1;
20
22
  font-size: 1.2em;
21
23
  padding: 8px 16px 8px 16px;
@@ -24,20 +26,21 @@
24
26
  background-color: transparent;
25
27
  }
26
28
 
27
- >.clear {
29
+ > .clear {
28
30
  cursor: pointer;
29
- opacity: .4;
31
+ opacity: 0.4;
30
32
  flex: none;
31
33
  width: 46px;
32
34
  height: 40px;
33
35
  margin: 0;
34
36
  background-color: transparent;
35
37
  &:focus {
36
- opacity: .4;
38
+ opacity: 0.4;
37
39
  background-color: transparent;
38
40
  }
39
- &:hover, &:active {
40
- opacity: .7;
41
+ &:hover,
42
+ &:active {
43
+ opacity: 0.7;
41
44
  background-color: transparent;
42
45
  }
43
46
  .icon {
package/src/skin/material/control/slider.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use "../variables" as *;
2
+
1
3
  .material-slider {
2
4
  display: block;
3
5
  position: relative;
@@ -9,8 +11,6 @@
9
11
  flex-direction: column;
10
12
  flex-wrap: nowrap;
11
13
 
12
- //overflow: hidden;
13
- //border-bottom: 1px solid rgba(100, 100, 100, 0.1);
14
14
  input {
15
15
  position: absolute;
16
16
  left: -10000px;
@@ -41,9 +41,7 @@
41
41
  display: block;
42
42
  height: 48px;
43
43
  padding: 0;
44
-
45
- //background-color: rgba(34, 31, 31, .26);
46
- transition: .3s;
44
+ transition: 0.3s;
47
45
  }
48
46
 
49
47
  .slider-canvas {
@@ -61,7 +59,7 @@
61
59
  display: block;
62
60
  height: 2px;
63
61
  padding: 0;
64
- background-color: #4054B2;
62
+ background-color: #4054b2;
65
63
  border-radius: 7px;
66
64
  }
67
65
 
@@ -79,7 +77,7 @@
79
77
  cursor: pointer;
80
78
  margin: auto;
81
79
  border-radius: 50%;
82
- transition: .2s;
80
+ transition: 0.2s;
83
81
 
84
82
  .slider-pin {
85
83
  fill: $secondary-color;
@@ -100,23 +98,16 @@
100
98
  border-radius: 50%;
101
99
  background-color: white;
102
100
  border: 2px solid rgba(241, 241, 241, 100);
103
-
104
- //box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
105
- transition: .2s;
101
+ transition: 0.2s;
106
102
 
107
103
  &.notnull {
108
- background-color: #4054B2;
109
- border: 2px solid #4054B2;
104
+ background-color: #4054b2;
105
+ border: 2px solid #4054b2;
110
106
  }
111
107
 
112
108
  &:active {
113
- background-color: #4054B2;
114
- border: 2px solid #4054B2;
115
- }
116
-
117
- &:hover {
118
- // background-color: #4054B2;
119
- // border: 2px solid #4054B2;
109
+ background-color: #4054b2;
110
+ border: 2px solid #4054b2;
120
111
  }
121
112
  }
122
113
 
@@ -125,14 +116,12 @@
125
116
  top: 50%;
126
117
  background-color: white;
127
118
  border: 2px solid rgba(241, 241, 241, 100);
128
-
129
- //box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
130
119
  transition: none;
131
120
  transform: scale(1.5) translateY(-4px);
132
121
 
133
122
  &.notnull {
134
- background-color: #4054B2;
135
- border: 2px solid #4054B2;
123
+ background-color: #4054b2;
124
+ border: 2px solid #4054b2;
136
125
  }
137
126
  }
138
127
  }
@@ -151,27 +140,23 @@
151
140
 
152
141
  &.is-disabled {
153
142
  .slider-label {
154
- opacity: .5;
143
+ opacity: 0.5;
155
144
  }
156
145
 
157
146
  .slider-control {
158
147
  .slider-track {
159
148
  .slider-knob {
160
- background-color: #BDBDBD;
149
+ background-color: #bdbdbd;
161
150
  border: 2px solid white;
162
151
  }
163
152
 
164
153
  .slider-track-value {
165
- background-color: #BDBDBD;
154
+ background-color: #bdbdbd;
166
155
  }
167
156
  }
168
157
 
169
158
  order: 3;
170
159
  cursor: pointer;
171
-
172
- // .slider-track
173
-
174
- // .slider-knob
175
160
  }
176
161
  }
177
162
 
@@ -199,7 +184,7 @@
199
184
  opacity: 0;
200
185
  transform: scale(0.2);
201
186
  display: block;
202
- transition: .2s;
187
+ transition: 0.2s;
203
188
  }
204
189
  }
205
190
  }
@@ -211,7 +196,7 @@
211
196
  .slider-control {
212
197
  .slider-track {
213
198
  .slider-tarck-value {
214
- background-color: #5C5C5C;
199
+ background-color: #5c5c5c;
215
200
  }
216
201
  }
217
202
  }
package/src/skin/material/control/switch.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use "../variables" as *;
2
+
1
3
  .switch {
2
4
  display: block;
3
5
  position: relative;
@@ -9,16 +11,9 @@
9
11
  flew-direction: horizontal;
10
12
  flex-wrap: nowrap;
11
13
 
12
- //overflow: hidden;
13
- //border-bottom: 1px solid rgba(100, 100, 100, 0.1);
14
14
  input {
15
15
  position: absolute;
16
16
  left: -10000px;
17
-
18
- &:active {
19
- //background-color: #D6E5E4;
20
- //transition: .1s;
21
- }
22
17
  }
23
18
 
24
19
  .switch-label {
@@ -39,7 +34,7 @@
39
34
  height: 48px;
40
35
  padding: 17px 7px;
41
36
  border-radius: 50%;
42
- transition: .3s;
37
+ transition: 0.3s;
43
38
 
44
39
  .switch-track {
45
40
  cursor: pointer;
@@ -62,7 +57,9 @@
62
57
  margin: 0;
63
58
  border-radius: 50%;
64
59
  background-color: rgba(241, 241, 241, 1);
65
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
60
+ box-shadow:
61
+ 0 2px 2px 0 rgba(0, 0, 0, 0.24),
62
+ 0 0 2px 0 rgba(0, 0, 0, 0.12);
66
63
  transition: 0.2s cubic-bezier(0.46, 0, 0.24, 1);
67
64
 
68
65
  &::after {
@@ -71,18 +68,9 @@
71
68
  left: -14px;
72
69
  width: 48px;
73
70
  height: 48px;
74
-
75
- // -webkit-transform: scale(0);
76
- // transform: scale(0);
77
- // -webkit-transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
78
- // transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
79
- // transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
80
- // transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
81
71
  border-radius: 24px;
82
72
  content: "";
83
-
84
- //opacity: .2;
85
- transition: .2s;
73
+ transition: 0.2s;
86
74
  }
87
75
  }
88
76
  }
@@ -90,7 +78,7 @@
90
78
 
91
79
  &.is-checked {
92
80
  .switch-track {
93
- background-color: rgba($secondary-color, .3);
81
+ background-color: rgba($secondary-color, 0.3);
94
82
 
95
83
  .switch-knob {
96
84
  background-color: $secondary-color;
@@ -103,7 +91,7 @@
103
91
  .switch-track {
104
92
  .switch-knob {
105
93
  &::after {
106
- transition: .2s;
94
+ transition: 0.2s;
107
95
  position: absolute;
108
96
  top: -14px;
109
97
  left: -14px;
@@ -119,7 +107,7 @@
119
107
 
120
108
  &.is-disabled {
121
109
  .switch-label {
122
- opacity: .5;
110
+ opacity: 0.5;
123
111
  }
124
112
 
125
113
  .switch-control {
@@ -129,14 +117,14 @@
129
117
  height: 48px;
130
118
  padding: 17px 7px;
131
119
 
132
- //border-radius: 50%;
133
- //transition: .1s;
134
120
  .switch-track {
135
121
  background-color: rgba(34, 31, 31, 0.1);
136
122
 
137
123
  .switch-knob {
138
124
  background-color: rgb(189, 189, 189);
139
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 0 1px 0 rgba(0, 0, 0, 0.06);
125
+ box-shadow:
126
+ 0 1px 1px 0 rgba(0, 0, 0, 0.12),
127
+ 0 0 1px 0 rgba(0, 0, 0, 0.06);
140
128
  }
141
129
  }
142
130
  }
@@ -153,7 +141,7 @@
153
141
 
154
142
  &.is-checked {
155
143
  .switch-track {
156
- background-color: rgba($secondary-color, .3);
144
+ background-color: rgba($secondary-color, 0.3);
157
145
  }
158
146
  }
159
147
 
@@ -182,16 +170,9 @@
182
170
  flew-direction: horizontal;
183
171
  flex-wrap: nowrap;
184
172
 
185
- //overflow: hidden;
186
- //border-bottom: 1px solid rgba(100, 100, 100, 0.1);
187
173
  input {
188
174
  position: absolute;
189
175
  left: -10000px;
190
-
191
- &:active {
192
- //background-color: #D6E5E4;
193
- //transition: .1s;
194
- }
195
176
  }
196
177
 
197
178
  .switch-label {
@@ -212,7 +193,7 @@
212
193
  height: 48px;
213
194
  padding: 17px 7px;
214
195
  border-radius: 50%;
215
- transition: .3s;
196
+ transition: 0.3s;
216
197
 
217
198
  .switch-track {
218
199
  cursor: pointer;
@@ -235,7 +216,9 @@
235
216
  margin: 0;
236
217
  border-radius: 50%;
237
218
  background-color: rgba(241, 241, 241, 1);
238
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
219
+ box-shadow:
220
+ 0 2px 2px 0 rgba(0, 0, 0, 0.24),
221
+ 0 0 2px 0 rgba(0, 0, 0, 0.12);
239
222
  transition: 0.2s cubic-bezier(0.46, 0, 0.24, 1);
240
223
 
241
224
  &::after {
@@ -244,18 +227,9 @@
244
227
  left: -14px;
245
228
  width: 48px;
246
229
  height: 48px;
247
-
248
- // -webkit-transform: scale(0);
249
- // transform: scale(0);
250
- // -webkit-transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
251
- // transition: background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
252
- // transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
253
- // transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1), background-color 90ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 90ms cubic-bezier(0.4, 0, 0.2, 1);
254
230
  border-radius: 24px;
255
231
  content: "";
256
-
257
- //opacity: .2;
258
- transition: .2s;
232
+ transition: 0.2s;
259
233
  }
260
234
  }
261
235
  }
@@ -263,7 +237,7 @@
263
237
 
264
238
  &.is-checked {
265
239
  .switch-track {
266
- background-color: rgba($secondary-color, .3);
240
+ background-color: rgba($secondary-color, 0.3);
267
241
 
268
242
  .switch-knob {
269
243
  background-color: $secondary-color;
@@ -276,7 +250,7 @@
276
250
  .switch-track {
277
251
  .switch-knob {
278
252
  &::after {
279
- transition: .2s;
253
+ transition: 0.2s;
280
254
  position: absolute;
281
255
  top: -14px;
282
256
  left: -14px;
@@ -292,7 +266,7 @@
292
266
 
293
267
  &.is-disabled {
294
268
  .switch-label {
295
- opacity: .5;
269
+ opacity: 0.5;
296
270
  }
297
271
 
298
272
  .switch-control {
@@ -302,14 +276,14 @@
302
276
  height: 48px;
303
277
  padding: 17px 7px;
304
278
 
305
- //border-radius: 50%;
306
- //transition: .1s;
307
279
  .switch-track {
308
280
  background-color: rgba(34, 31, 31, 0.1);
309
281
 
310
282
  .switch-knob {
311
283
  background-color: rgb(189, 189, 189);
312
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 0 1px 0 rgba(0, 0, 0, 0.06);
284
+ box-shadow:
285
+ 0 1px 1px 0 rgba(0, 0, 0, 0.12),
286
+ 0 0 1px 0 rgba(0, 0, 0, 0.06);
313
287
  }
314
288
  }
315
289
  }
@@ -326,7 +300,7 @@
326
300
 
327
301
  &.is-checked {
328
302
  .switch-track {
329
- background-color: rgba($secondary-color, .3);
303
+ background-color: rgba($secondary-color, 0.3);
330
304
  }
331
305
  }
332
306
 
package/src/skin/material/control/textfield.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use "../variables" as *;
2
+
1
3
  .material-textfield {
2
4
  display: block;
3
5
  position: relative;
@@ -6,10 +8,10 @@
6
8
  margin-bottom: 16px;
7
9
  vertical-align: top;
8
10
  .textfield-label {
9
- transition: .2s;
11
+ transition: 0.2s;
10
12
  color: rgba(0, 0, 0, 0.3);
11
13
  position: absolute;
12
- font-size: .7em;
14
+ font-size: 0.7em;
13
15
  top: -2px;
14
16
  }
15
17
 
@@ -20,32 +22,32 @@
20
22
  bottom: 0px;
21
23
  height: 2px;
22
24
  width: 2px;
23
- background-color: #4891F4;
24
- transition: .1s;
25
+ background-color: #4891f4;
26
+ transition: 0.1s;
25
27
  }
26
28
 
27
29
  &.textfield-error {
28
30
  .textfield-label {
29
- color: #F44336;
30
- color: #D6392C;
31
+ color: #f44336;
32
+ color: #d6392c;
31
33
  }
32
34
 
33
35
  textarea,
34
36
  input {
35
- border-bottom: 1px solid #F44336;
37
+ border-bottom: 1px solid #f44336;
36
38
  }
37
39
  }
38
40
 
39
41
  &.hide {
40
42
  display: none;
41
-
42
- // states
43
43
  }
44
44
  }
45
+
46
+ // states
45
47
  .material-textfield {
46
48
  &.is-focused {
47
49
  .textfield-label {
48
- transition: .2s;
50
+ transition: 0.2s;
49
51
  }
50
52
 
51
53
  .textfield-underline {
@@ -53,14 +55,14 @@
53
55
  display: block;
54
56
  width: 100%;
55
57
  left: 0;
56
- transition: .1s;
58
+ transition: 0.1s;
57
59
  background-color: $primary-color;
58
60
  }
59
61
  }
60
62
 
61
63
  &.is-empty {
62
64
  .textfield-label {
63
- transition: .2s;
65
+ transition: 0.2s;
64
66
  pointer-events: none;
65
67
  position: absolute;
66
68
  top: 20px;
@@ -72,8 +74,8 @@
72
74
 
73
75
  &.is-focused {
74
76
  .textfield-label {
75
- transition: .2s;
76
- font-size: .7em;
77
+ transition: 0.2s;
78
+ font-size: 0.7em;
77
79
  top: -2px;
78
80
  }
79
81
  }
@@ -83,13 +85,9 @@
83
85
  width: 100%;
84
86
  border: none;
85
87
  margin: 0;
86
-
87
- // margin-top: 13px;
88
88
  background-color: transparent;
89
89
  border-radius: 0;
90
90
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
91
-
92
- //outline:none;
93
91
  }
94
92
  }
95
93
 
@@ -103,11 +101,8 @@
103
101
  border-radius: 0;
104
102
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
105
103
 
106
- //outline:none;
107
104
  &:hover {
108
105
  cursor: default;
109
-
110
- //background-color: rgba(100, 100, 100, .06);
111
106
  }
112
107
 
113
108
  &:focus {
@@ -117,23 +112,16 @@
117
112
 
118
113
  input[readonly],
119
114
  textarea[readonly] {
120
- //color: #9A9A9A;
121
- //color: rgba(0, 0, 0, 1);
122
- //background-color: rgba(255,255,255,1);
123
115
  border-bottom: 1px solid transparent;
124
116
 
125
117
  &:hover {
126
118
  cursor: default;
127
-
128
- //background-color: rgba(255,255,255,1);
129
119
  }
130
120
 
131
121
  &:focus,
132
122
  &:active {
133
123
  cursor: text;
134
124
  border-bottom: 1px solid transparent !important;
135
-
136
- //background-color: rgba(255,255,255,1);
137
125
  }
138
126
  }
139
127
  }
@@ -141,7 +129,7 @@
141
129
  .dark-mode {
142
130
  .material-textfield {
143
131
  .textfield-label {
144
- transition: .2s;
132
+ transition: 0.2s;
145
133
  color: rgba(255, 255, 255, 0.3);
146
134
  }
147
135