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 {
margin-right: 20px;
margin-left: 0px;
}
@include extjs-button-small-ui(
$ui: 'default',
$border-radius: $ui-button-border-radius,
$border-width: $ui-button-border-width,
$background-color: $ui-background-color,
$background-color-disabled: mix($ui-border-color, $ui-background-color, 50%),
$border-color: $ui-border-color,
$color: black,
$color-disabled: shade($ui-border-color, 50%),
$opacity-disabled: 0.9999,
$inner-opacity-disabled: 0.9999
);
.wizard-progress-bar {
width: 100%;
background: $ui-border-color;
height: $ui-button-border-width * 1.5;
position: absolute;
top: 50%;
margin-top: -(($ui-button-border-width * 1.5) / 2);
}
}
}
@include wizard-progress-ui(
$ui: 'default'
);The mixin accepts four variables, each with a default value:
$ui-border-color:#2163A3$ui-background-color:#ffffff$ui-button-border-width:4px$ui-button-border-radius:20px
With this, not only can I style the component, but developers can also call this mixin from their own code and override colors and borders. As the mixin bases a lot of its other styles on values calculated from these variables, the various colors and sizes should always stay in keeping with these variables. For example, the following customization would result in a progress bar with thinner and less round borders with a pink coloring:
@include wizard-progress-ui(
$ui: 'default',
$ui-border-color: #ff69b4,
$ui-background-color: #ffffff,
$ui-button-border-width: 1px,
$ui-button-border-radius: 4px
);