@idds/styles 1.0.44 → 1.0.46
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);
|
|
@@ -10,6 +10,10 @@
|
|
|
10
10
|
justify-content: space-between;
|
|
11
11
|
width: 100%;
|
|
12
12
|
}
|
|
13
|
+
.ina-stepper--vertical .ina-stepper__separator {
|
|
14
|
+
position: relative;
|
|
15
|
+
left: 12px;
|
|
16
|
+
}
|
|
13
17
|
|
|
14
18
|
/* Vertical Layout */
|
|
15
19
|
.ina-stepper--vertical {
|
|
@@ -32,7 +36,6 @@
|
|
|
32
36
|
|
|
33
37
|
.ina-stepper--horizontal-responsive .ina-stepper__item {
|
|
34
38
|
width: 100%;
|
|
35
|
-
margin-bottom: 1rem;
|
|
36
39
|
align-items: flex-start;
|
|
37
40
|
}
|
|
38
41
|
|
|
@@ -44,7 +47,9 @@
|
|
|
44
47
|
align-self: flex-start;
|
|
45
48
|
/* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px from left */
|
|
46
49
|
/* Separator width is 2px, so margin-left: 12px - 1px = 11px */
|
|
47
|
-
|
|
50
|
+
position: relative;
|
|
51
|
+
left: 12px;
|
|
52
|
+
bottom: 0;
|
|
48
53
|
}
|
|
49
54
|
|
|
50
55
|
.ina-stepper--horizontal-responsive .ina-stepper__item:last-child {
|
|
@@ -68,9 +73,16 @@
|
|
|
68
73
|
flex-direction: row;
|
|
69
74
|
text-align: left;
|
|
70
75
|
align-items: flex-start;
|
|
71
|
-
margin-bottom: 1rem;
|
|
72
76
|
padding: 0;
|
|
73
77
|
width: 100%;
|
|
78
|
+
height: 24px;
|
|
79
|
+
min-height: 24px;
|
|
80
|
+
max-height: 24px;
|
|
81
|
+
overflow: visible;
|
|
82
|
+
}
|
|
83
|
+
.ina-stepper--vertical .ina-stepper__separator,
|
|
84
|
+
.ina-stepper--horizontal-responsive .ina-stepper__separator {
|
|
85
|
+
min-height: 72px;
|
|
74
86
|
}
|
|
75
87
|
|
|
76
88
|
.ina-stepper--vertical .ina-stepper__item:last-child {
|
|
@@ -115,11 +127,18 @@
|
|
|
115
127
|
|
|
116
128
|
/* Label */
|
|
117
129
|
.ina-stepper__label {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
color: var(--ina-content-secondary);
|
|
130
|
+
font-size: var(--ina-font-size-xs);
|
|
131
|
+
color: var(--ina-content-primary);
|
|
121
132
|
transition: color 0.2s ease;
|
|
122
133
|
white-space: nowrap;
|
|
134
|
+
position: absolute;
|
|
135
|
+
top: 2rem;
|
|
136
|
+
}
|
|
137
|
+
.ina-stepper--vertical .ina-stepper__label,
|
|
138
|
+
.ina-stepper--horizontal-responsive .ina-stepper__label {
|
|
139
|
+
position: absolute;
|
|
140
|
+
left: 2rem;
|
|
141
|
+
top: 0.25rem;
|
|
123
142
|
}
|
|
124
143
|
|
|
125
144
|
.ina-stepper--vertical .ina-stepper__label {
|
|
@@ -127,16 +146,6 @@
|
|
|
127
146
|
flex-grow: 1;
|
|
128
147
|
}
|
|
129
148
|
|
|
130
|
-
/* Content (for vertical stepper) */
|
|
131
|
-
.ina-stepper__content {
|
|
132
|
-
margin-top: 0.5rem;
|
|
133
|
-
font-size: 0.875rem;
|
|
134
|
-
color: var(--ina-content-primary);
|
|
135
|
-
text-align: left;
|
|
136
|
-
width: 100%;
|
|
137
|
-
padding-left: calc(24px + 0.75rem);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
149
|
/* Separator */
|
|
141
150
|
.ina-stepper__separator {
|
|
142
151
|
flex-grow: 1;
|
|
@@ -159,7 +168,8 @@
|
|
|
159
168
|
/* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px from left */
|
|
160
169
|
/* Separator width is 2px, so we need to position it so its center aligns with icon center */
|
|
161
170
|
/* margin-left: 12px (icon center) - 1px (half separator) = 11px */
|
|
162
|
-
|
|
171
|
+
position: relative;
|
|
172
|
+
left: 12px;
|
|
163
173
|
}
|
|
164
174
|
|
|
165
175
|
/* States */
|
|
@@ -187,13 +197,19 @@
|
|
|
187
197
|
}
|
|
188
198
|
|
|
189
199
|
/* Inactive State (default) */
|
|
190
|
-
.ina-stepper__item:not(.ina-stepper__item--active):not(
|
|
200
|
+
.ina-stepper__item:not(.ina-stepper__item--active):not(
|
|
201
|
+
.ina-stepper__item--completed
|
|
202
|
+
):not(.ina-stepper__item--error)
|
|
203
|
+
.ina-stepper__icon-wrapper {
|
|
191
204
|
border-color: var(--ina-stroke-primary);
|
|
192
205
|
color: var(--ina-content-tertiary);
|
|
193
206
|
background-color: var(--ina-background-secondary);
|
|
194
207
|
}
|
|
195
208
|
|
|
196
|
-
.ina-stepper__item:not(.ina-stepper__item--active):not(
|
|
209
|
+
.ina-stepper__item:not(.ina-stepper__item--active):not(
|
|
210
|
+
.ina-stepper__item--completed
|
|
211
|
+
):not(.ina-stepper__item--error)
|
|
212
|
+
.ina-stepper__label {
|
|
197
213
|
color: var(--ina-content-tertiary);
|
|
198
214
|
}
|
|
199
215
|
|
|
@@ -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);
|