vue-form-wizard
vue-form-wizard copied to clipboard
Style issue with round/square step and border / background
Hello,
there is an issue with the round / square step :
<div role="tab" tabindex="0" [...] style="border-color: rgba(var(--vs-primary), 1);">
<div class="wizard-icon-container" style="background-color: rgba(var(--vs-primary), 1);">
<i class="wizard-icon">1</i>
</div>
</div>
The border is in one div, and the background color is on another div inside

with certain resolutions, there is gaps between the border and the background color, it's best to move the background to the top div, alongside the border.
thanks.
I ran into the same problem as well and noticed some differences in the CSS between my code and the example code.
For me the issue was fixed by applying the following css to the inner container:
.vue-form-wizard .wizard-icon-circle .wizard-icon-container {
border-radius: 50% !important;
margin: -4px;
}