@idds/styles 1.0.43 → 1.0.44
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
|
@@ -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,21 @@
|
|
|
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
12
|
}
|
|
13
13
|
|
|
14
14
|
/* Vertical Layout */
|
|
15
15
|
.ina-stepper--vertical {
|
|
16
16
|
flex-direction: column;
|
|
17
17
|
align-items: flex-start;
|
|
18
|
+
height: 100%;
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
/* Responsive: Horizontal stepper becomes vertical on mobile */
|
|
@@ -26,6 +27,7 @@
|
|
|
26
27
|
.ina-stepper--horizontal-responsive {
|
|
27
28
|
flex-direction: column;
|
|
28
29
|
align-items: flex-start;
|
|
30
|
+
height: 100%;
|
|
29
31
|
}
|
|
30
32
|
|
|
31
33
|
.ina-stepper--horizontal-responsive .ina-stepper__item {
|
|
@@ -59,7 +61,7 @@
|
|
|
59
61
|
position: relative;
|
|
60
62
|
z-index: 1;
|
|
61
63
|
flex-shrink: 0;
|
|
62
|
-
padding: 0
|
|
64
|
+
padding: 0;
|
|
63
65
|
}
|
|
64
66
|
|
|
65
67
|
.ina-stepper--vertical .ina-stepper__item {
|
|
@@ -81,17 +83,17 @@
|
|
|
81
83
|
height: 24px;
|
|
82
84
|
min-width: 24px;
|
|
83
85
|
min-height: 24px;
|
|
84
|
-
border-radius:
|
|
86
|
+
border-radius: var(--ina-rounded-lg, 8px);
|
|
85
87
|
display: flex;
|
|
86
88
|
align-items: center;
|
|
87
89
|
justify-content: center;
|
|
88
|
-
font-size:
|
|
90
|
+
font-size: 16px;
|
|
89
91
|
font-weight: 500;
|
|
90
92
|
transition: background-color 0.2s ease, border-color 0.2s ease,
|
|
91
93
|
color 0.2s ease;
|
|
92
94
|
border: 1px solid var(--ina-stroke-primary);
|
|
93
|
-
color: var(--ina-content-
|
|
94
|
-
background-color: var(--ina-background-
|
|
95
|
+
color: var(--ina-content-tertiary);
|
|
96
|
+
background-color: var(--ina-background-secondary);
|
|
95
97
|
}
|
|
96
98
|
|
|
97
99
|
.ina-stepper--vertical .ina-stepper__icon-wrapper {
|
|
@@ -99,14 +101,14 @@
|
|
|
99
101
|
}
|
|
100
102
|
|
|
101
103
|
.ina-stepper__step-number {
|
|
102
|
-
color:
|
|
103
|
-
font-size:
|
|
104
|
+
color: inherit;
|
|
105
|
+
font-size: 16px;
|
|
104
106
|
font-weight: 500;
|
|
105
107
|
}
|
|
106
108
|
|
|
107
109
|
.ina-stepper__check-icon {
|
|
108
|
-
color:
|
|
109
|
-
stroke:
|
|
110
|
+
color: inherit;
|
|
111
|
+
stroke: currentColor;
|
|
110
112
|
width: 16px;
|
|
111
113
|
height: 16px;
|
|
112
114
|
}
|
|
@@ -138,13 +140,12 @@
|
|
|
138
140
|
/* Separator */
|
|
139
141
|
.ina-stepper__separator {
|
|
140
142
|
flex-grow: 1;
|
|
143
|
+
width: 2px;
|
|
141
144
|
height: 2px;
|
|
142
145
|
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;
|
|
146
|
+
/* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px */
|
|
147
|
+
/* Separator width/height is 2px, so we need to position it so its center aligns with icon center */
|
|
148
|
+
align-self: center;
|
|
148
149
|
position: relative;
|
|
149
150
|
z-index: 0;
|
|
150
151
|
transition: background-color 0.2s ease;
|
|
@@ -153,7 +154,6 @@
|
|
|
153
154
|
.ina-stepper--vertical .ina-stepper__separator {
|
|
154
155
|
width: 2px;
|
|
155
156
|
height: 2rem;
|
|
156
|
-
margin: 0;
|
|
157
157
|
flex-grow: 0;
|
|
158
158
|
align-self: flex-start;
|
|
159
159
|
/* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px from left */
|
|
@@ -163,25 +163,49 @@
|
|
|
163
163
|
}
|
|
164
164
|
|
|
165
165
|
/* States */
|
|
166
|
+
/* Active State */
|
|
167
|
+
.ina-stepper__item--active .ina-stepper__icon-wrapper {
|
|
168
|
+
border-color: var(--ina-guide-500);
|
|
169
|
+
color: var(--ina-guide-500);
|
|
170
|
+
background-color: var(--ina-guide-50);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.ina-stepper__item--active .ina-stepper__label {
|
|
174
|
+
color: var(--ina-guide-500);
|
|
175
|
+
font-weight: 500;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/* Done/Completed State */
|
|
166
179
|
.ina-stepper__item--completed .ina-stepper__icon-wrapper {
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
color: var(--ina-
|
|
180
|
+
border-color: var(--ina-positive-600);
|
|
181
|
+
color: var(--ina-positive-600);
|
|
182
|
+
background-color: var(--ina-positive-50);
|
|
170
183
|
}
|
|
171
184
|
|
|
172
185
|
.ina-stepper__item--completed .ina-stepper__label {
|
|
173
|
-
color: var(--ina-
|
|
186
|
+
color: var(--ina-positive-600);
|
|
174
187
|
}
|
|
175
188
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
color: var(--ina-
|
|
179
|
-
|
|
189
|
+
/* Inactive State (default) */
|
|
190
|
+
.ina-stepper__item:not(.ina-stepper__item--active):not(.ina-stepper__item--completed):not(.ina-stepper__item--error) .ina-stepper__icon-wrapper {
|
|
191
|
+
border-color: var(--ina-stroke-primary);
|
|
192
|
+
color: var(--ina-content-tertiary);
|
|
193
|
+
background-color: var(--ina-background-secondary);
|
|
180
194
|
}
|
|
181
195
|
|
|
182
|
-
.ina-stepper__item--active .ina-stepper__label {
|
|
183
|
-
color: var(--ina-content-
|
|
184
|
-
|
|
196
|
+
.ina-stepper__item:not(.ina-stepper__item--active):not(.ina-stepper__item--completed):not(.ina-stepper__item--error) .ina-stepper__label {
|
|
197
|
+
color: var(--ina-content-tertiary);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Error State */
|
|
201
|
+
.ina-stepper__item--error .ina-stepper__icon-wrapper {
|
|
202
|
+
border-color: var(--ina-negative-500);
|
|
203
|
+
color: var(--ina-negative-500);
|
|
204
|
+
background-color: var(--ina-negative-50);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.ina-stepper__item--error .ina-stepper__label {
|
|
208
|
+
color: var(--ina-negative-500);
|
|
185
209
|
}
|
|
186
210
|
|
|
187
211
|
.ina-stepper__item--clickable {
|
|
@@ -197,9 +221,11 @@
|
|
|
197
221
|
cursor: not-allowed;
|
|
198
222
|
}
|
|
199
223
|
|
|
200
|
-
/*
|
|
224
|
+
/* Separator States */
|
|
225
|
+
/* Completed separator - positive-600 */
|
|
201
226
|
.ina-stepper__separator--completed {
|
|
202
|
-
background-color: var(--ina-
|
|
227
|
+
background-color: var(--ina-positive-600);
|
|
228
|
+
width: 2px;
|
|
203
229
|
height: 2px;
|
|
204
230
|
}
|
|
205
231
|
|
|
@@ -207,3 +233,8 @@
|
|
|
207
233
|
width: 2px;
|
|
208
234
|
height: 2rem;
|
|
209
235
|
}
|
|
236
|
+
|
|
237
|
+
/* Inactive separator - stroke-primary (default) */
|
|
238
|
+
.ina-stepper__separator:not(.ina-stepper__separator--completed) {
|
|
239
|
+
background-color: var(--ina-stroke-primary);
|
|
240
|
+
}
|