matcha-theme 19.47.0 → 19.52.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.
|
@@ -1,8 +1,68 @@
|
|
|
1
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
|
+
|
|
2
62
|
matcha-button-group {
|
|
3
63
|
&[disabled],
|
|
4
|
-
&[disabled]:not([disabled="false"])
|
|
5
|
-
&[disabled="true"]{
|
|
64
|
+
&[disabled]:not([disabled="false"]),
|
|
65
|
+
&[disabled="true"] {
|
|
6
66
|
button[matcha-button],
|
|
7
67
|
a[matcha-button] {
|
|
8
68
|
pointer-events: none;
|
|
@@ -13,16 +73,13 @@
|
|
|
13
73
|
[basic]:not([basic="false"]) {
|
|
14
74
|
color: getDisabled($theme);
|
|
15
75
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
button[matcha-button],
|
|
20
|
-
a[matcha-button] {
|
|
76
|
+
|
|
21
77
|
&[outline]:not([outline="false"]),
|
|
22
|
-
&[link]:not([link="false"]){
|
|
78
|
+
&[link]:not([link="false"]) {
|
|
23
79
|
color: getDisabled($theme) !important;
|
|
24
80
|
}
|
|
25
|
-
|
|
81
|
+
|
|
82
|
+
&[basic]:not([basic="false"]) {
|
|
26
83
|
background: getSurface($theme);
|
|
27
84
|
color: getDisabled($theme) !important;
|
|
28
85
|
}
|
|
@@ -30,12 +87,31 @@
|
|
|
30
87
|
background: getDisabled($theme);
|
|
31
88
|
color: getDisabledBgContrast($theme);
|
|
32
89
|
}
|
|
33
|
-
|
|
34
|
-
|
|
35
90
|
}
|
|
36
|
-
|
|
37
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
|
+
|
|
38
113
|
}
|
|
114
|
+
|
|
39
115
|
.button-group {
|
|
40
116
|
&.gap-0 {
|
|
41
117
|
gap: 0 !important;
|
|
@@ -1,3 +1,47 @@
|
|
|
1
|
+
@mixin _field-height($line-height) {
|
|
2
|
+
.matcha-form-field {
|
|
3
|
+
input[type="text"],
|
|
4
|
+
input[type="email"],
|
|
5
|
+
input[type="tel"],
|
|
6
|
+
input[type="url"],
|
|
7
|
+
input[type="password"],
|
|
8
|
+
input[type="number"],
|
|
9
|
+
input[type="search"],
|
|
10
|
+
textarea {
|
|
11
|
+
min-height: px-to-rem(20px); /* Mantém a altura dos inputs de texto */
|
|
12
|
+
line-height: px-to-rem($line-height);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@mixin generate-matcha-form-field-size-classes($helper-breakpoints){
|
|
18
|
+
@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
|
|
19
|
+
@include media-breakpoint($materialBreakpoint) {
|
|
20
|
+
$infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
|
|
21
|
+
|
|
22
|
+
&[size#{$infix}="tiny"] {
|
|
23
|
+
@include _field-height(24px)
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&[size#{$infix}="small"] {
|
|
27
|
+
@include _field-height(24px)
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&[size#{$infix}="medium"] {
|
|
31
|
+
@include _field-height(32px);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&[size#{$infix}="large"] {
|
|
35
|
+
@include _field-height(40px)
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&[size#{$infix}="huge"] {
|
|
39
|
+
@include _field-height(40px)
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
1
45
|
@mixin matcha-form-field($theme) {
|
|
2
46
|
$primary: map-get($theme, primary);
|
|
3
47
|
$accent: map-get($theme, accent);
|
|
@@ -35,7 +79,11 @@
|
|
|
35
79
|
input[type="search"]:focus,
|
|
36
80
|
textarea:focus {
|
|
37
81
|
outline: none;
|
|
38
|
-
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
matcha-form-field{
|
|
86
|
+
@include generate-matcha-form-field-size-classes($helper-breakpoints);
|
|
39
87
|
}
|
|
40
88
|
}
|
|
41
89
|
|
|
@@ -52,10 +100,8 @@
|
|
|
52
100
|
outline: none;
|
|
53
101
|
box-shadow: none;
|
|
54
102
|
font-size: 16px;
|
|
55
|
-
min-height: 16px; /* Mantém a altura dos inputs de texto */
|
|
56
103
|
resize: none;
|
|
57
104
|
font-weight: 500;
|
|
58
|
-
line-height: 20px;
|
|
59
105
|
}
|
|
60
106
|
|
|
61
107
|
input[type="text"]:focus,
|