@swisspost/design-system-styles 8.2.0 → 8.2.2
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/components/form-validation.css +1 -1
- package/components/form-validation.scss +4 -1
- package/components/stepper.css +1 -1
- package/components/stepper.scss +1 -1
- package/index.css +1 -1
- package/intranet.css +1 -1
- package/package.json +3 -3
- package/post-external.css +1 -1
- package/post-internal.css +1 -1
- package/tokens/temp/channel.scss +1 -1
- package/tokens/temp/components.scss +1 -1
- package/tokens/temp/core.scss +1 -1
- package/tokens/temp/device.scss +1 -1
- package/tokens/temp/index.scss +1 -1
- package/tokens/temp/mode.scss +1 -1
- package/tokens/temp/theme.scss +1 -1
- package/variables/components/_accordion.scss +6 -3
- package/variables/components/_close.scss +4 -2
- package/variables/components/_datatable.scss +8 -4
- package/variables/components/_form-check.scss +6 -3
- package/variables/components/_form-select.scss +8 -4
- package/variables/components/_form-validation.scss +12 -6
- package/variables/components/_stepper.scss +4 -2
|
@@ -26,4 +26,4 @@
|
|
|
26
26
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
27
27
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
28
28
|
* THE SOFTWARE.
|
|
29
|
-
*/.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:1rem;color:#fff;background-color:var(--bs-success);border-radius:0}.was-validated :valid~.valid-tooltip,.is-valid~.valid-tooltip{display:block}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:1rem;color:#fff;background-color:var(--bs-danger);border-radius:0}.was-validated :invalid~.invalid-tooltip,.is-invalid~.invalid-tooltip{display:block}.invalid-feedback,.valid-feedback{display:none;align-items:center;width:100%;margin-block:0 0;padding:.375rem 1rem;font-size:.75rem}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.invalid-feedback,.valid-feedback{padding-inline:0}}.invalid-feedback::before,.valid-feedback::before{content:"";height:1.125rem;width:1.125rem;
|
|
29
|
+
*/.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:1rem;color:#fff;background-color:var(--bs-success);border-radius:0}.was-validated :valid~.valid-tooltip,.is-valid~.valid-tooltip{display:block}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:1rem;color:#fff;background-color:var(--bs-danger);border-radius:0}.was-validated :invalid~.invalid-tooltip,.is-invalid~.invalid-tooltip{display:block}.invalid-feedback,.valid-feedback{display:none;align-items:center;width:100%;margin-block:0 0;padding:.375rem 1rem;font-size:.75rem}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.invalid-feedback,.valid-feedback{padding-inline:0}}.invalid-feedback::before,.valid-feedback::before{content:"";flex-shrink:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;align-self:flex-start;height:1.125rem;width:1.125rem;margin-right:.5rem}.invalid-feedback{background:#a51728;color:#fff}.invalid-feedback::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16 2.362-16 27.7h32zm0 2.666 13.69 23.7H2.31zm-1.12 17.056-.364-9.417h2.942l-.401 9.417zm-.23 1.242h2.674V26H14.65z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16 2.362-16 27.7h32zm0 2.666 13.69 23.7H2.31zm-1.12 17.056-.364-9.417h2.942l-.401 9.417zm-.23 1.242h2.674V26H14.65z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.valid-feedback{background:#2c871d;color:#fff}.valid-feedback::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.valid-feedback.custom-feedback{background:#2c871d;color:#fff}.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip,.is-valid~.valid-feedback,.is-valid~.valid-tooltip{display:inline-flex}.was-validated .input-group>.form-control:not(:focus):valid,.input-group>.form-control:not(:focus).is-valid,.was-validated .input-group>.form-select:not(:focus):valid,.input-group>.form-select:not(:focus).is-valid,.was-validated .input-group>.form-floating:not(:focus-within):valid,.input-group>.form-floating:not(:focus-within).is-valid{z-index:3}.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip,.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip{display:inline-flex}.was-validated .input-group>.form-control:not(:focus):invalid,.input-group>.form-control:not(:focus).is-invalid,.was-validated .input-group>.form-select:not(:focus):invalid,.input-group>.form-select:not(:focus).is-invalid,.was-validated .input-group>.form-floating:not(:focus-within):invalid,.input-group>.form-floating:not(:focus-within).is-invalid{z-index:4}.is-invalid~.invalid-feedback,.is-valid~.valid-feedback,post-card-control~.invalid-feedback{display:inline-flex}.form-control.is-invalid:not(:disabled),.form-select.is-invalid:not(:disabled){border-color:#a51728}.form-control.is-invalid:not(:disabled):focus,.form-select.is-invalid:not(:disabled):focus{border-color:#a51728}.form-control.is-invalid.form-control-sm~.invalid-feedback,.form-select.is-invalid.form-control-sm~.invalid-feedback{padding:.25rem 1rem}.form-control.is-valid:not(:disabled),.form-select.is-valid:not(:disabled){border-color:var(--post-success)}.form-control.is-valid:not(:disabled):focus,.form-select.is-valid:not(:disabled):focus{border-color:var(--post-success)}.form-control.is-valid.form-control-sm~.valid-feedback,.form-select.is-valid.form-control-sm~.valid-feedback{padding:.25rem 1rem}.form-check-input.is-invalid{border-color:#a51728}.form-check-input.is-invalid~.form-check-label{color:#a51728}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .form-check-input.is-invalid{border-color:inherit}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .form-check-input.is-invalid~.form-check-label{color:#fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check-input.is-invalid{border-color:FieldText}}
|
|
@@ -31,9 +31,12 @@
|
|
|
31
31
|
|
|
32
32
|
&::before {
|
|
33
33
|
content: '';
|
|
34
|
+
flex-shrink: 0;
|
|
35
|
+
-webkit-mask-repeat: no-repeat;
|
|
36
|
+
mask-repeat: no-repeat;
|
|
37
|
+
align-self: flex-start;
|
|
34
38
|
height: form-validation.$form-feedback-font-size * type.$line-height-copy;
|
|
35
39
|
width: form-validation.$form-feedback-font-size * type.$line-height-copy;
|
|
36
|
-
display: inline-block;
|
|
37
40
|
margin-right: spacing.$size-mini;
|
|
38
41
|
}
|
|
39
42
|
}
|
package/components/stepper.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.stepper-container{margin-bottom:1.25rem}@media(min-width: 780px){.stepper-container{margin-bottom:2rem}}@media(min-width: 1280px){.stepper-container{margin-bottom:2.5rem}}.stepper-container>.stepper-bar{display:none}.stepper{counter-reset:step-index;margin:0;padding:0;list-style:none;display:grid;position:relative;overflow:hidden;grid-template-columns:1.25rem;grid-auto-columns:minmax(0, 1fr);padding-inline-end:1.25rem}.stepper-item{grid-row:1;position:relative}.stepper-item:not(:first-child){padding-inline-start:.5rem}.stepper-item:not(:last-child){padding-inline-end:.5rem;grid-column:span 2}.stepper-item::before,.stepper-item::after{content:"";display:block;position:absolute;inset-block-start:1.125rem;height:.25rem;background-color:#999;inset-inline:0}.stepper-item:not(:first-child,:last-child)::before{inset-inline-end:50%}.stepper-item:not(:first-child,:last-child)::after{inset-inline-start:50%}.stepper-item:not(.stepper-item[aria-current=step]~*,:first-child)::before,.stepper-item:not([aria-current=step]:not(:last-child),.stepper-item[aria-current=step]~*)::after{background-color:#fc0;z-index:1}.stepper-link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;position:relative;z-index:2;overflow:hidden;text-decoration:none;color:var(--post-gray-60);width:-moz-fit-content;width:fit-content;line-height:1.2}.stepper-link:not([title]){-webkit-line-clamp:initial}.stepper-item:not(:first-child,:last-child)>.stepper-link{margin-inline:auto;text-align:center}.stepper-item:last-child>.stepper-link{margin-inline-start:auto;margin-inline-end:-1.25rem;text-align:end}.stepper-item[aria-current=step]>.stepper-link{color:var(--post-gray-80);font-weight:700}.stepper-link::before{counter-increment:step-index;content:counter(step-index);display:flex;align-items:center;justify-content:center;z-index:1;height:2.5rem;width:2.5rem;box-sizing:border-box;margin-block-end:.5rem;color:#000;background-color:#fc0;border:.25rem solid rgb(var(--post-bg-rgb, 255 255 255));border-radius:50%;font-weight:700;text-indent:initial;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.stepper-item:not(:first-child,:last-child)>.stepper-link::before{margin-inline:auto}.stepper-item:last-child>.stepper-link::before{margin-inline-start:auto}.stepper-item:not([aria-current=step],.stepper-item[aria-current=step]~*)>.stepper-link::before{color:rgba(0,0,0,0)}.stepper-item[aria-current=step]~.stepper-item>.stepper-link::before{color:#fff;background-color:#666}.stepper-link::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;display:block;position:absolute;top:.5rem;z-index:1;height:1.5rem;width:1.5rem;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);color:#000}.stepper-item:first-child>.stepper-link::after{left:.5rem}.stepper-item:not(:first-child,:last-child)>.stepper-link::after{left:calc(50% - 0.75rem)}.stepper-item:last-child>.stepper-link::after{right:.5rem}.stepper-item:not([aria-current=step],.stepper-item[aria-current=step]~*)>.stepper-link::after{content:""}.stepper-link:is(a[href]){outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){color:var(--post-gray-80)}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{color:var(--post-contrast-color-inverted)}@supports not selector(:has(:focus-visible)){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){color:var(--post-gray-80)}.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::after{color:var(--post-contrast-color-inverted)}}.stepper-link:is(a[href]):hover{color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):hover{color:var(--post-gray-80)}.stepper-link:is(a[href]):hover::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):hover::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):hover::after{color:var(--post-contrast-color-inverted)}@media(max-width: 599.98px){.stepper-item:first-child,.stepper-item:last-child{padding-inline:0}.stepper-item[aria-current=step]{display:contents}.stepper-item[aria-current=step]>.stepper-link{display:contents}.stepper-item[aria-current=step]::before{grid-row:-1;margin-block-start:1.125rem;position:static}.stepper-item[aria-current=step]:not(:last-child)>.stepper-link::before{grid-row:-1}.stepper-item[aria-current=step]:not(:first-child,:last-child)::after{inset-inline-start:0}.stepper-item:not([aria-current=step]){grid-row:-1;justify-self:stretch}.stepper-item:not([aria-current=step])>.stepper-link{-webkit-line-clamp:initial;line-height:0;text-indent:100%}.stepper-link{white-space:nowrap;width:100%}.stepper-item[aria-current=step]:first-child>.stepper-link::before{order:-1}.stepper-item[aria-current=step]:not(:first-child,:last-child)>.stepper-link::before{margin-inline-start:0;transform:translateX(-50%)}.stepper-item[aria-current=step]:last-child>.stepper-link::before{position:absolute;z-index:2;inset-block-start:0;inset-inline-end:0}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-item::before,.stepper-item::after{background-color:CanvasText}.stepper-item:not(.stepper-item[aria-current=step]~.stepper-item,:first-child)::before,.stepper-item:not([aria-current=step]:not(:last-child),.stepper-item[aria-current=step]~*)::after{background-color:Highlight}.stepper-link::before{forced-color-adjust:none}.stepper-item[aria-current=step]>.stepper-link::before{background-color:Canvas;color:CanvasText}.stepper-item[aria-current=step]~.stepper-item>.stepper-link::before,.stepper-item:not([aria-current=step])>.stepper-link::before{color:Canvas;border-color:Canvas;background-color:CanvasText}.stepper-link::after{color:Canvas}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{border-color:Highlight}@supports not selector(:has(:focus-visible)){.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{border-color:Highlight}}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):hover::before{border-color:Highlight}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href])::before{color:Canvas}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight;color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight;color:HighlightText}}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):hover::before{background-color:Highlight;color:HighlightText}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href])::before{background-color:LinkText}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::after{color:HighlightText}}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):hover::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):hover::after{color:HighlightText}}
|
|
1
|
+
.stepper-container{margin-bottom:1.25rem}@media(min-width: 780px){.stepper-container{margin-bottom:2rem}}@media(min-width: 1280px){.stepper-container{margin-bottom:2.5rem}}.stepper-container>.stepper-bar{display:none}.stepper{counter-reset:step-index;margin:0;padding:0;list-style:none;display:grid;position:relative;overflow:hidden;grid-template-columns:1.25rem;grid-auto-columns:minmax(0, 1fr);padding-inline-end:1.25rem}.stepper-item{grid-row:1;position:relative}.stepper-item:not(:first-child){padding-inline-start:.5rem}.stepper-item:not(:last-child){padding-inline-end:.5rem;grid-column:span 2}.stepper-item::before,.stepper-item::after{content:"";display:block;position:absolute;inset-block-start:1.125rem;height:.25rem;background-color:#999;inset-inline:0}.stepper-item:not(:first-child,:last-child)::before{inset-inline-end:50%}.stepper-item:not(:first-child,:last-child)::after{inset-inline-start:50%}.stepper-item:not(.stepper-item[aria-current=step]~*,:first-child)::before,.stepper-item:not([aria-current=step]:not(:last-child),.stepper-item[aria-current=step]~*)::after{background-color:#fc0;z-index:1}.stepper-link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;counter-increment:step-index;position:relative;z-index:2;overflow:hidden;text-decoration:none;color:var(--post-gray-60);width:-moz-fit-content;width:fit-content;line-height:1.2}.stepper-link:not([title]){-webkit-line-clamp:initial}.stepper-item:not(:first-child,:last-child)>.stepper-link{margin-inline:auto;text-align:center}.stepper-item:last-child>.stepper-link{margin-inline-start:auto;margin-inline-end:-1.25rem;text-align:end}.stepper-item[aria-current=step]>.stepper-link{color:var(--post-gray-80);font-weight:700}.stepper-link::before{content:counter(step-index);display:flex;align-items:center;justify-content:center;z-index:1;height:2.5rem;width:2.5rem;box-sizing:border-box;margin-block-end:.5rem;color:#000;background-color:#fc0;border:.25rem solid rgb(var(--post-bg-rgb, 255 255 255));border-radius:50%;font-weight:700;text-indent:initial;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.stepper-item:not(:first-child,:last-child)>.stepper-link::before{margin-inline:auto}.stepper-item:last-child>.stepper-link::before{margin-inline-start:auto}.stepper-item:not([aria-current=step],.stepper-item[aria-current=step]~*)>.stepper-link::before{color:rgba(0,0,0,0)}.stepper-item[aria-current=step]~.stepper-item>.stepper-link::before{color:#fff;background-color:#666}.stepper-link::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;display:block;position:absolute;top:.5rem;z-index:1;height:1.5rem;width:1.5rem;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);color:#000}.stepper-item:first-child>.stepper-link::after{left:.5rem}.stepper-item:not(:first-child,:last-child)>.stepper-link::after{left:calc(50% - 0.75rem)}.stepper-item:last-child>.stepper-link::after{right:.5rem}.stepper-item:not([aria-current=step],.stepper-item[aria-current=step]~*)>.stepper-link::after{content:""}.stepper-link:is(a[href]){outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){color:var(--post-gray-80)}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{color:var(--post-contrast-color-inverted)}@supports not selector(:has(:focus-visible)){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){color:var(--post-gray-80)}.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::after{color:var(--post-contrast-color-inverted)}}.stepper-link:is(a[href]):hover{color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):hover{color:var(--post-gray-80)}.stepper-link:is(a[href]):hover::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):hover::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):hover::after{color:var(--post-contrast-color-inverted)}@media(max-width: 599.98px){.stepper-item:first-child,.stepper-item:last-child{padding-inline:0}.stepper-item[aria-current=step]{display:contents}.stepper-item[aria-current=step]>.stepper-link{display:contents}.stepper-item[aria-current=step]::before{grid-row:-1;margin-block-start:1.125rem;position:static}.stepper-item[aria-current=step]:not(:last-child)>.stepper-link::before{grid-row:-1}.stepper-item[aria-current=step]:not(:first-child,:last-child)::after{inset-inline-start:0}.stepper-item:not([aria-current=step]){grid-row:-1;justify-self:stretch}.stepper-item:not([aria-current=step])>.stepper-link{-webkit-line-clamp:initial;line-height:0;text-indent:100%}.stepper-link{white-space:nowrap;width:100%}.stepper-item[aria-current=step]:first-child>.stepper-link::before{order:-1}.stepper-item[aria-current=step]:not(:first-child,:last-child)>.stepper-link::before{margin-inline-start:0;transform:translateX(-50%)}.stepper-item[aria-current=step]:last-child>.stepper-link::before{position:absolute;z-index:2;inset-block-start:0;inset-inline-end:0}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-item::before,.stepper-item::after{background-color:CanvasText}.stepper-item:not(.stepper-item[aria-current=step]~.stepper-item,:first-child)::before,.stepper-item:not([aria-current=step]:not(:last-child),.stepper-item[aria-current=step]~*)::after{background-color:Highlight}.stepper-link::before{forced-color-adjust:none}.stepper-item[aria-current=step]>.stepper-link::before{background-color:Canvas;color:CanvasText}.stepper-item[aria-current=step]~.stepper-item>.stepper-link::before,.stepper-item:not([aria-current=step])>.stepper-link::before{color:Canvas;border-color:Canvas;background-color:CanvasText}.stepper-link::after{color:Canvas}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{border-color:Highlight}@supports not selector(:has(:focus-visible)){.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{border-color:Highlight}}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):hover::before{border-color:Highlight}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href])::before{color:Canvas}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight;color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight;color:HighlightText}}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):hover::before{background-color:Highlight;color:HighlightText}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href])::before{background-color:LinkText}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::after{color:HighlightText}}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):hover::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):hover::after{color:HighlightText}}
|
package/components/stepper.scss
CHANGED
|
@@ -88,6 +88,7 @@
|
|
|
88
88
|
display: -webkit-box;
|
|
89
89
|
-webkit-box-orient: vertical;
|
|
90
90
|
-webkit-line-clamp: 2;
|
|
91
|
+
counter-increment: step-index;
|
|
91
92
|
position: relative;
|
|
92
93
|
z-index: 2;
|
|
93
94
|
overflow: hidden;
|
|
@@ -121,7 +122,6 @@
|
|
|
121
122
|
|
|
122
123
|
// step indicator
|
|
123
124
|
.stepper-link::before {
|
|
124
|
-
counter-increment: step-index;
|
|
125
125
|
content: counter(step-index);
|
|
126
126
|
display: flex;
|
|
127
127
|
align-items: center;
|