@import "../../style/themes/default"; @import "../../style/mixins/index"; @import "../../input/style/mixin"; @select-prefix-cls: ~"@{ant-prefix}-select"; .selection__clear() { display: inline-block; font-style: normal; vertical-align: baseline; text-align: center; text-transform: none; text-rendering: auto; opacity: 0; position: absolute; right: 8px; z-index: 1; background: @component-background; top: 50%; font-size: @font-size-base; color: @disabled-color; width: 12px; height: 12px; margin-top: -6px; line-height: 12px; cursor: pointer; transition: color 0.3s ease, opacity 0.15s ease; &:before { display: block; .iconfont-font("\e62e"); } &:hover { color: @text-color-secondary; } } .@{select-prefix-cls} { box-sizing: border-box; display: inline-block; position: relative; color: @text-color; font-size: @font-size-base; > ul > li > a { padding: 0; background-color: @component-background; } // arrow &-arrow { .iconfont-mixin(); position: absolute; top: 50%; right: 8px; line-height: 1; margin-top: -6px; .iconfont-size-under-12px(9px); * { display: none; } &:before { content: '\e61d'; transition: transform 0.2s ease; } } &-selection { outline: none; user-select: none; box-sizing: border-box; display: block; background-color: @component-background; border-radius: @border-radius-base; border: @border-width-base @border-style-base @border-color-base; transition: all .3s @ease-in-out; &:hover { .hover; } .@{select-prefix-cls}-focused &, &:focus, &:active { .active; } &__clear { .selection__clear(); } &:hover &__clear { opacity: 1; } &-selected-value { float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; padding-right: 14px; } } &-disabled { color: @disabled-color; } &-disabled &-selection { background: @input-disabled-bg; cursor: not-allowed; &:hover, &:focus, &:active { border-color: @border-color-base; box-shadow: none; } &__clear { display: none; visibility: hidden; pointer-events: none; } } &-disabled &-selection--multiple &-selection__choice { background: @background-color-active; color: #aaa; padding-right: 10px; &__remove { display: none; } } &-selection--single { height: @input-height-base; position: relative; cursor: pointer; } &-selection__rendered { display: block; margin-left: 7px; margin-right: 7px; position: relative; line-height: @input-height-base - 2px; // https://github.com/ant-design/ant-design/issues/3481#issuecomment-254721026 &:after { content: '.'; visibility: hidden; pointer-events: none; display: inline-block; width: 0; } } &-lg { .@{select-prefix-cls}-selection--single { height: @input-height-lg; } .@{select-prefix-cls}-selection__rendered { line-height: @input-height-lg - 2px; } .@{select-prefix-cls}-selection--multiple { min-height: @input-height-lg; .@{select-prefix-cls}-selection__rendered { li { height: @input-height-lg - 8px; line-height: @input-height-lg - 8px; } } .@{select-prefix-cls}-selection__clear { top: @input-height-lg / 2; } } } &-sm { .@{select-prefix-cls}-selection--single { height: @input-height-sm; } .@{select-prefix-cls}-selection__rendered { line-height: @input-height-sm - 2px; } .@{select-prefix-cls}-selection--multiple { min-height: @input-height-sm; .@{select-prefix-cls}-selection__rendered { li { height: @input-height-sm - 8px; line-height: @input-height-sm - 8px; } } .@{select-prefix-cls}-selection__clear { top: @input-height-sm / 2; } } } &-disabled &-selection__choice__remove { color: @disabled-color; cursor: default; &:hover { color: @disabled-color; } } &-search__field__wrap { display: inline-block; position: relative; } &-selection__placeholder, &-search__field__placeholder { // for TreeSelect compatibility position: absolute; top: 50%; left: 0; right: 9px; color: @input-placeholder-color; line-height: 20px; height: 20px; max-width: 100%; margin-top: -10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } &-search__field__placeholder { left: 8px; } &-search--inline { position: absolute; height: 100%; width: 100%; .@{select-prefix-cls}-selection--multiple & { float: left; position: static; } .@{select-prefix-cls}-search__field__wrap { width: 100%; height: 100%; } .@{select-prefix-cls}-search__field { border-width: 0; font-size: 100%; height: 100%; width: 100%; background: transparent; outline: 0; border-radius: @border-radius-base; } .@{select-prefix-cls}-search__field__mirror { position: absolute; top: 0; left: -9999px; white-space: pre; pointer-events: none; } > i { float: right; } } &-selection--multiple { min-height: @input-height-base; cursor: text; padding-bottom: 3px; .clearfix; .@{select-prefix-cls}-search--inline { width: auto; padding: 0; max-width: 100%; .@{select-prefix-cls}-search__field { max-width: 100%; width: 0.75em; } } .@{select-prefix-cls}-selection__rendered { margin-left: 5px; margin-bottom: -3px; height: auto; } > ul > li, .@{select-prefix-cls}-selection__rendered > ul > li { // for tree-select margin-top: 3px; height: @input-height-base - 8px; line-height: @input-height-base - 8px; } .@{select-prefix-cls}-selection__choice { color: @tag-default-color; background-color: @tag-default-bg; border-radius: 4px; cursor: default; float: left; margin-right: 4px; max-width: 99%; position: relative; overflow: hidden; transition: padding .3s @ease-in-out; padding: 0 20px 0 10px; &__disabled { padding: 0 10px; } } .@{select-prefix-cls}-selection__choice__content { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; transition: margin .3s @ease-in-out; } .@{select-prefix-cls}-selection__choice__remove { .iconfont-mixin(); color: @text-color-secondary; line-height: inherit; cursor: pointer; display: inline-block; font-weight: bold; transition: all 0.3s @ease-in-out; .iconfont-size-under-12px(8px); position: absolute; right: 4px; padding: 0 0 0 8px; &:hover { color: #404040; } &:before { content: "\e633"; } } .@{select-prefix-cls}-selection__clear { top: @input-height-base / 2; } } &-allow-clear &-selection--multiple &-selection__rendered { margin-right: 20px; // In case that clear button will overlap content } &-open { .@{select-prefix-cls}-arrow { .ie-rotate(2); -ms-transform: rotate(180deg); &:before { transform: rotate(180deg); } } .@{select-prefix-cls}-selection { .active(); } } &-combobox { .@{select-prefix-cls}-arrow { display: none; } .@{select-prefix-cls}-search--inline { height: 100%; width: 100%; float: none; } .@{select-prefix-cls}-search__field__wrap { width: 100%; height: 100%; } .@{select-prefix-cls}-search__field { width: 100%; height: 100%; position: relative; z-index: 1; transition: all .3s @ease-in-out; box-shadow: none; } } &-combobox&-allow-clear &-selection:hover &-selection__rendered { margin-right: 20px; // In case that clear button will overlap content } } .@{select-prefix-cls}-dropdown { &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft, &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft { animation-name: antSlideUpIn; } &.slide-up-enter.slide-up-enter-active&-placement-topLeft, &.slide-up-appear.slide-up-appear-active&-placement-topLeft { animation-name: antSlideDownIn; } &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft { animation-name: antSlideUpOut; } &.slide-up-leave.slide-up-leave-active&-placement-topLeft { animation-name: antSlideDownOut; } &-hidden { display: none; } background-color: @component-background; box-shadow: @box-shadow-base; border-radius: @border-radius-base; box-sizing: border-box; z-index: @zindex-dropdown; left: -9999px; top: -9999px; position: absolute; outline: none; overflow: hidden; font-size: @font-size-base; &-menu { outline: none; margin-bottom: 0; padding-left: 0; // Override default ul/ol list-style: none; max-height: 250px; overflow: auto; &-item-group-list { margin: 0; padding: 0; > .@{select-prefix-cls}-dropdown-menu-item { padding-left: 16px; } } &-item-group-title { color: @text-color-secondary; line-height: 1.5; padding: 8px; } &-item { position: relative; display: block; padding: 7px 8px; font-weight: normal; color: @text-color; white-space: nowrap; cursor: pointer; overflow: hidden; transition: background 0.3s ease; &:hover { background-color: @item-hover-bg; } &-active { background-color: @item-active-bg; } &-disabled { color: @disabled-color; cursor: not-allowed; &:hover { color: @disabled-color; background-color: @component-background; cursor: not-allowed; } } &-selected { &, &:hover { background-color: @background-color-base; font-weight: bold; color: @text-color; } } &-divider { height: 1px; margin: 1px 0; overflow: hidden; background-color: #e5e5e5; line-height: 0; } } } &&--multiple { .@{select-prefix-cls}-dropdown-menu-item { &:after { .iconfont-font("\e632"); color: transparent; .iconfont-size-under-12px(10px); transition: all 0.2s ease; position: absolute; top: 50%; transform: translateY(-50%); right: 8px; font-weight: bold; text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0; } &:hover:after { color: #ddd; } &-disabled:after { display: none; } &-selected:after, &-selected:hover:after { color: @primary-color; display: inline-block; } } } &-container-open, &-open { .@{select-prefix-cls}-dropdown { display: block; } } }