Dropdown Hover and Mobile Button Theming

Design Template: Producer
 avatar
Jfelizardo
plain_text
25 days ago
1.4 kB
2
Indexable
Never
CSS Color Theming
/*START Dropdown Hover*/
.custom-select-item {
    color: #000;
}
.custom-select .lp-input--light + .custom-select-menu .custom-select-content {
    background-color: #fff;
}

.custom-select .lp-input--light + .custom-select-menu .custom-select-item:hover {
    background-color: #670038;
    color: #fff;
}
/*END Dropdown Hover*/

/**Arrow theme on mobile -*/
div.results__expand {
    background-color: #670038;
}

div.results__expand svg {
        stroke: #fff;
}
/**END**/

/*use when your chart background is white*/
li.legend__item.is-hovered{
    a.legend__name{
        opacity: 1;
    }
    span.legend__val{
    opacity: 1;
    }
}
/*END*/

/*START - fix reset link upon hover*/
.lp-link--light:after, .lp-a--light a:after {
    background-color: #000;
}
.lp-link--light:before, .lp-a--light a:before {
    background-color: #000;
}
.lp-link--light:hover, .lp-a--light a:hover {
    color: #000;
}
.lp-input {
    border-color: #000;
}
/*END*/

/*START Dropdown and Fill Color - */
.lp-input--light{
    color: #000;
    border-color: #000;
    &:after{
        border-color: #000;
    }
    &:hover{
        color: #555;
        &:after{
            border-color: #000;
        }
    }
    &:focus{
        border-color: #000;
   }
}
/*End Dropdown and Fill Color - */

Leave a Comment