Vertical navigation for Wizard

[vikijel]

I have created a piece of CSS that turns the Wizard into vertical

It is activated by adding class fi-fo-wizard-vertical to the wizard using:

Wizard::make(...)->extraAttributes(['class' => 'fi-fo-wizard-vertical'])

CSS (you can adjust the grid-cols-* and col-span-* for different width ratios then 2:6)

.fi-fo-wizard-vertical {
    @apply grid md:grid-cols-8
}

.fi-fo-wizard-vertical .fi-fo-wizard-header {
    grid-auto-flow: row !important;
    align-content: flex-start;
    @apply md:divide-y !important;
    @apply border-b-0 border-e;
    @apply md:col-span-2
}

.fi-fo-wizard-vertical .fi-fo-wizard-header-step {
    @apply block
}

.fi-fo-wizard-vertical .fi-fo-wizard-header-step-button {
    @apply w-full
}

.fi-fo-wizard-vertical .fi-fo-wizard-header-step-separator {
    display: none !important;
}

.fi-fo-wizard-vertical .fi-fo-wizard-step {
    @apply md:col-span-6
}

.fi-fo-wizard-vertical > div:last-child {
    @apply md:col-span-8 border-t pt-6
}

Default style:

Vertical style:

PS:
I tried to rotate & stretch the separator svg, but after 2 hours got mad and decided to hide it instead :)

[vikijel]

This could be turned into built-in feature by adding ->vertical() method to the Wizard + the piece of css,

Adding class fi-fo-wizard-actions to the buttons wrapper div would be handy, now i had to use the :last-child

And ability to add buttons would be nice too

[vikijel]

PR to add Wizard->vertical() method for more native style toggle: #13919

[vikijel]

Didn't realize features are freezed for v3, so use the CSS override above for now.