@bigtablet/design-system 1.3.2 → 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 +348 -525
- package/dist/index.d.ts +16 -18
- package/dist/index.js +240 -211
- package/dist/next.css +16 -17
- package/dist/next.js +19 -14
- package/package.json +2 -2
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,285 +47,199 @@
|
|
|
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
|
-
|
|
311
|
-
|
|
312
|
-
line-height: 1.5;
|
|
234
|
+
.button_variant_danger {
|
|
235
|
+
background: #ef4444;
|
|
236
|
+
color: #ffffff;
|
|
313
237
|
}
|
|
314
|
-
.
|
|
315
|
-
|
|
316
|
-
font-size: 0.9375rem;
|
|
317
|
-
line-height: 1.5;
|
|
238
|
+
.button_variant_danger:hover:not(:disabled) {
|
|
239
|
+
background: rgb(235.7842364532, 30.4157635468, 30.4157635468);
|
|
318
240
|
}
|
|
319
|
-
.
|
|
320
|
-
|
|
321
|
-
font-size: 1rem;
|
|
322
|
-
line-height: 1.5;
|
|
241
|
+
.button_variant_danger:active:not(:disabled) {
|
|
242
|
+
transform: scale(0.98);
|
|
323
243
|
}
|
|
324
244
|
|
|
325
245
|
/* src/ui/form/checkbox/style.scss */
|
|
@@ -329,15 +249,21 @@
|
|
|
329
249
|
gap: 0.5rem;
|
|
330
250
|
cursor: pointer;
|
|
331
251
|
user-select: none;
|
|
252
|
+
position: relative;
|
|
332
253
|
}
|
|
333
|
-
.
|
|
254
|
+
.checkbox_input {
|
|
334
255
|
position: absolute;
|
|
335
|
-
|
|
336
|
-
|
|
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;
|
|
337
262
|
}
|
|
338
|
-
.
|
|
263
|
+
.checkbox_box {
|
|
339
264
|
width: 1.125rem;
|
|
340
265
|
height: 1.125rem;
|
|
266
|
+
box-sizing: border-box;
|
|
341
267
|
border: 1px solid #e5e5e5;
|
|
342
268
|
border-radius: 6px;
|
|
343
269
|
background: #ffffff;
|
|
@@ -345,103 +271,138 @@
|
|
|
345
271
|
background 0.2s ease-out,
|
|
346
272
|
border-color 0.2s ease-out,
|
|
347
273
|
box-shadow 0.2s ease-out;
|
|
274
|
+
display: inline-block;
|
|
275
|
+
position: relative;
|
|
348
276
|
}
|
|
349
|
-
.
|
|
277
|
+
.checkbox_label {
|
|
350
278
|
font-size: 0.9375rem;
|
|
351
279
|
line-height: 1.5;
|
|
352
280
|
color: #1a1a1a;
|
|
353
281
|
}
|
|
354
|
-
.
|
|
282
|
+
.checkbox_size_sm .checkbox_box {
|
|
355
283
|
width: 1rem;
|
|
356
284
|
height: 1rem;
|
|
357
285
|
}
|
|
358
|
-
.
|
|
286
|
+
.checkbox_size_sm .checkbox_label {
|
|
359
287
|
font-size: 0.875rem;
|
|
360
288
|
line-height: 1.5;
|
|
361
289
|
}
|
|
362
|
-
.
|
|
290
|
+
.checkbox_size_md .checkbox_box {
|
|
363
291
|
width: 1.125rem;
|
|
364
292
|
height: 1.125rem;
|
|
365
293
|
}
|
|
366
|
-
.
|
|
294
|
+
.checkbox_size_lg .checkbox_box {
|
|
367
295
|
width: 1.25rem;
|
|
368
296
|
height: 1.25rem;
|
|
369
297
|
}
|
|
370
|
-
.
|
|
298
|
+
.checkbox_size_lg .checkbox_label {
|
|
371
299
|
font-size: 1rem;
|
|
372
300
|
line-height: 1.5;
|
|
373
301
|
}
|
|
374
|
-
.
|
|
375
|
-
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);
|
|
376
304
|
border-color: #000000;
|
|
377
305
|
}
|
|
378
|
-
.
|
|
379
|
-
.
|
|
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 {
|
|
380
313
|
background: #000000;
|
|
381
314
|
border-color: #000000;
|
|
382
315
|
}
|
|
383
|
-
.
|
|
384
|
-
.checkbox:has(.checkbox__input:indeterminate) .checkbox__box::after {
|
|
316
|
+
.checkbox_input:checked + .checkbox_box::after {
|
|
385
317
|
content: "";
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
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;
|
|
389
335
|
background: #ffffff;
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
.checkbox:has(.checkbox__input:indeterminate) .checkbox__box::after {
|
|
393
|
-
clip-path: inset(40% 15% 40% 15%);
|
|
394
|
-
}
|
|
395
|
-
.checkbox:has(.checkbox__input:disabled) {
|
|
396
|
-
opacity: 0.6;
|
|
397
|
-
cursor: not-allowed;
|
|
336
|
+
transform: translate(-50%, -50%);
|
|
337
|
+
border-radius: 9999px;
|
|
398
338
|
}
|
|
399
339
|
|
|
400
340
|
/* src/ui/form/file/style.scss */
|
|
401
|
-
.
|
|
341
|
+
.file_input {
|
|
402
342
|
position: relative;
|
|
403
343
|
display: inline-flex;
|
|
404
344
|
align-items: center;
|
|
405
345
|
}
|
|
406
|
-
.
|
|
346
|
+
.file_input_control {
|
|
407
347
|
position: absolute;
|
|
408
348
|
inset: 0;
|
|
409
349
|
opacity: 0;
|
|
410
350
|
cursor: pointer;
|
|
411
351
|
}
|
|
412
|
-
.
|
|
352
|
+
.file_input_label {
|
|
413
353
|
border: 1px solid #e5e5e5;
|
|
414
354
|
border-radius: 8px;
|
|
415
355
|
background: #ffffff;
|
|
416
356
|
padding: 0.5rem 1rem;
|
|
417
|
-
color: #1a1a1a;
|
|
418
|
-
transition: background 0.2s ease-out, border-color 0.2s ease-out;
|
|
419
357
|
font-size: 0.9375rem;
|
|
420
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;
|
|
421
364
|
}
|
|
422
|
-
.
|
|
365
|
+
.file_input:hover .file_input_label {
|
|
423
366
|
border-color: rgba(0, 0, 0, 0.08);
|
|
424
367
|
}
|
|
425
|
-
.
|
|
426
|
-
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);
|
|
427
370
|
border-color: #000000;
|
|
428
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
|
+
}
|
|
429
385
|
|
|
430
386
|
/* src/ui/form/radio/style.scss */
|
|
431
387
|
.radio {
|
|
388
|
+
position: relative;
|
|
432
389
|
display: inline-flex;
|
|
433
390
|
align-items: center;
|
|
434
391
|
gap: 0.5rem;
|
|
435
392
|
cursor: pointer;
|
|
393
|
+
user-select: none;
|
|
436
394
|
}
|
|
437
|
-
.
|
|
395
|
+
.radio_input {
|
|
438
396
|
position: absolute;
|
|
397
|
+
inset: 0;
|
|
439
398
|
opacity: 0;
|
|
440
|
-
|
|
399
|
+
cursor: pointer;
|
|
400
|
+
margin: 0;
|
|
441
401
|
}
|
|
442
|
-
.
|
|
402
|
+
.radio_dot {
|
|
443
403
|
width: 1.125rem;
|
|
444
404
|
height: 1.125rem;
|
|
405
|
+
box-sizing: border-box;
|
|
445
406
|
border: 1px solid #e5e5e5;
|
|
446
407
|
border-radius: 9999px;
|
|
447
408
|
background: #ffffff;
|
|
@@ -449,45 +410,54 @@
|
|
|
449
410
|
background 0.2s ease-out,
|
|
450
411
|
border-color 0.2s ease-out,
|
|
451
412
|
box-shadow 0.2s ease-out;
|
|
413
|
+
position: relative;
|
|
414
|
+
display: inline-block;
|
|
452
415
|
}
|
|
453
|
-
.
|
|
416
|
+
.radio_label {
|
|
454
417
|
font-size: 0.9375rem;
|
|
455
418
|
line-height: 1.5;
|
|
456
419
|
color: #1a1a1a;
|
|
457
420
|
}
|
|
458
|
-
.
|
|
421
|
+
.radio_size_sm .radio_dot {
|
|
459
422
|
width: 1rem;
|
|
460
423
|
height: 1rem;
|
|
461
424
|
}
|
|
462
|
-
.
|
|
425
|
+
.radio_size_sm .radio_label {
|
|
463
426
|
font-size: 0.875rem;
|
|
464
427
|
line-height: 1.5;
|
|
465
428
|
}
|
|
466
|
-
.
|
|
429
|
+
.radio_size_md .radio_dot {
|
|
430
|
+
width: 1.125rem;
|
|
431
|
+
height: 1.125rem;
|
|
432
|
+
}
|
|
433
|
+
.radio_size_lg .radio_dot {
|
|
467
434
|
width: 1.25rem;
|
|
468
435
|
height: 1.25rem;
|
|
469
436
|
}
|
|
470
|
-
.
|
|
437
|
+
.radio_size_lg .radio_label {
|
|
471
438
|
font-size: 1rem;
|
|
472
439
|
line-height: 1.5;
|
|
473
440
|
}
|
|
474
|
-
.
|
|
475
|
-
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);
|
|
476
443
|
border-color: #000000;
|
|
477
444
|
}
|
|
478
|
-
.
|
|
445
|
+
.radio_input:checked + .radio_dot {
|
|
479
446
|
border-color: #000000;
|
|
480
447
|
}
|
|
481
|
-
.
|
|
448
|
+
.radio_input:checked + .radio_dot::after {
|
|
482
449
|
content: "";
|
|
483
|
-
|
|
450
|
+
position: absolute;
|
|
451
|
+
left: 50%;
|
|
452
|
+
top: 50%;
|
|
484
453
|
width: 60%;
|
|
485
454
|
height: 60%;
|
|
486
|
-
|
|
455
|
+
transform: translate(-50%, -50%);
|
|
487
456
|
background: #000000;
|
|
488
457
|
border-radius: 9999px;
|
|
489
458
|
}
|
|
490
|
-
.
|
|
459
|
+
.radio_input:disabled + .radio_dot,
|
|
460
|
+
.radio_input:disabled ~ .radio_label {
|
|
491
461
|
opacity: 0.6;
|
|
492
462
|
cursor: not-allowed;
|
|
493
463
|
}
|
|
@@ -501,13 +471,13 @@
|
|
|
501
471
|
gap: 0.25rem;
|
|
502
472
|
font-family: "Pretendard", sans-serif;
|
|
503
473
|
}
|
|
504
|
-
.
|
|
474
|
+
.select_label {
|
|
505
475
|
font-size: 0.875rem;
|
|
506
476
|
line-height: 1.5;
|
|
507
477
|
font-weight: 500;
|
|
508
478
|
color: #1a1a1a;
|
|
509
479
|
}
|
|
510
|
-
.
|
|
480
|
+
.select_control {
|
|
511
481
|
width: 100%;
|
|
512
482
|
display: inline-flex;
|
|
513
483
|
align-items: center;
|
|
@@ -524,111 +494,64 @@
|
|
|
524
494
|
font-size: 0.9375rem;
|
|
525
495
|
line-height: 1.5;
|
|
526
496
|
}
|
|
527
|
-
.
|
|
528
|
-
.
|
|
497
|
+
.select_control:disabled,
|
|
498
|
+
.select_control.is_disabled {
|
|
529
499
|
cursor: not-allowed;
|
|
530
500
|
opacity: 0.7;
|
|
531
501
|
background: #fafafa;
|
|
532
502
|
color: #999999;
|
|
533
503
|
}
|
|
534
|
-
.
|
|
504
|
+
.select_control_variant_outline {
|
|
535
505
|
border: 1px solid #e5e5e5;
|
|
536
506
|
}
|
|
537
|
-
.
|
|
507
|
+
.select_control_variant_outline:hover:not(.is_disabled) {
|
|
538
508
|
border-color: rgba(0, 0, 0, 0.08);
|
|
539
509
|
}
|
|
540
|
-
.
|
|
510
|
+
.select_control_variant_outline.is_open {
|
|
541
511
|
border-color: #000000;
|
|
542
512
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
|
|
543
513
|
}
|
|
544
|
-
.
|
|
545
|
-
width: 100%;
|
|
546
|
-
display: inline-flex;
|
|
547
|
-
align-items: center;
|
|
548
|
-
justify-content: space-between;
|
|
549
|
-
gap: 0.5rem;
|
|
550
|
-
cursor: pointer;
|
|
551
|
-
color: #1a1a1a;
|
|
552
|
-
background: #ffffff;
|
|
553
|
-
border-radius: 8px;
|
|
554
|
-
transition:
|
|
555
|
-
border-color 0.2s ease-out,
|
|
556
|
-
box-shadow 0.2s ease-out,
|
|
557
|
-
background 0.2s ease-out;
|
|
558
|
-
font-size: 0.9375rem;
|
|
559
|
-
line-height: 1.5;
|
|
560
|
-
}
|
|
561
|
-
.select__control--filled:disabled,
|
|
562
|
-
.select__control--filled.is-disabled {
|
|
563
|
-
cursor: not-allowed;
|
|
564
|
-
opacity: 0.7;
|
|
565
|
-
background: #fafafa;
|
|
566
|
-
color: #999999;
|
|
567
|
-
}
|
|
568
|
-
.select__control--filled {
|
|
514
|
+
.select_control_variant_filled {
|
|
569
515
|
background: #fafafa;
|
|
570
516
|
border: 1px solid transparent;
|
|
571
517
|
}
|
|
572
|
-
.
|
|
518
|
+
.select_control_variant_filled:hover:not(.is_disabled) {
|
|
573
519
|
background: rgb(253.5, 253.5, 253.5);
|
|
574
520
|
}
|
|
575
|
-
.
|
|
521
|
+
.select_control_variant_filled.is_open {
|
|
576
522
|
background: #ffffff;
|
|
577
523
|
border-color: #000000;
|
|
578
524
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
|
|
579
525
|
}
|
|
580
|
-
.
|
|
581
|
-
width: 100%;
|
|
582
|
-
display: inline-flex;
|
|
583
|
-
align-items: center;
|
|
584
|
-
justify-content: space-between;
|
|
585
|
-
gap: 0.5rem;
|
|
586
|
-
cursor: pointer;
|
|
587
|
-
color: #1a1a1a;
|
|
588
|
-
background: #ffffff;
|
|
589
|
-
border-radius: 8px;
|
|
590
|
-
transition:
|
|
591
|
-
border-color 0.2s ease-out,
|
|
592
|
-
box-shadow 0.2s ease-out,
|
|
593
|
-
background 0.2s ease-out;
|
|
594
|
-
font-size: 0.9375rem;
|
|
595
|
-
line-height: 1.5;
|
|
596
|
-
}
|
|
597
|
-
.select__control--ghost:disabled,
|
|
598
|
-
.select__control--ghost.is-disabled {
|
|
599
|
-
cursor: not-allowed;
|
|
600
|
-
opacity: 0.7;
|
|
601
|
-
background: #fafafa;
|
|
602
|
-
color: #999999;
|
|
603
|
-
}
|
|
604
|
-
.select__control--ghost {
|
|
526
|
+
.select_control_variant_ghost {
|
|
605
527
|
background: transparent;
|
|
606
528
|
border: 1px solid transparent;
|
|
607
529
|
}
|
|
608
|
-
.
|
|
530
|
+
.select_control_variant_ghost:hover:not(.is_disabled) {
|
|
609
531
|
background: rgba(0, 0, 0, 0.03);
|
|
610
532
|
}
|
|
611
|
-
.
|
|
533
|
+
.select_control_variant_ghost.is_open {
|
|
612
534
|
background: #ffffff;
|
|
613
535
|
border-color: #000000;
|
|
614
536
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
|
|
615
537
|
}
|
|
616
|
-
.
|
|
538
|
+
.select_control_size_sm {
|
|
617
539
|
padding: 0.5rem 1rem;
|
|
618
540
|
font-size: 0.875rem;
|
|
619
541
|
line-height: 1.5;
|
|
620
542
|
}
|
|
621
|
-
.
|
|
543
|
+
.select_control_size_md {
|
|
622
544
|
padding: 0.75rem 1.25rem;
|
|
623
545
|
font-size: 0.9375rem;
|
|
624
546
|
line-height: 1.5;
|
|
625
547
|
}
|
|
626
|
-
.
|
|
548
|
+
.select_control_size_lg {
|
|
627
549
|
padding: 1rem 1.5rem;
|
|
628
550
|
font-size: 1rem;
|
|
629
551
|
line-height: 1.5;
|
|
630
552
|
}
|
|
631
|
-
.
|
|
553
|
+
.select_value,
|
|
554
|
+
.select_placeholder {
|
|
632
555
|
flex: 1 1 auto;
|
|
633
556
|
min-width: 0;
|
|
634
557
|
overflow: hidden;
|
|
@@ -638,27 +561,19 @@
|
|
|
638
561
|
font-weight: 400;
|
|
639
562
|
line-height: 1.5;
|
|
640
563
|
}
|
|
641
|
-
.
|
|
642
|
-
flex: 1 1 auto;
|
|
643
|
-
min-width: 0;
|
|
644
|
-
overflow: hidden;
|
|
645
|
-
text-overflow: ellipsis;
|
|
646
|
-
white-space: nowrap;
|
|
647
|
-
font-size: 0.9375rem;
|
|
648
|
-
font-weight: 400;
|
|
649
|
-
line-height: 1.5;
|
|
564
|
+
.select_placeholder {
|
|
650
565
|
color: #999999;
|
|
651
566
|
}
|
|
652
|
-
.
|
|
567
|
+
.select_icon {
|
|
653
568
|
display: inline-flex;
|
|
654
569
|
align-items: center;
|
|
655
570
|
justify-content: center;
|
|
656
571
|
color: #666666;
|
|
657
572
|
}
|
|
658
|
-
.
|
|
573
|
+
.select_list {
|
|
659
574
|
position: absolute;
|
|
660
575
|
z-index: 10000;
|
|
661
|
-
top:
|
|
576
|
+
top: 0.25rem;
|
|
662
577
|
left: 0;
|
|
663
578
|
width: 100%;
|
|
664
579
|
min-width: 100%;
|
|
@@ -672,7 +587,7 @@
|
|
|
672
587
|
overflow-x: hidden;
|
|
673
588
|
padding: 0.25rem 0;
|
|
674
589
|
}
|
|
675
|
-
.
|
|
590
|
+
.select_option {
|
|
676
591
|
width: 100%;
|
|
677
592
|
box-sizing: border-box;
|
|
678
593
|
display: grid;
|
|
@@ -687,20 +602,20 @@
|
|
|
687
602
|
font-weight: 400;
|
|
688
603
|
line-height: 1.5;
|
|
689
604
|
}
|
|
690
|
-
.
|
|
605
|
+
.select_option > span:first-child {
|
|
691
606
|
min-width: 0;
|
|
692
607
|
overflow: hidden;
|
|
693
608
|
text-overflow: ellipsis;
|
|
694
609
|
white-space: nowrap;
|
|
695
610
|
}
|
|
696
|
-
.
|
|
697
|
-
.
|
|
611
|
+
.select_option:hover,
|
|
612
|
+
.select_option.is_active {
|
|
698
613
|
background: #fafafa;
|
|
699
614
|
}
|
|
700
|
-
.
|
|
615
|
+
.select_option.is_selected {
|
|
701
616
|
font-weight: 500;
|
|
702
617
|
}
|
|
703
|
-
.
|
|
618
|
+
.select_option.is_disabled {
|
|
704
619
|
cursor: not-allowed;
|
|
705
620
|
color: #999999;
|
|
706
621
|
}
|
|
@@ -710,15 +625,15 @@
|
|
|
710
625
|
position: relative;
|
|
711
626
|
display: inline-flex;
|
|
712
627
|
align-items: center;
|
|
628
|
+
width: 40px;
|
|
629
|
+
height: 22px;
|
|
630
|
+
padding: 2px;
|
|
713
631
|
border-radius: 9999px;
|
|
714
632
|
background: #e5e5e5;
|
|
715
633
|
transition: background 0.2s ease-out;
|
|
716
634
|
cursor: pointer;
|
|
717
|
-
width: 40px;
|
|
718
|
-
height: 22px;
|
|
719
|
-
padding: 2px;
|
|
720
635
|
}
|
|
721
|
-
.
|
|
636
|
+
.switch_thumb {
|
|
722
637
|
width: 18px;
|
|
723
638
|
height: 18px;
|
|
724
639
|
background: #ffffff;
|
|
@@ -726,59 +641,94 @@
|
|
|
726
641
|
transition: transform 0.2s ease-out;
|
|
727
642
|
transform: translateX(0);
|
|
728
643
|
}
|
|
729
|
-
.
|
|
644
|
+
.switch_on {
|
|
730
645
|
background: #000000;
|
|
731
646
|
}
|
|
732
|
-
.
|
|
647
|
+
.switch_on .switch_thumb {
|
|
733
648
|
transform: translateX(18px);
|
|
734
649
|
}
|
|
735
|
-
.
|
|
650
|
+
.switch_size_sm {
|
|
736
651
|
width: 34px;
|
|
737
652
|
height: 18px;
|
|
653
|
+
padding: 2px;
|
|
738
654
|
}
|
|
739
|
-
.
|
|
655
|
+
.switch_size_sm .switch_thumb {
|
|
740
656
|
width: 14px;
|
|
741
657
|
height: 14px;
|
|
742
658
|
}
|
|
743
|
-
.
|
|
659
|
+
.switch_size_sm.switch_on .switch_thumb {
|
|
744
660
|
transform: translateX(16px);
|
|
745
661
|
}
|
|
746
|
-
.
|
|
662
|
+
.switch_size_md {
|
|
663
|
+
width: 40px;
|
|
664
|
+
height: 22px;
|
|
665
|
+
}
|
|
666
|
+
.switch_size_lg {
|
|
747
667
|
width: 48px;
|
|
748
668
|
height: 26px;
|
|
669
|
+
padding: 2px;
|
|
749
670
|
}
|
|
750
|
-
.
|
|
671
|
+
.switch_size_lg .switch_thumb {
|
|
751
672
|
width: 22px;
|
|
752
673
|
height: 22px;
|
|
753
674
|
}
|
|
754
|
-
.
|
|
675
|
+
.switch_size_lg.switch_on .switch_thumb {
|
|
755
676
|
transform: translateX(22px);
|
|
756
677
|
}
|
|
757
|
-
.
|
|
678
|
+
.switch_disabled {
|
|
758
679
|
opacity: 0.6;
|
|
759
680
|
cursor: not-allowed;
|
|
760
681
|
}
|
|
761
682
|
|
|
762
683
|
/* src/ui/form/textfield/style.scss */
|
|
763
|
-
.
|
|
684
|
+
.text_field {
|
|
764
685
|
display: flex;
|
|
765
686
|
flex-direction: column;
|
|
766
687
|
}
|
|
767
|
-
.
|
|
688
|
+
.text_field_full_width {
|
|
689
|
+
width: 100%;
|
|
690
|
+
}
|
|
691
|
+
.text_field_label {
|
|
768
692
|
margin-bottom: 0.25rem;
|
|
769
693
|
color: #1a1a1a;
|
|
770
694
|
font-size: 0.875rem;
|
|
771
695
|
line-height: 1.5;
|
|
772
696
|
font-weight: 500;
|
|
773
697
|
}
|
|
774
|
-
.
|
|
698
|
+
.text_field_wrap {
|
|
775
699
|
position: relative;
|
|
776
700
|
display: inline-flex;
|
|
777
701
|
width: 100%;
|
|
778
702
|
align-items: center;
|
|
779
|
-
gap: 0.75rem;
|
|
780
703
|
}
|
|
781
|
-
.
|
|
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 {
|
|
782
732
|
width: 100%;
|
|
783
733
|
border-radius: 8px;
|
|
784
734
|
transition:
|
|
@@ -790,179 +740,144 @@
|
|
|
790
740
|
color: #1a1a1a;
|
|
791
741
|
background: #ffffff;
|
|
792
742
|
}
|
|
793
|
-
.
|
|
743
|
+
.text_field_input::placeholder {
|
|
794
744
|
color: #999999;
|
|
795
745
|
}
|
|
796
|
-
.
|
|
746
|
+
.text_field_input:disabled {
|
|
797
747
|
cursor: not-allowed;
|
|
798
748
|
background: #fafafa;
|
|
799
749
|
color: #999999;
|
|
800
750
|
opacity: 0.7;
|
|
801
751
|
}
|
|
802
|
-
.
|
|
752
|
+
.text_field_variant_outline {
|
|
803
753
|
border: 1px solid #e5e5e5;
|
|
804
754
|
}
|
|
805
|
-
.
|
|
755
|
+
.text_field_variant_outline:hover:not(:disabled) {
|
|
806
756
|
border-color: rgba(0, 0, 0, 0.08);
|
|
807
757
|
}
|
|
808
|
-
.
|
|
758
|
+
.text_field_variant_outline:focus-visible {
|
|
809
759
|
outline: none;
|
|
810
760
|
border-color: #000000;
|
|
811
761
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
|
|
812
762
|
}
|
|
813
|
-
.
|
|
814
|
-
width: 100%;
|
|
815
|
-
border-radius: 8px;
|
|
816
|
-
transition:
|
|
817
|
-
border-color 0.2s ease-out,
|
|
818
|
-
box-shadow 0.2s ease-out,
|
|
819
|
-
background 0.2s ease-out;
|
|
820
|
-
font-size: 0.9375rem;
|
|
821
|
-
line-height: 1.5;
|
|
822
|
-
color: #1a1a1a;
|
|
823
|
-
background: #ffffff;
|
|
824
|
-
}
|
|
825
|
-
.tf__input--filled::placeholder {
|
|
826
|
-
color: #999999;
|
|
827
|
-
}
|
|
828
|
-
.tf__input--filled:disabled {
|
|
829
|
-
cursor: not-allowed;
|
|
830
|
-
background: #fafafa;
|
|
831
|
-
color: #999999;
|
|
832
|
-
opacity: 0.7;
|
|
833
|
-
}
|
|
834
|
-
.tf__input--filled {
|
|
763
|
+
.text_field_variant_filled {
|
|
835
764
|
background: #fafafa;
|
|
836
765
|
border: 1px solid transparent;
|
|
837
766
|
}
|
|
838
|
-
.
|
|
767
|
+
.text_field_variant_filled:hover:not(:disabled) {
|
|
839
768
|
background: rgb(253.5, 253.5, 253.5);
|
|
840
769
|
}
|
|
841
|
-
.
|
|
770
|
+
.text_field_variant_filled:focus-visible {
|
|
842
771
|
outline: none;
|
|
843
772
|
border-color: #000000;
|
|
844
773
|
background: #ffffff;
|
|
845
774
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
|
|
846
775
|
}
|
|
847
|
-
.
|
|
848
|
-
width: 100%;
|
|
849
|
-
border-radius: 8px;
|
|
850
|
-
transition:
|
|
851
|
-
border-color 0.2s ease-out,
|
|
852
|
-
box-shadow 0.2s ease-out,
|
|
853
|
-
background 0.2s ease-out;
|
|
854
|
-
font-size: 0.9375rem;
|
|
855
|
-
line-height: 1.5;
|
|
856
|
-
color: #1a1a1a;
|
|
857
|
-
background: #ffffff;
|
|
858
|
-
}
|
|
859
|
-
.tf__input--ghost::placeholder {
|
|
860
|
-
color: #999999;
|
|
861
|
-
}
|
|
862
|
-
.tf__input--ghost:disabled {
|
|
863
|
-
cursor: not-allowed;
|
|
864
|
-
background: #fafafa;
|
|
865
|
-
color: #999999;
|
|
866
|
-
opacity: 0.7;
|
|
867
|
-
}
|
|
868
|
-
.tf__input--ghost {
|
|
776
|
+
.text_field_variant_ghost {
|
|
869
777
|
background: transparent;
|
|
870
778
|
border: 1px solid transparent;
|
|
871
779
|
}
|
|
872
|
-
.
|
|
780
|
+
.text_field_variant_ghost:hover:not(:disabled) {
|
|
873
781
|
background: rgba(0, 0, 0, 0.03);
|
|
874
782
|
}
|
|
875
|
-
.
|
|
783
|
+
.text_field_variant_ghost:focus-visible {
|
|
876
784
|
outline: none;
|
|
877
785
|
border-color: #000000;
|
|
878
786
|
background: #ffffff;
|
|
879
787
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
|
|
880
788
|
}
|
|
881
|
-
.
|
|
789
|
+
.text_field_size_sm {
|
|
882
790
|
padding: 0.5rem 1rem;
|
|
883
791
|
font-size: 0.875rem;
|
|
884
792
|
line-height: 1.5;
|
|
885
793
|
}
|
|
886
|
-
.
|
|
794
|
+
.text_field_size_md {
|
|
887
795
|
padding: 0.75rem 1.25rem;
|
|
888
796
|
font-size: 0.9375rem;
|
|
889
797
|
line-height: 1.5;
|
|
890
798
|
}
|
|
891
|
-
.
|
|
799
|
+
.text_field_size_lg {
|
|
892
800
|
padding: 1rem 1.5rem;
|
|
893
801
|
font-size: 1rem;
|
|
894
802
|
line-height: 1.5;
|
|
895
803
|
}
|
|
896
|
-
.
|
|
804
|
+
.text_field_with_left {
|
|
897
805
|
padding-left: calc(1.25rem + 1.25rem);
|
|
898
806
|
}
|
|
899
|
-
.
|
|
807
|
+
.text_field_with_right {
|
|
900
808
|
padding-right: calc(1.25rem + 1.25rem);
|
|
901
809
|
}
|
|
902
|
-
.
|
|
810
|
+
.text_field_error {
|
|
903
811
|
border-color: #ef4444 !important;
|
|
904
812
|
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
|
|
905
813
|
}
|
|
906
|
-
.
|
|
814
|
+
.text_field_success {
|
|
907
815
|
border-color: #10b981 !important;
|
|
908
816
|
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
|
|
909
817
|
}
|
|
910
|
-
.tf__icon {
|
|
911
|
-
position: absolute;
|
|
912
|
-
display: inline-flex;
|
|
913
|
-
align-items: center;
|
|
914
|
-
justify-content: center;
|
|
915
|
-
width: 1.25rem;
|
|
916
|
-
height: 1.25rem;
|
|
917
|
-
color: #666666;
|
|
918
|
-
}
|
|
919
|
-
.tf__icon--left {
|
|
920
|
-
left: 0.75rem;
|
|
921
|
-
}
|
|
922
|
-
.tf__icon--right {
|
|
923
|
-
right: 0.75rem;
|
|
924
|
-
}
|
|
925
|
-
.tf__helper {
|
|
926
|
-
margin-top: 0.25rem;
|
|
927
|
-
font-size: 0.875rem;
|
|
928
|
-
line-height: 1.5;
|
|
929
|
-
color: #666666;
|
|
930
|
-
}
|
|
931
|
-
.tf__helper--error {
|
|
932
|
-
color: #ef4444;
|
|
933
|
-
}
|
|
934
818
|
|
|
935
819
|
/* src/ui/navigation/pagination/style.scss */
|
|
936
820
|
.pagination {
|
|
937
|
-
display:
|
|
821
|
+
display: flex;
|
|
938
822
|
align-items: center;
|
|
823
|
+
justify-content: center;
|
|
939
824
|
gap: 0.5rem;
|
|
825
|
+
margin-top: 2rem;
|
|
940
826
|
}
|
|
941
|
-
.
|
|
827
|
+
.pagination_item {
|
|
942
828
|
border: 1px solid #e5e5e5;
|
|
943
829
|
background: #ffffff;
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
cursor: pointer;
|
|
830
|
+
border-radius: 8px;
|
|
831
|
+
padding: 6px 10px;
|
|
832
|
+
min-width: 36px;
|
|
948
833
|
font-size: 0.875rem;
|
|
949
834
|
line-height: 1.5;
|
|
835
|
+
color: #1a1a1a;
|
|
836
|
+
transition: background 0.2s ease-out, border-color 0.2s ease-out;
|
|
950
837
|
}
|
|
951
|
-
.
|
|
952
|
-
background: #
|
|
953
|
-
color: #ffffff;
|
|
954
|
-
border-color: #000000;
|
|
838
|
+
.pagination_item:hover:not(:disabled) {
|
|
839
|
+
background: #fafafa;
|
|
955
840
|
}
|
|
956
|
-
.
|
|
841
|
+
.pagination_item:disabled {
|
|
957
842
|
opacity: 0.5;
|
|
958
843
|
cursor: not-allowed;
|
|
959
844
|
}
|
|
960
|
-
.
|
|
961
|
-
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.
|
|
845
|
+
.pagination_item:focus-visible {
|
|
846
|
+
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
|
|
962
847
|
border-color: #000000;
|
|
963
848
|
}
|
|
964
|
-
.
|
|
965
|
-
|
|
849
|
+
.pagination_pages {
|
|
850
|
+
display: flex;
|
|
851
|
+
align-items: center;
|
|
852
|
+
gap: 6px;
|
|
853
|
+
}
|
|
854
|
+
.pagination_pageButton {
|
|
855
|
+
border: 0;
|
|
856
|
+
background: transparent;
|
|
857
|
+
min-width: 36px;
|
|
858
|
+
height: 36px;
|
|
859
|
+
border-radius: 8px;
|
|
860
|
+
font-size: 0.875rem;
|
|
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;
|
|
874
|
+
font-weight: 600;
|
|
875
|
+
}
|
|
876
|
+
.pagination_ellipsis {
|
|
877
|
+
min-width: 20px;
|
|
878
|
+
text-align: center;
|
|
879
|
+
font-size: 0.875rem;
|
|
880
|
+
line-height: 1.5;
|
|
966
881
|
color: #999999;
|
|
967
882
|
}
|
|
968
883
|
|
|
@@ -970,118 +885,26 @@
|
|
|
970
885
|
.modal {
|
|
971
886
|
position: fixed;
|
|
972
887
|
inset: 0;
|
|
973
|
-
background: rgba(0, 0, 0, 0.5);
|
|
974
888
|
display: grid;
|
|
975
889
|
place-items: center;
|
|
890
|
+
background: rgba(0, 0, 0, 0.5);
|
|
976
891
|
z-index: 10000;
|
|
977
892
|
}
|
|
978
|
-
.
|
|
893
|
+
.modal_panel {
|
|
979
894
|
background: #ffffff;
|
|
980
895
|
border-radius: 12px;
|
|
981
896
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
|
|
982
897
|
max-width: calc(100% - 32px);
|
|
898
|
+
overflow: hidden;
|
|
983
899
|
}
|
|
984
|
-
.
|
|
900
|
+
.modal_header {
|
|
985
901
|
padding: 1rem;
|
|
902
|
+
border-bottom: 1px solid #e5e5e5;
|
|
903
|
+
color: #1a1a1a;
|
|
986
904
|
font-size: 1.25rem;
|
|
987
905
|
font-weight: 600;
|
|
988
906
|
line-height: 1.3;
|
|
989
|
-
color: #1a1a1a;
|
|
990
|
-
border-bottom: 1px solid #e5e5e5;
|
|
991
907
|
}
|
|
992
|
-
.
|
|
908
|
+
.modal_body {
|
|
993
909
|
padding: 1rem;
|
|
994
910
|
}
|
|
995
|
-
|
|
996
|
-
/* src/ui/skeleton/card/style.scss */
|
|
997
|
-
.card-skeleton {
|
|
998
|
-
display: flex;
|
|
999
|
-
flex-direction: column;
|
|
1000
|
-
border: 1px solid var(--line-normal);
|
|
1001
|
-
border-radius: 12px;
|
|
1002
|
-
overflow: hidden;
|
|
1003
|
-
background: var(--background-light);
|
|
1004
|
-
animation: card-skeleton-pulse 1.5s ease-in-out infinite;
|
|
1005
|
-
}
|
|
1006
|
-
.card-skeleton__thumb {
|
|
1007
|
-
width: 100%;
|
|
1008
|
-
aspect-ratio: 4/3;
|
|
1009
|
-
background: var(--background-input);
|
|
1010
|
-
}
|
|
1011
|
-
.card-skeleton__text {
|
|
1012
|
-
padding: 12px;
|
|
1013
|
-
display: flex;
|
|
1014
|
-
flex-direction: column;
|
|
1015
|
-
gap: 8px;
|
|
1016
|
-
}
|
|
1017
|
-
.card-skeleton__line {
|
|
1018
|
-
height: 12px;
|
|
1019
|
-
background: var(--background-input);
|
|
1020
|
-
border-radius: 4px;
|
|
1021
|
-
}
|
|
1022
|
-
.card-skeleton__line.short {
|
|
1023
|
-
width: 60%;
|
|
1024
|
-
}
|
|
1025
|
-
@keyframes card-skeleton-pulse {
|
|
1026
|
-
0%, 100% {
|
|
1027
|
-
opacity: 1;
|
|
1028
|
-
}
|
|
1029
|
-
50% {
|
|
1030
|
-
opacity: 0.5;
|
|
1031
|
-
}
|
|
1032
|
-
}
|
|
1033
|
-
|
|
1034
|
-
/* src/ui/skeleton/list/style.scss */
|
|
1035
|
-
.request-item.skeleton {
|
|
1036
|
-
pointer-events: none;
|
|
1037
|
-
}
|
|
1038
|
-
.skeleton__title {
|
|
1039
|
-
width: 220px;
|
|
1040
|
-
height: 18px;
|
|
1041
|
-
border-radius: 6px;
|
|
1042
|
-
background:
|
|
1043
|
-
linear-gradient(
|
|
1044
|
-
90deg,
|
|
1045
|
-
var(--background-normal) 25%,
|
|
1046
|
-
var(--line-normal) 37%,
|
|
1047
|
-
var(--background-normal) 63%);
|
|
1048
|
-
background-size: 400% 100%;
|
|
1049
|
-
animation: skeleton-shimmer 1.2s ease-in-out infinite;
|
|
1050
|
-
margin-bottom: 8px;
|
|
1051
|
-
}
|
|
1052
|
-
.skeleton__tag {
|
|
1053
|
-
display: inline-block;
|
|
1054
|
-
width: 64px;
|
|
1055
|
-
height: 22px;
|
|
1056
|
-
border-radius: 6px;
|
|
1057
|
-
background:
|
|
1058
|
-
linear-gradient(
|
|
1059
|
-
90deg,
|
|
1060
|
-
var(--background-normal) 25%,
|
|
1061
|
-
var(--line-normal) 37%,
|
|
1062
|
-
var(--background-normal) 63%);
|
|
1063
|
-
background-size: 400% 100%;
|
|
1064
|
-
animation: skeleton-shimmer 1.2s ease-in-out infinite;
|
|
1065
|
-
}
|
|
1066
|
-
.skeleton__dday {
|
|
1067
|
-
display: inline-block;
|
|
1068
|
-
width: 48px;
|
|
1069
|
-
height: 16px;
|
|
1070
|
-
border-radius: 6px;
|
|
1071
|
-
background:
|
|
1072
|
-
linear-gradient(
|
|
1073
|
-
90deg,
|
|
1074
|
-
var(--background-normal) 25%,
|
|
1075
|
-
var(--line-normal) 37%,
|
|
1076
|
-
var(--background-normal) 63%);
|
|
1077
|
-
background-size: 400% 100%;
|
|
1078
|
-
animation: skeleton-shimmer 1.2s ease-in-out infinite;
|
|
1079
|
-
}
|
|
1080
|
-
@keyframes skeleton-shimmer {
|
|
1081
|
-
0% {
|
|
1082
|
-
background-position: 100% 0;
|
|
1083
|
-
}
|
|
1084
|
-
100% {
|
|
1085
|
-
background-position: 0 0;
|
|
1086
|
-
}
|
|
1087
|
-
}
|