material 0.9.27 → 0.9.28

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