@bigtablet/design-system 1.22.2 → 1.24.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 +345 -285
- package/dist/index.d.ts +374 -88
- package/dist/index.js +416 -308
- package/dist/next.css +28 -28
- package/dist/styles/scss/_a11y.scss +4 -4
- package/dist/styles/scss/_breakpoints.scss +19 -13
- package/dist/styles/scss/_colors.scss +67 -55
- package/dist/styles/scss/_radius.scss +6 -5
- package/dist/styles/scss/_shadows.scss +5 -20
- package/dist/styles/scss/_spacing.scss +14 -12
- package/dist/styles/scss/_typography.scss +61 -64
- package/dist/styles/scss/_z-index.scss +6 -3
- package/dist/vanilla/bigtablet.min.css +1 -1
- package/dist/vanilla/bigtablet.min.js +12 -12
- package/package.json +12 -11
package/dist/index.css
CHANGED
|
@@ -8,42 +8,43 @@
|
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
10
|
.card {
|
|
11
|
-
background: #
|
|
11
|
+
background: #FFFFFF;
|
|
12
12
|
border-radius: 12px;
|
|
13
13
|
}
|
|
14
14
|
.card_bordered {
|
|
15
|
-
border: 1px solid #
|
|
15
|
+
border: 1px solid #E5E5E5;
|
|
16
16
|
}
|
|
17
17
|
.card_shadow_none {
|
|
18
18
|
box-shadow: none;
|
|
19
19
|
}
|
|
20
20
|
.card_shadow_sm {
|
|
21
|
-
box-shadow: 0
|
|
21
|
+
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0px rgba(0, 0, 0, 0.12);
|
|
22
22
|
}
|
|
23
23
|
.card_shadow_md {
|
|
24
|
-
box-shadow: 0
|
|
24
|
+
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2), 0 6px 6px 0px rgba(0, 0, 0, 0.12);
|
|
25
25
|
}
|
|
26
26
|
.card_shadow_lg {
|
|
27
|
-
box-shadow: 0
|
|
27
|
+
box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.2), 0 9px 9px 0px rgba(0, 0, 0, 0.12);
|
|
28
28
|
}
|
|
29
29
|
.card_p_none {
|
|
30
30
|
padding: 0;
|
|
31
31
|
}
|
|
32
32
|
.card_p_sm {
|
|
33
|
-
padding:
|
|
33
|
+
padding: 8px;
|
|
34
34
|
}
|
|
35
35
|
.card_p_md {
|
|
36
|
-
padding:
|
|
36
|
+
padding: 16px;
|
|
37
37
|
}
|
|
38
38
|
.card_p_lg {
|
|
39
|
-
padding:
|
|
39
|
+
padding: 24px;
|
|
40
40
|
}
|
|
41
41
|
.card_title {
|
|
42
|
-
font-size:
|
|
43
|
-
font-weight:
|
|
44
|
-
line-height:
|
|
45
|
-
|
|
46
|
-
|
|
42
|
+
font-size: 20px;
|
|
43
|
+
font-weight: 400;
|
|
44
|
+
line-height: 28px;
|
|
45
|
+
letter-spacing: 0px;
|
|
46
|
+
margin-bottom: 12px;
|
|
47
|
+
color: #121212;
|
|
47
48
|
}
|
|
48
49
|
.card_body {
|
|
49
50
|
width: 100%;
|
|
@@ -83,38 +84,41 @@
|
|
|
83
84
|
display: flex;
|
|
84
85
|
align-items: center;
|
|
85
86
|
justify-content: center;
|
|
86
|
-
z-index:
|
|
87
|
+
z-index: 1000;
|
|
87
88
|
animation: alert_fade_in 0.2s ease-in-out;
|
|
88
89
|
}
|
|
89
90
|
.alert_modal {
|
|
90
|
-
background: #
|
|
91
|
+
background: #FFFFFF;
|
|
91
92
|
border-radius: 12px;
|
|
92
93
|
min-width: 320px;
|
|
93
94
|
max-width: 480px;
|
|
94
|
-
box-shadow: 0
|
|
95
|
+
box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.2), 0 15px 15px 0px rgba(0, 0, 0, 0.12);
|
|
95
96
|
animation: alert_slide_up 0.3s ease-in-out;
|
|
96
97
|
overflow: hidden;
|
|
97
98
|
}
|
|
98
99
|
.alert_title {
|
|
99
|
-
font-size:
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
100
|
+
font-size: 18px;
|
|
101
|
+
font-weight: 400;
|
|
102
|
+
line-height: 24px;
|
|
103
|
+
letter-spacing: 0px;
|
|
104
|
+
font-weight: 500;
|
|
105
|
+
color: #3B82F6;
|
|
106
|
+
padding: 12px 20px 4px;
|
|
104
107
|
}
|
|
105
108
|
.alert_message {
|
|
106
|
-
font-size:
|
|
109
|
+
font-size: 15px;
|
|
107
110
|
font-weight: 400;
|
|
108
|
-
line-height:
|
|
111
|
+
line-height: 22.5px;
|
|
112
|
+
letter-spacing: 0px;
|
|
109
113
|
color: #666666;
|
|
110
|
-
padding:
|
|
111
|
-
line-height:
|
|
114
|
+
padding: 20px;
|
|
115
|
+
line-height: 28px;
|
|
112
116
|
}
|
|
113
117
|
.alert_actions {
|
|
114
118
|
display: flex;
|
|
115
|
-
gap:
|
|
119
|
+
gap: 8px;
|
|
116
120
|
align-items: center;
|
|
117
|
-
padding: 0
|
|
121
|
+
padding: 0 20px 20px;
|
|
118
122
|
}
|
|
119
123
|
.alert_actions_left {
|
|
120
124
|
justify-content: flex-start;
|
|
@@ -129,10 +133,10 @@
|
|
|
129
133
|
min-width: 80px;
|
|
130
134
|
padding: 10px 24px;
|
|
131
135
|
border-radius: 6px;
|
|
132
|
-
font-weight:
|
|
136
|
+
font-weight: 500;
|
|
133
137
|
cursor: pointer;
|
|
134
138
|
border: 1px solid transparent;
|
|
135
|
-
line-height:
|
|
139
|
+
line-height: 24px;
|
|
136
140
|
transition:
|
|
137
141
|
background 0.2s ease-in-out,
|
|
138
142
|
border-color 0.2s ease-in-out,
|
|
@@ -141,7 +145,7 @@
|
|
|
141
145
|
}
|
|
142
146
|
.alert_button:focus-visible {
|
|
143
147
|
outline: none;
|
|
144
|
-
box-shadow: 0 0 0 3px rgba(
|
|
148
|
+
box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
|
|
145
149
|
}
|
|
146
150
|
.alert_button:active:not(:disabled) {
|
|
147
151
|
transform: scale(0.98);
|
|
@@ -151,56 +155,56 @@
|
|
|
151
155
|
opacity: 0.6;
|
|
152
156
|
}
|
|
153
157
|
.alert_button_cancel {
|
|
154
|
-
background: #
|
|
155
|
-
border-color: #
|
|
156
|
-
color: #
|
|
158
|
+
background: #FFFFFF;
|
|
159
|
+
border-color: #E5E5E5;
|
|
160
|
+
color: #121212;
|
|
157
161
|
}
|
|
158
162
|
.alert_button_cancel:hover:not(:disabled) {
|
|
159
|
-
background: #
|
|
163
|
+
background: #F4F4F4;
|
|
160
164
|
border-color: rgba(0, 0, 0, 0.08);
|
|
161
165
|
}
|
|
162
166
|
.alert_button_confirm {
|
|
163
|
-
color: #
|
|
167
|
+
color: #FFFFFF;
|
|
164
168
|
}
|
|
165
169
|
.alert_variant_info .alert_title {
|
|
166
|
-
color: #
|
|
170
|
+
color: #3B82F6;
|
|
167
171
|
}
|
|
168
172
|
.alert_variant_info .alert_button_confirm {
|
|
169
|
-
background: #
|
|
170
|
-
border-color: #
|
|
173
|
+
background: #3B82F6;
|
|
174
|
+
border-color: #3B82F6;
|
|
171
175
|
}
|
|
172
176
|
.alert_variant_info .alert_button_confirm:hover:not(:disabled) {
|
|
173
177
|
background: rgb(29.7434146341, 111.3414634146, 244.6565853659);
|
|
174
178
|
border-color: rgb(29.7434146341, 111.3414634146, 244.6565853659);
|
|
175
179
|
}
|
|
176
180
|
.alert_variant_success .alert_title {
|
|
177
|
-
color: #
|
|
181
|
+
color: #10B981;
|
|
178
182
|
}
|
|
179
183
|
.alert_variant_success .alert_button_confirm {
|
|
180
|
-
background: #
|
|
181
|
-
border-color: #
|
|
184
|
+
background: #10B981;
|
|
185
|
+
border-color: #10B981;
|
|
182
186
|
}
|
|
183
187
|
.alert_variant_success .alert_button_confirm:hover:not(:disabled) {
|
|
184
188
|
background: rgb(13.5641791045, 156.8358208955, 109.3611940299);
|
|
185
189
|
border-color: rgb(13.5641791045, 156.8358208955, 109.3611940299);
|
|
186
190
|
}
|
|
187
191
|
.alert_variant_warning .alert_title {
|
|
188
|
-
color: #
|
|
192
|
+
color: #F59E0B;
|
|
189
193
|
}
|
|
190
194
|
.alert_variant_warning .alert_button_confirm {
|
|
191
|
-
background: #
|
|
192
|
-
border-color: #
|
|
195
|
+
background: #F59E0B;
|
|
196
|
+
border-color: #F59E0B;
|
|
193
197
|
}
|
|
194
198
|
.alert_variant_warning .alert_button_confirm:hover:not(:disabled) {
|
|
195
199
|
background: rgb(216.525984252, 139.3220472441, 8.874015748);
|
|
196
200
|
border-color: rgb(216.525984252, 139.3220472441, 8.874015748);
|
|
197
201
|
}
|
|
198
202
|
.alert_variant_error .alert_title {
|
|
199
|
-
color: #
|
|
203
|
+
color: #EF4444;
|
|
200
204
|
}
|
|
201
205
|
.alert_variant_error .alert_button_confirm {
|
|
202
|
-
background: #
|
|
203
|
-
border-color: #
|
|
206
|
+
background: #EF4444;
|
|
207
|
+
border-color: #EF4444;
|
|
204
208
|
}
|
|
205
209
|
.alert_variant_error .alert_button_confirm:hover:not(:disabled) {
|
|
206
210
|
background: rgb(236.5881773399, 39.8118226601, 39.8118226601);
|
|
@@ -225,8 +229,8 @@
|
|
|
225
229
|
display: inline-block;
|
|
226
230
|
box-sizing: border-box;
|
|
227
231
|
border-radius: 50%;
|
|
228
|
-
border: 2px solid #
|
|
229
|
-
border-top-color: #
|
|
232
|
+
border: 2px solid #E5E5E5;
|
|
233
|
+
border-top-color: #121212;
|
|
230
234
|
animation: spinner_spin 0.8s linear infinite;
|
|
231
235
|
}
|
|
232
236
|
|
|
@@ -244,13 +248,13 @@
|
|
|
244
248
|
top: 0;
|
|
245
249
|
left: 0;
|
|
246
250
|
right: 0;
|
|
247
|
-
z-index:
|
|
251
|
+
z-index: 1000;
|
|
248
252
|
overflow: hidden;
|
|
249
253
|
background-color: transparent;
|
|
250
254
|
}
|
|
251
255
|
.top_loading_bar {
|
|
252
256
|
height: 100%;
|
|
253
|
-
background-color: #
|
|
257
|
+
background-color: #121212;
|
|
254
258
|
transition: width 0.2s ease-in-out;
|
|
255
259
|
}
|
|
256
260
|
.top_loading_indeterminate {
|
|
@@ -305,12 +309,12 @@
|
|
|
305
309
|
}
|
|
306
310
|
.toast_container {
|
|
307
311
|
position: fixed;
|
|
308
|
-
top:
|
|
309
|
-
right:
|
|
310
|
-
z-index:
|
|
312
|
+
top: 16px;
|
|
313
|
+
right: 16px;
|
|
314
|
+
z-index: 1000;
|
|
311
315
|
display: flex;
|
|
312
316
|
flex-direction: column;
|
|
313
|
-
gap:
|
|
317
|
+
gap: 8px;
|
|
314
318
|
pointer-events: none;
|
|
315
319
|
width: 360px;
|
|
316
320
|
max-width: calc(100vw - 32px);
|
|
@@ -321,17 +325,17 @@
|
|
|
321
325
|
overflow: hidden;
|
|
322
326
|
display: flex;
|
|
323
327
|
align-items: flex-start;
|
|
324
|
-
gap:
|
|
325
|
-
padding:
|
|
326
|
-
background: #
|
|
327
|
-
border: 1px solid #
|
|
328
|
+
gap: 8px;
|
|
329
|
+
padding: 12px 12px 16px;
|
|
330
|
+
background: #FFFFFF;
|
|
331
|
+
border: 1px solid #E5E5E5;
|
|
328
332
|
border-radius: 12px;
|
|
329
|
-
box-shadow: 0
|
|
333
|
+
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2), 0 6px 6px 0px rgba(0, 0, 0, 0.12);
|
|
330
334
|
font-family: "Pretendard", sans-serif;
|
|
331
|
-
font-size:
|
|
335
|
+
font-size: 14px;
|
|
332
336
|
font-weight: 500;
|
|
333
|
-
color: #
|
|
334
|
-
line-height:
|
|
337
|
+
color: #121212;
|
|
338
|
+
line-height: 24px;
|
|
335
339
|
animation: toast_slide_in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
336
340
|
}
|
|
337
341
|
.toast_item_exiting {
|
|
@@ -343,16 +347,16 @@
|
|
|
343
347
|
display: flex;
|
|
344
348
|
}
|
|
345
349
|
.toast_icon_success {
|
|
346
|
-
color: #
|
|
350
|
+
color: #10B981;
|
|
347
351
|
}
|
|
348
352
|
.toast_icon_error {
|
|
349
|
-
color: #
|
|
353
|
+
color: #EF4444;
|
|
350
354
|
}
|
|
351
355
|
.toast_icon_warning {
|
|
352
|
-
color: #
|
|
356
|
+
color: #F59E0B;
|
|
353
357
|
}
|
|
354
358
|
.toast_icon_info {
|
|
355
|
-
color: #
|
|
359
|
+
color: #3B82F6;
|
|
356
360
|
}
|
|
357
361
|
.toast_icon_default {
|
|
358
362
|
color: #666666;
|
|
@@ -373,17 +377,17 @@
|
|
|
373
377
|
border: none;
|
|
374
378
|
background: none;
|
|
375
379
|
cursor: pointer;
|
|
376
|
-
color: #
|
|
380
|
+
color: #888888;
|
|
377
381
|
border-radius: 6px;
|
|
378
382
|
transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
379
383
|
}
|
|
380
384
|
.toast_close:hover {
|
|
381
|
-
color: #
|
|
382
|
-
background-color: #
|
|
385
|
+
color: #121212;
|
|
386
|
+
background-color: #F4F4F4;
|
|
383
387
|
}
|
|
384
388
|
.toast_close:focus-visible {
|
|
385
389
|
outline: none;
|
|
386
|
-
box-shadow: 0 0 0 3px rgba(
|
|
390
|
+
box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
|
|
387
391
|
}
|
|
388
392
|
.toast_progress {
|
|
389
393
|
position: absolute;
|
|
@@ -394,16 +398,16 @@
|
|
|
394
398
|
animation: toast_progress var(--toast-duration, 3000ms) linear forwards;
|
|
395
399
|
}
|
|
396
400
|
.toast_progress_success {
|
|
397
|
-
background: #
|
|
401
|
+
background: #10B981;
|
|
398
402
|
}
|
|
399
403
|
.toast_progress_error {
|
|
400
|
-
background: #
|
|
404
|
+
background: #EF4444;
|
|
401
405
|
}
|
|
402
406
|
.toast_progress_warning {
|
|
403
|
-
background: #
|
|
407
|
+
background: #F59E0B;
|
|
404
408
|
}
|
|
405
409
|
.toast_progress_info {
|
|
406
|
-
background: #
|
|
410
|
+
background: #3B82F6;
|
|
407
411
|
}
|
|
408
412
|
.toast_progress_default {
|
|
409
413
|
background: #666666;
|
|
@@ -422,7 +426,7 @@
|
|
|
422
426
|
display: inline-flex;
|
|
423
427
|
align-items: center;
|
|
424
428
|
justify-content: center;
|
|
425
|
-
gap:
|
|
429
|
+
gap: 8px;
|
|
426
430
|
border-radius: 8px;
|
|
427
431
|
border: none;
|
|
428
432
|
cursor: pointer;
|
|
@@ -438,44 +442,50 @@
|
|
|
438
442
|
opacity: 0.6;
|
|
439
443
|
}
|
|
440
444
|
.button_size_sm {
|
|
441
|
-
padding:
|
|
442
|
-
font-size:
|
|
443
|
-
|
|
445
|
+
padding: 8px 16px;
|
|
446
|
+
font-size: 12px;
|
|
447
|
+
font-weight: 400;
|
|
448
|
+
line-height: 16px;
|
|
449
|
+
letter-spacing: 0px;
|
|
444
450
|
}
|
|
445
451
|
.button_size_md {
|
|
446
|
-
padding:
|
|
447
|
-
font-size:
|
|
448
|
-
|
|
452
|
+
padding: 12px 20px;
|
|
453
|
+
font-size: 15px;
|
|
454
|
+
font-weight: 400;
|
|
455
|
+
line-height: 22.5px;
|
|
456
|
+
letter-spacing: 0px;
|
|
449
457
|
}
|
|
450
458
|
.button_size_lg {
|
|
451
|
-
padding:
|
|
452
|
-
font-size:
|
|
453
|
-
|
|
459
|
+
padding: 16px 24px;
|
|
460
|
+
font-size: 16px;
|
|
461
|
+
font-weight: 400;
|
|
462
|
+
line-height: 24px;
|
|
463
|
+
letter-spacing: 0px;
|
|
454
464
|
}
|
|
455
465
|
.button_variant_primary {
|
|
456
|
-
background: #
|
|
457
|
-
color: #
|
|
466
|
+
background: #121212;
|
|
467
|
+
color: #FFFFFF;
|
|
458
468
|
}
|
|
459
469
|
.button_variant_primary:hover:not(:disabled) {
|
|
460
|
-
background: #
|
|
470
|
+
background: #999999;
|
|
461
471
|
}
|
|
462
472
|
.button_variant_primary:active:not(:disabled) {
|
|
463
473
|
transform: scale(0.98);
|
|
464
474
|
}
|
|
465
475
|
.button_variant_secondary {
|
|
466
476
|
background: transparent;
|
|
467
|
-
border: 1px solid #
|
|
468
|
-
color: #
|
|
477
|
+
border: 1px solid #E5E5E5;
|
|
478
|
+
color: #121212;
|
|
469
479
|
}
|
|
470
480
|
.button_variant_secondary:hover:not(:disabled) {
|
|
471
|
-
background: #
|
|
481
|
+
background: #F4F4F4;
|
|
472
482
|
}
|
|
473
483
|
.button_variant_secondary:active:not(:disabled) {
|
|
474
484
|
transform: scale(0.98);
|
|
475
485
|
}
|
|
476
486
|
.button_variant_ghost {
|
|
477
487
|
background: transparent;
|
|
478
|
-
color: #
|
|
488
|
+
color: #121212;
|
|
479
489
|
}
|
|
480
490
|
.button_variant_ghost:hover:not(:disabled) {
|
|
481
491
|
background: rgba(0, 0, 0, 0.05);
|
|
@@ -484,8 +494,8 @@
|
|
|
484
494
|
transform: scale(0.96);
|
|
485
495
|
}
|
|
486
496
|
.button_variant_danger {
|
|
487
|
-
background: #
|
|
488
|
-
color: #
|
|
497
|
+
background: #EF4444;
|
|
498
|
+
color: #FFFFFF;
|
|
489
499
|
}
|
|
490
500
|
.button_variant_danger:hover:not(:disabled) {
|
|
491
501
|
background: rgb(235.7842364532, 30.4157635468, 30.4157635468);
|
|
@@ -509,7 +519,7 @@
|
|
|
509
519
|
.checkbox {
|
|
510
520
|
display: inline-flex;
|
|
511
521
|
align-items: center;
|
|
512
|
-
gap:
|
|
522
|
+
gap: 8px;
|
|
513
523
|
cursor: pointer;
|
|
514
524
|
user-select: none;
|
|
515
525
|
position: relative;
|
|
@@ -527,9 +537,9 @@
|
|
|
527
537
|
width: 1.125rem;
|
|
528
538
|
height: 1.125rem;
|
|
529
539
|
box-sizing: border-box;
|
|
530
|
-
border: 1px solid #
|
|
540
|
+
border: 1px solid #E5E5E5;
|
|
531
541
|
border-radius: 6px;
|
|
532
|
-
background: #
|
|
542
|
+
background: #FFFFFF;
|
|
533
543
|
transition:
|
|
534
544
|
background 0.2s ease-in-out,
|
|
535
545
|
border-color 0.2s ease-in-out,
|
|
@@ -538,17 +548,21 @@
|
|
|
538
548
|
position: relative;
|
|
539
549
|
}
|
|
540
550
|
.checkbox_label {
|
|
541
|
-
font-size:
|
|
542
|
-
|
|
543
|
-
|
|
551
|
+
font-size: 15px;
|
|
552
|
+
font-weight: 400;
|
|
553
|
+
line-height: 22.5px;
|
|
554
|
+
letter-spacing: 0px;
|
|
555
|
+
color: #121212;
|
|
544
556
|
}
|
|
545
557
|
.checkbox_size_sm .checkbox_box {
|
|
546
558
|
width: 1rem;
|
|
547
559
|
height: 1rem;
|
|
548
560
|
}
|
|
549
561
|
.checkbox_size_sm .checkbox_label {
|
|
550
|
-
font-size:
|
|
551
|
-
|
|
562
|
+
font-size: 12px;
|
|
563
|
+
font-weight: 400;
|
|
564
|
+
line-height: 16px;
|
|
565
|
+
letter-spacing: 0px;
|
|
552
566
|
}
|
|
553
567
|
.checkbox_size_md .checkbox_box {
|
|
554
568
|
width: 1.125rem;
|
|
@@ -559,12 +573,14 @@
|
|
|
559
573
|
height: 1.25rem;
|
|
560
574
|
}
|
|
561
575
|
.checkbox_size_lg .checkbox_label {
|
|
562
|
-
font-size:
|
|
563
|
-
|
|
576
|
+
font-size: 16px;
|
|
577
|
+
font-weight: 400;
|
|
578
|
+
line-height: 24px;
|
|
579
|
+
letter-spacing: 0px;
|
|
564
580
|
}
|
|
565
581
|
.checkbox_input:focus-visible + .checkbox_box {
|
|
566
582
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
|
|
567
|
-
border-color: #
|
|
583
|
+
border-color: #121212;
|
|
568
584
|
}
|
|
569
585
|
.checkbox_input:disabled + .checkbox_box,
|
|
570
586
|
.checkbox_input:disabled ~ .checkbox_label {
|
|
@@ -579,7 +595,7 @@
|
|
|
579
595
|
top: 50%;
|
|
580
596
|
width: 0.7rem;
|
|
581
597
|
height: 2px;
|
|
582
|
-
background:
|
|
598
|
+
background: rgba(26, 26, 26, 0.38);
|
|
583
599
|
border-radius: 9999px;
|
|
584
600
|
}
|
|
585
601
|
.checkbox_input:disabled:not(:checked):not(:indeterminate) + .checkbox_box::before {
|
|
@@ -590,8 +606,8 @@
|
|
|
590
606
|
}
|
|
591
607
|
.checkbox_input:checked + .checkbox_box,
|
|
592
608
|
.checkbox_input:indeterminate + .checkbox_box {
|
|
593
|
-
background: #
|
|
594
|
-
border-color: #
|
|
609
|
+
background: #121212;
|
|
610
|
+
border-color: #121212;
|
|
595
611
|
}
|
|
596
612
|
.checkbox_input:checked + .checkbox_box::after {
|
|
597
613
|
content: "";
|
|
@@ -600,7 +616,7 @@
|
|
|
600
616
|
top: 50%;
|
|
601
617
|
width: 0.28rem;
|
|
602
618
|
height: 0.55rem;
|
|
603
|
-
border: 2px solid #
|
|
619
|
+
border: 2px solid #FFFFFF;
|
|
604
620
|
border-top: 0;
|
|
605
621
|
border-left: 0;
|
|
606
622
|
transform: translate(-50%, -58%) rotate(45deg);
|
|
@@ -612,7 +628,7 @@
|
|
|
612
628
|
top: 50%;
|
|
613
629
|
width: 0.65rem;
|
|
614
630
|
height: 2px;
|
|
615
|
-
background: #
|
|
631
|
+
background: #FFFFFF;
|
|
616
632
|
transform: translate(-50%, -50%);
|
|
617
633
|
border-radius: 9999px;
|
|
618
634
|
}
|
|
@@ -644,13 +660,15 @@
|
|
|
644
660
|
cursor: pointer;
|
|
645
661
|
}
|
|
646
662
|
.file_input_label {
|
|
647
|
-
border: 1px solid #
|
|
663
|
+
border: 1px solid #E5E5E5;
|
|
648
664
|
border-radius: 8px;
|
|
649
|
-
background: #
|
|
650
|
-
padding:
|
|
651
|
-
font-size:
|
|
652
|
-
|
|
653
|
-
|
|
665
|
+
background: #FFFFFF;
|
|
666
|
+
padding: 8px 16px;
|
|
667
|
+
font-size: 15px;
|
|
668
|
+
font-weight: 400;
|
|
669
|
+
line-height: 22.5px;
|
|
670
|
+
letter-spacing: 0px;
|
|
671
|
+
color: #121212;
|
|
654
672
|
transition:
|
|
655
673
|
background 0.2s ease-in-out,
|
|
656
674
|
border-color 0.2s ease-in-out,
|
|
@@ -658,13 +676,15 @@
|
|
|
658
676
|
}
|
|
659
677
|
.file_input_control:focus-visible + .file_input_label {
|
|
660
678
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
|
|
661
|
-
border-color: #
|
|
679
|
+
border-color: #121212;
|
|
662
680
|
}
|
|
663
681
|
.file_input_helper {
|
|
664
682
|
display: block;
|
|
665
|
-
margin-top:
|
|
666
|
-
font-size:
|
|
667
|
-
|
|
683
|
+
margin-top: 4px;
|
|
684
|
+
font-size: 12px;
|
|
685
|
+
font-weight: 400;
|
|
686
|
+
line-height: 16px;
|
|
687
|
+
letter-spacing: 0px;
|
|
668
688
|
color: #666666;
|
|
669
689
|
}
|
|
670
690
|
.file_input_disabled {
|
|
@@ -678,7 +698,7 @@
|
|
|
678
698
|
cursor: not-allowed;
|
|
679
699
|
}
|
|
680
700
|
.file_input_disabled:hover .file_input_label {
|
|
681
|
-
border-color: #
|
|
701
|
+
border-color: #E5E5E5;
|
|
682
702
|
}
|
|
683
703
|
|
|
684
704
|
/* src/ui/form/radio/style.scss */
|
|
@@ -694,7 +714,7 @@
|
|
|
694
714
|
position: relative;
|
|
695
715
|
display: inline-flex;
|
|
696
716
|
align-items: center;
|
|
697
|
-
gap:
|
|
717
|
+
gap: 8px;
|
|
698
718
|
cursor: pointer;
|
|
699
719
|
user-select: none;
|
|
700
720
|
}
|
|
@@ -706,12 +726,12 @@
|
|
|
706
726
|
margin: 0;
|
|
707
727
|
}
|
|
708
728
|
.radio_dot {
|
|
709
|
-
width:
|
|
710
|
-
height:
|
|
729
|
+
width: 16px;
|
|
730
|
+
height: 16px;
|
|
711
731
|
box-sizing: border-box;
|
|
712
|
-
border: 1px solid #
|
|
732
|
+
border: 1px solid #E5E5E5;
|
|
713
733
|
border-radius: 9999px;
|
|
714
|
-
background: #
|
|
734
|
+
background: #FFFFFF;
|
|
715
735
|
transition:
|
|
716
736
|
background 0.2s ease-in-out,
|
|
717
737
|
border-color 0.2s ease-in-out,
|
|
@@ -720,17 +740,21 @@
|
|
|
720
740
|
display: inline-block;
|
|
721
741
|
}
|
|
722
742
|
.radio_label {
|
|
723
|
-
font-size:
|
|
724
|
-
|
|
725
|
-
|
|
743
|
+
font-size: 15px;
|
|
744
|
+
font-weight: 400;
|
|
745
|
+
line-height: 22.5px;
|
|
746
|
+
letter-spacing: 0px;
|
|
747
|
+
color: #121212;
|
|
726
748
|
}
|
|
727
749
|
.radio_size_sm .radio_dot {
|
|
728
750
|
width: 1rem;
|
|
729
751
|
height: 1rem;
|
|
730
752
|
}
|
|
731
753
|
.radio_size_sm .radio_label {
|
|
732
|
-
font-size:
|
|
733
|
-
|
|
754
|
+
font-size: 12px;
|
|
755
|
+
font-weight: 400;
|
|
756
|
+
line-height: 16px;
|
|
757
|
+
letter-spacing: 0px;
|
|
734
758
|
}
|
|
735
759
|
.radio_size_md .radio_dot {
|
|
736
760
|
width: 1.125rem;
|
|
@@ -741,15 +765,17 @@
|
|
|
741
765
|
height: 1.25rem;
|
|
742
766
|
}
|
|
743
767
|
.radio_size_lg .radio_label {
|
|
744
|
-
font-size:
|
|
745
|
-
|
|
768
|
+
font-size: 16px;
|
|
769
|
+
font-weight: 400;
|
|
770
|
+
line-height: 24px;
|
|
771
|
+
letter-spacing: 0px;
|
|
746
772
|
}
|
|
747
773
|
.radio_input:focus-visible + .radio_dot {
|
|
748
774
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
|
|
749
|
-
border-color: #
|
|
775
|
+
border-color: #121212;
|
|
750
776
|
}
|
|
751
777
|
.radio_input:checked + .radio_dot {
|
|
752
|
-
border-color: #
|
|
778
|
+
border-color: #121212;
|
|
753
779
|
}
|
|
754
780
|
.radio_input:checked + .radio_dot::after {
|
|
755
781
|
content: "";
|
|
@@ -759,7 +785,7 @@
|
|
|
759
785
|
width: 60%;
|
|
760
786
|
height: 60%;
|
|
761
787
|
transform: translate(-50%, -50%);
|
|
762
|
-
background: #
|
|
788
|
+
background: #121212;
|
|
763
789
|
border-radius: 9999px;
|
|
764
790
|
}
|
|
765
791
|
.radio_input:disabled + .radio_dot,
|
|
@@ -782,87 +808,97 @@
|
|
|
782
808
|
display: inline-flex;
|
|
783
809
|
flex-direction: column;
|
|
784
810
|
width: 100%;
|
|
785
|
-
gap:
|
|
811
|
+
gap: 4px;
|
|
786
812
|
font-family: "Pretendard", sans-serif;
|
|
787
813
|
}
|
|
788
814
|
.select_label {
|
|
789
|
-
font-size:
|
|
790
|
-
|
|
815
|
+
font-size: 12px;
|
|
816
|
+
font-weight: 400;
|
|
817
|
+
line-height: 16px;
|
|
818
|
+
letter-spacing: 0px;
|
|
791
819
|
font-weight: 500;
|
|
792
|
-
color: #
|
|
820
|
+
color: #121212;
|
|
793
821
|
}
|
|
794
822
|
.select_control {
|
|
795
823
|
width: 100%;
|
|
796
824
|
display: inline-flex;
|
|
797
825
|
align-items: center;
|
|
798
826
|
justify-content: space-between;
|
|
799
|
-
gap:
|
|
827
|
+
gap: 8px;
|
|
800
828
|
cursor: pointer;
|
|
801
|
-
color: #
|
|
802
|
-
background: #
|
|
829
|
+
color: #121212;
|
|
830
|
+
background: #FFFFFF;
|
|
803
831
|
border-radius: 8px;
|
|
804
832
|
transition:
|
|
805
833
|
border-color 0.2s ease-in-out,
|
|
806
834
|
box-shadow 0.2s ease-in-out,
|
|
807
835
|
background 0.2s ease-in-out;
|
|
808
|
-
font-size:
|
|
809
|
-
|
|
836
|
+
font-size: 15px;
|
|
837
|
+
font-weight: 400;
|
|
838
|
+
line-height: 22.5px;
|
|
839
|
+
letter-spacing: 0px;
|
|
810
840
|
}
|
|
811
841
|
.select_control:disabled,
|
|
812
842
|
.select_control.is_disabled {
|
|
813
843
|
cursor: not-allowed;
|
|
814
844
|
opacity: 0.7;
|
|
815
|
-
background: #
|
|
816
|
-
color: #
|
|
845
|
+
background: #F4F4F4;
|
|
846
|
+
color: #888888;
|
|
817
847
|
}
|
|
818
848
|
.select_variant_outline {
|
|
819
|
-
border: 1px solid #
|
|
849
|
+
border: 1px solid #E5E5E5;
|
|
820
850
|
}
|
|
821
851
|
.select_variant_outline:hover:not(.is_disabled) {
|
|
822
852
|
border-color: rgba(0, 0, 0, 0.08);
|
|
823
853
|
}
|
|
824
854
|
.select_variant_outline.is_open {
|
|
825
|
-
border-color: #
|
|
826
|
-
box-shadow: 0 0 0 3px rgba(
|
|
855
|
+
border-color: #121212;
|
|
856
|
+
box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
|
|
827
857
|
}
|
|
828
858
|
.select_variant_filled {
|
|
829
|
-
background: #
|
|
859
|
+
background: #F4F4F4;
|
|
830
860
|
border: 1px solid transparent;
|
|
831
861
|
}
|
|
832
862
|
.select_variant_filled:hover:not(.is_disabled) {
|
|
833
|
-
background: rgb(
|
|
863
|
+
background: rgb(251.7, 251.7, 251.7);
|
|
834
864
|
}
|
|
835
865
|
.select_variant_filled.is_open {
|
|
836
|
-
background: #
|
|
837
|
-
border-color: #
|
|
838
|
-
box-shadow: 0 0 0 3px rgba(
|
|
866
|
+
background: #FFFFFF;
|
|
867
|
+
border-color: #121212;
|
|
868
|
+
box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
|
|
839
869
|
}
|
|
840
870
|
.select_variant_ghost {
|
|
841
871
|
background: transparent;
|
|
842
872
|
border: 1px solid transparent;
|
|
843
873
|
}
|
|
844
874
|
.select_variant_ghost:hover:not(.is_disabled) {
|
|
845
|
-
background: rgba(0, 0, 0, 0.
|
|
875
|
+
background: rgba(0, 0, 0, 0.05);
|
|
846
876
|
}
|
|
847
877
|
.select_variant_ghost.is_open {
|
|
848
|
-
background: #
|
|
849
|
-
border-color: #
|
|
850
|
-
box-shadow: 0 0 0 3px rgba(
|
|
878
|
+
background: #FFFFFF;
|
|
879
|
+
border-color: #121212;
|
|
880
|
+
box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
|
|
851
881
|
}
|
|
852
882
|
.select_size_sm {
|
|
853
|
-
padding:
|
|
854
|
-
font-size:
|
|
855
|
-
|
|
883
|
+
padding: 8px 16px;
|
|
884
|
+
font-size: 12px;
|
|
885
|
+
font-weight: 400;
|
|
886
|
+
line-height: 16px;
|
|
887
|
+
letter-spacing: 0px;
|
|
856
888
|
}
|
|
857
889
|
.select_size_md {
|
|
858
|
-
padding:
|
|
859
|
-
font-size:
|
|
860
|
-
|
|
890
|
+
padding: 12px 20px;
|
|
891
|
+
font-size: 15px;
|
|
892
|
+
font-weight: 400;
|
|
893
|
+
line-height: 22.5px;
|
|
894
|
+
letter-spacing: 0px;
|
|
861
895
|
}
|
|
862
896
|
.select_size_lg {
|
|
863
|
-
padding:
|
|
864
|
-
font-size:
|
|
865
|
-
|
|
897
|
+
padding: 16px 24px;
|
|
898
|
+
font-size: 16px;
|
|
899
|
+
font-weight: 400;
|
|
900
|
+
line-height: 24px;
|
|
901
|
+
letter-spacing: 0px;
|
|
866
902
|
}
|
|
867
903
|
.select_value {
|
|
868
904
|
flex: 1 1 auto;
|
|
@@ -871,9 +907,10 @@
|
|
|
871
907
|
text-overflow: ellipsis;
|
|
872
908
|
white-space: nowrap;
|
|
873
909
|
text-align: start;
|
|
874
|
-
font-size:
|
|
910
|
+
font-size: 15px;
|
|
875
911
|
font-weight: 400;
|
|
876
|
-
line-height:
|
|
912
|
+
line-height: 22.5px;
|
|
913
|
+
letter-spacing: 0px;
|
|
877
914
|
}
|
|
878
915
|
.select_placeholder {
|
|
879
916
|
flex: 1 1 auto;
|
|
@@ -882,10 +919,11 @@
|
|
|
882
919
|
text-overflow: ellipsis;
|
|
883
920
|
white-space: nowrap;
|
|
884
921
|
text-align: start;
|
|
885
|
-
font-size:
|
|
922
|
+
font-size: 15px;
|
|
886
923
|
font-weight: 400;
|
|
887
|
-
line-height:
|
|
888
|
-
|
|
924
|
+
line-height: 22.5px;
|
|
925
|
+
letter-spacing: 0px;
|
|
926
|
+
color: #888888;
|
|
889
927
|
}
|
|
890
928
|
.select_icon {
|
|
891
929
|
display: inline-flex;
|
|
@@ -895,27 +933,27 @@
|
|
|
895
933
|
}
|
|
896
934
|
.select_list {
|
|
897
935
|
position: absolute;
|
|
898
|
-
z-index:
|
|
936
|
+
z-index: 1000;
|
|
899
937
|
top: 100%;
|
|
900
938
|
left: 0;
|
|
901
939
|
width: 100%;
|
|
902
940
|
min-width: 100%;
|
|
903
941
|
box-sizing: border-box;
|
|
904
|
-
margin-top:
|
|
905
|
-
background: #
|
|
906
|
-
border: 1px solid #
|
|
942
|
+
margin-top: 4px;
|
|
943
|
+
background: #FFFFFF;
|
|
944
|
+
border: 1px solid #E5E5E5;
|
|
907
945
|
border-radius: 8px;
|
|
908
|
-
box-shadow: 0
|
|
946
|
+
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2), 0 6px 6px 0px rgba(0, 0, 0, 0.12);
|
|
909
947
|
max-height: 18rem;
|
|
910
948
|
overflow-y: auto;
|
|
911
949
|
overflow-x: hidden;
|
|
912
|
-
padding:
|
|
950
|
+
padding: 4px 0;
|
|
913
951
|
}
|
|
914
952
|
.select_list_up {
|
|
915
953
|
top: auto;
|
|
916
954
|
bottom: 100%;
|
|
917
955
|
margin-top: 0;
|
|
918
|
-
margin-bottom:
|
|
956
|
+
margin-bottom: 4px;
|
|
919
957
|
}
|
|
920
958
|
.select_option {
|
|
921
959
|
width: 100%;
|
|
@@ -923,14 +961,15 @@
|
|
|
923
961
|
display: grid;
|
|
924
962
|
grid-template-columns: 1fr auto;
|
|
925
963
|
align-items: center;
|
|
926
|
-
gap:
|
|
927
|
-
padding:
|
|
964
|
+
gap: 8px;
|
|
965
|
+
padding: 8px 16px;
|
|
928
966
|
cursor: pointer;
|
|
929
|
-
color: #
|
|
967
|
+
color: #121212;
|
|
930
968
|
background: transparent;
|
|
931
|
-
font-size:
|
|
969
|
+
font-size: 15px;
|
|
932
970
|
font-weight: 400;
|
|
933
|
-
line-height:
|
|
971
|
+
line-height: 22.5px;
|
|
972
|
+
letter-spacing: 0px;
|
|
934
973
|
}
|
|
935
974
|
.select_option > span:first-child {
|
|
936
975
|
min-width: 0;
|
|
@@ -940,14 +979,14 @@
|
|
|
940
979
|
}
|
|
941
980
|
.select_option:hover,
|
|
942
981
|
.select_option.is_active {
|
|
943
|
-
background: #
|
|
982
|
+
background: #F4F4F4;
|
|
944
983
|
}
|
|
945
984
|
.select_option.is_selected {
|
|
946
985
|
font-weight: 500;
|
|
947
986
|
}
|
|
948
987
|
.select_option.is_disabled {
|
|
949
988
|
cursor: not-allowed;
|
|
950
|
-
color: #
|
|
989
|
+
color: #888888;
|
|
951
990
|
}
|
|
952
991
|
|
|
953
992
|
/* src/ui/form/switch/style.scss */
|
|
@@ -967,20 +1006,20 @@
|
|
|
967
1006
|
height: 22px;
|
|
968
1007
|
padding: 2px;
|
|
969
1008
|
border-radius: 9999px;
|
|
970
|
-
background: #
|
|
1009
|
+
background: #E5E5E5;
|
|
971
1010
|
transition: background 0.2s ease-in-out;
|
|
972
1011
|
cursor: pointer;
|
|
973
1012
|
}
|
|
974
1013
|
.switch_thumb {
|
|
975
1014
|
width: 18px;
|
|
976
1015
|
height: 18px;
|
|
977
|
-
background: #
|
|
1016
|
+
background: #FFFFFF;
|
|
978
1017
|
border-radius: 9999px;
|
|
979
1018
|
transition: transform 0.2s ease-in-out;
|
|
980
1019
|
transform: translateX(0);
|
|
981
1020
|
}
|
|
982
1021
|
.switch_on {
|
|
983
|
-
background: #
|
|
1022
|
+
background: #121212;
|
|
984
1023
|
}
|
|
985
1024
|
.switch_on .switch_thumb {
|
|
986
1025
|
transform: translateX(18px);
|
|
@@ -1035,10 +1074,12 @@
|
|
|
1035
1074
|
width: 100%;
|
|
1036
1075
|
}
|
|
1037
1076
|
.text_field_label {
|
|
1038
|
-
margin-bottom:
|
|
1039
|
-
color: #
|
|
1040
|
-
font-size:
|
|
1041
|
-
|
|
1077
|
+
margin-bottom: 4px;
|
|
1078
|
+
color: #121212;
|
|
1079
|
+
font-size: 12px;
|
|
1080
|
+
font-weight: 400;
|
|
1081
|
+
line-height: 16px;
|
|
1082
|
+
letter-spacing: 0px;
|
|
1042
1083
|
font-weight: 500;
|
|
1043
1084
|
}
|
|
1044
1085
|
.text_field_wrap {
|
|
@@ -1048,16 +1089,18 @@
|
|
|
1048
1089
|
align-items: center;
|
|
1049
1090
|
}
|
|
1050
1091
|
.text_field_helper {
|
|
1051
|
-
margin-top:
|
|
1052
|
-
font-size:
|
|
1053
|
-
|
|
1092
|
+
margin-top: 4px;
|
|
1093
|
+
font-size: 12px;
|
|
1094
|
+
font-weight: 400;
|
|
1095
|
+
line-height: 16px;
|
|
1096
|
+
letter-spacing: 0px;
|
|
1054
1097
|
color: #666666;
|
|
1055
1098
|
}
|
|
1056
1099
|
.text_field_helper_error {
|
|
1057
|
-
color: #
|
|
1100
|
+
color: #EF4444;
|
|
1058
1101
|
}
|
|
1059
1102
|
.text_field_helper_success {
|
|
1060
|
-
color: #
|
|
1103
|
+
color: #10B981;
|
|
1061
1104
|
}
|
|
1062
1105
|
.text_field_icon {
|
|
1063
1106
|
position: absolute;
|
|
@@ -1069,10 +1112,10 @@
|
|
|
1069
1112
|
color: #666666;
|
|
1070
1113
|
}
|
|
1071
1114
|
.text_field_icon_left {
|
|
1072
|
-
left:
|
|
1115
|
+
left: 12px;
|
|
1073
1116
|
}
|
|
1074
1117
|
.text_field_icon_right {
|
|
1075
|
-
right:
|
|
1118
|
+
right: 12px;
|
|
1076
1119
|
}
|
|
1077
1120
|
.text_field_input {
|
|
1078
1121
|
width: 100%;
|
|
@@ -1081,84 +1124,92 @@
|
|
|
1081
1124
|
border-color 0.2s ease-in-out,
|
|
1082
1125
|
box-shadow 0.2s ease-in-out,
|
|
1083
1126
|
background 0.2s ease-in-out;
|
|
1084
|
-
font-size:
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1127
|
+
font-size: 15px;
|
|
1128
|
+
font-weight: 400;
|
|
1129
|
+
line-height: 22.5px;
|
|
1130
|
+
letter-spacing: 0px;
|
|
1131
|
+
color: #121212;
|
|
1132
|
+
background: #FFFFFF;
|
|
1088
1133
|
}
|
|
1089
1134
|
.text_field_input::placeholder {
|
|
1090
|
-
color: #
|
|
1135
|
+
color: #888888;
|
|
1091
1136
|
}
|
|
1092
1137
|
.text_field_input:disabled {
|
|
1093
1138
|
cursor: not-allowed;
|
|
1094
|
-
background: #
|
|
1095
|
-
color: #
|
|
1139
|
+
background: #F4F4F4;
|
|
1140
|
+
color: #888888;
|
|
1096
1141
|
opacity: 0.7;
|
|
1097
1142
|
}
|
|
1098
1143
|
.text_field_variant_outline {
|
|
1099
|
-
border: 1px solid #
|
|
1144
|
+
border: 1px solid #E5E5E5;
|
|
1100
1145
|
}
|
|
1101
1146
|
.text_field_variant_outline:hover:not(:disabled) {
|
|
1102
1147
|
border-color: rgba(0, 0, 0, 0.08);
|
|
1103
1148
|
}
|
|
1104
1149
|
.text_field_variant_outline:focus-visible {
|
|
1105
1150
|
outline: none;
|
|
1106
|
-
border-color: #
|
|
1107
|
-
box-shadow: 0 0 0 3px rgba(
|
|
1151
|
+
border-color: #121212;
|
|
1152
|
+
box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
|
|
1108
1153
|
}
|
|
1109
1154
|
.text_field_variant_filled {
|
|
1110
|
-
background: #
|
|
1155
|
+
background: #F4F4F4;
|
|
1111
1156
|
border: 1px solid transparent;
|
|
1112
1157
|
}
|
|
1113
1158
|
.text_field_variant_filled:hover:not(:disabled) {
|
|
1114
|
-
background: rgb(
|
|
1159
|
+
background: rgb(251.7, 251.7, 251.7);
|
|
1115
1160
|
}
|
|
1116
1161
|
.text_field_variant_filled:focus-visible {
|
|
1117
1162
|
outline: none;
|
|
1118
|
-
border-color: #
|
|
1119
|
-
background: #
|
|
1120
|
-
box-shadow: 0 0 0 3px rgba(
|
|
1163
|
+
border-color: #121212;
|
|
1164
|
+
background: #FFFFFF;
|
|
1165
|
+
box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
|
|
1121
1166
|
}
|
|
1122
1167
|
.text_field_variant_ghost {
|
|
1123
1168
|
background: transparent;
|
|
1124
1169
|
border: 1px solid transparent;
|
|
1125
1170
|
}
|
|
1126
1171
|
.text_field_variant_ghost:hover:not(:disabled) {
|
|
1127
|
-
background: rgba(0, 0, 0, 0.
|
|
1172
|
+
background: rgba(0, 0, 0, 0.05);
|
|
1128
1173
|
}
|
|
1129
1174
|
.text_field_variant_ghost:focus-visible {
|
|
1130
1175
|
outline: none;
|
|
1131
|
-
border-color: #
|
|
1132
|
-
background: #
|
|
1133
|
-
box-shadow: 0 0 0 3px rgba(
|
|
1176
|
+
border-color: #121212;
|
|
1177
|
+
background: #FFFFFF;
|
|
1178
|
+
box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
|
|
1134
1179
|
}
|
|
1135
1180
|
.text_field_size_sm {
|
|
1136
|
-
padding:
|
|
1137
|
-
font-size:
|
|
1138
|
-
|
|
1181
|
+
padding: 8px 16px;
|
|
1182
|
+
font-size: 12px;
|
|
1183
|
+
font-weight: 400;
|
|
1184
|
+
line-height: 16px;
|
|
1185
|
+
letter-spacing: 0px;
|
|
1139
1186
|
}
|
|
1140
1187
|
.text_field_size_md {
|
|
1141
|
-
padding:
|
|
1142
|
-
font-size:
|
|
1143
|
-
|
|
1188
|
+
padding: 12px 20px;
|
|
1189
|
+
font-size: 15px;
|
|
1190
|
+
font-weight: 400;
|
|
1191
|
+
line-height: 22.5px;
|
|
1192
|
+
letter-spacing: 0px;
|
|
1144
1193
|
}
|
|
1145
1194
|
.text_field_size_lg {
|
|
1146
|
-
padding:
|
|
1147
|
-
font-size:
|
|
1148
|
-
|
|
1195
|
+
padding: 16px 24px;
|
|
1196
|
+
font-size: 16px;
|
|
1197
|
+
font-weight: 400;
|
|
1198
|
+
line-height: 24px;
|
|
1199
|
+
letter-spacing: 0px;
|
|
1149
1200
|
}
|
|
1150
1201
|
.text_field_with_left {
|
|
1151
|
-
padding-left: calc(
|
|
1202
|
+
padding-left: calc(20px + 1.25rem);
|
|
1152
1203
|
}
|
|
1153
1204
|
.text_field_with_right {
|
|
1154
|
-
padding-right: calc(
|
|
1205
|
+
padding-right: calc(20px + 1.25rem);
|
|
1155
1206
|
}
|
|
1156
1207
|
.text_field_error {
|
|
1157
|
-
border-color: #
|
|
1208
|
+
border-color: #EF4444 !important;
|
|
1158
1209
|
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
|
|
1159
1210
|
}
|
|
1160
1211
|
.text_field_success {
|
|
1161
|
-
border-color: #
|
|
1212
|
+
border-color: #10B981 !important;
|
|
1162
1213
|
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
|
|
1163
1214
|
}
|
|
1164
1215
|
|
|
@@ -1174,18 +1225,20 @@
|
|
|
1174
1225
|
.date_picker {
|
|
1175
1226
|
display: flex;
|
|
1176
1227
|
flex-direction: column;
|
|
1177
|
-
gap:
|
|
1228
|
+
gap: 4px;
|
|
1178
1229
|
}
|
|
1179
1230
|
.date_picker select {
|
|
1180
1231
|
min-width: 88px;
|
|
1181
1232
|
height: 44px;
|
|
1182
|
-
padding: 0
|
|
1233
|
+
padding: 0 12px;
|
|
1183
1234
|
font-family: "Pretendard", sans-serif;
|
|
1184
|
-
font-size:
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1235
|
+
font-size: 15px;
|
|
1236
|
+
font-weight: 400;
|
|
1237
|
+
line-height: 22.5px;
|
|
1238
|
+
letter-spacing: 0px;
|
|
1239
|
+
color: #121212;
|
|
1240
|
+
background-color: #FFFFFF;
|
|
1241
|
+
border: 1px solid #E5E5E5;
|
|
1189
1242
|
border-radius: 6px;
|
|
1190
1243
|
cursor: pointer;
|
|
1191
1244
|
transition:
|
|
@@ -1207,23 +1260,23 @@
|
|
|
1207
1260
|
background-repeat: no-repeat;
|
|
1208
1261
|
}
|
|
1209
1262
|
.date_picker select:hover:not(:disabled) {
|
|
1210
|
-
border-color: #
|
|
1211
|
-
background-color: #
|
|
1263
|
+
border-color: #121212;
|
|
1264
|
+
background-color: #F4F4F4;
|
|
1212
1265
|
}
|
|
1213
1266
|
.date_picker select:focus-visible {
|
|
1214
1267
|
outline: none;
|
|
1215
|
-
border-color: #
|
|
1216
|
-
box-shadow: 0 0 0 3px rgba(
|
|
1217
|
-
background-color: #
|
|
1268
|
+
border-color: #121212;
|
|
1269
|
+
box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
|
|
1270
|
+
background-color: #FFFFFF;
|
|
1218
1271
|
}
|
|
1219
1272
|
.date_picker select:disabled {
|
|
1220
1273
|
cursor: not-allowed;
|
|
1221
|
-
color:
|
|
1222
|
-
background-color: #
|
|
1274
|
+
color: rgba(26, 26, 26, 0.38);
|
|
1275
|
+
background-color: #F4F4F4;
|
|
1223
1276
|
border-color: rgba(0, 0, 0, 0.08);
|
|
1224
1277
|
}
|
|
1225
1278
|
.date_picker select option {
|
|
1226
|
-
color: #
|
|
1279
|
+
color: #121212;
|
|
1227
1280
|
}
|
|
1228
1281
|
@media (max-width: 480px) {
|
|
1229
1282
|
.date_picker select {
|
|
@@ -1232,23 +1285,23 @@
|
|
|
1232
1285
|
}
|
|
1233
1286
|
}
|
|
1234
1287
|
.date_picker_label {
|
|
1235
|
-
color: #
|
|
1236
|
-
margin-bottom:
|
|
1288
|
+
color: #121212;
|
|
1289
|
+
margin-bottom: 4px;
|
|
1237
1290
|
font-weight: 500;
|
|
1238
|
-
font-size:
|
|
1239
|
-
line-height:
|
|
1291
|
+
font-size: 14px;
|
|
1292
|
+
line-height: 24px;
|
|
1240
1293
|
}
|
|
1241
1294
|
.date_picker_required {
|
|
1242
|
-
margin-left:
|
|
1243
|
-
color: #
|
|
1295
|
+
margin-left: 4px;
|
|
1296
|
+
color: #EF4444;
|
|
1244
1297
|
}
|
|
1245
1298
|
.date_picker_fields {
|
|
1246
1299
|
display: flex;
|
|
1247
|
-
gap:
|
|
1300
|
+
gap: 8px;
|
|
1248
1301
|
}
|
|
1249
1302
|
@media (max-width: 480px) {
|
|
1250
1303
|
.date_picker_fields {
|
|
1251
|
-
gap:
|
|
1304
|
+
gap: 4px;
|
|
1252
1305
|
}
|
|
1253
1306
|
}
|
|
1254
1307
|
.date_picker_full_width {
|
|
@@ -1262,7 +1315,7 @@
|
|
|
1262
1315
|
min-width: 0;
|
|
1263
1316
|
}
|
|
1264
1317
|
.date_picker_disabled .date_picker_label {
|
|
1265
|
-
color:
|
|
1318
|
+
color: rgba(26, 26, 26, 0.38);
|
|
1266
1319
|
}
|
|
1267
1320
|
.date_picker_sr_only {
|
|
1268
1321
|
position: absolute;
|
|
@@ -1289,22 +1342,24 @@
|
|
|
1289
1342
|
display: flex;
|
|
1290
1343
|
align-items: center;
|
|
1291
1344
|
justify-content: center;
|
|
1292
|
-
gap:
|
|
1293
|
-
margin-top:
|
|
1345
|
+
gap: 8px;
|
|
1346
|
+
margin-top: 32px;
|
|
1294
1347
|
}
|
|
1295
1348
|
.pagination_item {
|
|
1296
|
-
border: 1px solid #
|
|
1297
|
-
background: #
|
|
1349
|
+
border: 1px solid #E5E5E5;
|
|
1350
|
+
background: #FFFFFF;
|
|
1298
1351
|
border-radius: 8px;
|
|
1299
1352
|
padding: 6px 10px;
|
|
1300
1353
|
min-width: 36px;
|
|
1301
|
-
font-size:
|
|
1302
|
-
|
|
1303
|
-
|
|
1354
|
+
font-size: 12px;
|
|
1355
|
+
font-weight: 400;
|
|
1356
|
+
line-height: 16px;
|
|
1357
|
+
letter-spacing: 0px;
|
|
1358
|
+
color: #121212;
|
|
1304
1359
|
transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
|
|
1305
1360
|
}
|
|
1306
1361
|
.pagination_item:hover:not(:disabled) {
|
|
1307
|
-
background: #
|
|
1362
|
+
background: #F4F4F4;
|
|
1308
1363
|
}
|
|
1309
1364
|
.pagination_item:disabled {
|
|
1310
1365
|
opacity: 0.5;
|
|
@@ -1312,7 +1367,7 @@
|
|
|
1312
1367
|
}
|
|
1313
1368
|
.pagination_item:focus-visible {
|
|
1314
1369
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
|
|
1315
|
-
border-color: #
|
|
1370
|
+
border-color: #121212;
|
|
1316
1371
|
}
|
|
1317
1372
|
.pagination_pages {
|
|
1318
1373
|
display: flex;
|
|
@@ -1325,28 +1380,32 @@
|
|
|
1325
1380
|
min-width: 36px;
|
|
1326
1381
|
height: 36px;
|
|
1327
1382
|
border-radius: 8px;
|
|
1328
|
-
font-size:
|
|
1329
|
-
|
|
1383
|
+
font-size: 12px;
|
|
1384
|
+
font-weight: 400;
|
|
1385
|
+
line-height: 16px;
|
|
1386
|
+
letter-spacing: 0px;
|
|
1330
1387
|
color: #666666;
|
|
1331
1388
|
transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
|
|
1332
1389
|
}
|
|
1333
1390
|
.pagination_page_button:hover {
|
|
1334
|
-
background: #
|
|
1335
|
-
color: #
|
|
1391
|
+
background: #F4F4F4;
|
|
1392
|
+
color: #121212;
|
|
1336
1393
|
}
|
|
1337
1394
|
.pagination_page_button:focus-visible {
|
|
1338
1395
|
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
|
|
1339
1396
|
}
|
|
1340
1397
|
.pagination_active {
|
|
1341
|
-
color: #
|
|
1342
|
-
font-weight:
|
|
1398
|
+
color: #121212;
|
|
1399
|
+
font-weight: 500;
|
|
1343
1400
|
}
|
|
1344
1401
|
.pagination_ellipsis {
|
|
1345
1402
|
min-width: 20px;
|
|
1346
1403
|
text-align: center;
|
|
1347
|
-
font-size:
|
|
1348
|
-
|
|
1349
|
-
|
|
1404
|
+
font-size: 12px;
|
|
1405
|
+
font-weight: 400;
|
|
1406
|
+
line-height: 16px;
|
|
1407
|
+
letter-spacing: 0px;
|
|
1408
|
+
color: #888888;
|
|
1350
1409
|
}
|
|
1351
1410
|
|
|
1352
1411
|
/* src/ui/overlay/modal/style.scss */
|
|
@@ -1364,24 +1423,25 @@
|
|
|
1364
1423
|
display: grid;
|
|
1365
1424
|
place-items: center;
|
|
1366
1425
|
background: rgba(0, 0, 0, 0.5);
|
|
1367
|
-
z-index:
|
|
1426
|
+
z-index: 1000;
|
|
1368
1427
|
}
|
|
1369
1428
|
.modal_panel {
|
|
1370
|
-
background: #
|
|
1429
|
+
background: #FFFFFF;
|
|
1371
1430
|
border-radius: 12px;
|
|
1372
|
-
box-shadow: 0
|
|
1431
|
+
box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.2), 0 9px 9px 0px rgba(0, 0, 0, 0.12);
|
|
1373
1432
|
max-width: calc(100% - 32px);
|
|
1374
1433
|
overflow: visible;
|
|
1375
1434
|
}
|
|
1376
1435
|
.modal_header {
|
|
1377
|
-
padding:
|
|
1378
|
-
border-bottom: 1px solid #
|
|
1379
|
-
color: #
|
|
1380
|
-
font-size:
|
|
1381
|
-
font-weight:
|
|
1382
|
-
line-height:
|
|
1436
|
+
padding: 16px;
|
|
1437
|
+
border-bottom: 1px solid #E5E5E5;
|
|
1438
|
+
color: #121212;
|
|
1439
|
+
font-size: 20px;
|
|
1440
|
+
font-weight: 400;
|
|
1441
|
+
line-height: 28px;
|
|
1442
|
+
letter-spacing: 0px;
|
|
1383
1443
|
}
|
|
1384
1444
|
.modal_body {
|
|
1385
|
-
padding:
|
|
1445
|
+
padding: 16px;
|
|
1386
1446
|
overflow: visible;
|
|
1387
1447
|
}
|