In BULMA or SCSS maybe more specifically I want to use a component but sort of take a copy of it rather than overriding it, is the only way to do this through extend, or are there other mechanisms. Specifically I want to use the BULMA dropdown to implement a dropdown selector to replace <select...><option...>. But I don't want to change the BULMA classes themselves (dropdown, dropdown-item, ...> as I may want to use those for their typical use case in other scenarios. So what is the best way to do this in SCSS (is extend the only option)?
Also if I do this I want to be able to override some of the bulma dropdown variables (like e.g. $dropdown-content-radius) but ONLY in the context of my redefined component, not for the whole dropdown class. Is there a way to do all of that?
Hope someone with good SCSS or BULMA experience can help me with that one.
Thus far I have overridden the variables and overridden some of the component items such as .dropdown-content which does give me what I want, but basically change the whole class' behavior, so that I can't use the class as it was originally defined anymore. I need to be able to use the original class as well as a slightly re-defined class.
You could add some modifiers to specific (dropdown) elements, that you then write additonal styles for.
Here is an example for a bulma dropdown menu with a class for a slimmer width (using a custom is-slim class):
<div class="dropdown is-active is-slim">
In the SCSS I define for example for the "is-slim" class:
/* A slim variant for a dropdown menu */
.dropdown.is-slim .dropdown-menu {
width: auto;
min-width: auto;
}
/* A slim variant for dropdown items */
.dropdown.is-slim .dropdown-menu button.dropdown-item {
padding-left: 8px;
padding-right: 8px;
}
You can see the SCSS definitions here.
Adding this class changes the styles for only the menus with this modifier and leaves other dropdown menus unchanged.