Can't scope "toggle" component
Closed this issue · 0 comments
I am opening an issue for
Styles (CSS, SCSS, ...)
Package version
@mozaic-ds/freemarker@4.35.0
Description
When we scope the SCSS import of the toggle @import "components/toggle"
into a selector (referenced in the example as #my-selector
), the toggle doesn't works anymore (can't be switched).
GitHub repository
No response
Mock-up(s)
No response
What happened?
When we scope the SCSS import of the toggle, we can't use them: they stay visually in unchecked state.
What is expected?
We expect to be able to scope the toggle import to prevent unexpected change on others components in the page.
To Reproduce
Just import the components/toggle
in a selector (scss).
Code example
#my-selector {
@import "components/toggle";
}
Is this a regression?
- Yes
- No
- I don't know
Additional comments
It seems to be caused by the "+" operator in @mozaic-ds/styles/components/_c.toggle.scss
that don't take the whole selector but only the first world.
When not scoped, the toggle is fine and the scss file gives one of the following css (OK):
:checked+.mc-toggle__label:before {
background-color: #46a610
}
When it is scoped, the toggle doesn't works and gives the following css (KO because only #my-selector
is taken after "checked" istead of #my-selector .mc-toggle__label
):
:checked+#my-selector .mc-toggle__label:before {
background-color: #46a610
}
But if we change the file (manually), we can make the selector correct (OK):
#my-selector :checked+.mc-toggle__label:before {
background-color: #46a610
}