.@{calendar-prefix-cls}-picker-container { position: absolute; z-index: @zindex-picker; &.slide-up-enter.slide-up-enter-active&-placement-topLeft, &.slide-up-enter.slide-up-enter-active&-placement-topRight, &.slide-up-appear.slide-up-appear-active&-placement-topLeft, &.slide-up-appear.slide-up-appear-active&-placement-topRight { animation-name: antSlideDownIn; } &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft, &.slide-up-enter.slide-up-enter-active&-placement-bottomRight, &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft, &.slide-up-appear.slide-up-appear-active&-placement-bottomRight { animation-name: antSlideUpIn; } &.slide-up-leave.slide-up-leave-active&-placement-topLeft, &.slide-up-leave.slide-up-leave-active&-placement-topRight { animation-name: antSlideDownOut; } &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft, &.slide-up-leave.slide-up-leave-active&-placement-bottomRight { animation-name: antSlideUpOut; } } .@{calendar-prefix-cls}-picker { position: relative; display: inline-block; outline: none; font-size: @font-size-base; transition: opacity 0.3s; &-input { outline: none; } &:hover &-input { border-color: @primary-color; } &-clear { opacity: 0; pointer-events: none; z-index: 1; position: absolute; right: 7px; background: #fff; top: 50%; font-size: @font-size-base; color: #ccc; width: 14px; height: 14px; margin-top: -7px; line-height: 14px; cursor: pointer; transition: color 0.3s, opacity 0.3s; &:hover { color: @text-color-secondary; } } &:hover &-clear { opacity: 1; pointer-events: auto; } &-icon { position: absolute; user-select: none; transition: all .3s; width: 12px; height: 12px; line-height: 12px; right: 8px; color: @text-color-secondary; top: 50%; margin-top: -6px; &:after { content: "\e6bb"; font-family: "anticon"; font-size: @font-size-base; color: @text-color-secondary; display: inline-block; line-height: 1; vertical-align: bottom; } } }