@pablo-v/stepper 0.1.0 → 0.2.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/stepper.css +55 -8
- package/package.json +1 -1
package/dist/stepper.css
CHANGED
|
@@ -94,6 +94,10 @@ button.pxl-stepper__body:focus-visible {
|
|
|
94
94
|
color: var(--pxl-bg);
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
+
.pxl-stepper__marker > .pxl-icon {
|
|
98
|
+
animation: pxl-pop-in var(--pxl-dur-base) var(--pxl-ease-out);
|
|
99
|
+
}
|
|
100
|
+
|
|
97
101
|
.pxl-stepper__step[data-status="error"] .pxl-stepper__marker {
|
|
98
102
|
border-color: var(--pxl-danger);
|
|
99
103
|
background: var(--pxl-danger-subtle);
|
|
@@ -137,34 +141,77 @@ button.pxl-stepper__body:hover .pxl-stepper__label {
|
|
|
137
141
|
white-space: nowrap;
|
|
138
142
|
}
|
|
139
143
|
|
|
140
|
-
/* The connector is a row of 4px cells;
|
|
144
|
+
/* The connector is a row of 4px cells; a lit copy wipes over it once the step before it is done. */
|
|
141
145
|
.pxl-stepper__connector {
|
|
142
|
-
--
|
|
143
|
-
|
|
146
|
+
--_cells: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 6px);
|
|
147
|
+
position: relative;
|
|
144
148
|
flex: 1;
|
|
145
149
|
min-width: var(--pxl-space-4);
|
|
146
150
|
height: 4px;
|
|
147
151
|
margin-top: calc((var(--_marker) - 4px) / 2);
|
|
148
|
-
|
|
152
|
+
color: var(--pxl-gray-300);
|
|
153
|
+
background: var(--_cells);
|
|
149
154
|
}
|
|
150
155
|
|
|
151
|
-
.pxl-stepper__connector
|
|
152
|
-
|
|
156
|
+
.pxl-stepper__connector::after {
|
|
157
|
+
position: absolute;
|
|
158
|
+
inset: 0;
|
|
159
|
+
color: var(--pxl-fg);
|
|
160
|
+
background: var(--_cells);
|
|
161
|
+
content: "";
|
|
162
|
+
transform: scaleX(0);
|
|
163
|
+
transform-origin: left;
|
|
164
|
+
transition: transform var(--pxl-dur-slow) var(--pxl-ease-out);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.pxl-stepper__connector[data-lit]::after {
|
|
168
|
+
transform: none;
|
|
153
169
|
}
|
|
154
170
|
|
|
155
171
|
.pxl-stepper[data-orientation="vertical"] .pxl-stepper__connector {
|
|
172
|
+
--_cells: repeating-linear-gradient(180deg, currentColor 0 4px, transparent 4px 6px);
|
|
156
173
|
flex: none;
|
|
157
174
|
width: 4px;
|
|
158
175
|
min-width: 0;
|
|
159
176
|
height: auto;
|
|
160
177
|
min-height: var(--pxl-space-6);
|
|
161
178
|
margin: var(--pxl-space-1) 0 var(--pxl-space-1) calc((var(--_marker) - 4px) / 2);
|
|
162
|
-
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.pxl-stepper[data-orientation="vertical"] .pxl-stepper__connector::after {
|
|
182
|
+
transform: scaleY(0);
|
|
183
|
+
transform-origin: top;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.pxl-stepper[data-orientation="vertical"] .pxl-stepper__connector[data-lit]::after {
|
|
187
|
+
transform: none;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
/* Narrow rows keep every marker and only the current step's text, which stays readable to screen readers. */
|
|
191
|
+
@media (width < 30rem) {
|
|
192
|
+
.pxl-stepper:not([data-orientation="vertical"])
|
|
193
|
+
.pxl-stepper__step:not([data-status="current"])
|
|
194
|
+
.pxl-stepper__text {
|
|
195
|
+
position: absolute;
|
|
196
|
+
width: 1px;
|
|
197
|
+
height: 1px;
|
|
198
|
+
overflow: hidden;
|
|
199
|
+
clip-path: inset(50%);
|
|
200
|
+
white-space: nowrap;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.pxl-stepper:not([data-orientation="vertical"]) .pxl-stepper__step:not(:last-child) {
|
|
204
|
+
flex: 1 0 auto;
|
|
205
|
+
}
|
|
163
206
|
}
|
|
164
207
|
|
|
165
208
|
@media (forced-colors: active) {
|
|
166
|
-
.pxl-stepper__connector
|
|
209
|
+
.pxl-stepper__connector,
|
|
210
|
+
.pxl-stepper__connector::after {
|
|
167
211
|
background: none;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.pxl-stepper__connector {
|
|
168
215
|
border-top: 2px dotted CanvasText;
|
|
169
216
|
}
|
|
170
217
|
}
|