// // Select - JS // —————————————- .dark {
.form-select-js { position: relative; cursor: default; .form-select-js-choice { background-color: $select-bgr-color; border-color: $select-border-color; color: $select-font-color; } &.focus .form-select-js-choice , &:focus .form-select-js-choice { background-color: hsv-lighten($select-bgr-color, 21%, true); } &.hover .form-select-js-choice , &:hover .form-select-js-choice { background-color: hsv-lighten($select-bgr-color, 7%, true); } &.selected .form-select-js-choice , &:selected .form-select-js-choice { background-color: hsv-darken($select-bgr-color, -15%, true); } &.active .form-select-js-choice , &:active .form-select-js-choice { background-color: hsv-lighten($select-bgr-color, 15%, true); } &[aria-disabled=true] .form-select-js-choice { background-color: $select-disabled-bgr-color; border-color: $select-disabled-border-color; color: $select-disabled-font-color; } } .form-select-js-option-scroll-wrapper { background-color: $select-options-bgr-color; border: 0; color: $select-font-color-dropdown; .form-select-js-options { > li { &.focus, &:focus { background-color: hsv-darken($select-options-bgr-color, 15%, true); } &.hover { // do hover only by javascript to prevent hover after key event background-color: hsv-darken($select-options-bgr-color, 7%, true); } &.active, &:active { background-color: hsv-darken($select-options-bgr-color, 15%, true); } &[aria-disabled=true] { background-color: inherit; color: #eee; } &.selected { background-color: $select-options-active-bgr-color; color: $select-font-color-dropdown; &.focus, &:focus { background-color: hsv-darken($select-options-active-bgr-color, 15%, true); } &.hover { // do hover only by javascript to prevent hover after key event background-color: hsv-darken($select-options-active-bgr-color, 7%, true); } &.active, &:active { background-color: hsv-darken($select-options-active-bgr-color, 15%, true); } } } } }
}