How can I change the background color of an item when hovering?
hcli09 opened this issue · comments
As per the title, I haven't found a way to solve this. I have tried the following on the vue component:
.v-sidebar-menu.vsm_white-theme.vsm_collapsed .vsm--link_level-1.vsm--link_hover .vsm--icon {
background-color: #24292f !important;
}
which doesn't work.
Also, trying to change the vars in the _variable.scss
doesn't work.
Last, any insights that I can change the theme variables would be appreciated. I have gone over the instruction but still don't know where I should put the following line for example:
$primary-color: #24292f !default;
@import "vue-sidebar-menu/src/scss/vue-sidebar-menu.scss";
if I just want to change the primary color.
The selector is .vsm--mobile-bg
For the theme you can import it in the main.js file
First doesn't work cause style has scoped attribute, and to override with css try to use a more specific selector.
<style lang="scss">
.app .v-sidebar-menu .vsm--mobile-bg {
background-color: red;
}
</style>
For the second issue you need to import vue-sidebar-menu/src/scss/vue-sidebar-menu.scss
after overriding the variables.
$primary-color: red;
@import "vue-sidebar-menu/src/scss/vue-sidebar-menu.scss";
And you don't need to import the css file.
The second finally works! Thanks!