diff --git a/.changeset/fix-steps-typography-collision.md b/.changeset/fix-steps-typography-collision.md new file mode 100644 index 000000000..4e67aa67d --- /dev/null +++ b/.changeset/fix-steps-typography-collision.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed a stray vertical line and extra indentation on the `.steps` component, caused by the unrelated typographic `.steps` rule in `ui/_type.scss` leaking its guideline, padding and margins onto it. The typographic rule now skips any element with `.step-item` children, so the two no longer collide. It also no longer inherits the component's flex layout, and so works without `.steps-vertical` alongside it. diff --git a/core/scss/ui/_type.scss b/core/scss/ui/_type.scss index 435946d17..4ba9d86e8 100644 --- a/core/scss/ui/_type.scss +++ b/core/scss/ui/_type.scss @@ -282,15 +282,27 @@ $text-variants: ( } } -.steps { +// Numbered walkthrough for long-form content: every `h3` inside becomes a +// numbered step on a vertical guideline. +// +// This shares the `.steps` name with the progress-tracker component in +// `ui/_steps.scss`, and this file is loaded after it — so the selector excludes +// anything holding `.step-item` children, which is what makes an element that +// component. Everything else keeps matching, exactly as before. The component's +// unqualified `.steps` rule still applies here though, so the layout it sets up +// (flex row, full width, scrollable below `sm`) has to be undone. +.steps:not(:has(> .step-item)) { --steps-padding: #{$steps-padding}; --steps-item-size: #{$steps-item-size}; --steps-margin-start: #{$steps-margin-start}; --steps-margin-bottom: #{$steps-margin-bottom}; --steps-heading-margin-top: #{$steps-heading-margin-top}; + display: block; + width: auto; padding-inline-start: var(--steps-padding); margin-inline-start: var(--steps-margin-start); margin-bottom: var(--steps-margin-bottom); + overflow: visible; counter-reset: step; border-inline-start: 1px solid var(--border-color);