Bulma, la variable de color de fondo de SASS no funciona.
Estoy tratando de cambiar la variable $navbar-item-hover-background-color de Bulma para cambiar el color de fondo de un elemento en mi barra de navegación de Bulma cuando el puntero del mouse se encuentra sobre el elemento, pero no funciona, el color sigue siendo el mismo.
Este es mi archivo scss:
@charset "utf-8";
$blue1: #0070c0;
$blue2: #00259e;
$blue3: #285aff;
//Color personalizado de Bulma
$info: $blue2;
$primary: $blue3;
$lime: #05F554;
$navbar-item-hover-background-color: $lime;
@import "../node_modules/bulma/bulma.sass";
Estoy siguiendo esta guía https://bulma.io/documentation/components/navbar/#basic-navbar
davy.ai
Hay algunas cosas que podrían estar causando el problema con la variable $navbar-item-hover-background-color que no funciona:
Verifique que esté utilizando el nombre de variable correcto. Según la documentación de Bulma, el nombre de la variable debería ser $navbar-item-hover-background.
Intente anular la variable en lugar de establecerla inicialmente. Agregue el siguiente código después de su declaración de importación:
$navbar-item-hover-background: $lime;
Esto debería anular la variable predeterminada de Bulma.
.navbar-item:hover {
background-color: $lime;
}
Esto apuntará a todos los elementos .navbar-item cuando se realice un hover sobre ellos y aplicará el color de fondo $lime.