matcha-theme 18.1.32 → 18.1.33
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-buttons.scss +65 -54
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@mixin matcha-button-theme($theme) {
|
|
2
|
+
|
|
2
3
|
$primary: map-get($theme, primary);
|
|
3
4
|
$accent: map-get($theme, accent);
|
|
4
5
|
$warn: map-get($theme, warn);
|
|
@@ -90,76 +91,86 @@
|
|
|
90
91
|
color: map-get($foreground, placeholder);
|
|
91
92
|
}
|
|
92
93
|
}
|
|
94
|
+
@include _matcha-button-types($theme);
|
|
93
95
|
}
|
|
94
96
|
&:hover{
|
|
95
|
-
|
|
97
|
+
filter: brightness(1.05);
|
|
96
98
|
}
|
|
97
99
|
|
|
98
100
|
&:active{
|
|
99
|
-
|
|
101
|
+
filter: brightness(1.1);
|
|
100
102
|
}
|
|
101
103
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
border-color: map-get($foreground, disabled);
|
|
106
|
-
}
|
|
104
|
+
@include _matcha-button-types($theme); // include this properties event button don't have any size class
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
107
|
|
|
108
|
-
&-basic {
|
|
109
|
-
border: 0px solid currentColor;
|
|
110
|
-
box-shadow: 0px 0px 0px 0px inset;
|
|
111
|
-
background: transparent !important;
|
|
112
|
-
}
|
|
113
108
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
background: transparent !important;
|
|
118
|
-
}
|
|
109
|
+
@mixin _matcha-button-types($theme){
|
|
110
|
+
$background: map-get($theme, background);
|
|
111
|
+
$foreground: map-get($theme, foreground);
|
|
119
112
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
113
|
+
&[disabled] {
|
|
114
|
+
background-color: map-get($background, disabled);
|
|
115
|
+
color: map-get($foreground, disabled);
|
|
116
|
+
border-color: map-get($foreground, disabled);
|
|
117
|
+
}
|
|
123
118
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
text-decoration: underline;
|
|
130
|
-
padding: 0;
|
|
131
|
-
}
|
|
119
|
+
&-basic {
|
|
120
|
+
border: 0px solid currentColor;
|
|
121
|
+
box-shadow: 0px 0px 0px 0px inset;
|
|
122
|
+
background: transparent !important;
|
|
123
|
+
}
|
|
132
124
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
justify-content: center;
|
|
139
|
-
}
|
|
125
|
+
&-outline {
|
|
126
|
+
border: 0px solid currentColor;
|
|
127
|
+
box-shadow: 0px 0px 0px 2px inset;
|
|
128
|
+
background: transparent !important;
|
|
129
|
+
}
|
|
140
130
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
131
|
+
&-pill {
|
|
132
|
+
border-radius: 999px;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
&-link {
|
|
136
|
+
background-color: transparent;
|
|
137
|
+
color: map-get($foreground, label);
|
|
138
|
+
text-transform: initial;
|
|
139
|
+
letter-spacing: 0;
|
|
140
|
+
text-decoration: underline;
|
|
141
|
+
padding: 0;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
&-icon {
|
|
145
|
+
aspect-ratio: 1;
|
|
146
|
+
padding: 0 !important;
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: center;
|
|
149
|
+
justify-content: center;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.ripple {
|
|
153
|
+
position: absolute;
|
|
154
|
+
border-radius: 999px;
|
|
155
|
+
transform: scale(0);
|
|
156
|
+
pointer-events: none;
|
|
157
|
+
}
|
|
158
|
+
.ripple.show {
|
|
159
|
+
animation: ripple 400ms ease-out;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
@keyframes ripple {
|
|
163
|
+
0% {
|
|
164
|
+
opacity: 0;
|
|
144
165
|
transform: scale(0);
|
|
145
|
-
pointer-events: none;
|
|
146
166
|
}
|
|
147
|
-
|
|
148
|
-
|
|
167
|
+
25% {
|
|
168
|
+
opacity: 1;
|
|
149
169
|
}
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
opacity: 0;
|
|
154
|
-
transform: scale(0);
|
|
155
|
-
}
|
|
156
|
-
25% {
|
|
157
|
-
opacity: 1;
|
|
158
|
-
}
|
|
159
|
-
100% {
|
|
160
|
-
opacity: 0;
|
|
161
|
-
transform: scale(2);
|
|
162
|
-
}
|
|
170
|
+
100% {
|
|
171
|
+
opacity: 0;
|
|
172
|
+
transform: scale(2);
|
|
163
173
|
}
|
|
164
174
|
}
|
|
165
175
|
}
|
|
176
|
+
|