matcha-theme 20.189.0 → 20.191.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.
- package/components/matcha-audio-player.scss +1 -5
- package/components/matcha-avatar.scss +2 -5
- package/components/matcha-button-toggle.scss +121 -90
- package/components/matcha-buttons.scss +3 -0
- package/components/matcha-cards.scss +147 -126
- package/components/matcha-checkbox.scss +432 -94
- package/components/matcha-form-field.scss +0 -1
- package/components/matcha-hint-text.scss +7 -8
- package/components/matcha-horizontal-tree.scss +0 -1
- package/components/matcha-menu.scss +25 -2
- package/components/matcha-option.scss +0 -1
- package/components/matcha-panel.scss +2 -5
- package/components/matcha-radio.scss +426 -95
- package/components/matcha-scrollbar.scss +1 -2
- package/components/matcha-scrollbox-shadow.scss +1 -2
- package/components/matcha-select.scss +0 -1
- package/components/matcha-skeleton.scss +6 -8
- package/components/matcha-slide-toggle.scss +104 -31
- package/components/matcha-slider.scss +66 -52
- package/components/matcha-snack-bar.scss +118 -0
- package/components/matcha-spin.scss +47 -4
- package/components/matcha-spinner.scss +65 -22
- package/components/matcha-tabs.scss +104 -79
- package/main.scss +2 -0
- package/package.json +1 -1
|
@@ -8,10 +8,6 @@ How to use
|
|
|
8
8
|
// -----------------------------------------------------------------------------------------------------
|
|
9
9
|
@mixin matcha-audio-player-theme($theme) {
|
|
10
10
|
$accent: map-get($theme, accent);
|
|
11
|
-
$warn: map-get($theme, warn);
|
|
12
|
-
$primary: map-get($theme, primary);
|
|
13
|
-
$background: map-get($theme, background);
|
|
14
|
-
$foreground: map-get($theme, foreground);
|
|
15
11
|
|
|
16
12
|
.matcha-audio-player {
|
|
17
13
|
.audio-player {
|
|
@@ -34,4 +30,4 @@ How to use
|
|
|
34
30
|
box-shadow: 0px 0px 0px 2px inset map-get($accent, default);
|
|
35
31
|
}
|
|
36
32
|
}
|
|
37
|
-
}
|
|
33
|
+
}
|
|
@@ -76,13 +76,10 @@
|
|
|
76
76
|
|
|
77
77
|
// Mixin de tema
|
|
78
78
|
@mixin matcha-avatar-theme($theme) {
|
|
79
|
-
$background: map-get($theme, background);
|
|
80
79
|
$foreground: map-get($theme, foreground);
|
|
81
|
-
$is-dark: map-get($theme, is-dark);
|
|
82
80
|
|
|
83
81
|
.matcha-avatar {
|
|
84
82
|
|
|
85
|
-
|
|
86
83
|
// Ícone padrão
|
|
87
84
|
.matcha-avatar-icon {
|
|
88
85
|
color: map-get($foreground, disabled-text);
|
|
@@ -91,11 +88,11 @@
|
|
|
91
88
|
// Estado desabilitado
|
|
92
89
|
&.color-disabled {
|
|
93
90
|
background-color: map-get($foreground, disabled);
|
|
94
|
-
color: map-get($foreground, disabled-text)!important;
|
|
91
|
+
color: map-get($foreground, disabled-text) !important;
|
|
95
92
|
|
|
96
93
|
.matcha-avatar-icon {
|
|
97
94
|
color: map-get($foreground, disabled-text);
|
|
98
95
|
}
|
|
99
96
|
}
|
|
100
97
|
}
|
|
101
|
-
}
|
|
98
|
+
}
|
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
@mixin _colorize-inactive-type-solid-button-toggle-item($theme, $color-functions) {
|
|
2
|
+
|
|
2
3
|
&:not([inactivetype]),
|
|
3
|
-
&[inactivetype="solid"]{
|
|
4
|
+
&[inactivetype="solid"] {
|
|
4
5
|
@each $colorName, $colorFn in $color-functions {
|
|
5
|
-
&[inactivecolor="#{'' + $colorName}"]{
|
|
6
|
-
.button-group{
|
|
6
|
+
&[inactivecolor="#{'' + $colorName}"] {
|
|
7
|
+
.button-group {
|
|
8
|
+
|
|
7
9
|
button[matcha-button],
|
|
8
|
-
a[matcha-button]{
|
|
9
|
-
&:not([active]){
|
|
10
|
+
a[matcha-button] {
|
|
11
|
+
&:not([active]) {
|
|
10
12
|
background: call(#{$colorFn}, $theme);
|
|
11
|
-
color:
|
|
13
|
+
color: call(#{$colorFn}Contrast, $theme);
|
|
12
14
|
box-shadow: 0 0 0 0px inset;
|
|
13
|
-
|
|
15
|
+
|
|
16
|
+
.ripple {
|
|
14
17
|
background: call(#{$colorFn}ContrastAlpha, $theme);
|
|
15
18
|
}
|
|
16
19
|
}
|
|
@@ -18,13 +21,15 @@
|
|
|
18
21
|
}
|
|
19
22
|
}
|
|
20
23
|
}
|
|
24
|
+
|
|
21
25
|
&[disabled],
|
|
22
26
|
&[disabled]:not([disabled="false"]),
|
|
23
27
|
&[disabled="true"] {
|
|
24
|
-
.button-group{
|
|
28
|
+
.button-group {
|
|
29
|
+
|
|
25
30
|
button[matcha-button],
|
|
26
|
-
a[matcha-button]{
|
|
27
|
-
&:not([active]){
|
|
31
|
+
a[matcha-button] {
|
|
32
|
+
&:not([active]) {
|
|
28
33
|
@include _disabled-solid-button($theme);
|
|
29
34
|
}
|
|
30
35
|
}
|
|
@@ -34,17 +39,19 @@
|
|
|
34
39
|
}
|
|
35
40
|
|
|
36
41
|
@mixin _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions) {
|
|
37
|
-
&[inactivetype="basic"]{
|
|
42
|
+
&[inactivetype="basic"] {
|
|
38
43
|
@each $colorName, $colorFn in $color-functions {
|
|
39
|
-
&[inactivecolor="#{'' + $colorName}"]{
|
|
40
|
-
.button-group{
|
|
44
|
+
&[inactivecolor="#{'' + $colorName}"] {
|
|
45
|
+
.button-group {
|
|
46
|
+
|
|
41
47
|
button[matcha-button],
|
|
42
|
-
a[matcha-button]{
|
|
43
|
-
&:not([active]){
|
|
48
|
+
a[matcha-button] {
|
|
49
|
+
&:not([active]) {
|
|
44
50
|
background: getSurface($theme);
|
|
45
|
-
color:
|
|
51
|
+
color: call(#{$colorFn}, $theme);
|
|
46
52
|
box-shadow: 0 0 0 0px inset;
|
|
47
|
-
|
|
53
|
+
|
|
54
|
+
.ripple {
|
|
48
55
|
background: call(#{$colorFn}Alpha, $theme);
|
|
49
56
|
}
|
|
50
57
|
}
|
|
@@ -52,13 +59,15 @@
|
|
|
52
59
|
}
|
|
53
60
|
}
|
|
54
61
|
}
|
|
62
|
+
|
|
55
63
|
&[disabled],
|
|
56
64
|
&[disabled]:not([disabled="false"]),
|
|
57
65
|
&[disabled="true"] {
|
|
58
|
-
.button-group{
|
|
66
|
+
.button-group {
|
|
67
|
+
|
|
59
68
|
button[matcha-button],
|
|
60
|
-
a[matcha-button]{
|
|
61
|
-
&:not([active]){
|
|
69
|
+
a[matcha-button] {
|
|
70
|
+
&:not([active]) {
|
|
62
71
|
@include _disabled-basic-button($theme);
|
|
63
72
|
}
|
|
64
73
|
}
|
|
@@ -68,20 +77,24 @@
|
|
|
68
77
|
}
|
|
69
78
|
|
|
70
79
|
@mixin _colorize-inactive-type-outline-button-toggle-item($theme, $color-functions) {
|
|
71
|
-
&[inactivetype="outline"]{
|
|
80
|
+
&[inactivetype="outline"] {
|
|
81
|
+
|
|
72
82
|
//disabled false
|
|
73
|
-
&:not([disabled="true"]){
|
|
83
|
+
&:not([disabled="true"]) {
|
|
74
84
|
@each $colorName, $colorFn in $color-functions {
|
|
75
|
-
&[inactivecolor="#{'' + $colorName}"]{
|
|
76
|
-
.button-group{
|
|
85
|
+
&[inactivecolor="#{'' + $colorName}"] {
|
|
86
|
+
.button-group {
|
|
87
|
+
|
|
77
88
|
button[matcha-button],
|
|
78
|
-
a[matcha-button]{
|
|
89
|
+
a[matcha-button] {
|
|
90
|
+
|
|
79
91
|
//botão não ativo
|
|
80
|
-
&:not([active]){
|
|
92
|
+
&:not([active]) {
|
|
81
93
|
color: call(#{$colorFn}, $theme);
|
|
82
94
|
background: transparent;
|
|
83
95
|
box-shadow: 0 0 0 2px call(#{$colorFn}, $theme) inset;
|
|
84
|
-
|
|
96
|
+
|
|
97
|
+
.ripple {
|
|
85
98
|
background: call(#{$colorFn}Alpha, $theme);
|
|
86
99
|
}
|
|
87
100
|
}
|
|
@@ -90,15 +103,18 @@
|
|
|
90
103
|
}
|
|
91
104
|
}
|
|
92
105
|
}
|
|
106
|
+
|
|
93
107
|
//disabled true
|
|
94
108
|
&[disabled],
|
|
95
109
|
&[disabled]:not([disabled="false"]),
|
|
96
110
|
&[disabled="true"] {
|
|
97
|
-
.button-group{
|
|
111
|
+
.button-group {
|
|
112
|
+
|
|
98
113
|
button[matcha-button],
|
|
99
|
-
a[matcha-button]{
|
|
114
|
+
a[matcha-button] {
|
|
115
|
+
|
|
100
116
|
//botão não ativo
|
|
101
|
-
&:not([active]){
|
|
117
|
+
&:not([active]) {
|
|
102
118
|
@include _disabled-outline-button($theme);
|
|
103
119
|
}
|
|
104
120
|
}
|
|
@@ -108,17 +124,19 @@
|
|
|
108
124
|
}
|
|
109
125
|
|
|
110
126
|
@mixin _colorize-inactive-type-alpha-button-toggle-item($theme, $color-functions) {
|
|
111
|
-
&[inactivetype="alpha"]{
|
|
127
|
+
&[inactivetype="alpha"] {
|
|
112
128
|
@each $colorName, $colorFn in $color-functions {
|
|
113
|
-
&[inactivecolor="#{'' + $colorName}"]{
|
|
114
|
-
.button-group{
|
|
129
|
+
&[inactivecolor="#{'' + $colorName}"] {
|
|
130
|
+
.button-group {
|
|
131
|
+
|
|
115
132
|
button[matcha-button],
|
|
116
|
-
a[matcha-button]{
|
|
117
|
-
&:not([active]){
|
|
133
|
+
a[matcha-button] {
|
|
134
|
+
&:not([active]) {
|
|
118
135
|
color: call(#{$colorFn}, $theme);
|
|
119
136
|
background: call(#{$colorFn}Alpha, $theme);
|
|
120
137
|
box-shadow: 0 0 0 0px;
|
|
121
|
-
|
|
138
|
+
|
|
139
|
+
.ripple {
|
|
122
140
|
background: call(#{$colorFn}ContrastAlpha, $theme)
|
|
123
141
|
}
|
|
124
142
|
}
|
|
@@ -126,14 +144,17 @@
|
|
|
126
144
|
}
|
|
127
145
|
}
|
|
128
146
|
}
|
|
147
|
+
|
|
129
148
|
&[disabled],
|
|
130
149
|
&[disabled]:not([disabled="false"]),
|
|
131
150
|
&[disabled="true"] {
|
|
132
|
-
.button-group{
|
|
151
|
+
.button-group {
|
|
152
|
+
|
|
133
153
|
button[matcha-button],
|
|
134
|
-
a[matcha-button]{
|
|
154
|
+
a[matcha-button] {
|
|
155
|
+
|
|
135
156
|
//botão não ativo
|
|
136
|
-
&:not([active]){
|
|
157
|
+
&:not([active]) {
|
|
137
158
|
@include _disabled-alpha-button($theme);
|
|
138
159
|
}
|
|
139
160
|
}
|
|
@@ -144,34 +165,39 @@
|
|
|
144
165
|
|
|
145
166
|
@mixin _colorize-inactive-type-link-button-toggle-item($theme, $color-functions) {
|
|
146
167
|
|
|
147
|
-
&[inactivetype="link"]{
|
|
168
|
+
&[inactivetype="link"] {
|
|
148
169
|
@each $colorName, $colorFn in $color-functions {
|
|
149
|
-
&[inactivecolor="#{'' + $colorName}"]{
|
|
150
|
-
.button-group{
|
|
170
|
+
&[inactivecolor="#{'' + $colorName}"] {
|
|
171
|
+
.button-group {
|
|
172
|
+
|
|
151
173
|
button[matcha-button],
|
|
152
|
-
a[matcha-button]{
|
|
153
|
-
&:not([active]){
|
|
174
|
+
a[matcha-button] {
|
|
175
|
+
&:not([active]) {
|
|
154
176
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
}
|
|
177
|
+
background: transparent;
|
|
178
|
+
color: call(#{$colorFn}, $theme);
|
|
179
|
+
box-shadow: 0 0 0 0px;
|
|
180
|
+
|
|
181
|
+
.ripple {
|
|
182
|
+
background: call(#{$colorFn}Alpha, $theme);
|
|
183
|
+
}
|
|
161
184
|
|
|
162
185
|
}
|
|
163
186
|
}
|
|
164
187
|
}
|
|
165
188
|
}
|
|
166
189
|
}
|
|
190
|
+
|
|
167
191
|
&[disabled],
|
|
168
192
|
&[disabled]:not([disabled="false"]),
|
|
169
193
|
&[disabled="true"] {
|
|
170
|
-
.button-group{
|
|
194
|
+
.button-group {
|
|
195
|
+
|
|
171
196
|
button[matcha-button],
|
|
172
|
-
a[matcha-button]{
|
|
197
|
+
a[matcha-button] {
|
|
198
|
+
|
|
173
199
|
//botão não ativo
|
|
174
|
-
&:not([active]){
|
|
200
|
+
&:not([active]) {
|
|
175
201
|
@include _disabled-link-button($theme);
|
|
176
202
|
}
|
|
177
203
|
}
|
|
@@ -206,58 +232,63 @@
|
|
|
206
232
|
blue-grey: getBlueGrey,
|
|
207
233
|
primary: getPrimary,
|
|
208
234
|
accent: getAccent,
|
|
235
|
+
success: getSuccess,
|
|
209
236
|
warn: getWarn,
|
|
237
|
+
danger: getDanger,
|
|
238
|
+
info: getInfo,
|
|
210
239
|
disabled: getDisabled,
|
|
211
240
|
);
|
|
212
241
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
242
|
+
matcha-button-toggle {
|
|
243
|
+
display: flex;
|
|
244
|
+
@include _colorize-inactive-type-solid-button-toggle-item($theme, $color-functions);
|
|
245
|
+
@include _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions);
|
|
246
|
+
@include _colorize-inactive-type-outline-button-toggle-item($theme, $color-functions);
|
|
247
|
+
@include _colorize-inactive-type-alpha-button-toggle-item($theme, $color-functions);
|
|
248
|
+
@include _colorize-inactive-type-link-button-toggle-item($theme, $color-functions);
|
|
220
249
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
button[matcha-button],
|
|
226
|
-
a[matcha-button]{
|
|
227
|
-
&[active]{
|
|
250
|
+
&[disabled],
|
|
251
|
+
&[disabled]:not([disabled="false"]),
|
|
252
|
+
&[disabled="true"] {
|
|
253
|
+
.button-group {
|
|
228
254
|
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
@include _disabled-outline-button($theme);
|
|
233
|
-
}
|
|
255
|
+
button[matcha-button],
|
|
256
|
+
a[matcha-button] {
|
|
257
|
+
&[active] {
|
|
234
258
|
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
259
|
+
&[outline],
|
|
260
|
+
&[outline]:not([outline="false"]),
|
|
261
|
+
&[outline="true"] {
|
|
262
|
+
@include _disabled-outline-button($theme);
|
|
263
|
+
}
|
|
240
264
|
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
265
|
+
&[basic],
|
|
266
|
+
&[basic]:not([basic="false"]),
|
|
267
|
+
&[basic="true"] {
|
|
268
|
+
@include _disabled-basic-button($theme);
|
|
269
|
+
}
|
|
246
270
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
271
|
+
&[alpha],
|
|
272
|
+
&[alpha]:not([alpha="false"]),
|
|
273
|
+
&[alpha="true"] {
|
|
274
|
+
@include _disabled-alpha-button($theme);
|
|
275
|
+
}
|
|
252
276
|
|
|
253
|
-
|
|
277
|
+
&[link],
|
|
278
|
+
&[link]:not([link="false"]),
|
|
279
|
+
&[link="true"] {
|
|
280
|
+
@include _disabled-link-button($theme);
|
|
254
281
|
}
|
|
282
|
+
|
|
283
|
+
@include _disabled-solid-button($theme);
|
|
255
284
|
}
|
|
256
285
|
}
|
|
257
|
-
|
|
258
286
|
}
|
|
287
|
+
|
|
259
288
|
}
|
|
260
289
|
}
|
|
290
|
+
}
|
|
291
|
+
|
|
261
292
|
matcha-button-toggle {
|
|
262
293
|
.button-group {
|
|
263
294
|
&.gap-0 {
|
|
@@ -279,4 +310,4 @@ matcha-button-toggle {
|
|
|
279
310
|
}
|
|
280
311
|
}
|
|
281
312
|
}
|
|
282
|
-
}
|
|
313
|
+
}
|