Toggles are badly rendered
Opened this issue · 2 comments
Thanks for your hard work with vue-atlas
!
Unfortunately, after fix of #156 toggles become broken in topbar context.
(other components are seems to render fine)
Steps to reproduce:
<template>
<va-app
bg-color="#F4F5F7"
page-bg-color="#FFFFFF"
desktop-margin="0"
desktop-minimum-width="0"
desktop-sidebar-width="300"
desktop-minibar-width="0"
desktop-topbar-height="50"
mobile-sidebar-width="0"
mobile-minibar-width="0"
mobile-topbar-height="50">
<va-topbar theme="dark">
<div slot="left">
<va-dropdown class="dropdown">
<div slot="trigger">
<va-button type="darker">
Click me
</va-button>
</div>
<ul>
<li><va-input/></li>
<li><va-file-picker/></li>
<li><va-textarea/></li>
<li><va-toggle :value="false"/></li>
<li><va-badge type="success">Badge</va-badge></li>
<li><va-checkbox-btn>cbx btn</va-checkbox-btn></li>
<li><va-radio/></li>
<li><va-range/></li>
<li><va-lozenge type="primary">LOZENGE</va-lozenge></li>
</ul>
</va-dropdown>
</div>
</va-topbar>
<va-page>
<va-card>
<va-toggle :value="true"/>
</va-card>
</va-page>
</va-app>
</template>
This happens when a toggle is rendered inside a dropdown. I suspect its because of importing the reset for each component and I don't know if that is an efficient way to do resets.
I'm going to do my best to have a fix for this over this weekend. sorry for breaking this! I have to admit that I immediately do not know what's causing this without diving into a project that replicates it. It's easy enough to replicate, though.
@PaulRaUnite the change in #156 should only be affecting elements with input[type=text]
, which toggle doesn't have. weird!