matcha-theme 19.53.0 → 19.54.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.
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
@mixin _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions) {
|
|
2
|
+
&[inactivetype="basic"]{
|
|
3
|
+
@each $colorName, $colorFn in $color-functions {
|
|
4
|
+
&[inactivecolor="#{$colorName}"]{
|
|
5
|
+
.button-group matcha-button-toggle-item{
|
|
6
|
+
button[matcha-button],
|
|
7
|
+
a[matcha-button]{
|
|
8
|
+
&:not([active-item="true"]){
|
|
9
|
+
background: getSurface($theme);
|
|
10
|
+
color: call(#{$colorFn}, $theme);
|
|
11
|
+
box-shadow: 0 0 0 0px inset;
|
|
12
|
+
.ripple{
|
|
13
|
+
background: call(#{$colorFn}Alpha, $theme);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
&[disabled],
|
|
21
|
+
&[disabled]:not([disabled="false"]),
|
|
22
|
+
&[disabled="true"] {
|
|
23
|
+
&:not([active-item="true"]){
|
|
24
|
+
.button-group matcha-button-toggle-item{
|
|
25
|
+
button[matcha-button],
|
|
26
|
+
a[matcha-button]{
|
|
27
|
+
@include _disabled-basic-button($theme);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@mixin _colorize-inactive-type-outline-button-toggle-item($theme, $color-functions) {
|
|
36
|
+
&[inactivetype="outline"]{
|
|
37
|
+
//disabled false
|
|
38
|
+
&:not([disabled="true"]){
|
|
39
|
+
@each $colorName, $colorFn in $color-functions {
|
|
40
|
+
&[inactivecolor="#{$colorName}"]{
|
|
41
|
+
.button-group matcha-button-toggle-item{
|
|
42
|
+
button[matcha-button],
|
|
43
|
+
a[matcha-button]{
|
|
44
|
+
//botão não ativo
|
|
45
|
+
&:not([active-item="true"]){
|
|
46
|
+
color: call(#{$colorFn}, $theme);
|
|
47
|
+
background: transparent;
|
|
48
|
+
box-shadow: 0 0 0 2px call(#{$colorFn}, $theme) inset;
|
|
49
|
+
.ripple{
|
|
50
|
+
background: call(#{$colorFn}Alpha, $theme);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
//disabled true
|
|
59
|
+
&[disabled],
|
|
60
|
+
&[disabled]:not([disabled="false"]),
|
|
61
|
+
&[disabled="true"] {
|
|
62
|
+
> .button-group matcha-button-toggle-item{
|
|
63
|
+
button[matcha-button],
|
|
64
|
+
a[matcha-button]{
|
|
65
|
+
//botão não ativo
|
|
66
|
+
&:not([active-item="true"]){
|
|
67
|
+
@include _disabled-outline-button($theme);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@mixin _colorize-inactive-type-alpha-button-toggle-item($theme, $color-functions) {
|
|
76
|
+
&[inactivetype="alpha"]{
|
|
77
|
+
@each $colorName, $colorFn in $color-functions {
|
|
78
|
+
&[inactivecolor="#{$colorName}"]{
|
|
79
|
+
.button-group matcha-button-toggle-item{
|
|
80
|
+
button[matcha-button],
|
|
81
|
+
a[matcha-button]{
|
|
82
|
+
&:not([active-item="true"]){
|
|
83
|
+
color: call(#{$colorFn}, $theme);
|
|
84
|
+
background: call(#{$colorFn}Alpha, $theme);
|
|
85
|
+
box-shadow: 0 0 0 0px;
|
|
86
|
+
.ripple{
|
|
87
|
+
background: call(#{$colorFn}ContrastAlpha, $theme)
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
&[disabled],
|
|
95
|
+
&[disabled]:not([disabled="false"]),
|
|
96
|
+
&[disabled="true"] {
|
|
97
|
+
.button-group matcha-button-toggle-item{
|
|
98
|
+
button[matcha-button],
|
|
99
|
+
a[matcha-button]{
|
|
100
|
+
//botão não ativo
|
|
101
|
+
&:not([active-item="true"]){
|
|
102
|
+
@include _disabled-alpha-button($theme);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
@mixin _colorize-inactive-type-link-button-toggle-item($theme, $color-functions) {
|
|
111
|
+
|
|
112
|
+
&[inactivetype="link"]{
|
|
113
|
+
@each $colorName, $colorFn in $color-functions {
|
|
114
|
+
&[inactivecolor="#{$colorName}"]{
|
|
115
|
+
.button-group matcha-button-toggle-item{
|
|
116
|
+
button[matcha-button],
|
|
117
|
+
a[matcha-button]{
|
|
118
|
+
&:not([active-item="true"]){
|
|
119
|
+
|
|
120
|
+
background: transparent;
|
|
121
|
+
color: call(#{$colorFn}, $theme);
|
|
122
|
+
box-shadow: 0 0 0 0px;
|
|
123
|
+
.ripple{
|
|
124
|
+
background: call(#{$colorFn}Alpha, $theme);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
&[disabled],
|
|
133
|
+
&[disabled]:not([disabled="false"]),
|
|
134
|
+
&[disabled="true"] {
|
|
135
|
+
.button-group matcha-button-toggle-item{
|
|
136
|
+
button[matcha-button],
|
|
137
|
+
a[matcha-button]{
|
|
138
|
+
//botão não ativo
|
|
139
|
+
&:not([active-item="true"]){
|
|
140
|
+
@include _disabled-link-button($theme);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
@mixin matcha-button-toggle($theme) {
|
|
152
|
+
$color-functions: (
|
|
153
|
+
red: getRed,
|
|
154
|
+
pink: getPink,
|
|
155
|
+
purple: getPurple,
|
|
156
|
+
deep-purple: getDeepPurple,
|
|
157
|
+
indigo: getIndigo,
|
|
158
|
+
blue: getBlue,
|
|
159
|
+
light-blue: getLightBlue,
|
|
160
|
+
cyan: getCyan,
|
|
161
|
+
teal: getTeal,
|
|
162
|
+
green: getGreen,
|
|
163
|
+
light-green: getLightGreen,
|
|
164
|
+
lime: getLime,
|
|
165
|
+
yellow: getYellow,
|
|
166
|
+
amber: getAmber,
|
|
167
|
+
orange: getOrange,
|
|
168
|
+
deep-orange: getDeepOrange,
|
|
169
|
+
brown: getBrown,
|
|
170
|
+
grey: getGrey,
|
|
171
|
+
blue-grey: getBlueGrey,
|
|
172
|
+
primary: getPrimary,
|
|
173
|
+
accent: getAccent,
|
|
174
|
+
warn: getWarn,
|
|
175
|
+
disabled: getDisabled,
|
|
176
|
+
);
|
|
177
|
+
|
|
178
|
+
matcha-button-toggle{
|
|
179
|
+
display: flex;
|
|
180
|
+
@include _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions);
|
|
181
|
+
@include _colorize-inactive-type-outline-button-toggle-item($theme, $color-functions);
|
|
182
|
+
@include _colorize-inactive-type-alpha-button-toggle-item($theme, $color-functions);
|
|
183
|
+
@include _colorize-inactive-type-link-button-toggle-item($theme, $color-functions);
|
|
184
|
+
|
|
185
|
+
&[disabled],
|
|
186
|
+
&[disabled]:not([disabled="false"]),
|
|
187
|
+
&[disabled="true"] {
|
|
188
|
+
.button-group matcha-button-toggle-item{
|
|
189
|
+
button[matcha-button],
|
|
190
|
+
a[matcha-button]{
|
|
191
|
+
&[active-item="true"]{
|
|
192
|
+
&[outline],
|
|
193
|
+
&[outline]:not([outline="false"]),
|
|
194
|
+
&[outline="true"]{
|
|
195
|
+
@include _disabled-outline-button($theme);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
&[basic],
|
|
199
|
+
&[basic]:not([basic="false"]),
|
|
200
|
+
&[basic="true"]{
|
|
201
|
+
@include _disabled-basic-button($theme);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
&[alpha],
|
|
205
|
+
&[alpha]:not([alpha="false"]),
|
|
206
|
+
&[alpha="true"]{
|
|
207
|
+
@include _disabled-alpha-button($theme);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
&[link],
|
|
211
|
+
&[link]:not([link="false"]),
|
|
212
|
+
&[link="true"]{
|
|
213
|
+
@include _disabled-link-button($theme);
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.button-group {
|
|
224
|
+
&.gap-0 {
|
|
225
|
+
gap: 0 !important;
|
|
226
|
+
|
|
227
|
+
// Ajuste border-radius quando gap = 0
|
|
228
|
+
matcha-button-toggle-item:first-child button[matcha-button] {
|
|
229
|
+
border-top-right-radius: 0;
|
|
230
|
+
border-bottom-right-radius: 0;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
matcha-button-toggle-item:last-child button[matcha-button] {
|
|
234
|
+
border-top-left-radius: 0;
|
|
235
|
+
border-bottom-left-radius: 0;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
matcha-button-toggle-item:not(:first-child):not(:last-child) button[matcha-button] {
|
|
239
|
+
border-radius: 0;
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
@@ -22,6 +22,34 @@
|
|
|
22
22
|
// [size-lg]="sizeLg"
|
|
23
23
|
// [size-xl]="sizeXl">
|
|
24
24
|
|
|
25
|
+
@mixin _disabled-basic-button($theme) {
|
|
26
|
+
background: getSurface($theme);
|
|
27
|
+
color: getDisabled($theme);
|
|
28
|
+
box-shadow: 0 0 0 0px inset;
|
|
29
|
+
pointer-events: none;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@mixin _disabled-outline-button($theme) {
|
|
33
|
+
background: transparent;
|
|
34
|
+
color: getDisabled($theme);
|
|
35
|
+
box-shadow: 0 0 0 2px inset;
|
|
36
|
+
pointer-events: none;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@mixin _disabled-alpha-button($theme) {
|
|
40
|
+
background: getDisabledAlpha($theme);
|
|
41
|
+
color: getDisabled($theme);
|
|
42
|
+
box-shadow: 0 0 0 0px inset;
|
|
43
|
+
pointer-events: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@mixin _disabled-link-button($theme) {
|
|
47
|
+
background: transparent;
|
|
48
|
+
color: getDisabled($theme);
|
|
49
|
+
box-shadow: 0 0 0 0px inset;
|
|
50
|
+
pointer-events: none;
|
|
51
|
+
}
|
|
52
|
+
|
|
25
53
|
@mixin generate-matcha-button-size-classes($helper-breakpoints){
|
|
26
54
|
@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
|
|
27
55
|
@include media-breakpoint($materialBreakpoint) {
|
|
@@ -205,7 +233,7 @@ a[matcha-button] {
|
|
|
205
233
|
&[color="red"][outline]:not([outline="false"]),
|
|
206
234
|
&[color="red"][link]:not([link="false"]),
|
|
207
235
|
&[color="red"][basic]:not([basic="false"]) {
|
|
208
|
-
color: getRed($theme)
|
|
236
|
+
color: getRed($theme);
|
|
209
237
|
}
|
|
210
238
|
&[color="red"]{
|
|
211
239
|
background: getRed($theme);
|
|
@@ -225,7 +253,7 @@ a[matcha-button] {
|
|
|
225
253
|
&[color="pink"][outline]:not([outline="false"]),
|
|
226
254
|
&[color="pink"][link]:not([link="false"]),
|
|
227
255
|
&[color="pink"][basic]:not([basic="false"]) {
|
|
228
|
-
color: getPink($theme)
|
|
256
|
+
color: getPink($theme);
|
|
229
257
|
}
|
|
230
258
|
&[color="pink"]{
|
|
231
259
|
background: getPink($theme);
|
|
@@ -245,7 +273,7 @@ a[matcha-button] {
|
|
|
245
273
|
&[color="purple"][outline]:not([outline="false"]),
|
|
246
274
|
&[color="purple"][link]:not([link="false"]),
|
|
247
275
|
&[color="purple"][basic]:not([basic="false"]) {
|
|
248
|
-
color: getPurple($theme)
|
|
276
|
+
color: getPurple($theme);
|
|
249
277
|
}
|
|
250
278
|
&[color="purple"]{
|
|
251
279
|
background: getPurple($theme);
|
|
@@ -265,7 +293,7 @@ a[matcha-button] {
|
|
|
265
293
|
&[color="deep-purple"][outline]:not([outline="false"]),
|
|
266
294
|
&[color="deep-purple"][link]:not([link="false"]),
|
|
267
295
|
&[color="deep-purple"][basic]:not([basic="false"]) {
|
|
268
|
-
color: getDeepPurple($theme)
|
|
296
|
+
color: getDeepPurple($theme);
|
|
269
297
|
}
|
|
270
298
|
&[color="deep-purple"]{
|
|
271
299
|
background: getDeepPurple($theme);
|
|
@@ -285,7 +313,7 @@ a[matcha-button] {
|
|
|
285
313
|
&[color="indigo"][outline]:not([outline="false"]),
|
|
286
314
|
&[color="indigo"][link]:not([link="false"]),
|
|
287
315
|
&[color="indigo"][basic]:not([basic="false"]) {
|
|
288
|
-
color: getIndigo($theme)
|
|
316
|
+
color: getIndigo($theme);
|
|
289
317
|
}
|
|
290
318
|
&[color="indigo"]{
|
|
291
319
|
background: getIndigo($theme);
|
|
@@ -305,7 +333,7 @@ a[matcha-button] {
|
|
|
305
333
|
&[color="blue"][outline]:not([outline="false"]),
|
|
306
334
|
&[color="blue"][link]:not([link="false"]),
|
|
307
335
|
&[color="blue"][basic]:not([basic="false"]) {
|
|
308
|
-
color: getBlue($theme)
|
|
336
|
+
color: getBlue($theme);
|
|
309
337
|
}
|
|
310
338
|
&[color="blue"]{
|
|
311
339
|
background: getBlue($theme);
|
|
@@ -325,7 +353,7 @@ a[matcha-button] {
|
|
|
325
353
|
&[color="light-blue"][outline]:not([outline="false"]),
|
|
326
354
|
&[color="light-blue"][link]:not([link="false"]),
|
|
327
355
|
&[color="light-blue"][basic]:not([basic="false"]) {
|
|
328
|
-
color: getLightBlue($theme)
|
|
356
|
+
color: getLightBlue($theme);
|
|
329
357
|
}
|
|
330
358
|
&[color="light-blue"]{
|
|
331
359
|
background: getLightBlue($theme);
|
|
@@ -345,7 +373,7 @@ a[matcha-button] {
|
|
|
345
373
|
&[color="cyan"][outline]:not([outline="false"]),
|
|
346
374
|
&[color="cyan"][link]:not([link="false"]),
|
|
347
375
|
&[color="cyan"][basic]:not([basic="false"]) {
|
|
348
|
-
color: getCyan($theme)
|
|
376
|
+
color: getCyan($theme);
|
|
349
377
|
}
|
|
350
378
|
&[color="cyan"]{
|
|
351
379
|
background: getCyan($theme);
|
|
@@ -365,7 +393,7 @@ a[matcha-button] {
|
|
|
365
393
|
&[color="teal"][outline]:not([outline="false"]),
|
|
366
394
|
&[color="teal"][link]:not([link="false"]),
|
|
367
395
|
&[color="teal"][basic]:not([basic="false"]) {
|
|
368
|
-
color: getTeal($theme)
|
|
396
|
+
color: getTeal($theme);
|
|
369
397
|
}
|
|
370
398
|
&[color="teal"]{
|
|
371
399
|
background: getTeal($theme);
|
|
@@ -385,7 +413,7 @@ a[matcha-button] {
|
|
|
385
413
|
&[color="green"][outline]:not([outline="false"]),
|
|
386
414
|
&[color="green"][link]:not([link="false"]),
|
|
387
415
|
&[color="green"][basic]:not([basic="false"]) {
|
|
388
|
-
color: getGreen($theme)
|
|
416
|
+
color: getGreen($theme);
|
|
389
417
|
}
|
|
390
418
|
&[color="green"]{
|
|
391
419
|
background: getGreen($theme);
|
|
@@ -405,7 +433,7 @@ a[matcha-button] {
|
|
|
405
433
|
&[color="light-green"][outline]:not([outline="false"]),
|
|
406
434
|
&[color="light-green"][link]:not([link="false"]),
|
|
407
435
|
&[color="light-green"][basic]:not([basic="false"]) {
|
|
408
|
-
color: getLightGreen($theme)
|
|
436
|
+
color: getLightGreen($theme);
|
|
409
437
|
}
|
|
410
438
|
&[color="light-green"]{
|
|
411
439
|
background: getLightGreen($theme);
|
|
@@ -425,7 +453,7 @@ a[matcha-button] {
|
|
|
425
453
|
&[color="lime"][outline]:not([outline="false"]),
|
|
426
454
|
&[color="lime"][link]:not([link="false"]),
|
|
427
455
|
&[color="lime"][basic]:not([basic="false"]) {
|
|
428
|
-
color: getLime($theme)
|
|
456
|
+
color: getLime($theme);
|
|
429
457
|
}
|
|
430
458
|
&[color="lime"]{
|
|
431
459
|
background: getLime($theme);
|
|
@@ -445,7 +473,7 @@ a[matcha-button] {
|
|
|
445
473
|
&[color="yellow"][outline]:not([outline="false"]),
|
|
446
474
|
&[color="yellow"][link]:not([link="false"]),
|
|
447
475
|
&[color="yellow"][basic]:not([basic="false"]) {
|
|
448
|
-
color: getYellow($theme)
|
|
476
|
+
color: getYellow($theme);
|
|
449
477
|
}
|
|
450
478
|
&[color="yellow"]{
|
|
451
479
|
background: getYellow($theme);
|
|
@@ -465,7 +493,7 @@ a[matcha-button] {
|
|
|
465
493
|
&[color="amber"][outline]:not([outline="false"]),
|
|
466
494
|
&[color="amber"][link]:not([link="false"]),
|
|
467
495
|
&[color="amber"][basic]:not([basic="false"]) {
|
|
468
|
-
color: getAmber($theme)
|
|
496
|
+
color: getAmber($theme);
|
|
469
497
|
}
|
|
470
498
|
&[color="amber"]{
|
|
471
499
|
background: getAmber($theme);
|
|
@@ -485,7 +513,7 @@ a[matcha-button] {
|
|
|
485
513
|
&[color="orange"][outline]:not([outline="false"]),
|
|
486
514
|
&[color="orange"][link]:not([link="false"]),
|
|
487
515
|
&[color="orange"][basic]:not([basic="false"]) {
|
|
488
|
-
color: getOrange($theme)
|
|
516
|
+
color: getOrange($theme);
|
|
489
517
|
}
|
|
490
518
|
&[color="orange"]{
|
|
491
519
|
background: getOrange($theme);
|
|
@@ -505,7 +533,7 @@ a[matcha-button] {
|
|
|
505
533
|
&[color="deep-orange"][outline]:not([outline="false"]),
|
|
506
534
|
&[color="deep-orange"][link]:not([link="false"]),
|
|
507
535
|
&[color="deep-orange"][basic]:not([basic="false"]) {
|
|
508
|
-
color: getDeepOrange($theme)
|
|
536
|
+
color: getDeepOrange($theme);
|
|
509
537
|
}
|
|
510
538
|
&[color="deep-orange"]{
|
|
511
539
|
background: getDeepOrange($theme);
|
|
@@ -525,7 +553,7 @@ a[matcha-button] {
|
|
|
525
553
|
&[color="brown"][outline]:not([outline="false"]),
|
|
526
554
|
&[color="brown"][link]:not([link="false"]),
|
|
527
555
|
&[color="brown"][basic]:not([basic="false"]) {
|
|
528
|
-
color: getBrown($theme)
|
|
556
|
+
color: getBrown($theme);
|
|
529
557
|
}
|
|
530
558
|
&[color="brown"]{
|
|
531
559
|
background: getBrown($theme);
|
|
@@ -545,7 +573,7 @@ a[matcha-button] {
|
|
|
545
573
|
&[color="grey"][outline]:not([outline="false"]),
|
|
546
574
|
&[color="grey"][link]:not([link="false"]),
|
|
547
575
|
&[color="grey"][basic]:not([basic="false"]) {
|
|
548
|
-
color: getGrey($theme)
|
|
576
|
+
color: getGrey($theme);
|
|
549
577
|
}
|
|
550
578
|
&[color="grey"]{
|
|
551
579
|
background: getGrey($theme);
|
|
@@ -565,7 +593,7 @@ a[matcha-button] {
|
|
|
565
593
|
&[color="blue-grey"][outline]:not([outline="false"]),
|
|
566
594
|
&[color="blue-grey"][link]:not([link="false"]),
|
|
567
595
|
&[color="blue-grey"][basic]:not([basic="false"]) {
|
|
568
|
-
color: getBlueGrey($theme)
|
|
596
|
+
color: getBlueGrey($theme);
|
|
569
597
|
}
|
|
570
598
|
&[color="blue-grey"]{
|
|
571
599
|
background: getBlueGrey($theme);
|
|
@@ -585,7 +613,7 @@ a[matcha-button] {
|
|
|
585
613
|
&[color="primary"][outline]:not([outline="false"]),
|
|
586
614
|
&[color="primary"][link]:not([link="false"]),
|
|
587
615
|
&[color="primary"][basic]:not([basic="false"]) {
|
|
588
|
-
color: getPrimary($theme)
|
|
616
|
+
color: getPrimary($theme);
|
|
589
617
|
}
|
|
590
618
|
&[color="primary"]{
|
|
591
619
|
background: getPrimary($theme);
|
|
@@ -605,7 +633,7 @@ a[matcha-button] {
|
|
|
605
633
|
&[color="accent"][outline]:not([outline="false"]),
|
|
606
634
|
&[color="accent"][link]:not([link="false"]),
|
|
607
635
|
&[color="accent"][basic]:not([basic="false"]) {
|
|
608
|
-
color: getAccent($theme)
|
|
636
|
+
color: getAccent($theme);
|
|
609
637
|
}
|
|
610
638
|
&[color="accent"]{
|
|
611
639
|
background: getAccent($theme);
|
|
@@ -625,7 +653,7 @@ a[matcha-button] {
|
|
|
625
653
|
&[color="warn"][outline]:not([outline="false"]),
|
|
626
654
|
&[color="warn"][link]:not([link="false"]),
|
|
627
655
|
&[color="warn"][basic]:not([basic="false"]) {
|
|
628
|
-
color: getWarn($theme)
|
|
656
|
+
color: getWarn($theme);
|
|
629
657
|
}
|
|
630
658
|
&[color="warn"]{
|
|
631
659
|
background: getWarn($theme);
|
|
@@ -645,7 +673,7 @@ a[matcha-button] {
|
|
|
645
673
|
&[color="disabled"][outline]:not([outline="false"]),
|
|
646
674
|
&[color="disabled"][link]:not([link="false"]),
|
|
647
675
|
&[color="disabled"][basic]:not([basic="false"]) {
|
|
648
|
-
color: getDisabled($theme)
|
|
676
|
+
color: getDisabled($theme);
|
|
649
677
|
}
|
|
650
678
|
&[color="disabled"]{
|
|
651
679
|
background: getDisabled($theme);
|
|
@@ -667,7 +695,7 @@ a[matcha-button] {
|
|
|
667
695
|
|
|
668
696
|
&[outline]:not([outline="false"]) {
|
|
669
697
|
border: 0px solid currentColor;
|
|
670
|
-
background: transparent
|
|
698
|
+
background: transparent;
|
|
671
699
|
&:not([color]){
|
|
672
700
|
border-color: getForeground($theme);
|
|
673
701
|
color: getForeground($theme);
|
|
@@ -679,7 +707,7 @@ a[matcha-button] {
|
|
|
679
707
|
}
|
|
680
708
|
|
|
681
709
|
&[basic]:not([basic="false"]){
|
|
682
|
-
background: getSurface($theme)
|
|
710
|
+
background: getSurface($theme);
|
|
683
711
|
&:not([color]){
|
|
684
712
|
color: getForeground($theme);
|
|
685
713
|
}
|
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
@mixin _colorize-inactive-type-basic($theme, $color-functions) {
|
|
2
|
+
&[inactivetype="basic"]{
|
|
3
|
+
@each $colorName, $colorFn in $color-functions {
|
|
4
|
+
&[inactivecolor="#{$colorName}"]{
|
|
5
|
+
.button-group matcha-tab-item{
|
|
6
|
+
button[matcha-button],
|
|
7
|
+
a[matcha-button]{
|
|
8
|
+
&:not([active-item="true"]){
|
|
9
|
+
background: getSurface($theme);
|
|
10
|
+
color: call(#{$colorFn}, $theme);
|
|
11
|
+
box-shadow: 0 0 0 0px inset;
|
|
12
|
+
.ripple{
|
|
13
|
+
background: call(#{$colorFn}Alpha, $theme);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
&[disabled],
|
|
21
|
+
&[disabled]:not([disabled="false"]),
|
|
22
|
+
&[disabled="true"] {
|
|
23
|
+
&:not([active-item="true"]){
|
|
24
|
+
.button-group matcha-tab-item{
|
|
25
|
+
button[matcha-button],
|
|
26
|
+
a[matcha-button]{
|
|
27
|
+
@include _disabled-basic-button($theme);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@mixin _colorize-inactive-type-outline($theme, $color-functions) {
|
|
36
|
+
&[inactivetype="outline"]{
|
|
37
|
+
//disabled false
|
|
38
|
+
&:not([disabled="true"]){
|
|
39
|
+
@each $colorName, $colorFn in $color-functions {
|
|
40
|
+
&[inactivecolor="#{$colorName}"]{
|
|
41
|
+
.button-group matcha-tab-item{
|
|
42
|
+
button[matcha-button],
|
|
43
|
+
a[matcha-button]{
|
|
44
|
+
//botão não ativo
|
|
45
|
+
&:not([active-item="true"]){
|
|
46
|
+
color: call(#{$colorFn}, $theme);
|
|
47
|
+
background: transparent;
|
|
48
|
+
box-shadow: 0 0 0 2px call(#{$colorFn}, $theme) inset;
|
|
49
|
+
.ripple{
|
|
50
|
+
background: call(#{$colorFn}Alpha, $theme);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
//disabled true
|
|
59
|
+
&[disabled],
|
|
60
|
+
&[disabled]:not([disabled="false"]),
|
|
61
|
+
&[disabled="true"] {
|
|
62
|
+
> .button-group matcha-tab-item{
|
|
63
|
+
button[matcha-button],
|
|
64
|
+
a[matcha-button]{
|
|
65
|
+
//botão não ativo
|
|
66
|
+
&:not([active-item="true"]){
|
|
67
|
+
@include _disabled-outline-button($theme);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@mixin _colorize-inactive-type-alpha($theme, $color-functions) {
|
|
76
|
+
&[inactivetype="alpha"]{
|
|
77
|
+
@each $colorName, $colorFn in $color-functions {
|
|
78
|
+
&[inactivecolor="#{$colorName}"]{
|
|
79
|
+
.button-group matcha-tab-item{
|
|
80
|
+
button[matcha-button],
|
|
81
|
+
a[matcha-button]{
|
|
82
|
+
&:not([active-item="true"]){
|
|
83
|
+
color: call(#{$colorFn}, $theme);
|
|
84
|
+
background: call(#{$colorFn}Alpha, $theme);
|
|
85
|
+
box-shadow: 0 0 0 0px;
|
|
86
|
+
.ripple{
|
|
87
|
+
background: call(#{$colorFn}ContrastAlpha, $theme)
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
&[disabled],
|
|
95
|
+
&[disabled]:not([disabled="false"]),
|
|
96
|
+
&[disabled="true"] {
|
|
97
|
+
.button-group matcha-tab-item{
|
|
98
|
+
button[matcha-button],
|
|
99
|
+
a[matcha-button]{
|
|
100
|
+
//botão não ativo
|
|
101
|
+
&:not([active-item="true"]){
|
|
102
|
+
@include _disabled-alpha-button($theme);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
@mixin _colorize-inactive-type-link($theme, $color-functions) {
|
|
111
|
+
|
|
112
|
+
&[inactivetype="link"]{
|
|
113
|
+
@each $colorName, $colorFn in $color-functions {
|
|
114
|
+
&[inactivecolor="#{$colorName}"]{
|
|
115
|
+
.button-group matcha-tab-item{
|
|
116
|
+
button[matcha-button],
|
|
117
|
+
a[matcha-button]{
|
|
118
|
+
&:not([active-item="true"]){
|
|
119
|
+
|
|
120
|
+
background: transparent;
|
|
121
|
+
color: call(#{$colorFn}, $theme);
|
|
122
|
+
box-shadow: 0 0 0 0px;
|
|
123
|
+
.ripple{
|
|
124
|
+
background: call(#{$colorFn}Alpha, $theme);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
&[disabled],
|
|
133
|
+
&[disabled]:not([disabled="false"]),
|
|
134
|
+
&[disabled="true"] {
|
|
135
|
+
.button-group matcha-tab-item{
|
|
136
|
+
button[matcha-button],
|
|
137
|
+
a[matcha-button]{
|
|
138
|
+
//botão não ativo
|
|
139
|
+
&:not([active-item="true"]){
|
|
140
|
+
@include _disabled-link-button($theme);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
@mixin matcha-tabs($theme) {
|
|
152
|
+
$color-functions: (
|
|
153
|
+
red: getRed,
|
|
154
|
+
pink: getPink,
|
|
155
|
+
purple: getPurple,
|
|
156
|
+
deep-purple: getDeepPurple,
|
|
157
|
+
indigo: getIndigo,
|
|
158
|
+
blue: getBlue,
|
|
159
|
+
light-blue: getLightBlue,
|
|
160
|
+
cyan: getCyan,
|
|
161
|
+
teal: getTeal,
|
|
162
|
+
green: getGreen,
|
|
163
|
+
light-green: getLightGreen,
|
|
164
|
+
lime: getLime,
|
|
165
|
+
yellow: getYellow,
|
|
166
|
+
amber: getAmber,
|
|
167
|
+
orange: getOrange,
|
|
168
|
+
deep-orange: getDeepOrange,
|
|
169
|
+
brown: getBrown,
|
|
170
|
+
grey: getGrey,
|
|
171
|
+
blue-grey: getBlueGrey,
|
|
172
|
+
primary: getPrimary,
|
|
173
|
+
accent: getAccent,
|
|
174
|
+
warn: getWarn,
|
|
175
|
+
disabled: getDisabled,
|
|
176
|
+
);
|
|
177
|
+
|
|
178
|
+
matcha-tabs{
|
|
179
|
+
display: flex;
|
|
180
|
+
@include _colorize-inactive-type-basic($theme, $color-functions);
|
|
181
|
+
@include _colorize-inactive-type-outline($theme, $color-functions);
|
|
182
|
+
@include _colorize-inactive-type-alpha($theme, $color-functions);
|
|
183
|
+
@include _colorize-inactive-type-link($theme, $color-functions);
|
|
184
|
+
|
|
185
|
+
&[disabled],
|
|
186
|
+
&[disabled]:not([disabled="false"]),
|
|
187
|
+
&[disabled="true"] {
|
|
188
|
+
.button-group matcha-tab-item{
|
|
189
|
+
button[matcha-button],
|
|
190
|
+
a[matcha-button]{
|
|
191
|
+
&[active-item="true"]{
|
|
192
|
+
&[outline],
|
|
193
|
+
&[outline]:not([outline="false"]),
|
|
194
|
+
&[outline="true"]{
|
|
195
|
+
@include _disabled-outline-button($theme);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
&[basic],
|
|
199
|
+
&[basic]:not([basic="false"]),
|
|
200
|
+
&[basic="true"]{
|
|
201
|
+
@include _disabled-basic-button($theme);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
&[alpha],
|
|
205
|
+
&[alpha]:not([alpha="false"]),
|
|
206
|
+
&[alpha="true"]{
|
|
207
|
+
@include _disabled-alpha-button($theme);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
&[link],
|
|
211
|
+
&[link]:not([link="false"]),
|
|
212
|
+
&[link="true"]{
|
|
213
|
+
@include _disabled-link-button($theme);
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.button-group {
|
|
224
|
+
&.gap-0 {
|
|
225
|
+
gap: 0 !important;
|
|
226
|
+
|
|
227
|
+
// Ajuste border-radius quando gap = 0
|
|
228
|
+
matcha-tab-item:first-child button[matcha-button] {
|
|
229
|
+
border-top-right-radius: 0;
|
|
230
|
+
border-bottom-right-radius: 0;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
matcha-tab-item:last-child button[matcha-button] {
|
|
234
|
+
border-top-left-radius: 0;
|
|
235
|
+
border-bottom-left-radius: 0;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
matcha-tab-item:not(:first-child):not(:last-child) button[matcha-button] {
|
|
239
|
+
border-radius: 0;
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
package/main.scss
CHANGED
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
// COMPONENTS
|
|
24
24
|
@import "./components/matcha-audio-player.scss"; //matcha-audio-player-theme($theme)
|
|
25
25
|
@import "./components/matcha-buttons.scss"; // matcha-button-theme($theme)
|
|
26
|
+
@import "./components/matcha-button-toggle.scss"; // matcha-button-toggle-theme($theme)
|
|
26
27
|
@import "./components/matcha-cards.scss"; // matcha-cards-theme($theme)
|
|
27
28
|
@import "./components/matcha-color-pick.scss"; // matcha-color-pick-theme($theme)
|
|
28
29
|
@import "./components/matcha-draggable.scss"; // matcha-draggable-theme($theme)
|
|
@@ -40,8 +41,7 @@
|
|
|
40
41
|
@import "./components/matcha-ripple.scss"; // matcha-ripple-theme($theme)
|
|
41
42
|
@import "./components/matcha-spin.scss"; // matcha-spin-theme($theme)
|
|
42
43
|
@import "./components/matcha-hint-text.scss"; // matcha-hint-theme($theme)
|
|
43
|
-
@import "./components/matcha-
|
|
44
|
-
|
|
44
|
+
@import "./components/matcha-tabs.scss"; // matcha-tabs($theme)
|
|
45
45
|
// VENDORS
|
|
46
46
|
@import "./vendors/angular-editor.scss";
|
|
47
47
|
@import "./vendors/angular-material-fixes.scss";
|
|
@@ -132,6 +132,7 @@
|
|
|
132
132
|
|
|
133
133
|
@include matcha-table-theme($theme);
|
|
134
134
|
|
|
135
|
+
@include matcha-button-toggle($theme);
|
|
135
136
|
@include matcha-button-theme($theme);
|
|
136
137
|
@include matcha-ripple-theme($theme);
|
|
137
138
|
@include matcha-tooltip-theme($theme);
|
|
@@ -141,5 +142,5 @@
|
|
|
141
142
|
@include matcha-checkbox($theme);
|
|
142
143
|
@include matcha-spin($theme);
|
|
143
144
|
@include matcha-hint-text($theme);
|
|
144
|
-
@include matcha-
|
|
145
|
+
@include matcha-tabs($theme);
|
|
145
146
|
}
|
package/package.json
CHANGED
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
@mixin matcha-button-group($theme) {
|
|
2
|
-
$color-functions: (
|
|
3
|
-
red: getRed,
|
|
4
|
-
pink: getPink,
|
|
5
|
-
purple: getPurple,
|
|
6
|
-
deep-purple: getDeepPurple,
|
|
7
|
-
indigo: getIndigo,
|
|
8
|
-
blue: getBlue,
|
|
9
|
-
light-blue: getLightBlue,
|
|
10
|
-
cyan: getCyan,
|
|
11
|
-
teal: getTeal,
|
|
12
|
-
green: getGreen,
|
|
13
|
-
light-green: getLightGreen,
|
|
14
|
-
lime: getLime,
|
|
15
|
-
yellow: getYellow,
|
|
16
|
-
amber: getAmber,
|
|
17
|
-
orange: getOrange,
|
|
18
|
-
deep-orange: getDeepOrange,
|
|
19
|
-
brown: getBrown,
|
|
20
|
-
grey: getGrey,
|
|
21
|
-
blue-grey: getBlueGrey,
|
|
22
|
-
primary: getPrimary,
|
|
23
|
-
accent: getAccent,
|
|
24
|
-
warn: getWarn,
|
|
25
|
-
disabled: getDisabled,
|
|
26
|
-
);
|
|
27
|
-
|
|
28
|
-
@each $inactiveColor, $colorFn in $color-functions {
|
|
29
|
-
matcha-button-group[inactivecolor="#{$inactiveColor}"] > .button-group > matcha-button-item,
|
|
30
|
-
matcha-button-group[inactivetype="basic"] > .button-group > matcha-button-item {
|
|
31
|
-
button[matcha-button] {
|
|
32
|
-
&:not([active-item]) {
|
|
33
|
-
&[color] {
|
|
34
|
-
&[outline]:not([outline="false"]) .ripple,
|
|
35
|
-
&[basic]:not([basic="false"]) .ripple {
|
|
36
|
-
background: call(#{$colorFn}Alpha, $theme);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
&[alpha]:not([alpha="false"]) {
|
|
40
|
-
background: call(#{$colorFn}Alpha, $theme)!important;
|
|
41
|
-
color: call($colorFn, $theme)!important;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
&[outline]:not([outline="false"]),
|
|
45
|
-
&[link]:not([link="false"]),
|
|
46
|
-
&[basic]:not([basic="false"]) {
|
|
47
|
-
color: call($colorFn, $theme) !important;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
background: call($colorFn, $theme);
|
|
51
|
-
color: call(#{$colorFn}Contrast, $theme);
|
|
52
|
-
|
|
53
|
-
.ripple {
|
|
54
|
-
background: call(#{$colorFn}ContrastAlpha, $theme);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
matcha-button-group {
|
|
63
|
-
&[disabled],
|
|
64
|
-
&[disabled]:not([disabled="false"]),
|
|
65
|
-
&[disabled="true"] {
|
|
66
|
-
button[matcha-button],
|
|
67
|
-
a[matcha-button] {
|
|
68
|
-
pointer-events: none;
|
|
69
|
-
user-select: none;
|
|
70
|
-
|
|
71
|
-
[outline]:not([outline="false"]),
|
|
72
|
-
[link]:not([link="false"]),
|
|
73
|
-
[basic]:not([basic="false"]) {
|
|
74
|
-
color: getDisabled($theme);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
&[outline]:not([outline="false"]),
|
|
78
|
-
&[link]:not([link="false"]) {
|
|
79
|
-
color: getDisabled($theme) !important;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
&[basic]:not([basic="false"]) {
|
|
83
|
-
background: getSurface($theme);
|
|
84
|
-
color: getDisabled($theme) !important;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
background: getDisabled($theme);
|
|
88
|
-
color: getDisabledBgContrast($theme);
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
matcha-button-group[inactivetype="basic"] > .button-group > matcha-button-item {
|
|
93
|
-
button[matcha-button] {
|
|
94
|
-
&:not([active-item]) {
|
|
95
|
-
background: getSurface($theme) !important;
|
|
96
|
-
&:not([color]) {
|
|
97
|
-
color: getForeground($theme) !important;
|
|
98
|
-
}
|
|
99
|
-
&[disabled] {
|
|
100
|
-
color: getDisabledContrast($theme) !important;
|
|
101
|
-
}
|
|
102
|
-
&[alpha]:not([alpha="false"]) {
|
|
103
|
-
background: transparent;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
//TODO: adicionar alpha
|
|
109
|
-
//TODO: adicionar outline
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.button-group {
|
|
116
|
-
&.gap-0 {
|
|
117
|
-
gap: 0 !important;
|
|
118
|
-
|
|
119
|
-
// Ajuste border-radius quando gap = 0
|
|
120
|
-
matcha-button-item:first-child button[matcha-button] {
|
|
121
|
-
border-top-right-radius: 0;
|
|
122
|
-
border-bottom-right-radius: 0;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
matcha-button-item:last-child button[matcha-button] {
|
|
126
|
-
border-top-left-radius: 0;
|
|
127
|
-
border-bottom-left-radius: 0;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
matcha-button-item:not(:first-child):not(:last-child) button[matcha-button] {
|
|
131
|
-
border-radius: 0;
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
}
|