@bigtablet/design-system 1.4.0 → 1.5.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/dist/index.css +329 -536
- package/dist/index.d.ts +15 -16
- package/dist/index.js +232 -205
- package/dist/next.css +16 -17
- package/dist/next.js +19 -14
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1,38 +1,44 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
|
|
1
3
|
/* src/ui/display/card/style.scss */
|
|
2
4
|
.card {
|
|
3
|
-
border-radius: 12px;
|
|
4
5
|
background: #ffffff;
|
|
6
|
+
border-radius: 12px;
|
|
5
7
|
}
|
|
6
|
-
.
|
|
8
|
+
.card_bordered {
|
|
7
9
|
border: 1px solid #e5e5e5;
|
|
8
10
|
}
|
|
9
|
-
.card
|
|
11
|
+
.card {
|
|
12
|
+
}
|
|
13
|
+
.card_shadow_none {
|
|
10
14
|
box-shadow: none;
|
|
11
15
|
}
|
|
12
|
-
.
|
|
16
|
+
.card_shadow_sm {
|
|
13
17
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
|
|
14
18
|
}
|
|
15
|
-
.
|
|
19
|
+
.card_shadow_md {
|
|
16
20
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
|
|
17
21
|
}
|
|
18
|
-
.
|
|
22
|
+
.card_shadow_lg {
|
|
19
23
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
|
|
20
24
|
}
|
|
21
|
-
.card
|
|
25
|
+
.card {
|
|
26
|
+
}
|
|
27
|
+
.card_p_none {
|
|
22
28
|
padding: 0;
|
|
23
29
|
}
|
|
24
|
-
.
|
|
30
|
+
.card_p_sm {
|
|
25
31
|
padding: 0.5rem;
|
|
26
32
|
}
|
|
27
|
-
.
|
|
33
|
+
.card_p_md {
|
|
28
34
|
padding: 1rem;
|
|
29
35
|
}
|
|
30
|
-
.
|
|
36
|
+
.card_p_lg {
|
|
31
37
|
padding: 1.5rem;
|
|
32
38
|
}
|
|
33
39
|
.card {
|
|
34
40
|
}
|
|
35
|
-
.
|
|
41
|
+
.card_title {
|
|
36
42
|
font-size: 1.25rem;
|
|
37
43
|
font-weight: 600;
|
|
38
44
|
line-height: 1.3;
|
|
@@ -41,311 +47,200 @@
|
|
|
41
47
|
}
|
|
42
48
|
.card {
|
|
43
49
|
}
|
|
44
|
-
.
|
|
50
|
+
.card_body {
|
|
45
51
|
width: 100%;
|
|
46
52
|
}
|
|
47
53
|
|
|
48
54
|
/* src/ui/feedback/alert/style.scss */
|
|
49
|
-
.
|
|
55
|
+
.alert_overlay {
|
|
50
56
|
position: fixed;
|
|
51
57
|
inset: 0;
|
|
52
58
|
background: rgba(0, 0, 0, 0.5);
|
|
53
59
|
display: flex;
|
|
54
60
|
align-items: center;
|
|
55
61
|
justify-content: center;
|
|
56
|
-
z-index:
|
|
57
|
-
animation:
|
|
58
|
-
}
|
|
59
|
-
@keyframes fadeIn {
|
|
60
|
-
from {
|
|
61
|
-
opacity: 0;
|
|
62
|
-
}
|
|
63
|
-
to {
|
|
64
|
-
opacity: 1;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
@keyframes slideUp {
|
|
68
|
-
from {
|
|
69
|
-
opacity: 0;
|
|
70
|
-
transform: translateY(20px);
|
|
71
|
-
}
|
|
72
|
-
to {
|
|
73
|
-
opacity: 1;
|
|
74
|
-
transform: translateY(0);
|
|
75
|
-
}
|
|
62
|
+
z-index: 10000;
|
|
63
|
+
animation: fade_in 0.2s ease-out;
|
|
76
64
|
}
|
|
77
|
-
.
|
|
78
|
-
background:
|
|
65
|
+
.alert_modal {
|
|
66
|
+
background: #ffffff;
|
|
79
67
|
border-radius: 12px;
|
|
80
|
-
padding: 0;
|
|
81
68
|
min-width: 320px;
|
|
82
69
|
max-width: 480px;
|
|
83
70
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
84
|
-
animation:
|
|
85
|
-
position: relative;
|
|
71
|
+
animation: slide_up 0.3s ease-out;
|
|
86
72
|
overflow: hidden;
|
|
87
73
|
}
|
|
88
|
-
.
|
|
74
|
+
.alert_modal_title {
|
|
89
75
|
font-size: 1.125rem;
|
|
90
76
|
line-height: 1.5;
|
|
91
77
|
font-weight: 600;
|
|
92
|
-
|
|
93
|
-
margin-top: 8px;
|
|
94
|
-
padding: 0.75rem 1.25rem;
|
|
95
|
-
padding-bottom: 0.25rem;
|
|
78
|
+
padding: 0.75rem 1.25rem 0.25rem;
|
|
96
79
|
}
|
|
97
|
-
.
|
|
80
|
+
.alert_modal_message {
|
|
98
81
|
font-size: 0.9375rem;
|
|
99
82
|
font-weight: 400;
|
|
100
83
|
line-height: 1.5;
|
|
101
84
|
color: #666666;
|
|
102
|
-
margin: 0;
|
|
103
85
|
padding: 1.25rem;
|
|
104
|
-
padding-bottom: 1rem;
|
|
105
86
|
line-height: 1.6;
|
|
106
87
|
}
|
|
107
|
-
.
|
|
88
|
+
.alert_modal_actions {
|
|
108
89
|
display: flex;
|
|
109
90
|
gap: 0.5rem;
|
|
110
|
-
|
|
111
|
-
padding: 0 1.25rem 1.25rem 1.25rem;
|
|
91
|
+
padding: 0 1.25rem 1.25rem;
|
|
112
92
|
}
|
|
113
|
-
.
|
|
93
|
+
.alert_modal_actions_left {
|
|
114
94
|
justify-content: flex-start;
|
|
115
95
|
}
|
|
116
|
-
.
|
|
96
|
+
.alert_modal_actions_center {
|
|
117
97
|
justify-content: center;
|
|
118
98
|
}
|
|
119
|
-
.
|
|
99
|
+
.alert_modal_actions_right {
|
|
120
100
|
justify-content: flex-end;
|
|
121
101
|
}
|
|
122
|
-
.
|
|
102
|
+
.alert_modal_button {
|
|
103
|
+
min-width: 80px;
|
|
123
104
|
padding: 10px 24px;
|
|
124
105
|
border-radius: 6px;
|
|
125
|
-
font-size: 14px;
|
|
126
106
|
font-weight: 600;
|
|
127
107
|
cursor: pointer;
|
|
128
|
-
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
129
108
|
border: 1px solid transparent;
|
|
130
|
-
|
|
131
|
-
line-height: 1.5;
|
|
109
|
+
transition: 0.2s ease-out;
|
|
132
110
|
}
|
|
133
|
-
.
|
|
134
|
-
outline: 2px solid rgba(0, 0, 0, 0.
|
|
135
|
-
outline-offset: 2px;
|
|
111
|
+
.alert_modal_button:focus-visible {
|
|
112
|
+
outline: 2px solid rgba(0, 0, 0, 0.08);
|
|
136
113
|
}
|
|
137
|
-
.
|
|
138
|
-
background:
|
|
114
|
+
.alert_modal_button_cancel {
|
|
115
|
+
background: #ffffff;
|
|
139
116
|
border-color: #e5e5e5;
|
|
140
117
|
color: #1a1a1a;
|
|
141
118
|
}
|
|
142
|
-
.
|
|
143
|
-
background:
|
|
144
|
-
border-color: rgba(0, 0, 0, 0.3);
|
|
145
|
-
}
|
|
146
|
-
.alert-modal__button--cancel:active {
|
|
147
|
-
transform: scale(0.98);
|
|
148
|
-
background: rgba(0, 0, 0, 0.06);
|
|
119
|
+
.alert_modal_button_cancel:hover {
|
|
120
|
+
background: #fafafa;
|
|
149
121
|
}
|
|
150
|
-
.
|
|
151
|
-
color:
|
|
152
|
-
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
122
|
+
.alert_modal_button_confirm {
|
|
123
|
+
color: #FFFFFF;
|
|
153
124
|
}
|
|
154
|
-
.
|
|
155
|
-
transform: scale(0.98);
|
|
125
|
+
.alert_modal {
|
|
156
126
|
}
|
|
157
|
-
.
|
|
127
|
+
.alert_modal_info .alert_modal_title {
|
|
158
128
|
color: #3b82f6;
|
|
159
129
|
}
|
|
160
|
-
.
|
|
130
|
+
.alert_modal_info .alert_modal_button_confirm {
|
|
161
131
|
background: #3b82f6;
|
|
162
|
-
border-color: #3b82f6;
|
|
163
132
|
}
|
|
164
|
-
.
|
|
165
|
-
background: rgb(29.7434146341, 111.3414634146, 244.6565853659);
|
|
166
|
-
border-color: rgb(29.7434146341, 111.3414634146, 244.6565853659);
|
|
167
|
-
}
|
|
168
|
-
.alert-modal--success .alert-modal__title {
|
|
133
|
+
.alert_modal_success .alert_modal_title {
|
|
169
134
|
color: #10b981;
|
|
170
135
|
}
|
|
171
|
-
.
|
|
136
|
+
.alert_modal_success .alert_modal_button_confirm {
|
|
172
137
|
background: #10b981;
|
|
173
|
-
border-color: #10b981;
|
|
174
|
-
}
|
|
175
|
-
.alert-modal--success .alert-modal__button--confirm:hover {
|
|
176
|
-
background: rgb(13.5641791045, 156.8358208955, 109.3611940299);
|
|
177
|
-
border-color: rgb(13.5641791045, 156.8358208955, 109.3611940299);
|
|
178
138
|
}
|
|
179
|
-
.
|
|
139
|
+
.alert_modal_warning .alert_modal_title {
|
|
180
140
|
color: #f59e0b;
|
|
181
141
|
}
|
|
182
|
-
.
|
|
142
|
+
.alert_modal_warning .alert_modal_button_confirm {
|
|
183
143
|
background: #f59e0b;
|
|
184
|
-
border-color: #f59e0b;
|
|
185
|
-
}
|
|
186
|
-
.alert-modal--warning .alert-modal__button--confirm:hover {
|
|
187
|
-
background: rgb(216.525984252, 139.3220472441, 8.874015748);
|
|
188
|
-
border-color: rgb(216.525984252, 139.3220472441, 8.874015748);
|
|
189
144
|
}
|
|
190
|
-
.
|
|
145
|
+
.alert_modal_error .alert_modal_title {
|
|
191
146
|
color: #ef4444;
|
|
192
147
|
}
|
|
193
|
-
.
|
|
148
|
+
.alert_modal_error .alert_modal_button_confirm {
|
|
194
149
|
background: #ef4444;
|
|
195
|
-
border-color: #ef4444;
|
|
196
|
-
}
|
|
197
|
-
.alert-modal--error .alert-modal__button--confirm:hover {
|
|
198
|
-
background: rgb(236.5881773399, 39.8118226601, 39.8118226601);
|
|
199
|
-
border-color: rgb(236.5881773399, 39.8118226601, 39.8118226601);
|
|
200
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
|
201
150
|
}
|
|
202
151
|
|
|
203
152
|
/* src/ui/feedback/loading/style.scss */
|
|
204
|
-
@keyframes
|
|
153
|
+
@keyframes loading_spin {
|
|
205
154
|
to {
|
|
206
155
|
transform: rotate(360deg);
|
|
207
156
|
}
|
|
208
157
|
}
|
|
209
158
|
.loading {
|
|
210
159
|
display: inline-block;
|
|
160
|
+
box-sizing: border-box;
|
|
211
161
|
border-radius: 50%;
|
|
212
162
|
border: 2px solid #e5e5e5;
|
|
213
163
|
border-top-color: #000000;
|
|
214
|
-
animation:
|
|
164
|
+
animation: loading_spin 0.8s linear infinite;
|
|
215
165
|
}
|
|
216
166
|
|
|
217
167
|
/* src/ui/general/button/style.scss */
|
|
218
|
-
.
|
|
168
|
+
.button {
|
|
219
169
|
width: 100%;
|
|
220
|
-
display: flex;
|
|
170
|
+
display: inline-flex;
|
|
221
171
|
align-items: center;
|
|
222
172
|
justify-content: center;
|
|
173
|
+
gap: 0.5rem;
|
|
174
|
+
border-radius: 8px;
|
|
223
175
|
border: none;
|
|
224
176
|
cursor: pointer;
|
|
225
|
-
transition: 0.2s ease-out;
|
|
226
177
|
font-weight: 500;
|
|
227
|
-
|
|
178
|
+
transition:
|
|
179
|
+
background 0.2s ease-out,
|
|
180
|
+
color 0.2s ease-out,
|
|
181
|
+
box-shadow 0.2s ease-out,
|
|
182
|
+
transform 0.2s ease-out;
|
|
228
183
|
}
|
|
229
|
-
.
|
|
184
|
+
.button:disabled {
|
|
230
185
|
cursor: not-allowed;
|
|
231
|
-
opacity: 0.
|
|
186
|
+
opacity: 0.6;
|
|
232
187
|
}
|
|
233
|
-
.
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
justify-content: center;
|
|
238
|
-
border: none;
|
|
239
|
-
cursor: pointer;
|
|
240
|
-
transition: 0.2s ease-out;
|
|
241
|
-
font-weight: 500;
|
|
242
|
-
border-radius: 8px;
|
|
188
|
+
.button_size_sm {
|
|
189
|
+
padding: 0.5rem 1rem;
|
|
190
|
+
font-size: 0.875rem;
|
|
191
|
+
line-height: 1.5;
|
|
243
192
|
}
|
|
244
|
-
.
|
|
245
|
-
|
|
246
|
-
|
|
193
|
+
.button_size_md {
|
|
194
|
+
padding: 0.75rem 1.25rem;
|
|
195
|
+
font-size: 0.9375rem;
|
|
196
|
+
line-height: 1.5;
|
|
197
|
+
}
|
|
198
|
+
.button_size_lg {
|
|
199
|
+
padding: 1rem 1.5rem;
|
|
200
|
+
font-size: 1rem;
|
|
201
|
+
line-height: 1.5;
|
|
247
202
|
}
|
|
248
|
-
.
|
|
203
|
+
.button_variant_primary {
|
|
249
204
|
background: #000000;
|
|
250
205
|
color: #ffffff;
|
|
251
206
|
}
|
|
252
|
-
.
|
|
207
|
+
.button_variant_primary:hover:not(:disabled) {
|
|
253
208
|
background: #333333;
|
|
254
209
|
}
|
|
255
|
-
.
|
|
210
|
+
.button_variant_primary:active:not(:disabled) {
|
|
256
211
|
transform: scale(0.98);
|
|
257
212
|
}
|
|
258
|
-
.
|
|
259
|
-
width: 100%;
|
|
260
|
-
display: flex;
|
|
261
|
-
align-items: center;
|
|
262
|
-
justify-content: center;
|
|
263
|
-
border: none;
|
|
264
|
-
cursor: pointer;
|
|
265
|
-
transition: 0.2s ease-out;
|
|
266
|
-
font-weight: 500;
|
|
267
|
-
border-radius: 8px;
|
|
268
|
-
}
|
|
269
|
-
.btn--secondary:disabled {
|
|
270
|
-
cursor: not-allowed;
|
|
271
|
-
opacity: 0.5;
|
|
272
|
-
}
|
|
273
|
-
.btn--secondary {
|
|
213
|
+
.button_variant_secondary {
|
|
274
214
|
background: transparent;
|
|
275
215
|
border: 1px solid #e5e5e5;
|
|
276
216
|
color: #1a1a1a;
|
|
277
217
|
}
|
|
278
|
-
.
|
|
218
|
+
.button_variant_secondary:hover:not(:disabled) {
|
|
279
219
|
background: #fafafa;
|
|
280
220
|
}
|
|
281
|
-
.
|
|
221
|
+
.button_variant_secondary:active:not(:disabled) {
|
|
282
222
|
transform: scale(0.98);
|
|
283
223
|
}
|
|
284
|
-
.
|
|
285
|
-
width: 100%;
|
|
286
|
-
display: flex;
|
|
287
|
-
align-items: center;
|
|
288
|
-
justify-content: center;
|
|
289
|
-
border: none;
|
|
290
|
-
cursor: pointer;
|
|
291
|
-
transition: 0.2s ease-out;
|
|
292
|
-
font-weight: 500;
|
|
293
|
-
border-radius: 8px;
|
|
294
|
-
}
|
|
295
|
-
.btn--ghost:disabled {
|
|
296
|
-
cursor: not-allowed;
|
|
297
|
-
opacity: 0.5;
|
|
298
|
-
}
|
|
299
|
-
.btn--ghost {
|
|
224
|
+
.button_variant_ghost {
|
|
300
225
|
background: transparent;
|
|
301
226
|
color: #1a1a1a;
|
|
302
227
|
}
|
|
303
|
-
.
|
|
228
|
+
.button_variant_ghost:hover:not(:disabled) {
|
|
304
229
|
background: rgba(0, 0, 0, 0.05);
|
|
305
230
|
}
|
|
306
|
-
.
|
|
307
|
-
transform: scale(0.
|
|
231
|
+
.button_variant_ghost:active:not(:disabled) {
|
|
232
|
+
transform: scale(0.96);
|
|
308
233
|
}
|
|
309
|
-
.
|
|
310
|
-
width: 100%;
|
|
311
|
-
display: flex;
|
|
312
|
-
align-items: center;
|
|
313
|
-
justify-content: center;
|
|
314
|
-
border: none;
|
|
315
|
-
cursor: pointer;
|
|
316
|
-
transition: 0.2s ease-out;
|
|
317
|
-
font-weight: 500;
|
|
318
|
-
border-radius: 8px;
|
|
319
|
-
}
|
|
320
|
-
.btn--danger:disabled {
|
|
321
|
-
cursor: not-allowed;
|
|
322
|
-
opacity: 0.5;
|
|
323
|
-
}
|
|
324
|
-
.btn--danger {
|
|
234
|
+
.button_variant_danger {
|
|
325
235
|
background: #ef4444;
|
|
326
236
|
color: #ffffff;
|
|
327
237
|
}
|
|
328
|
-
.
|
|
238
|
+
.button_variant_danger:hover:not(:disabled) {
|
|
329
239
|
background: rgb(235.7842364532, 30.4157635468, 30.4157635468);
|
|
330
240
|
}
|
|
331
|
-
.
|
|
241
|
+
.button_variant_danger:active:not(:disabled) {
|
|
332
242
|
transform: scale(0.98);
|
|
333
243
|
}
|
|
334
|
-
.btn--sm {
|
|
335
|
-
padding: 0.5rem 1rem;
|
|
336
|
-
font-size: 0.875rem;
|
|
337
|
-
line-height: 1.5;
|
|
338
|
-
}
|
|
339
|
-
.btn--md {
|
|
340
|
-
padding: 0.75rem 1.25rem;
|
|
341
|
-
font-size: 0.9375rem;
|
|
342
|
-
line-height: 1.5;
|
|
343
|
-
}
|
|
344
|
-
.btn--lg {
|
|
345
|
-
padding: 1rem 1.5rem;
|
|
346
|
-
font-size: 1rem;
|
|
347
|
-
line-height: 1.5;
|
|
348
|
-
}
|
|
349
244
|
|
|
350
245
|
/* src/ui/form/checkbox/style.scss */
|
|
351
246
|
.checkbox {
|
|
@@ -354,15 +249,21 @@
|
|
|
354
249
|
gap: 0.5rem;
|
|
355
250
|
cursor: pointer;
|
|
356
251
|
user-select: none;
|
|
252
|
+
position: relative;
|
|
357
253
|
}
|
|
358
|
-
.
|
|
254
|
+
.checkbox_input {
|
|
359
255
|
position: absolute;
|
|
360
|
-
|
|
361
|
-
|
|
256
|
+
width: 1px;
|
|
257
|
+
height: 1px;
|
|
258
|
+
overflow: hidden;
|
|
259
|
+
clip: rect(0 0 0 0);
|
|
260
|
+
clip-path: inset(50%);
|
|
261
|
+
white-space: nowrap;
|
|
362
262
|
}
|
|
363
|
-
.
|
|
263
|
+
.checkbox_box {
|
|
364
264
|
width: 1.125rem;
|
|
365
265
|
height: 1.125rem;
|
|
266
|
+
box-sizing: border-box;
|
|
366
267
|
border: 1px solid #e5e5e5;
|
|
367
268
|
border-radius: 6px;
|
|
368
269
|
background: #ffffff;
|
|
@@ -370,103 +271,138 @@
|
|
|
370
271
|
background 0.2s ease-out,
|
|
371
272
|
border-color 0.2s ease-out,
|
|
372
273
|
box-shadow 0.2s ease-out;
|
|
274
|
+
display: inline-block;
|
|
275
|
+
position: relative;
|
|
373
276
|
}
|
|
374
|
-
.
|
|
277
|
+
.checkbox_label {
|
|
375
278
|
font-size: 0.9375rem;
|
|
376
279
|
line-height: 1.5;
|
|
377
280
|
color: #1a1a1a;
|
|
378
281
|
}
|
|
379
|
-
.
|
|
282
|
+
.checkbox_size_sm .checkbox_box {
|
|
380
283
|
width: 1rem;
|
|
381
284
|
height: 1rem;
|
|
382
285
|
}
|
|
383
|
-
.
|
|
286
|
+
.checkbox_size_sm .checkbox_label {
|
|
384
287
|
font-size: 0.875rem;
|
|
385
288
|
line-height: 1.5;
|
|
386
289
|
}
|
|
387
|
-
.
|
|
290
|
+
.checkbox_size_md .checkbox_box {
|
|
388
291
|
width: 1.125rem;
|
|
389
292
|
height: 1.125rem;
|
|
390
293
|
}
|
|
391
|
-
.
|
|
294
|
+
.checkbox_size_lg .checkbox_box {
|
|
392
295
|
width: 1.25rem;
|
|
393
296
|
height: 1.25rem;
|
|
394
297
|
}
|
|
395
|
-
.
|
|
298
|
+
.checkbox_size_lg .checkbox_label {
|
|
396
299
|
font-size: 1rem;
|
|
397
300
|
line-height: 1.5;
|
|
398
301
|
}
|
|
399
|
-
.
|
|
400
|
-
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.
|
|
302
|
+
.checkbox_input:focus-visible + .checkbox_box {
|
|
303
|
+
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
|
|
401
304
|
border-color: #000000;
|
|
402
305
|
}
|
|
403
|
-
.
|
|
404
|
-
.
|
|
306
|
+
.checkbox_input:disabled + .checkbox_box,
|
|
307
|
+
.checkbox_input:disabled ~ .checkbox_label {
|
|
308
|
+
opacity: 0.6;
|
|
309
|
+
cursor: not-allowed;
|
|
310
|
+
}
|
|
311
|
+
.checkbox_input:checked + .checkbox_box,
|
|
312
|
+
.checkbox_input:indeterminate + .checkbox_box {
|
|
405
313
|
background: #000000;
|
|
406
314
|
border-color: #000000;
|
|
407
315
|
}
|
|
408
|
-
.
|
|
409
|
-
.checkbox:has(.checkbox__input:indeterminate) .checkbox__box::after {
|
|
316
|
+
.checkbox_input:checked + .checkbox_box::after {
|
|
410
317
|
content: "";
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
318
|
+
position: absolute;
|
|
319
|
+
left: 50%;
|
|
320
|
+
top: 50%;
|
|
321
|
+
width: 0.28rem;
|
|
322
|
+
height: 0.55rem;
|
|
323
|
+
border: 2px solid #ffffff;
|
|
324
|
+
border-top: 0;
|
|
325
|
+
border-left: 0;
|
|
326
|
+
transform: translate(-50%, -58%) rotate(45deg);
|
|
327
|
+
}
|
|
328
|
+
.checkbox_input:indeterminate + .checkbox_box::after {
|
|
329
|
+
content: "";
|
|
330
|
+
position: absolute;
|
|
331
|
+
left: 50%;
|
|
332
|
+
top: 50%;
|
|
333
|
+
width: 0.65rem;
|
|
334
|
+
height: 2px;
|
|
414
335
|
background: #ffffff;
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
.checkbox:has(.checkbox__input:indeterminate) .checkbox__box::after {
|
|
418
|
-
clip-path: inset(40% 15% 40% 15%);
|
|
419
|
-
}
|
|
420
|
-
.checkbox:has(.checkbox__input:disabled) {
|
|
421
|
-
opacity: 0.6;
|
|
422
|
-
cursor: not-allowed;
|
|
336
|
+
transform: translate(-50%, -50%);
|
|
337
|
+
border-radius: 9999px;
|
|
423
338
|
}
|
|
424
339
|
|
|
425
340
|
/* src/ui/form/file/style.scss */
|
|
426
|
-
.
|
|
341
|
+
.file_input {
|
|
427
342
|
position: relative;
|
|
428
343
|
display: inline-flex;
|
|
429
344
|
align-items: center;
|
|
430
345
|
}
|
|
431
|
-
.
|
|
346
|
+
.file_input_control {
|
|
432
347
|
position: absolute;
|
|
433
348
|
inset: 0;
|
|
434
349
|
opacity: 0;
|
|
435
350
|
cursor: pointer;
|
|
436
351
|
}
|
|
437
|
-
.
|
|
352
|
+
.file_input_label {
|
|
438
353
|
border: 1px solid #e5e5e5;
|
|
439
354
|
border-radius: 8px;
|
|
440
355
|
background: #ffffff;
|
|
441
356
|
padding: 0.5rem 1rem;
|
|
442
|
-
color: #1a1a1a;
|
|
443
|
-
transition: background 0.2s ease-out, border-color 0.2s ease-out;
|
|
444
357
|
font-size: 0.9375rem;
|
|
445
358
|
line-height: 1.5;
|
|
359
|
+
color: #1a1a1a;
|
|
360
|
+
transition:
|
|
361
|
+
background 0.2s ease-out,
|
|
362
|
+
border-color 0.2s ease-out,
|
|
363
|
+
box-shadow 0.2s ease-out;
|
|
446
364
|
}
|
|
447
|
-
.
|
|
365
|
+
.file_input:hover .file_input_label {
|
|
448
366
|
border-color: rgba(0, 0, 0, 0.08);
|
|
449
367
|
}
|
|
450
|
-
.
|
|
451
|
-
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.
|
|
368
|
+
.file_input_control:focus-visible + .file_input_label {
|
|
369
|
+
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
|
|
452
370
|
border-color: #000000;
|
|
453
371
|
}
|
|
372
|
+
.file_input_disabled {
|
|
373
|
+
cursor: not-allowed;
|
|
374
|
+
}
|
|
375
|
+
.file_input_disabled .file_input_control {
|
|
376
|
+
cursor: not-allowed;
|
|
377
|
+
}
|
|
378
|
+
.file_input_disabled .file_input_label {
|
|
379
|
+
opacity: 0.6;
|
|
380
|
+
cursor: not-allowed;
|
|
381
|
+
}
|
|
382
|
+
.file_input_disabled:hover .file_input_label {
|
|
383
|
+
border-color: #e5e5e5;
|
|
384
|
+
}
|
|
454
385
|
|
|
455
386
|
/* src/ui/form/radio/style.scss */
|
|
456
387
|
.radio {
|
|
388
|
+
position: relative;
|
|
457
389
|
display: inline-flex;
|
|
458
390
|
align-items: center;
|
|
459
391
|
gap: 0.5rem;
|
|
460
392
|
cursor: pointer;
|
|
393
|
+
user-select: none;
|
|
461
394
|
}
|
|
462
|
-
.
|
|
395
|
+
.radio_input {
|
|
463
396
|
position: absolute;
|
|
397
|
+
inset: 0;
|
|
464
398
|
opacity: 0;
|
|
465
|
-
|
|
399
|
+
cursor: pointer;
|
|
400
|
+
margin: 0;
|
|
466
401
|
}
|
|
467
|
-
.
|
|
402
|
+
.radio_dot {
|
|
468
403
|
width: 1.125rem;
|
|
469
404
|
height: 1.125rem;
|
|
405
|
+
box-sizing: border-box;
|
|
470
406
|
border: 1px solid #e5e5e5;
|
|
471
407
|
border-radius: 9999px;
|
|
472
408
|
background: #ffffff;
|
|
@@ -474,45 +410,54 @@
|
|
|
474
410
|
background 0.2s ease-out,
|
|
475
411
|
border-color 0.2s ease-out,
|
|
476
412
|
box-shadow 0.2s ease-out;
|
|
413
|
+
position: relative;
|
|
414
|
+
display: inline-block;
|
|
477
415
|
}
|
|
478
|
-
.
|
|
416
|
+
.radio_label {
|
|
479
417
|
font-size: 0.9375rem;
|
|
480
418
|
line-height: 1.5;
|
|
481
419
|
color: #1a1a1a;
|
|
482
420
|
}
|
|
483
|
-
.
|
|
421
|
+
.radio_size_sm .radio_dot {
|
|
484
422
|
width: 1rem;
|
|
485
423
|
height: 1rem;
|
|
486
424
|
}
|
|
487
|
-
.
|
|
425
|
+
.radio_size_sm .radio_label {
|
|
488
426
|
font-size: 0.875rem;
|
|
489
427
|
line-height: 1.5;
|
|
490
428
|
}
|
|
491
|
-
.
|
|
429
|
+
.radio_size_md .radio_dot {
|
|
430
|
+
width: 1.125rem;
|
|
431
|
+
height: 1.125rem;
|
|
432
|
+
}
|
|
433
|
+
.radio_size_lg .radio_dot {
|
|
492
434
|
width: 1.25rem;
|
|
493
435
|
height: 1.25rem;
|
|
494
436
|
}
|
|
495
|
-
.
|
|
437
|
+
.radio_size_lg .radio_label {
|
|
496
438
|
font-size: 1rem;
|
|
497
439
|
line-height: 1.5;
|
|
498
440
|
}
|
|
499
|
-
.
|
|
500
|
-
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.
|
|
441
|
+
.radio_input:focus-visible + .radio_dot {
|
|
442
|
+
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
|
|
501
443
|
border-color: #000000;
|
|
502
444
|
}
|
|
503
|
-
.
|
|
445
|
+
.radio_input:checked + .radio_dot {
|
|
504
446
|
border-color: #000000;
|
|
505
447
|
}
|
|
506
|
-
.
|
|
448
|
+
.radio_input:checked + .radio_dot::after {
|
|
507
449
|
content: "";
|
|
508
|
-
|
|
450
|
+
position: absolute;
|
|
451
|
+
left: 50%;
|
|
452
|
+
top: 50%;
|
|
509
453
|
width: 60%;
|
|
510
454
|
height: 60%;
|
|
511
|
-
|
|
455
|
+
transform: translate(-50%, -50%);
|
|
512
456
|
background: #000000;
|
|
513
457
|
border-radius: 9999px;
|
|
514
458
|
}
|
|
515
|
-
.
|
|
459
|
+
.radio_input:disabled + .radio_dot,
|
|
460
|
+
.radio_input:disabled ~ .radio_label {
|
|
516
461
|
opacity: 0.6;
|
|
517
462
|
cursor: not-allowed;
|
|
518
463
|
}
|
|
@@ -526,13 +471,13 @@
|
|
|
526
471
|
gap: 0.25rem;
|
|
527
472
|
font-family: "Pretendard", sans-serif;
|
|
528
473
|
}
|
|
529
|
-
.
|
|
474
|
+
.select_label {
|
|
530
475
|
font-size: 0.875rem;
|
|
531
476
|
line-height: 1.5;
|
|
532
477
|
font-weight: 500;
|
|
533
478
|
color: #1a1a1a;
|
|
534
479
|
}
|
|
535
|
-
.
|
|
480
|
+
.select_control {
|
|
536
481
|
width: 100%;
|
|
537
482
|
display: inline-flex;
|
|
538
483
|
align-items: center;
|
|
@@ -549,111 +494,64 @@
|
|
|
549
494
|
font-size: 0.9375rem;
|
|
550
495
|
line-height: 1.5;
|
|
551
496
|
}
|
|
552
|
-
.
|
|
553
|
-
.
|
|
497
|
+
.select_control:disabled,
|
|
498
|
+
.select_control.is_disabled {
|
|
554
499
|
cursor: not-allowed;
|
|
555
500
|
opacity: 0.7;
|
|
556
501
|
background: #fafafa;
|
|
557
502
|
color: #999999;
|
|
558
503
|
}
|
|
559
|
-
.
|
|
504
|
+
.select_control_variant_outline {
|
|
560
505
|
border: 1px solid #e5e5e5;
|
|
561
506
|
}
|
|
562
|
-
.
|
|
507
|
+
.select_control_variant_outline:hover:not(.is_disabled) {
|
|
563
508
|
border-color: rgba(0, 0, 0, 0.08);
|
|
564
509
|
}
|
|
565
|
-
.
|
|
510
|
+
.select_control_variant_outline.is_open {
|
|
566
511
|
border-color: #000000;
|
|
567
512
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
|
|
568
513
|
}
|
|
569
|
-
.
|
|
570
|
-
width: 100%;
|
|
571
|
-
display: inline-flex;
|
|
572
|
-
align-items: center;
|
|
573
|
-
justify-content: space-between;
|
|
574
|
-
gap: 0.5rem;
|
|
575
|
-
cursor: pointer;
|
|
576
|
-
color: #1a1a1a;
|
|
577
|
-
background: #ffffff;
|
|
578
|
-
border-radius: 8px;
|
|
579
|
-
transition:
|
|
580
|
-
border-color 0.2s ease-out,
|
|
581
|
-
box-shadow 0.2s ease-out,
|
|
582
|
-
background 0.2s ease-out;
|
|
583
|
-
font-size: 0.9375rem;
|
|
584
|
-
line-height: 1.5;
|
|
585
|
-
}
|
|
586
|
-
.select__control--filled:disabled,
|
|
587
|
-
.select__control--filled.is-disabled {
|
|
588
|
-
cursor: not-allowed;
|
|
589
|
-
opacity: 0.7;
|
|
590
|
-
background: #fafafa;
|
|
591
|
-
color: #999999;
|
|
592
|
-
}
|
|
593
|
-
.select__control--filled {
|
|
514
|
+
.select_control_variant_filled {
|
|
594
515
|
background: #fafafa;
|
|
595
516
|
border: 1px solid transparent;
|
|
596
517
|
}
|
|
597
|
-
.
|
|
518
|
+
.select_control_variant_filled:hover:not(.is_disabled) {
|
|
598
519
|
background: rgb(253.5, 253.5, 253.5);
|
|
599
520
|
}
|
|
600
|
-
.
|
|
521
|
+
.select_control_variant_filled.is_open {
|
|
601
522
|
background: #ffffff;
|
|
602
523
|
border-color: #000000;
|
|
603
524
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
|
|
604
525
|
}
|
|
605
|
-
.
|
|
606
|
-
width: 100%;
|
|
607
|
-
display: inline-flex;
|
|
608
|
-
align-items: center;
|
|
609
|
-
justify-content: space-between;
|
|
610
|
-
gap: 0.5rem;
|
|
611
|
-
cursor: pointer;
|
|
612
|
-
color: #1a1a1a;
|
|
613
|
-
background: #ffffff;
|
|
614
|
-
border-radius: 8px;
|
|
615
|
-
transition:
|
|
616
|
-
border-color 0.2s ease-out,
|
|
617
|
-
box-shadow 0.2s ease-out,
|
|
618
|
-
background 0.2s ease-out;
|
|
619
|
-
font-size: 0.9375rem;
|
|
620
|
-
line-height: 1.5;
|
|
621
|
-
}
|
|
622
|
-
.select__control--ghost:disabled,
|
|
623
|
-
.select__control--ghost.is-disabled {
|
|
624
|
-
cursor: not-allowed;
|
|
625
|
-
opacity: 0.7;
|
|
626
|
-
background: #fafafa;
|
|
627
|
-
color: #999999;
|
|
628
|
-
}
|
|
629
|
-
.select__control--ghost {
|
|
526
|
+
.select_control_variant_ghost {
|
|
630
527
|
background: transparent;
|
|
631
528
|
border: 1px solid transparent;
|
|
632
529
|
}
|
|
633
|
-
.
|
|
530
|
+
.select_control_variant_ghost:hover:not(.is_disabled) {
|
|
634
531
|
background: rgba(0, 0, 0, 0.03);
|
|
635
532
|
}
|
|
636
|
-
.
|
|
533
|
+
.select_control_variant_ghost.is_open {
|
|
637
534
|
background: #ffffff;
|
|
638
535
|
border-color: #000000;
|
|
639
536
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
|
|
640
537
|
}
|
|
641
|
-
.
|
|
538
|
+
.select_control_size_sm {
|
|
642
539
|
padding: 0.5rem 1rem;
|
|
643
540
|
font-size: 0.875rem;
|
|
644
541
|
line-height: 1.5;
|
|
645
542
|
}
|
|
646
|
-
.
|
|
543
|
+
.select_control_size_md {
|
|
647
544
|
padding: 0.75rem 1.25rem;
|
|
648
545
|
font-size: 0.9375rem;
|
|
649
546
|
line-height: 1.5;
|
|
650
547
|
}
|
|
651
|
-
.
|
|
548
|
+
.select_control_size_lg {
|
|
652
549
|
padding: 1rem 1.5rem;
|
|
653
550
|
font-size: 1rem;
|
|
654
551
|
line-height: 1.5;
|
|
655
552
|
}
|
|
656
|
-
.
|
|
553
|
+
.select_value,
|
|
554
|
+
.select_placeholder {
|
|
657
555
|
flex: 1 1 auto;
|
|
658
556
|
min-width: 0;
|
|
659
557
|
overflow: hidden;
|
|
@@ -663,27 +561,19 @@
|
|
|
663
561
|
font-weight: 400;
|
|
664
562
|
line-height: 1.5;
|
|
665
563
|
}
|
|
666
|
-
.
|
|
667
|
-
flex: 1 1 auto;
|
|
668
|
-
min-width: 0;
|
|
669
|
-
overflow: hidden;
|
|
670
|
-
text-overflow: ellipsis;
|
|
671
|
-
white-space: nowrap;
|
|
672
|
-
font-size: 0.9375rem;
|
|
673
|
-
font-weight: 400;
|
|
674
|
-
line-height: 1.5;
|
|
564
|
+
.select_placeholder {
|
|
675
565
|
color: #999999;
|
|
676
566
|
}
|
|
677
|
-
.
|
|
567
|
+
.select_icon {
|
|
678
568
|
display: inline-flex;
|
|
679
569
|
align-items: center;
|
|
680
570
|
justify-content: center;
|
|
681
571
|
color: #666666;
|
|
682
572
|
}
|
|
683
|
-
.
|
|
573
|
+
.select_list {
|
|
684
574
|
position: absolute;
|
|
685
575
|
z-index: 10000;
|
|
686
|
-
top:
|
|
576
|
+
top: 0.25rem;
|
|
687
577
|
left: 0;
|
|
688
578
|
width: 100%;
|
|
689
579
|
min-width: 100%;
|
|
@@ -697,7 +587,7 @@
|
|
|
697
587
|
overflow-x: hidden;
|
|
698
588
|
padding: 0.25rem 0;
|
|
699
589
|
}
|
|
700
|
-
.
|
|
590
|
+
.select_option {
|
|
701
591
|
width: 100%;
|
|
702
592
|
box-sizing: border-box;
|
|
703
593
|
display: grid;
|
|
@@ -712,20 +602,20 @@
|
|
|
712
602
|
font-weight: 400;
|
|
713
603
|
line-height: 1.5;
|
|
714
604
|
}
|
|
715
|
-
.
|
|
605
|
+
.select_option > span:first-child {
|
|
716
606
|
min-width: 0;
|
|
717
607
|
overflow: hidden;
|
|
718
608
|
text-overflow: ellipsis;
|
|
719
609
|
white-space: nowrap;
|
|
720
610
|
}
|
|
721
|
-
.
|
|
722
|
-
.
|
|
611
|
+
.select_option:hover,
|
|
612
|
+
.select_option.is_active {
|
|
723
613
|
background: #fafafa;
|
|
724
614
|
}
|
|
725
|
-
.
|
|
615
|
+
.select_option.is_selected {
|
|
726
616
|
font-weight: 500;
|
|
727
617
|
}
|
|
728
|
-
.
|
|
618
|
+
.select_option.is_disabled {
|
|
729
619
|
cursor: not-allowed;
|
|
730
620
|
color: #999999;
|
|
731
621
|
}
|
|
@@ -735,15 +625,15 @@
|
|
|
735
625
|
position: relative;
|
|
736
626
|
display: inline-flex;
|
|
737
627
|
align-items: center;
|
|
628
|
+
width: 40px;
|
|
629
|
+
height: 22px;
|
|
630
|
+
padding: 2px;
|
|
738
631
|
border-radius: 9999px;
|
|
739
632
|
background: #e5e5e5;
|
|
740
633
|
transition: background 0.2s ease-out;
|
|
741
634
|
cursor: pointer;
|
|
742
|
-
width: 40px;
|
|
743
|
-
height: 22px;
|
|
744
|
-
padding: 2px;
|
|
745
635
|
}
|
|
746
|
-
.
|
|
636
|
+
.switch_thumb {
|
|
747
637
|
width: 18px;
|
|
748
638
|
height: 18px;
|
|
749
639
|
background: #ffffff;
|
|
@@ -751,59 +641,94 @@
|
|
|
751
641
|
transition: transform 0.2s ease-out;
|
|
752
642
|
transform: translateX(0);
|
|
753
643
|
}
|
|
754
|
-
.
|
|
644
|
+
.switch_on {
|
|
755
645
|
background: #000000;
|
|
756
646
|
}
|
|
757
|
-
.
|
|
647
|
+
.switch_on .switch_thumb {
|
|
758
648
|
transform: translateX(18px);
|
|
759
649
|
}
|
|
760
|
-
.
|
|
650
|
+
.switch_size_sm {
|
|
761
651
|
width: 34px;
|
|
762
652
|
height: 18px;
|
|
653
|
+
padding: 2px;
|
|
763
654
|
}
|
|
764
|
-
.
|
|
655
|
+
.switch_size_sm .switch_thumb {
|
|
765
656
|
width: 14px;
|
|
766
657
|
height: 14px;
|
|
767
658
|
}
|
|
768
|
-
.
|
|
659
|
+
.switch_size_sm.switch_on .switch_thumb {
|
|
769
660
|
transform: translateX(16px);
|
|
770
661
|
}
|
|
771
|
-
.
|
|
662
|
+
.switch_size_md {
|
|
663
|
+
width: 40px;
|
|
664
|
+
height: 22px;
|
|
665
|
+
}
|
|
666
|
+
.switch_size_lg {
|
|
772
667
|
width: 48px;
|
|
773
668
|
height: 26px;
|
|
669
|
+
padding: 2px;
|
|
774
670
|
}
|
|
775
|
-
.
|
|
671
|
+
.switch_size_lg .switch_thumb {
|
|
776
672
|
width: 22px;
|
|
777
673
|
height: 22px;
|
|
778
674
|
}
|
|
779
|
-
.
|
|
675
|
+
.switch_size_lg.switch_on .switch_thumb {
|
|
780
676
|
transform: translateX(22px);
|
|
781
677
|
}
|
|
782
|
-
.
|
|
678
|
+
.switch_disabled {
|
|
783
679
|
opacity: 0.6;
|
|
784
680
|
cursor: not-allowed;
|
|
785
681
|
}
|
|
786
682
|
|
|
787
683
|
/* src/ui/form/textfield/style.scss */
|
|
788
|
-
.
|
|
684
|
+
.text_field {
|
|
789
685
|
display: flex;
|
|
790
686
|
flex-direction: column;
|
|
791
687
|
}
|
|
792
|
-
.
|
|
688
|
+
.text_field_full_width {
|
|
689
|
+
width: 100%;
|
|
690
|
+
}
|
|
691
|
+
.text_field_label {
|
|
793
692
|
margin-bottom: 0.25rem;
|
|
794
693
|
color: #1a1a1a;
|
|
795
694
|
font-size: 0.875rem;
|
|
796
695
|
line-height: 1.5;
|
|
797
696
|
font-weight: 500;
|
|
798
697
|
}
|
|
799
|
-
.
|
|
698
|
+
.text_field_wrap {
|
|
800
699
|
position: relative;
|
|
801
700
|
display: inline-flex;
|
|
802
701
|
width: 100%;
|
|
803
702
|
align-items: center;
|
|
804
|
-
gap: 0.75rem;
|
|
805
703
|
}
|
|
806
|
-
.
|
|
704
|
+
.text_field_helper {
|
|
705
|
+
margin-top: 0.25rem;
|
|
706
|
+
font-size: 0.875rem;
|
|
707
|
+
line-height: 1.5;
|
|
708
|
+
color: #666666;
|
|
709
|
+
}
|
|
710
|
+
.text_field_helper_error {
|
|
711
|
+
color: #ef4444;
|
|
712
|
+
}
|
|
713
|
+
.text_field_helper_success {
|
|
714
|
+
color: #10b981;
|
|
715
|
+
}
|
|
716
|
+
.text_field_icon {
|
|
717
|
+
position: absolute;
|
|
718
|
+
display: inline-flex;
|
|
719
|
+
align-items: center;
|
|
720
|
+
justify-content: center;
|
|
721
|
+
width: 1.25rem;
|
|
722
|
+
height: 1.25rem;
|
|
723
|
+
color: #666666;
|
|
724
|
+
}
|
|
725
|
+
.text_field_icon_left {
|
|
726
|
+
left: 0.75rem;
|
|
727
|
+
}
|
|
728
|
+
.text_field_icon_right {
|
|
729
|
+
right: 0.75rem;
|
|
730
|
+
}
|
|
731
|
+
.text_field_input {
|
|
807
732
|
width: 100%;
|
|
808
733
|
border-radius: 8px;
|
|
809
734
|
transition:
|
|
@@ -815,147 +740,81 @@
|
|
|
815
740
|
color: #1a1a1a;
|
|
816
741
|
background: #ffffff;
|
|
817
742
|
}
|
|
818
|
-
.
|
|
743
|
+
.text_field_input::placeholder {
|
|
819
744
|
color: #999999;
|
|
820
745
|
}
|
|
821
|
-
.
|
|
746
|
+
.text_field_input:disabled {
|
|
822
747
|
cursor: not-allowed;
|
|
823
748
|
background: #fafafa;
|
|
824
749
|
color: #999999;
|
|
825
750
|
opacity: 0.7;
|
|
826
751
|
}
|
|
827
|
-
.
|
|
752
|
+
.text_field_variant_outline {
|
|
828
753
|
border: 1px solid #e5e5e5;
|
|
829
754
|
}
|
|
830
|
-
.
|
|
755
|
+
.text_field_variant_outline:hover:not(:disabled) {
|
|
831
756
|
border-color: rgba(0, 0, 0, 0.08);
|
|
832
757
|
}
|
|
833
|
-
.
|
|
758
|
+
.text_field_variant_outline:focus-visible {
|
|
834
759
|
outline: none;
|
|
835
760
|
border-color: #000000;
|
|
836
761
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
|
|
837
762
|
}
|
|
838
|
-
.
|
|
839
|
-
width: 100%;
|
|
840
|
-
border-radius: 8px;
|
|
841
|
-
transition:
|
|
842
|
-
border-color 0.2s ease-out,
|
|
843
|
-
box-shadow 0.2s ease-out,
|
|
844
|
-
background 0.2s ease-out;
|
|
845
|
-
font-size: 0.9375rem;
|
|
846
|
-
line-height: 1.5;
|
|
847
|
-
color: #1a1a1a;
|
|
848
|
-
background: #ffffff;
|
|
849
|
-
}
|
|
850
|
-
.tf__input--filled::placeholder {
|
|
851
|
-
color: #999999;
|
|
852
|
-
}
|
|
853
|
-
.tf__input--filled:disabled {
|
|
854
|
-
cursor: not-allowed;
|
|
855
|
-
background: #fafafa;
|
|
856
|
-
color: #999999;
|
|
857
|
-
opacity: 0.7;
|
|
858
|
-
}
|
|
859
|
-
.tf__input--filled {
|
|
763
|
+
.text_field_variant_filled {
|
|
860
764
|
background: #fafafa;
|
|
861
765
|
border: 1px solid transparent;
|
|
862
766
|
}
|
|
863
|
-
.
|
|
767
|
+
.text_field_variant_filled:hover:not(:disabled) {
|
|
864
768
|
background: rgb(253.5, 253.5, 253.5);
|
|
865
769
|
}
|
|
866
|
-
.
|
|
770
|
+
.text_field_variant_filled:focus-visible {
|
|
867
771
|
outline: none;
|
|
868
772
|
border-color: #000000;
|
|
869
773
|
background: #ffffff;
|
|
870
774
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
|
|
871
775
|
}
|
|
872
|
-
.
|
|
873
|
-
width: 100%;
|
|
874
|
-
border-radius: 8px;
|
|
875
|
-
transition:
|
|
876
|
-
border-color 0.2s ease-out,
|
|
877
|
-
box-shadow 0.2s ease-out,
|
|
878
|
-
background 0.2s ease-out;
|
|
879
|
-
font-size: 0.9375rem;
|
|
880
|
-
line-height: 1.5;
|
|
881
|
-
color: #1a1a1a;
|
|
882
|
-
background: #ffffff;
|
|
883
|
-
}
|
|
884
|
-
.tf__input--ghost::placeholder {
|
|
885
|
-
color: #999999;
|
|
886
|
-
}
|
|
887
|
-
.tf__input--ghost:disabled {
|
|
888
|
-
cursor: not-allowed;
|
|
889
|
-
background: #fafafa;
|
|
890
|
-
color: #999999;
|
|
891
|
-
opacity: 0.7;
|
|
892
|
-
}
|
|
893
|
-
.tf__input--ghost {
|
|
776
|
+
.text_field_variant_ghost {
|
|
894
777
|
background: transparent;
|
|
895
778
|
border: 1px solid transparent;
|
|
896
779
|
}
|
|
897
|
-
.
|
|
780
|
+
.text_field_variant_ghost:hover:not(:disabled) {
|
|
898
781
|
background: rgba(0, 0, 0, 0.03);
|
|
899
782
|
}
|
|
900
|
-
.
|
|
783
|
+
.text_field_variant_ghost:focus-visible {
|
|
901
784
|
outline: none;
|
|
902
785
|
border-color: #000000;
|
|
903
786
|
background: #ffffff;
|
|
904
787
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
|
|
905
788
|
}
|
|
906
|
-
.
|
|
789
|
+
.text_field_size_sm {
|
|
907
790
|
padding: 0.5rem 1rem;
|
|
908
791
|
font-size: 0.875rem;
|
|
909
792
|
line-height: 1.5;
|
|
910
793
|
}
|
|
911
|
-
.
|
|
794
|
+
.text_field_size_md {
|
|
912
795
|
padding: 0.75rem 1.25rem;
|
|
913
796
|
font-size: 0.9375rem;
|
|
914
797
|
line-height: 1.5;
|
|
915
798
|
}
|
|
916
|
-
.
|
|
799
|
+
.text_field_size_lg {
|
|
917
800
|
padding: 1rem 1.5rem;
|
|
918
801
|
font-size: 1rem;
|
|
919
802
|
line-height: 1.5;
|
|
920
803
|
}
|
|
921
|
-
.
|
|
804
|
+
.text_field_with_left {
|
|
922
805
|
padding-left: calc(1.25rem + 1.25rem);
|
|
923
806
|
}
|
|
924
|
-
.
|
|
807
|
+
.text_field_with_right {
|
|
925
808
|
padding-right: calc(1.25rem + 1.25rem);
|
|
926
809
|
}
|
|
927
|
-
.
|
|
810
|
+
.text_field_error {
|
|
928
811
|
border-color: #ef4444 !important;
|
|
929
812
|
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
|
|
930
813
|
}
|
|
931
|
-
.
|
|
814
|
+
.text_field_success {
|
|
932
815
|
border-color: #10b981 !important;
|
|
933
816
|
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
|
|
934
817
|
}
|
|
935
|
-
.tf__icon {
|
|
936
|
-
position: absolute;
|
|
937
|
-
display: inline-flex;
|
|
938
|
-
align-items: center;
|
|
939
|
-
justify-content: center;
|
|
940
|
-
width: 1.25rem;
|
|
941
|
-
height: 1.25rem;
|
|
942
|
-
color: #666666;
|
|
943
|
-
}
|
|
944
|
-
.tf__icon--left {
|
|
945
|
-
left: 0.75rem;
|
|
946
|
-
}
|
|
947
|
-
.tf__icon--right {
|
|
948
|
-
right: 0.75rem;
|
|
949
|
-
}
|
|
950
|
-
.tf__helper {
|
|
951
|
-
margin-top: 0.25rem;
|
|
952
|
-
font-size: 0.875rem;
|
|
953
|
-
line-height: 1.5;
|
|
954
|
-
color: #666666;
|
|
955
|
-
}
|
|
956
|
-
.tf__helper--error {
|
|
957
|
-
color: #ef4444;
|
|
958
|
-
}
|
|
959
818
|
|
|
960
819
|
/* src/ui/navigation/pagination/style.scss */
|
|
961
820
|
.pagination {
|
|
@@ -973,7 +832,7 @@
|
|
|
973
832
|
min-width: 36px;
|
|
974
833
|
font-size: 0.875rem;
|
|
975
834
|
line-height: 1.5;
|
|
976
|
-
color: #
|
|
835
|
+
color: #1a1a1a;
|
|
977
836
|
transition: background 0.2s ease-out, border-color 0.2s ease-out;
|
|
978
837
|
}
|
|
979
838
|
.pagination_item:hover:not(:disabled) {
|
|
@@ -984,134 +843,68 @@
|
|
|
984
843
|
cursor: not-allowed;
|
|
985
844
|
}
|
|
986
845
|
.pagination_item:focus-visible {
|
|
987
|
-
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.
|
|
846
|
+
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
|
|
988
847
|
border-color: #000000;
|
|
989
848
|
}
|
|
990
|
-
.
|
|
849
|
+
.pagination_pages {
|
|
850
|
+
display: flex;
|
|
851
|
+
align-items: center;
|
|
852
|
+
gap: 6px;
|
|
853
|
+
}
|
|
854
|
+
.pagination_pageButton {
|
|
855
|
+
border: 0;
|
|
856
|
+
background: transparent;
|
|
991
857
|
min-width: 36px;
|
|
992
|
-
|
|
858
|
+
height: 36px;
|
|
859
|
+
border-radius: 8px;
|
|
993
860
|
font-size: 0.875rem;
|
|
994
861
|
line-height: 1.5;
|
|
862
|
+
color: #666666;
|
|
863
|
+
transition: background 0.2s ease-out, color 0.2s ease-out;
|
|
864
|
+
}
|
|
865
|
+
.pagination_pageButton:hover {
|
|
866
|
+
background: #fafafa;
|
|
867
|
+
color: #1a1a1a;
|
|
868
|
+
}
|
|
869
|
+
.pagination_pageButton:focus-visible {
|
|
870
|
+
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
|
|
871
|
+
}
|
|
872
|
+
.pagination_pageButton.is-active {
|
|
873
|
+
color: #1a1a1a;
|
|
995
874
|
font-weight: 600;
|
|
996
|
-
|
|
875
|
+
}
|
|
876
|
+
.pagination_ellipsis {
|
|
877
|
+
min-width: 20px;
|
|
878
|
+
text-align: center;
|
|
879
|
+
font-size: 0.875rem;
|
|
880
|
+
line-height: 1.5;
|
|
881
|
+
color: #999999;
|
|
997
882
|
}
|
|
998
883
|
|
|
999
884
|
/* src/ui/overlay/modal/style.scss */
|
|
1000
885
|
.modal {
|
|
1001
886
|
position: fixed;
|
|
1002
887
|
inset: 0;
|
|
1003
|
-
background: rgba(0, 0, 0, 0.5);
|
|
1004
888
|
display: grid;
|
|
1005
889
|
place-items: center;
|
|
890
|
+
background: rgba(0, 0, 0, 0.5);
|
|
1006
891
|
z-index: 10000;
|
|
1007
892
|
}
|
|
1008
|
-
.
|
|
893
|
+
.modal_panel {
|
|
1009
894
|
background: #ffffff;
|
|
1010
895
|
border-radius: 12px;
|
|
1011
896
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
|
|
1012
897
|
max-width: calc(100% - 32px);
|
|
898
|
+
overflow: hidden;
|
|
1013
899
|
}
|
|
1014
|
-
.
|
|
900
|
+
.modal_header {
|
|
1015
901
|
padding: 1rem;
|
|
902
|
+
border-bottom: 1px solid #e5e5e5;
|
|
903
|
+
color: #1a1a1a;
|
|
1016
904
|
font-size: 1.25rem;
|
|
1017
905
|
font-weight: 600;
|
|
1018
906
|
line-height: 1.3;
|
|
1019
|
-
color: #1a1a1a;
|
|
1020
|
-
border-bottom: 1px solid #e5e5e5;
|
|
1021
907
|
}
|
|
1022
|
-
.
|
|
908
|
+
.modal_body {
|
|
1023
909
|
padding: 1rem;
|
|
1024
910
|
}
|
|
1025
|
-
|
|
1026
|
-
/* src/ui/skeleton/card/style.scss */
|
|
1027
|
-
.card-skeleton {
|
|
1028
|
-
display: flex;
|
|
1029
|
-
flex-direction: column;
|
|
1030
|
-
border: 1px solid var(--line-normal);
|
|
1031
|
-
border-radius: 12px;
|
|
1032
|
-
overflow: hidden;
|
|
1033
|
-
background: var(--background-light);
|
|
1034
|
-
animation: card-skeleton-pulse 1.5s ease-in-out infinite;
|
|
1035
|
-
}
|
|
1036
|
-
.card-skeleton__thumb {
|
|
1037
|
-
width: 100%;
|
|
1038
|
-
aspect-ratio: 4/3;
|
|
1039
|
-
background: var(--background-input);
|
|
1040
|
-
}
|
|
1041
|
-
.card-skeleton__text {
|
|
1042
|
-
padding: 12px;
|
|
1043
|
-
display: flex;
|
|
1044
|
-
flex-direction: column;
|
|
1045
|
-
gap: 8px;
|
|
1046
|
-
}
|
|
1047
|
-
.card-skeleton__line {
|
|
1048
|
-
height: 12px;
|
|
1049
|
-
background: var(--background-input);
|
|
1050
|
-
border-radius: 4px;
|
|
1051
|
-
}
|
|
1052
|
-
.card-skeleton__line.short {
|
|
1053
|
-
width: 60%;
|
|
1054
|
-
}
|
|
1055
|
-
@keyframes card-skeleton-pulse {
|
|
1056
|
-
0%, 100% {
|
|
1057
|
-
opacity: 1;
|
|
1058
|
-
}
|
|
1059
|
-
50% {
|
|
1060
|
-
opacity: 0.5;
|
|
1061
|
-
}
|
|
1062
|
-
}
|
|
1063
|
-
|
|
1064
|
-
/* src/ui/skeleton/list/style.scss */
|
|
1065
|
-
.request-item.skeleton {
|
|
1066
|
-
pointer-events: none;
|
|
1067
|
-
}
|
|
1068
|
-
.skeleton__title {
|
|
1069
|
-
width: 220px;
|
|
1070
|
-
height: 18px;
|
|
1071
|
-
border-radius: 6px;
|
|
1072
|
-
background:
|
|
1073
|
-
linear-gradient(
|
|
1074
|
-
90deg,
|
|
1075
|
-
var(--background-normal) 25%,
|
|
1076
|
-
var(--line-normal) 37%,
|
|
1077
|
-
var(--background-normal) 63%);
|
|
1078
|
-
background-size: 400% 100%;
|
|
1079
|
-
animation: skeleton-shimmer 1.2s ease-in-out infinite;
|
|
1080
|
-
margin-bottom: 8px;
|
|
1081
|
-
}
|
|
1082
|
-
.skeleton__tag {
|
|
1083
|
-
display: inline-block;
|
|
1084
|
-
width: 64px;
|
|
1085
|
-
height: 22px;
|
|
1086
|
-
border-radius: 6px;
|
|
1087
|
-
background:
|
|
1088
|
-
linear-gradient(
|
|
1089
|
-
90deg,
|
|
1090
|
-
var(--background-normal) 25%,
|
|
1091
|
-
var(--line-normal) 37%,
|
|
1092
|
-
var(--background-normal) 63%);
|
|
1093
|
-
background-size: 400% 100%;
|
|
1094
|
-
animation: skeleton-shimmer 1.2s ease-in-out infinite;
|
|
1095
|
-
}
|
|
1096
|
-
.skeleton__dday {
|
|
1097
|
-
display: inline-block;
|
|
1098
|
-
width: 48px;
|
|
1099
|
-
height: 16px;
|
|
1100
|
-
border-radius: 6px;
|
|
1101
|
-
background:
|
|
1102
|
-
linear-gradient(
|
|
1103
|
-
90deg,
|
|
1104
|
-
var(--background-normal) 25%,
|
|
1105
|
-
var(--line-normal) 37%,
|
|
1106
|
-
var(--background-normal) 63%);
|
|
1107
|
-
background-size: 400% 100%;
|
|
1108
|
-
animation: skeleton-shimmer 1.2s ease-in-out infinite;
|
|
1109
|
-
}
|
|
1110
|
-
@keyframes skeleton-shimmer {
|
|
1111
|
-
0% {
|
|
1112
|
-
background-position: 100% 0;
|
|
1113
|
-
}
|
|
1114
|
-
100% {
|
|
1115
|
-
background-position: 0 0;
|
|
1116
|
-
}
|
|
1117
|
-
}
|