Mixin the night away

I wanted consumers of the wizard component to be able to customize it, but this turned out to be very simple in most cases. As the main container for the wizard is a subclass of Ext.Panel, all of the relevant SCSS variables for this class can be overridden and it'll take effect for the wizard's container too.

However, I wanted to create a custom look for the progress bar and in turn allow end users to customize it. To this end, I wrote a custom mixin:

// packages/wizard/sass/src/Wizard/view/wizard/Progress.scss
@mixin wizard-progress-ui(
    $ui: null,
    $ui-border-color: #2163A3,
    $ui-background-color: #ffffff,
    $ui-button-border-width: 4px,
    $ui-button-border-radius: 20px
) {
    .wizard-progress-#{$ui} {
        padding: 10px 0;

        .#{$prefix}btn:last-child {
            margin-left: 20px;
            margin-right: 0px;
        }

        .#{$prefix}btn {
            margin: 0 10px;
        }

        .#{$prefix}btn:first-child {
       ...