@import "../base"; @import "./config"; @import "../input/config"; .root { position: relative; width: inherit; margin-bottom: $dropdown-offset; color: $color-text; cursor: pointer; border-bottom: 1px solid $color-divider; &:not(.active) { > .values { max-height: 0; visibility: hidden; } } &.active { > .label, > .value { opacity: .5; } > .values { max-height: $dropdown-overflow-max-height; visibility: visible; box-shadow: $zdepth-shadow-1; } } &.disabled { color: $color-text-secondary; pointer-events: none; cursor: normal; border-bottom-style: dotted; > .value:after { transform: scale(0); } } } .label { font-size: $font-size-tiny; color: $color-text-secondary; } .values { position: absolute; z-index: 2; overflow-x: hidden; overflow-y: scroll; list-style: none; background-color: $dropdown-color-white; border-radius: $dropdown-value-border-radius; transition-timing-function: $animation-curve-default; transition-duration: $animation-duration; transition-property: max-height, box-shadow; > * { position: relative; padding: $unit; overflow: hidden; cursor: pointer; &:hover { background-color: $dropdown-value-hover-background; } &.selected { color: $dropdown-color-primary; } } &:not(.up) { top: 0; bottom: auto; } &.up { top: auto; bottom: 0; } } .value { display: block; > span { display: inline-block; height: $input-field-height; font-size: $input-field-font-size; line-height: $input-field-height; } > :not(span) { margin: ($dropdown-offset / 2) 0; } &:after { $size: ($input-field-height / 7); $border: $size solid transparent; position: absolute; right: ($dropdown-offset / 2); bottom: $dropdown-offset; width: 0; height: 0; content: ""; border-top: $size solid $color-divider; border-right: $border; border-left: $border; transition: transform $animation-duration $animation-curve-default; } } .ripple { z-index: 0; background-color: $color-divider; }