sakana-element 2.1.2 → 2.1.3
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/README.md +1 -0
- package/dist/es/Alert-A4stKumX.js +19 -0
- package/dist/es/Badge-BG-vYP8Y.js +13 -0
- package/dist/es/Button-CFGE4_Ng.js +22 -0
- package/dist/es/{Collapse-l_8qKOBG.js → Collapse-B08VhCVq.js} +2 -2
- package/dist/es/{ConfigProvider-BPm3h9RG.js → ConfigProvider-DZO1d5Eq.js} +1 -1
- package/dist/es/{Dropdown-ZjZ0qSn2.js → Dropdown-CA-nv-2j.js} +3 -3
- package/dist/es/{Form-pxRZxseS.js → Form-VB1SL_iW.js} +1 -1
- package/dist/es/{Icon-UBaqO2nY.js → Icon-DpJyuj7c.js} +1 -1
- package/dist/es/{Input-BJoBaFXa.js → Input-C-bIqqo_.js} +3 -3
- package/dist/es/{Loading-BJJBJhg3.js → Loading-4MsOvzx9.js} +3 -3
- package/dist/es/{Message-CqBKW0c8.js → Message-CxT9rRUp.js} +5 -5
- package/dist/es/{Notification-CVACM2cj.js → Notification-D6em5HmO.js} +7 -7
- package/dist/es/{Overlay-C1k4Jcl7.js → Overlay-BRDSWspM.js} +1 -1
- package/dist/es/{Popconfirm-CW8oRycq.js → Popconfirm-D0ABSr-F.js} +4 -4
- package/dist/es/{Select-C7mwByXa.js → Select-BKYDP224.js} +4 -4
- package/dist/es/{Switch-CgFPFC3j.js → Switch-C1IdbnUa.js} +1 -1
- package/dist/es/{Tooltip-D9rQ4LEg.js → Tooltip-KpwbZdMX.js} +16 -16
- package/dist/es/index.js +54 -52
- package/dist/es/utils-bsCscZfS.js +84 -0
- package/dist/index.css +1 -1
- package/dist/theme/Alert.css +114 -38
- package/dist/theme/Badge.css +208 -0
- package/dist/theme/Button.css +83 -83
- package/dist/types/components/Alert/types.d.ts +3 -0
- package/dist/types/components/Badge/index.d.ts +27 -0
- package/dist/types/components/Badge/types.d.ts +10 -0
- package/dist/types/components/Button/constants.d.ts +2 -0
- package/dist/types/components/index.d.ts +1 -0
- package/dist/types/hooks/useSystemTheme.d.ts +1 -1
- package/dist/types/utils/color.d.ts +33 -0
- package/dist/types/utils/index.d.ts +1 -0
- package/dist/umd/index.css +1 -1
- package/dist/umd/index.css.gz +0 -0
- package/dist/umd/index.umd.cjs +3 -3
- package/dist/umd/index.umd.cjs.gz +0 -0
- package/package.json +1 -1
- package/dist/es/Alert-C5X-XFGJ.js +0 -15
- package/dist/es/Button-DTik2ZP6.js +0 -33
- package/dist/es/utils-340oIQ8K.js +0 -59
package/dist/theme/Alert.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* Alert Variables */
|
|
2
|
-
.px-alert[data-v-
|
|
2
|
+
.px-alert[data-v-d61a85f3] {
|
|
3
3
|
--px-alert-padding: 12px 16px;
|
|
4
4
|
--px-alert-bg-color: var(--px-fill-color-blank);
|
|
5
5
|
--px-alert-border-color: var(--px-border-color-dark);
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
--px-alert-shadow-color: var(--px-shadow-color);
|
|
16
16
|
}
|
|
17
17
|
/* Base Alert Styles - Pixel Game Notification */
|
|
18
|
-
.px-alert[data-v-
|
|
18
|
+
.px-alert[data-v-d61a85f3] {
|
|
19
19
|
padding: var(--px-alert-padding);
|
|
20
20
|
margin: 0;
|
|
21
21
|
box-sizing: border-box;
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
transition: none;
|
|
39
39
|
}
|
|
40
40
|
/* Border layer — filled with border color, clipped to pixel shape */
|
|
41
|
-
.px-alert[data-v-
|
|
41
|
+
.px-alert[data-v-d61a85f3]::before {
|
|
42
42
|
content: '';
|
|
43
43
|
position: absolute;
|
|
44
44
|
inset: 0;
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
z-index: -1;
|
|
53
53
|
}
|
|
54
54
|
/* Fill layer — inset by border width, filled with bg color */
|
|
55
|
-
.px-alert[data-v-
|
|
55
|
+
.px-alert[data-v-d61a85f3]::after {
|
|
56
56
|
content: '';
|
|
57
57
|
position: absolute;
|
|
58
58
|
inset: 2px;
|
|
@@ -66,42 +66,44 @@
|
|
|
66
66
|
z-index: -1;
|
|
67
67
|
}
|
|
68
68
|
/* Icon styling */
|
|
69
|
-
.px-alert .px-alert__icon[data-v-
|
|
69
|
+
.px-alert .px-alert__icon[data-v-d61a85f3] {
|
|
70
70
|
color: var(--px-alert-text-color);
|
|
71
71
|
font-size: var(--px-alert-icon-size);
|
|
72
72
|
width: var(--px-alert-icon-size);
|
|
73
73
|
margin-right: var(--px-alert-icon-margin);
|
|
74
74
|
flex-shrink: 0;
|
|
75
75
|
}
|
|
76
|
-
.px-alert .px-alert__icon.big-icon[data-v-
|
|
76
|
+
.px-alert .px-alert__icon.big-icon[data-v-d61a85f3] {
|
|
77
77
|
font-size: var(--px-alert-big-icon-size);
|
|
78
78
|
width: var(--px-alert-big-icon-size);
|
|
79
79
|
margin-right: var(--px-alert-big-icon-margin);
|
|
80
80
|
}
|
|
81
81
|
/* Content area */
|
|
82
|
-
.px-alert .px-alert__content[data-v-
|
|
82
|
+
.px-alert .px-alert__content[data-v-d61a85f3] {
|
|
83
83
|
color: var(--px-alert-text-color);
|
|
84
|
-
|
|
84
|
+
display: flex;
|
|
85
|
+
flex-direction: column;
|
|
86
|
+
justify-content: center;
|
|
85
87
|
flex: 1;
|
|
86
88
|
}
|
|
87
|
-
.px-alert .px-alert__content .px-alert__title[data-v-
|
|
89
|
+
.px-alert .px-alert__content .px-alert__title[data-v-d61a85f3] {
|
|
88
90
|
font-size: var(--px-alert-title-font-size);
|
|
89
91
|
line-height: 1.5;
|
|
90
92
|
font-weight: 400;
|
|
91
93
|
}
|
|
92
|
-
.px-alert .px-alert__content .px-alert__title.with-desc[data-v-
|
|
94
|
+
.px-alert .px-alert__content .px-alert__title.with-desc[data-v-d61a85f3] {
|
|
93
95
|
font-size: var(--px-alert-title-font-size-with-desc);
|
|
94
96
|
font-weight: 500;
|
|
95
97
|
margin-bottom: 4px;
|
|
96
98
|
}
|
|
97
|
-
.px-alert .px-alert__content .px-alert__description[data-v-
|
|
99
|
+
.px-alert .px-alert__content .px-alert__description[data-v-d61a85f3] {
|
|
98
100
|
font-size: var(--px-alert-desc-font-size);
|
|
99
101
|
margin: 0;
|
|
100
102
|
line-height: 1.4;
|
|
101
103
|
opacity: 0.9;
|
|
102
104
|
}
|
|
103
105
|
/* Close button - pixel style */
|
|
104
|
-
.px-alert .px-alert__content .px-alert__close[data-v-
|
|
106
|
+
.px-alert .px-alert__content .px-alert__close[data-v-d61a85f3] {
|
|
105
107
|
font-size: var(--px-font-size-large);
|
|
106
108
|
opacity: 1;
|
|
107
109
|
position: absolute;
|
|
@@ -111,109 +113,183 @@
|
|
|
111
113
|
padding: 2px;
|
|
112
114
|
transition: none;
|
|
113
115
|
}
|
|
114
|
-
.px-alert .px-alert__content .px-alert__close[data-v-
|
|
116
|
+
.px-alert .px-alert__content .px-alert__close[data-v-d61a85f3]:hover {
|
|
115
117
|
transform: translate(-1px, -1px);
|
|
116
118
|
}
|
|
117
|
-
.px-alert .px-alert__content .px-alert__close[data-v-
|
|
119
|
+
.px-alert .px-alert__content .px-alert__close[data-v-d61a85f3]:active {
|
|
118
120
|
transform: translate(1px, 1px);
|
|
119
121
|
}
|
|
120
|
-
.px-alert .px-alert__content .px-alert__close[data-v-
|
|
122
|
+
.px-alert .px-alert__content .px-alert__close[data-v-d61a85f3] .px-icon {
|
|
121
123
|
vertical-align: top;
|
|
122
124
|
}
|
|
123
125
|
/* Light theme close button */
|
|
124
|
-
.px-alert .px-alert__content.px-alert__light .px-alert__close[data-v-
|
|
126
|
+
.px-alert .px-alert__content.px-alert__light .px-alert__close[data-v-d61a85f3] {
|
|
125
127
|
color: var(--px-text-color-secondary);
|
|
126
128
|
}
|
|
127
|
-
.px-alert .px-alert__content.px-alert__light .px-alert__close[data-v-
|
|
129
|
+
.px-alert .px-alert__content.px-alert__light .px-alert__close[data-v-d61a85f3]:hover {
|
|
128
130
|
color: var(--px-text-color-primary);
|
|
129
131
|
}
|
|
130
132
|
/* Dark theme close button */
|
|
131
|
-
.px-alert .px-alert__content.px-alert__dark .px-alert__close[data-v-
|
|
133
|
+
.px-alert .px-alert__content.px-alert__dark .px-alert__close[data-v-d61a85f3] {
|
|
132
134
|
color: rgba(255, 255, 255, 0.7);
|
|
133
135
|
}
|
|
134
|
-
.px-alert .px-alert__content.px-alert__dark .px-alert__close[data-v-
|
|
136
|
+
.px-alert .px-alert__content.px-alert__dark .px-alert__close[data-v-d61a85f3]:hover {
|
|
135
137
|
color: var(--px-color-white);
|
|
136
138
|
}
|
|
137
139
|
/* Center text alignment */
|
|
138
|
-
.px-alert.text-center[data-v-
|
|
140
|
+
.px-alert.text-center[data-v-d61a85f3] {
|
|
139
141
|
justify-content: center;
|
|
140
142
|
}
|
|
141
|
-
.px-alert.text-center span[data-v-
|
|
142
|
-
.px-alert.text-center p[data-v-
|
|
143
|
+
.px-alert.text-center span[data-v-d61a85f3],
|
|
144
|
+
.px-alert.text-center p[data-v-d61a85f3] {
|
|
143
145
|
text-align: center;
|
|
144
146
|
}
|
|
147
|
+
/* Outline variant - solid border, transparent bg, no pixel shadow */
|
|
148
|
+
.px-alert.is-outline[data-v-d61a85f3] {
|
|
149
|
+
border: 2px solid var(--px-alert-border-color);
|
|
150
|
+
filter: none;
|
|
151
|
+
}
|
|
152
|
+
.px-alert.is-outline[data-v-d61a85f3]::before {
|
|
153
|
+
display: none;
|
|
154
|
+
}
|
|
155
|
+
.px-alert.is-outline[data-v-d61a85f3]::after {
|
|
156
|
+
clip-path: none;
|
|
157
|
+
inset: 0;
|
|
158
|
+
background: var(--px-alert-bg-color);
|
|
159
|
+
}
|
|
160
|
+
/* Dash variant - dashed border, light bg, no pixel shadow */
|
|
161
|
+
.px-alert.is-dash[data-v-d61a85f3] {
|
|
162
|
+
border: 2px dashed var(--px-alert-border-color);
|
|
163
|
+
filter: none;
|
|
164
|
+
}
|
|
165
|
+
.px-alert.is-dash[data-v-d61a85f3]::before {
|
|
166
|
+
display: none;
|
|
167
|
+
}
|
|
168
|
+
.px-alert.is-dash[data-v-d61a85f3]::after {
|
|
169
|
+
clip-path: none;
|
|
170
|
+
inset: 0;
|
|
171
|
+
background: var(--px-alert-bg-color);
|
|
172
|
+
}
|
|
145
173
|
/* Animation - instant for pixel feel */
|
|
146
|
-
.px-alert-fade-enter-from[data-v-
|
|
147
|
-
.px-alert-fade-leave-to[data-v-
|
|
174
|
+
.px-alert-fade-enter-from[data-v-d61a85f3],
|
|
175
|
+
.px-alert-fade-leave-to[data-v-d61a85f3] {
|
|
148
176
|
opacity: 0;
|
|
149
177
|
transform: translateY(-8px);
|
|
150
178
|
}
|
|
151
|
-
.px-alert-fade-enter-active[data-v-
|
|
152
|
-
.px-alert-fade-leave-active[data-v-
|
|
179
|
+
.px-alert-fade-enter-active[data-v-d61a85f3],
|
|
180
|
+
.px-alert-fade-leave-active[data-v-d61a85f3] {
|
|
153
181
|
transition: opacity 0.15s, transform 0.15s;
|
|
154
182
|
}
|
|
155
183
|
/* Type variants - Light theme */
|
|
156
|
-
.px-alert__success.px-alert__light[data-v-
|
|
184
|
+
.px-alert__success.px-alert__light[data-v-d61a85f3] {
|
|
157
185
|
--px-alert-text-color: var(--px-color-success-dark);
|
|
158
186
|
--px-alert-bg-color: var(--px-color-success-light-9);
|
|
159
187
|
--px-alert-border-color: var(--px-color-success);
|
|
160
188
|
--px-alert-shadow-color: var(--px-color-success-dark);
|
|
161
189
|
}
|
|
162
|
-
.px-alert__success.px-alert__dark[data-v-
|
|
190
|
+
.px-alert__success.px-alert__dark[data-v-d61a85f3] {
|
|
163
191
|
--px-alert-text-color: var(--px-color-white);
|
|
164
192
|
--px-alert-bg-color: var(--px-color-success);
|
|
165
193
|
--px-alert-border-color: var(--px-color-success-dark);
|
|
166
194
|
--px-alert-shadow-color: var(--px-color-success-dark);
|
|
167
195
|
}
|
|
168
196
|
/* Pixel highlight effect for dark theme */
|
|
169
|
-
.px-alert__success.px-alert__dark[data-v-
|
|
197
|
+
.px-alert__success.px-alert__dark[data-v-d61a85f3]::after {
|
|
170
198
|
box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.15);
|
|
199
|
+
}
|
|
200
|
+
/* Outline variant for type */
|
|
201
|
+
.px-alert__success.is-outline[data-v-d61a85f3] {
|
|
202
|
+
--px-alert-text-color: var(--px-color-success);
|
|
203
|
+
--px-alert-bg-color: transparent;
|
|
204
|
+
--px-alert-border-color: var(--px-color-success);
|
|
205
|
+
}
|
|
206
|
+
/* Dash variant for type */
|
|
207
|
+
.px-alert__success.is-dash[data-v-d61a85f3] {
|
|
208
|
+
--px-alert-text-color: var(--px-color-success);
|
|
209
|
+
--px-alert-bg-color: var(--px-color-success-light-9);
|
|
210
|
+
--px-alert-border-color: var(--px-color-success);
|
|
171
211
|
}
|
|
172
|
-
.px-alert__warning.px-alert__light[data-v-
|
|
212
|
+
.px-alert__warning.px-alert__light[data-v-d61a85f3] {
|
|
173
213
|
--px-alert-text-color: var(--px-color-warning-dark);
|
|
174
214
|
--px-alert-bg-color: var(--px-color-warning-light-9);
|
|
175
215
|
--px-alert-border-color: var(--px-color-warning);
|
|
176
216
|
--px-alert-shadow-color: var(--px-color-warning-dark);
|
|
177
217
|
}
|
|
178
|
-
.px-alert__warning.px-alert__dark[data-v-
|
|
218
|
+
.px-alert__warning.px-alert__dark[data-v-d61a85f3] {
|
|
179
219
|
--px-alert-text-color: var(--px-color-white);
|
|
180
220
|
--px-alert-bg-color: var(--px-color-warning);
|
|
181
221
|
--px-alert-border-color: var(--px-color-warning-dark);
|
|
182
222
|
--px-alert-shadow-color: var(--px-color-warning-dark);
|
|
183
223
|
}
|
|
184
224
|
/* Pixel highlight effect for dark theme */
|
|
185
|
-
.px-alert__warning.px-alert__dark[data-v-
|
|
225
|
+
.px-alert__warning.px-alert__dark[data-v-d61a85f3]::after {
|
|
186
226
|
box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.15);
|
|
227
|
+
}
|
|
228
|
+
/* Outline variant for type */
|
|
229
|
+
.px-alert__warning.is-outline[data-v-d61a85f3] {
|
|
230
|
+
--px-alert-text-color: var(--px-color-warning);
|
|
231
|
+
--px-alert-bg-color: transparent;
|
|
232
|
+
--px-alert-border-color: var(--px-color-warning);
|
|
233
|
+
}
|
|
234
|
+
/* Dash variant for type */
|
|
235
|
+
.px-alert__warning.is-dash[data-v-d61a85f3] {
|
|
236
|
+
--px-alert-text-color: var(--px-color-warning);
|
|
237
|
+
--px-alert-bg-color: var(--px-color-warning-light-9);
|
|
238
|
+
--px-alert-border-color: var(--px-color-warning);
|
|
187
239
|
}
|
|
188
|
-
.px-alert__info.px-alert__light[data-v-
|
|
240
|
+
.px-alert__info.px-alert__light[data-v-d61a85f3] {
|
|
189
241
|
--px-alert-text-color: var(--px-color-info-dark);
|
|
190
242
|
--px-alert-bg-color: var(--px-color-info-light-9);
|
|
191
243
|
--px-alert-border-color: var(--px-color-info);
|
|
192
244
|
--px-alert-shadow-color: var(--px-color-info-dark);
|
|
193
245
|
}
|
|
194
|
-
.px-alert__info.px-alert__dark[data-v-
|
|
246
|
+
.px-alert__info.px-alert__dark[data-v-d61a85f3] {
|
|
195
247
|
--px-alert-text-color: var(--px-color-white);
|
|
196
248
|
--px-alert-bg-color: var(--px-color-info);
|
|
197
249
|
--px-alert-border-color: var(--px-color-info-dark);
|
|
198
250
|
--px-alert-shadow-color: var(--px-color-info-dark);
|
|
199
251
|
}
|
|
200
252
|
/* Pixel highlight effect for dark theme */
|
|
201
|
-
.px-alert__info.px-alert__dark[data-v-
|
|
253
|
+
.px-alert__info.px-alert__dark[data-v-d61a85f3]::after {
|
|
202
254
|
box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.15);
|
|
255
|
+
}
|
|
256
|
+
/* Outline variant for type */
|
|
257
|
+
.px-alert__info.is-outline[data-v-d61a85f3] {
|
|
258
|
+
--px-alert-text-color: var(--px-color-info);
|
|
259
|
+
--px-alert-bg-color: transparent;
|
|
260
|
+
--px-alert-border-color: var(--px-color-info);
|
|
261
|
+
}
|
|
262
|
+
/* Dash variant for type */
|
|
263
|
+
.px-alert__info.is-dash[data-v-d61a85f3] {
|
|
264
|
+
--px-alert-text-color: var(--px-color-info);
|
|
265
|
+
--px-alert-bg-color: var(--px-color-info-light-9);
|
|
266
|
+
--px-alert-border-color: var(--px-color-info);
|
|
203
267
|
}
|
|
204
|
-
.px-alert__danger.px-alert__light[data-v-
|
|
268
|
+
.px-alert__danger.px-alert__light[data-v-d61a85f3] {
|
|
205
269
|
--px-alert-text-color: var(--px-color-danger-dark);
|
|
206
270
|
--px-alert-bg-color: var(--px-color-danger-light-9);
|
|
207
271
|
--px-alert-border-color: var(--px-color-danger);
|
|
208
272
|
--px-alert-shadow-color: var(--px-color-danger-dark);
|
|
209
273
|
}
|
|
210
|
-
.px-alert__danger.px-alert__dark[data-v-
|
|
274
|
+
.px-alert__danger.px-alert__dark[data-v-d61a85f3] {
|
|
211
275
|
--px-alert-text-color: var(--px-color-white);
|
|
212
276
|
--px-alert-bg-color: var(--px-color-danger);
|
|
213
277
|
--px-alert-border-color: var(--px-color-danger-dark);
|
|
214
278
|
--px-alert-shadow-color: var(--px-color-danger-dark);
|
|
215
279
|
}
|
|
216
280
|
/* Pixel highlight effect for dark theme */
|
|
217
|
-
.px-alert__danger.px-alert__dark[data-v-
|
|
281
|
+
.px-alert__danger.px-alert__dark[data-v-d61a85f3]::after {
|
|
218
282
|
box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.15);
|
|
283
|
+
}
|
|
284
|
+
/* Outline variant for type */
|
|
285
|
+
.px-alert__danger.is-outline[data-v-d61a85f3] {
|
|
286
|
+
--px-alert-text-color: var(--px-color-danger);
|
|
287
|
+
--px-alert-bg-color: transparent;
|
|
288
|
+
--px-alert-border-color: var(--px-color-danger);
|
|
289
|
+
}
|
|
290
|
+
/* Dash variant for type */
|
|
291
|
+
.px-alert__danger.is-dash[data-v-d61a85f3] {
|
|
292
|
+
--px-alert-text-color: var(--px-color-danger);
|
|
293
|
+
--px-alert-bg-color: var(--px-color-danger-light-9);
|
|
294
|
+
--px-alert-border-color: var(--px-color-danger);
|
|
219
295
|
}
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
/* Badge Variables */
|
|
2
|
+
.px-badge[data-v-c5a490ec] {
|
|
3
|
+
--px-badge-text-color: var(--px-color-white);
|
|
4
|
+
--px-badge-bg-color: var(--px-color-primary);
|
|
5
|
+
--px-badge-border-color: var(--px-color-primary-dark);
|
|
6
|
+
--px-badge-shadow-color: var(--px-color-primary-dark);
|
|
7
|
+
--px-badge-font-size: var(--px-font-size-extra-small);
|
|
8
|
+
--px-badge-height: 22px;
|
|
9
|
+
--px-badge-padding: 0 8px;
|
|
10
|
+
}
|
|
11
|
+
/* Base Badge Styles - Pixel Game Aesthetic */
|
|
12
|
+
.px-badge[data-v-c5a490ec] {
|
|
13
|
+
display: inline-flex;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
align-items: center;
|
|
16
|
+
height: var(--px-badge-height);
|
|
17
|
+
padding: var(--px-badge-padding);
|
|
18
|
+
font-size: var(--px-badge-font-size);
|
|
19
|
+
font-family: var(--px-font-family);
|
|
20
|
+
font-weight: 500;
|
|
21
|
+
color: var(--px-badge-text-color);
|
|
22
|
+
line-height: 1;
|
|
23
|
+
white-space: nowrap;
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
position: relative;
|
|
26
|
+
background: transparent;
|
|
27
|
+
vertical-align: middle;
|
|
28
|
+
|
|
29
|
+
/* Remove traditional border — pixel border via pseudo-elements */
|
|
30
|
+
border: none;
|
|
31
|
+
|
|
32
|
+
/* Pixel shadow via drop-shadow */
|
|
33
|
+
filter: drop-shadow(2px 2px 0px var(--px-badge-shadow-color));
|
|
34
|
+
|
|
35
|
+
transition: none;
|
|
36
|
+
}
|
|
37
|
+
/* Border layer — filled with border color, clipped to pixel shape */
|
|
38
|
+
.px-badge[data-v-c5a490ec]::before {
|
|
39
|
+
content: '';
|
|
40
|
+
position: absolute;
|
|
41
|
+
inset: 0;
|
|
42
|
+
background: var(--px-badge-border-color);
|
|
43
|
+
clip-path: polygon(
|
|
44
|
+
0 2px, 2px 2px, 2px 0,
|
|
45
|
+
calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
|
|
46
|
+
100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
|
|
47
|
+
2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
|
|
48
|
+
);
|
|
49
|
+
z-index: -1;
|
|
50
|
+
}
|
|
51
|
+
/* Fill layer — inset by border width, filled with bg color */
|
|
52
|
+
.px-badge[data-v-c5a490ec]::after {
|
|
53
|
+
content: '';
|
|
54
|
+
position: absolute;
|
|
55
|
+
inset: 2px;
|
|
56
|
+
background: var(--px-badge-bg-color);
|
|
57
|
+
clip-path: polygon(
|
|
58
|
+
0 2px, 2px 2px, 2px 0,
|
|
59
|
+
calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
|
|
60
|
+
100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
|
|
61
|
+
2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
|
|
62
|
+
);
|
|
63
|
+
z-index: -1;
|
|
64
|
+
}
|
|
65
|
+
.px-badge + .px-badge[data-v-c5a490ec] {
|
|
66
|
+
margin-left: 8px;
|
|
67
|
+
}
|
|
68
|
+
/* Outline variant */
|
|
69
|
+
.px-badge.is-outline[data-v-c5a490ec] {
|
|
70
|
+
border: 2px solid var(--px-badge-border-color);
|
|
71
|
+
filter: none;
|
|
72
|
+
}
|
|
73
|
+
.px-badge.is-outline[data-v-c5a490ec]::before {
|
|
74
|
+
display: none;
|
|
75
|
+
}
|
|
76
|
+
.px-badge.is-outline[data-v-c5a490ec]::after {
|
|
77
|
+
clip-path: none;
|
|
78
|
+
inset: 0;
|
|
79
|
+
background: var(--px-badge-bg-color);
|
|
80
|
+
}
|
|
81
|
+
/* Dash variant */
|
|
82
|
+
.px-badge.is-dash[data-v-c5a490ec] {
|
|
83
|
+
border: 2px dashed var(--px-badge-border-color);
|
|
84
|
+
filter: none;
|
|
85
|
+
}
|
|
86
|
+
.px-badge.is-dash[data-v-c5a490ec]::before {
|
|
87
|
+
display: none;
|
|
88
|
+
}
|
|
89
|
+
.px-badge.is-dash[data-v-c5a490ec]::after {
|
|
90
|
+
clip-path: none;
|
|
91
|
+
inset: 0;
|
|
92
|
+
background: var(--px-badge-bg-color);
|
|
93
|
+
}
|
|
94
|
+
/* Round - Pixel-style rounded corners */
|
|
95
|
+
.px-badge.is-round[data-v-c5a490ec] {
|
|
96
|
+
padding: 0 10px;
|
|
97
|
+
}
|
|
98
|
+
.px-badge.is-round[data-v-c5a490ec]::before, .px-badge.is-round[data-v-c5a490ec]::after {
|
|
99
|
+
clip-path: polygon(
|
|
100
|
+
0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
|
|
101
|
+
calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
|
|
102
|
+
100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
|
|
103
|
+
4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
|
|
104
|
+
);
|
|
105
|
+
}
|
|
106
|
+
/* Type variants */
|
|
107
|
+
.px-badge--primary[data-v-c5a490ec] {
|
|
108
|
+
--px-badge-text-color: var(--px-color-white);
|
|
109
|
+
--px-badge-bg-color: var(--px-color-primary);
|
|
110
|
+
--px-badge-border-color: var(--px-color-primary-dark);
|
|
111
|
+
--px-badge-shadow-color: var(--px-color-primary-dark);
|
|
112
|
+
}
|
|
113
|
+
/* Outline variant for type */
|
|
114
|
+
.px-badge--primary.is-outline[data-v-c5a490ec] {
|
|
115
|
+
--px-badge-text-color: var(--px-color-primary);
|
|
116
|
+
--px-badge-bg-color: transparent;
|
|
117
|
+
--px-badge-border-color: var(--px-color-primary);
|
|
118
|
+
}
|
|
119
|
+
/* Dash variant for type */
|
|
120
|
+
.px-badge--primary.is-dash[data-v-c5a490ec] {
|
|
121
|
+
--px-badge-text-color: var(--px-color-primary);
|
|
122
|
+
--px-badge-bg-color: var(--px-color-primary-light-9);
|
|
123
|
+
--px-badge-border-color: var(--px-color-primary);
|
|
124
|
+
}
|
|
125
|
+
.px-badge--success[data-v-c5a490ec] {
|
|
126
|
+
--px-badge-text-color: var(--px-color-white);
|
|
127
|
+
--px-badge-bg-color: var(--px-color-success);
|
|
128
|
+
--px-badge-border-color: var(--px-color-success-dark);
|
|
129
|
+
--px-badge-shadow-color: var(--px-color-success-dark);
|
|
130
|
+
}
|
|
131
|
+
/* Outline variant for type */
|
|
132
|
+
.px-badge--success.is-outline[data-v-c5a490ec] {
|
|
133
|
+
--px-badge-text-color: var(--px-color-success);
|
|
134
|
+
--px-badge-bg-color: transparent;
|
|
135
|
+
--px-badge-border-color: var(--px-color-success);
|
|
136
|
+
}
|
|
137
|
+
/* Dash variant for type */
|
|
138
|
+
.px-badge--success.is-dash[data-v-c5a490ec] {
|
|
139
|
+
--px-badge-text-color: var(--px-color-success);
|
|
140
|
+
--px-badge-bg-color: var(--px-color-success-light-9);
|
|
141
|
+
--px-badge-border-color: var(--px-color-success);
|
|
142
|
+
}
|
|
143
|
+
.px-badge--info[data-v-c5a490ec] {
|
|
144
|
+
--px-badge-text-color: var(--px-color-white);
|
|
145
|
+
--px-badge-bg-color: var(--px-color-info);
|
|
146
|
+
--px-badge-border-color: var(--px-color-info-dark);
|
|
147
|
+
--px-badge-shadow-color: var(--px-color-info-dark);
|
|
148
|
+
}
|
|
149
|
+
/* Outline variant for type */
|
|
150
|
+
.px-badge--info.is-outline[data-v-c5a490ec] {
|
|
151
|
+
--px-badge-text-color: var(--px-color-info);
|
|
152
|
+
--px-badge-bg-color: transparent;
|
|
153
|
+
--px-badge-border-color: var(--px-color-info);
|
|
154
|
+
}
|
|
155
|
+
/* Dash variant for type */
|
|
156
|
+
.px-badge--info.is-dash[data-v-c5a490ec] {
|
|
157
|
+
--px-badge-text-color: var(--px-color-info);
|
|
158
|
+
--px-badge-bg-color: var(--px-color-info-light-9);
|
|
159
|
+
--px-badge-border-color: var(--px-color-info);
|
|
160
|
+
}
|
|
161
|
+
.px-badge--warning[data-v-c5a490ec] {
|
|
162
|
+
--px-badge-text-color: var(--px-color-white);
|
|
163
|
+
--px-badge-bg-color: var(--px-color-warning);
|
|
164
|
+
--px-badge-border-color: var(--px-color-warning-dark);
|
|
165
|
+
--px-badge-shadow-color: var(--px-color-warning-dark);
|
|
166
|
+
}
|
|
167
|
+
/* Outline variant for type */
|
|
168
|
+
.px-badge--warning.is-outline[data-v-c5a490ec] {
|
|
169
|
+
--px-badge-text-color: var(--px-color-warning);
|
|
170
|
+
--px-badge-bg-color: transparent;
|
|
171
|
+
--px-badge-border-color: var(--px-color-warning);
|
|
172
|
+
}
|
|
173
|
+
/* Dash variant for type */
|
|
174
|
+
.px-badge--warning.is-dash[data-v-c5a490ec] {
|
|
175
|
+
--px-badge-text-color: var(--px-color-warning);
|
|
176
|
+
--px-badge-bg-color: var(--px-color-warning-light-9);
|
|
177
|
+
--px-badge-border-color: var(--px-color-warning);
|
|
178
|
+
}
|
|
179
|
+
.px-badge--danger[data-v-c5a490ec] {
|
|
180
|
+
--px-badge-text-color: var(--px-color-white);
|
|
181
|
+
--px-badge-bg-color: var(--px-color-danger);
|
|
182
|
+
--px-badge-border-color: var(--px-color-danger-dark);
|
|
183
|
+
--px-badge-shadow-color: var(--px-color-danger-dark);
|
|
184
|
+
}
|
|
185
|
+
/* Outline variant for type */
|
|
186
|
+
.px-badge--danger.is-outline[data-v-c5a490ec] {
|
|
187
|
+
--px-badge-text-color: var(--px-color-danger);
|
|
188
|
+
--px-badge-bg-color: transparent;
|
|
189
|
+
--px-badge-border-color: var(--px-color-danger);
|
|
190
|
+
}
|
|
191
|
+
/* Dash variant for type */
|
|
192
|
+
.px-badge--danger.is-dash[data-v-c5a490ec] {
|
|
193
|
+
--px-badge-text-color: var(--px-color-danger);
|
|
194
|
+
--px-badge-bg-color: var(--px-color-danger-light-9);
|
|
195
|
+
--px-badge-border-color: var(--px-color-danger);
|
|
196
|
+
}
|
|
197
|
+
/* Size variants */
|
|
198
|
+
.px-badge--large[data-v-c5a490ec] {
|
|
199
|
+
--px-badge-height: 28px;
|
|
200
|
+
--px-badge-padding: 0 12px;
|
|
201
|
+
--px-badge-font-size: var(--px-font-size-small);
|
|
202
|
+
}
|
|
203
|
+
.px-badge--small[data-v-c5a490ec] {
|
|
204
|
+
--px-badge-height: 18px;
|
|
205
|
+
--px-badge-padding: 0 6px;
|
|
206
|
+
--px-badge-font-size: 10px;
|
|
207
|
+
filter: drop-shadow(1px 1px 0px var(--px-badge-shadow-color));
|
|
208
|
+
}
|