@idds/styles 1.0.43 → 1.0.45
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/package.json
CHANGED
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
display: flex;
|
|
29
29
|
align-items: center;
|
|
30
30
|
gap: var(--ina-spacing-2);
|
|
31
|
-
border-radius: var(--ina-radius-
|
|
31
|
+
border-radius: var(--ina-radius-lg);
|
|
32
32
|
border: 1px solid var(--ina-stroke-primary);
|
|
33
33
|
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
34
34
|
background-color: var(--ina-background-primary);
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Single File Upload Component Styles
|
|
3
|
+
* Menggunakan BEM naming convention dengan prefix "ina-"
|
|
4
|
+
* Sesuai dengan design Figma
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
.ina-single-file-upload {
|
|
8
|
+
width: 300px;
|
|
9
|
+
height: 72px;
|
|
10
|
+
position: relative;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.ina-single-file-upload__container {
|
|
14
|
+
width: 100%;
|
|
15
|
+
height: 100%;
|
|
16
|
+
border: 1px solid var(--ina-stroke-primary);
|
|
17
|
+
border-radius: var(--ina-rounded-lg, 8px);
|
|
18
|
+
background: var(--ina-background-primary, #fff);
|
|
19
|
+
padding: 12px;
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
gap: 12px;
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
transition: all 0.2s ease;
|
|
25
|
+
box-sizing: border-box;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.ina-single-file-upload__container:hover:not(.ina-single-file-upload__container--disabled) {
|
|
29
|
+
border-color: var(--ina-guide-500, #0968f6);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.ina-single-file-upload__container--active {
|
|
33
|
+
border: 1px solid var(--ina-guide-500, #0968f6);
|
|
34
|
+
box-shadow: 0 0 6px 0 rgba(9, 104, 246, 0.1),
|
|
35
|
+
0 0 4px 6px rgba(9, 104, 246, 0.04);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.ina-single-file-upload__container--disabled {
|
|
39
|
+
background: var(--ina-background-secondary);
|
|
40
|
+
border-color: var(--ina-stroke-primary);
|
|
41
|
+
cursor: not-allowed;
|
|
42
|
+
pointer-events: none;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.ina-single-file-upload__input {
|
|
46
|
+
display: none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Default State - Upload Icon */
|
|
50
|
+
.ina-single-file-upload__icon-wrapper {
|
|
51
|
+
width: 32px;
|
|
52
|
+
height: 32px;
|
|
53
|
+
min-width: 32px;
|
|
54
|
+
min-height: 32px;
|
|
55
|
+
display: flex;
|
|
56
|
+
align-items: center;
|
|
57
|
+
justify-content: center;
|
|
58
|
+
flex-shrink: 0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.ina-single-file-upload__icon-wrapper--default {
|
|
62
|
+
color: var(--ina-content-primary);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.ina-single-file-upload__icon-wrapper--disabled {
|
|
66
|
+
color: var(--ina-content-tertiary);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* Success State - File Icon */
|
|
70
|
+
.ina-single-file-upload__icon-wrapper--file {
|
|
71
|
+
width: 32px;
|
|
72
|
+
height: 32px;
|
|
73
|
+
min-width: 32px;
|
|
74
|
+
min-height: 32px;
|
|
75
|
+
padding: 8px;
|
|
76
|
+
background: var(--ina-background-secondary);
|
|
77
|
+
border-radius: var(--ina-rounded-lg, 8px);
|
|
78
|
+
display: flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
justify-content: center;
|
|
81
|
+
flex-shrink: 0;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.ina-single-file-upload__file-icon {
|
|
85
|
+
width: 100%;
|
|
86
|
+
height: 100%;
|
|
87
|
+
object-fit: contain;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Content Area */
|
|
91
|
+
.ina-single-file-upload__content {
|
|
92
|
+
flex: 1;
|
|
93
|
+
min-width: 0;
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
gap: 2px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.ina-single-file-upload__title {
|
|
100
|
+
font-size: 14px;
|
|
101
|
+
font-weight: 600;
|
|
102
|
+
line-height: 20px;
|
|
103
|
+
color: var(--ina-content-primary);
|
|
104
|
+
margin: 0;
|
|
105
|
+
white-space: nowrap;
|
|
106
|
+
overflow: hidden;
|
|
107
|
+
text-overflow: ellipsis;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.ina-single-file-upload__description {
|
|
111
|
+
font-size: 12px;
|
|
112
|
+
font-weight: 400;
|
|
113
|
+
line-height: 16px;
|
|
114
|
+
color: var(--ina-content-secondary);
|
|
115
|
+
margin: 0;
|
|
116
|
+
white-space: nowrap;
|
|
117
|
+
overflow: hidden;
|
|
118
|
+
text-overflow: ellipsis;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.ina-single-file-upload__container--disabled .ina-single-file-upload__title,
|
|
122
|
+
.ina-single-file-upload__container--disabled .ina-single-file-upload__description {
|
|
123
|
+
color: var(--ina-content-tertiary);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* Progress State */
|
|
127
|
+
.ina-single-file-upload__progress {
|
|
128
|
+
flex: 1;
|
|
129
|
+
min-width: 0;
|
|
130
|
+
display: flex;
|
|
131
|
+
flex-direction: column;
|
|
132
|
+
gap: 4px;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.ina-single-file-upload__progress-bar {
|
|
136
|
+
width: 100%;
|
|
137
|
+
height: 4px;
|
|
138
|
+
background: var(--ina-background-secondary);
|
|
139
|
+
border-radius: 2px;
|
|
140
|
+
overflow: hidden;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.ina-single-file-upload__progress-fill {
|
|
144
|
+
height: 100%;
|
|
145
|
+
background: var(--ina-guide-500, #0968f6);
|
|
146
|
+
transition: width 0.3s ease;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.ina-single-file-upload__progress-text {
|
|
150
|
+
font-size: 12px;
|
|
151
|
+
font-weight: 400;
|
|
152
|
+
line-height: 16px;
|
|
153
|
+
color: var(--ina-content-secondary);
|
|
154
|
+
margin: 0;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Delete Button */
|
|
158
|
+
.ina-single-file-upload__delete-button {
|
|
159
|
+
width: 20px;
|
|
160
|
+
height: 20px;
|
|
161
|
+
min-width: 20px;
|
|
162
|
+
min-height: 20px;
|
|
163
|
+
padding: 0;
|
|
164
|
+
border: none;
|
|
165
|
+
background: transparent;
|
|
166
|
+
color: var(--ina-content-primary);
|
|
167
|
+
cursor: pointer;
|
|
168
|
+
display: flex;
|
|
169
|
+
align-items: center;
|
|
170
|
+
justify-content: center;
|
|
171
|
+
flex-shrink: 0;
|
|
172
|
+
transition: color 0.2s ease;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.ina-single-file-upload__delete-button:hover {
|
|
176
|
+
color: var(--ina-content-negative, var(--ina-red-600));
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.ina-single-file-upload__delete-button:focus-visible {
|
|
180
|
+
outline: 2px solid var(--ina-guide-500, #0968f6);
|
|
181
|
+
outline-offset: 2px;
|
|
182
|
+
border-radius: 2px;
|
|
183
|
+
}
|
|
184
|
+
|
|
@@ -1,20 +1,29 @@
|
|
|
1
1
|
.ina-stepper {
|
|
2
2
|
display: flex;
|
|
3
|
-
width: 100%;
|
|
4
3
|
position: relative;
|
|
5
4
|
}
|
|
6
5
|
|
|
7
6
|
/* Horizontal Layout */
|
|
8
7
|
.ina-stepper--horizontal {
|
|
9
8
|
flex-direction: row;
|
|
10
|
-
align-items:
|
|
9
|
+
align-items: center;
|
|
11
10
|
justify-content: space-between;
|
|
11
|
+
width: 100%;
|
|
12
|
+
}
|
|
13
|
+
.ina-stepper--horizontal .ina-stepper__separator {
|
|
14
|
+
position: relative;
|
|
15
|
+
bottom: 12px;
|
|
16
|
+
}
|
|
17
|
+
.ina-stepper--vertical .ina-stepper__separator {
|
|
18
|
+
position: relative;
|
|
19
|
+
bottom: 12px;
|
|
12
20
|
}
|
|
13
21
|
|
|
14
22
|
/* Vertical Layout */
|
|
15
23
|
.ina-stepper--vertical {
|
|
16
24
|
flex-direction: column;
|
|
17
25
|
align-items: flex-start;
|
|
26
|
+
height: 100%;
|
|
18
27
|
}
|
|
19
28
|
|
|
20
29
|
/* Responsive: Horizontal stepper becomes vertical on mobile */
|
|
@@ -26,6 +35,7 @@
|
|
|
26
35
|
.ina-stepper--horizontal-responsive {
|
|
27
36
|
flex-direction: column;
|
|
28
37
|
align-items: flex-start;
|
|
38
|
+
height: 100%;
|
|
29
39
|
}
|
|
30
40
|
|
|
31
41
|
.ina-stepper--horizontal-responsive .ina-stepper__item {
|
|
@@ -42,7 +52,9 @@
|
|
|
42
52
|
align-self: flex-start;
|
|
43
53
|
/* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px from left */
|
|
44
54
|
/* Separator width is 2px, so margin-left: 12px - 1px = 11px */
|
|
45
|
-
|
|
55
|
+
position: relative;
|
|
56
|
+
left: 12px;
|
|
57
|
+
bottom: 0;
|
|
46
58
|
}
|
|
47
59
|
|
|
48
60
|
.ina-stepper--horizontal-responsive .ina-stepper__item:last-child {
|
|
@@ -59,7 +71,7 @@
|
|
|
59
71
|
position: relative;
|
|
60
72
|
z-index: 1;
|
|
61
73
|
flex-shrink: 0;
|
|
62
|
-
padding: 0
|
|
74
|
+
padding: 0;
|
|
63
75
|
}
|
|
64
76
|
|
|
65
77
|
.ina-stepper--vertical .ina-stepper__item {
|
|
@@ -69,6 +81,10 @@
|
|
|
69
81
|
margin-bottom: 1rem;
|
|
70
82
|
padding: 0;
|
|
71
83
|
width: 100%;
|
|
84
|
+
height: 24px;
|
|
85
|
+
min-height: 24px;
|
|
86
|
+
max-height: 24px;
|
|
87
|
+
overflow: visible;
|
|
72
88
|
}
|
|
73
89
|
|
|
74
90
|
.ina-stepper--vertical .ina-stepper__item:last-child {
|
|
@@ -81,17 +97,17 @@
|
|
|
81
97
|
height: 24px;
|
|
82
98
|
min-width: 24px;
|
|
83
99
|
min-height: 24px;
|
|
84
|
-
border-radius:
|
|
100
|
+
border-radius: var(--ina-rounded-lg, 8px);
|
|
85
101
|
display: flex;
|
|
86
102
|
align-items: center;
|
|
87
103
|
justify-content: center;
|
|
88
|
-
font-size:
|
|
104
|
+
font-size: 16px;
|
|
89
105
|
font-weight: 500;
|
|
90
106
|
transition: background-color 0.2s ease, border-color 0.2s ease,
|
|
91
107
|
color 0.2s ease;
|
|
92
108
|
border: 1px solid var(--ina-stroke-primary);
|
|
93
|
-
color: var(--ina-content-
|
|
94
|
-
background-color: var(--ina-background-
|
|
109
|
+
color: var(--ina-content-tertiary);
|
|
110
|
+
background-color: var(--ina-background-secondary);
|
|
95
111
|
}
|
|
96
112
|
|
|
97
113
|
.ina-stepper--vertical .ina-stepper__icon-wrapper {
|
|
@@ -99,14 +115,14 @@
|
|
|
99
115
|
}
|
|
100
116
|
|
|
101
117
|
.ina-stepper__step-number {
|
|
102
|
-
color:
|
|
103
|
-
font-size:
|
|
118
|
+
color: inherit;
|
|
119
|
+
font-size: 16px;
|
|
104
120
|
font-weight: 500;
|
|
105
121
|
}
|
|
106
122
|
|
|
107
123
|
.ina-stepper__check-icon {
|
|
108
|
-
color:
|
|
109
|
-
stroke:
|
|
124
|
+
color: inherit;
|
|
125
|
+
stroke: currentColor;
|
|
110
126
|
width: 16px;
|
|
111
127
|
height: 16px;
|
|
112
128
|
}
|
|
@@ -125,26 +141,15 @@
|
|
|
125
141
|
flex-grow: 1;
|
|
126
142
|
}
|
|
127
143
|
|
|
128
|
-
/* Content (for vertical stepper) */
|
|
129
|
-
.ina-stepper__content {
|
|
130
|
-
margin-top: 0.5rem;
|
|
131
|
-
font-size: 0.875rem;
|
|
132
|
-
color: var(--ina-content-primary);
|
|
133
|
-
text-align: left;
|
|
134
|
-
width: 100%;
|
|
135
|
-
padding-left: calc(24px + 0.75rem);
|
|
136
|
-
}
|
|
137
|
-
|
|
138
144
|
/* Separator */
|
|
139
145
|
.ina-stepper__separator {
|
|
140
146
|
flex-grow: 1;
|
|
147
|
+
width: 2px;
|
|
141
148
|
height: 2px;
|
|
142
149
|
background-color: var(--ina-stroke-primary);
|
|
143
|
-
/* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px
|
|
144
|
-
/* Separator height is 2px, so we need to position it so its center aligns with icon center */
|
|
145
|
-
|
|
146
|
-
align-self: flex-start;
|
|
147
|
-
margin: 11px -0.5rem 0 -0.5rem;
|
|
150
|
+
/* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px */
|
|
151
|
+
/* Separator width/height is 2px, so we need to position it so its center aligns with icon center */
|
|
152
|
+
align-self: center;
|
|
148
153
|
position: relative;
|
|
149
154
|
z-index: 0;
|
|
150
155
|
transition: background-color 0.2s ease;
|
|
@@ -153,35 +158,65 @@
|
|
|
153
158
|
.ina-stepper--vertical .ina-stepper__separator {
|
|
154
159
|
width: 2px;
|
|
155
160
|
height: 2rem;
|
|
156
|
-
margin: 0;
|
|
157
161
|
flex-grow: 0;
|
|
158
162
|
align-self: flex-start;
|
|
159
163
|
/* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px from left */
|
|
160
164
|
/* Separator width is 2px, so we need to position it so its center aligns with icon center */
|
|
161
165
|
/* margin-left: 12px (icon center) - 1px (half separator) = 11px */
|
|
162
|
-
|
|
166
|
+
position: relative;
|
|
167
|
+
left: 12px;
|
|
163
168
|
}
|
|
164
169
|
|
|
165
170
|
/* States */
|
|
171
|
+
/* Active State */
|
|
172
|
+
.ina-stepper__item--active .ina-stepper__icon-wrapper {
|
|
173
|
+
border-color: var(--ina-guide-500);
|
|
174
|
+
color: var(--ina-guide-500);
|
|
175
|
+
background-color: var(--ina-guide-50);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.ina-stepper__item--active .ina-stepper__label {
|
|
179
|
+
color: var(--ina-guide-500);
|
|
180
|
+
font-weight: 500;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/* Done/Completed State */
|
|
166
184
|
.ina-stepper__item--completed .ina-stepper__icon-wrapper {
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
color: var(--ina-
|
|
185
|
+
border-color: var(--ina-positive-600);
|
|
186
|
+
color: var(--ina-positive-600);
|
|
187
|
+
background-color: var(--ina-positive-50);
|
|
170
188
|
}
|
|
171
189
|
|
|
172
190
|
.ina-stepper__item--completed .ina-stepper__label {
|
|
173
|
-
color: var(--ina-
|
|
191
|
+
color: var(--ina-positive-600);
|
|
174
192
|
}
|
|
175
193
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
194
|
+
/* Inactive State (default) */
|
|
195
|
+
.ina-stepper__item:not(.ina-stepper__item--active):not(
|
|
196
|
+
.ina-stepper__item--completed
|
|
197
|
+
):not(.ina-stepper__item--error)
|
|
198
|
+
.ina-stepper__icon-wrapper {
|
|
199
|
+
border-color: var(--ina-stroke-primary);
|
|
200
|
+
color: var(--ina-content-tertiary);
|
|
201
|
+
background-color: var(--ina-background-secondary);
|
|
180
202
|
}
|
|
181
203
|
|
|
182
|
-
.ina-stepper__item
|
|
183
|
-
|
|
184
|
-
|
|
204
|
+
.ina-stepper__item:not(.ina-stepper__item--active):not(
|
|
205
|
+
.ina-stepper__item--completed
|
|
206
|
+
):not(.ina-stepper__item--error)
|
|
207
|
+
.ina-stepper__label {
|
|
208
|
+
color: var(--ina-content-tertiary);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* Error State */
|
|
212
|
+
.ina-stepper__item--error .ina-stepper__icon-wrapper {
|
|
213
|
+
border-color: var(--ina-negative-500);
|
|
214
|
+
color: var(--ina-negative-500);
|
|
215
|
+
background-color: var(--ina-negative-50);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.ina-stepper__item--error .ina-stepper__label {
|
|
219
|
+
color: var(--ina-negative-500);
|
|
185
220
|
}
|
|
186
221
|
|
|
187
222
|
.ina-stepper__item--clickable {
|
|
@@ -197,9 +232,11 @@
|
|
|
197
232
|
cursor: not-allowed;
|
|
198
233
|
}
|
|
199
234
|
|
|
200
|
-
/*
|
|
235
|
+
/* Separator States */
|
|
236
|
+
/* Completed separator - positive-600 */
|
|
201
237
|
.ina-stepper__separator--completed {
|
|
202
|
-
background-color: var(--ina-
|
|
238
|
+
background-color: var(--ina-positive-600);
|
|
239
|
+
width: 2px;
|
|
203
240
|
height: 2px;
|
|
204
241
|
}
|
|
205
242
|
|
|
@@ -207,3 +244,8 @@
|
|
|
207
244
|
width: 2px;
|
|
208
245
|
height: 2rem;
|
|
209
246
|
}
|
|
247
|
+
|
|
248
|
+
/* Inactive separator - stroke-primary (default) */
|
|
249
|
+
.ina-stepper__separator:not(.ina-stepper__separator--completed) {
|
|
250
|
+
background-color: var(--ina-stroke-primary);
|
|
251
|
+
}
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
display: flex;
|
|
20
20
|
align-items: flex-start;
|
|
21
21
|
gap: var(--ina-spacing-2);
|
|
22
|
-
border-radius:
|
|
22
|
+
border-radius: var(--ina-radius-lg);
|
|
23
23
|
border: 1px solid var(--ina-stroke-primary);
|
|
24
24
|
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
25
25
|
background-color: var(--ina-background-primary);
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
font-size: var(--ina-font-sm);
|
|
12
12
|
font-weight: var(--ina-font-medium);
|
|
13
13
|
color: var(--ina-content-primary);
|
|
14
|
-
margin-bottom:
|
|
14
|
+
margin-bottom: var(--ina-spacing-2);
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
/* Input wrapper */
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
display: flex;
|
|
20
20
|
align-items: center;
|
|
21
21
|
gap: var(--ina-spacing-2);
|
|
22
|
-
border-radius:
|
|
22
|
+
border-radius: var(--ina-radius-lg);
|
|
23
23
|
border: 1px solid var(--ina-stroke-primary);
|
|
24
24
|
padding: var(--ina-spacing-2) var(--ina-spacing-3);
|
|
25
25
|
background-color: var(--ina-background-primary);
|