// // Select - JS // ---------------------------------------- .form-select-js { position: relative; cursor: default; font-size: $font-size-regular; // prevent font-size inherit in other modules / scopes line-height: $line-height-regular; // set line height since it was resetted by normalize .form-select-js-choice { background-color: $select-bgr-color; border: 1px solid $select-border-color; border-radius: $input-border-radius; color: $select-font-color; display: block; padding: $input-padding; padding-right: 35px; width: 100%; text-decoration: none; -webkit-appearance: none; text-align: left; @include transition(all $transition-time-out $transition-function); &:before { // caret content: 'd'; float: right; font-family: 'TeleIconUi'; font-size: 24px; line-height: 1px; margin-top: 10px; margin-right: -29px; } } &.focus .form-select-js-choice , &:focus .form-select-js-choice { border-color: hsv-darken($select-border-color, 21%, true); background-color: hsv-darken($select-bgr-color, 21%, true); outline: 0; } &.hover .form-select-js-choice , &:hover .form-select-js-choice { border-color: hsv-darken($select-border-color, 7%, true); background-color: hsv-darken($select-bgr-color, 7%, true); @include transition($transition-time-in, '-duration'); } &.selected .form-select-js-choice , &:selected .form-select-js-choice { border-color: hsv-darken($select-border-color, -15%, true); background-color: hsv-darken($select-bgr-color, -15%, true); } &.active .form-select-js-choice , &:active .form-select-js-choice { border-color: hsv-darken($select-border-color, 15%, true); background-color: hsv-darken($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; cursor: not-allowed; } } .form-select-js-option-scroll-wrapper { display: none; position: fixed; background-color: $select-options-bgr-color; border: 1px solid $input-border-color; border-radius: $input-border-radius; margin-top: building-units(1); margin-bottom: building-units(1); z-index: $z-index-select-options; overflow-y: auto; .in > & { display: block; } .form-select-js-options { margin: 0; padding: 0; list-style: none; > li { padding: $select-options-padding; @include transition(all $transition-time-out $transition-function); outline: 0; cursor: pointer; &.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); @include transition($transition-time-in, '-duration'); } &.active, &:active { background-color: hsv-darken($select-options-bgr-color, 15%, true); } &[aria-disabled=true] { background-color: inherit; color: #eee; cursor: not-allowed; } &.selected { background-color: $select-options-active-bgr-color; color: $font-color-regular; &.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); } } } } } .form-select-js-choice-input { width: 0; position: absolute; outline: 0; background: none; opacity: 0; clip: rect(0, 0, 0, 0); }