vue-form-wizard icon indicating copy to clipboard operation
vue-form-wizard copied to clipboard

Style issue with round/square step and border / background

Open lk77 opened this issue 6 years ago • 1 comments

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

pasted image 0

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.

lk77 avatar Sep 18 '19 13:09 lk77

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;
  }

jensvlierop avatar Mar 16 '20 12:03 jensvlierop