acud
Version:
acg react 组件库
437 lines (365 loc) • 11.4 kB
text/less
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import './mixin';
@cascader-prefix-cls: ~'@{acud-prefix}-cascader';
.@{cascader-prefix-cls} {
.reset-component();
&-input.@{acud-prefix}-input {
position: static;
width: 100%;
padding-right: 8 * @P;
height: 30px;
line-height: 30px;
border: none;
&,
& > input {
cursor: pointer;
background-color: transparent;
}
&:hover {
background-color: transparent;
}
&[disabled],
&[aria-disabled="true"] {
&,
&:hover,
&:focus,
&:active {
background-color: transparent;
}
}
}
// &-picker-show-search &-input.@{acud-prefix}-input {
// position: relative;
// }
&-picker {
.reset-component();
.cascader-picker();
.basic-config(@cascader-picker-tp, @cascader-picker-p);
&-with-input-value &-label {
color: transparent;
}
&:focus,
&-focused,
&-expand {
.@{cascader-prefix-cls}-input.@{acud-prefix}-input {
border-color: @p5-hover-border-color;
}
}
&-focused {
.property-setting(@cascader-picker-p, 'hover', border-color);
}
&-disabled {
cursor: not-allowed;
.@{cascader-prefix-cls}-input.@{acud-prefix}-input {
&,
& > input {
cursor: not-allowed;
}
}
}
&-borderless .@{cascader-prefix-cls}-input {
border-color: transparent ;
box-shadow: none ;
}
// &-show-search&-focused {
// // color: @disabled-color;
// }
&-label {
.basic-tp-config(tp6);
&[disabled],
&[aria-disabled="true"] {
&,
&:hover,
&:focus,
&:active {
color: @G4;
}
}
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 20px;
margin-top: -10px;
padding: 0 11 * @P 0 3 * @P;
overflow: hidden;
line-height: 20px;
white-space: nowrap;
text-overflow: ellipsis;
}
&-clear {
position: absolute;
top: 50%;
right: 7.5 * @P;
margin-top: -2 * @P;
}
// arrow
&-arrow {
&.@{iconfont-css-prefix} {
.basic-tp-config(tp7);
}
position: absolute;
top: 50%;
right: @padding-m;
width: 4 * @P;
height: 4 * @P;
margin-top: -2 * @P;
font-size: @T2;
line-height: 4 * @P;
transition: transform .48s;
&-expand {
transform: rotate(180deg);
}
& > svg {
width: 4 * @P;
height: 4 * @P;
}
}
&-multi {
.@{cascader-prefix-cls}-tags {
position: relative;
display: flex;
padding: 1px 12 * @P 1px @P;
flex: auto;
flex-wrap: wrap;
max-width: 100%;
max-height: 60px;
overflow-y: auto;
.@{cascader-prefix-cls}-input-wrap {
position: relative;
max-width: 100%;
.@{cascader-prefix-cls}-input,
.@{cascader-prefix-cls}-mirror {
padding: 0 0 0 2 * @P;
}
.@{cascader-prefix-cls}-input {
margin: 2px 0;
width: 100%;
min-width: 4.1px;
height: 6 * @P;
line-height: 6 * @P;
& > input {
height: 6 * @P;
line-height: 6 * @P;
padding: 0;
}
}
.@{cascader-prefix-cls}-mirror {
position: absolute;
top: 0;
left: 0;
z-index: 999;
white-space: pre;
visibility: hidden;
line-height: initial;
}
}
.@{cascader-prefix-cls}-tag-wrap {
flex: none;
align-self: center;
max-width: 100%;
.@{cascader-prefix-cls}-tag {
margin: 2px @P 2px 0;
padding: 0 8px;
vertical-align: middle;
&[disabled],
&[aria-disabled="true"] {
&,
&:hover,
&:focus,
&:active {
color: @G4;
background-color: @G8;
}
.@{acud-prefix}-tag-close-icon {
color: @G6;
}
}
&-mixed {
.@{acud-prefix}-tag-render-container > span:first-child {
max-width: 96px; // 12px * 8字符
overflow: hidden;
text-overflow: ellipsis;
}
}
.@{acud-prefix}-tag-close-icon {
margin-left: 2 * @P;
& > svg {
width: 1em;
}
}
}
&:first-of-type {
.@{cascader-prefix-cls}-tag {
margin-top: 3px;
}
}
& + .@{cascader-prefix-cls}-input-wrap {
.@{cascader-prefix-cls}-input,
.@{cascader-prefix-cls}-mirror {
padding: 1px;
}
}
}
}
}
}
&-picker-lg > &-input.@{acud-prefix}-input {
height: @cascader-picker-height-lg;
}
&-menus {
position: absolute;
z-index: @cascader-menus-z-index;
white-space: nowrap;
ul,
ol {
margin: 0;
list-style: none;
}
&-empty,
&-hidden {
display: none;
}
.@{acud-prefix}-empty {
.reset-component();
line-height: @cascader-menu-item-height;
}
&.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
&.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
animation-name: acudSlideUpIn;
}
&.slide-up-enter.slide-up-enter-active&-placement-topLeft,
&.slide-up-appear.slide-up-appear-active&-placement-topLeft {
animation-name: acudSlideDownIn;
}
&.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
animation-name: acudSlideUpOut;
}
&.slide-up-leave.slide-up-leave-active&-placement-topLeft {
animation-name: acudSlideDownOut;
}
}
&-menu {
.property-setting(@cascader-menu-item-p, 'default', background-color);
position: absolute;
display: inline-block;
min-width: @cascader-menu-min-width;
max-width: @cascader-menu-max-width;
margin: 0;
padding: @P 0;
max-height: @cascader-menu-max-height;
font-size: @cascader-menus-font-size;
overflow-y: auto;
vertical-align: top;
list-style: none;
box-shadow: @shadow-1;
border-radius: @R3;
-ms-overflow-style: -ms-autohiding-scrollbar;
// transition: top .48s;
&:first-child {
position: relative;
}
&-multi {
min-width: @cascader-menu-multi-min-width;
max-width: @cascader-menu-multi-max-width;
}
&-empty &-item-multi-check-all,
&-empty &-item-content &-item-checkbox .@{acud-prefix}-checkbox {
display: none;
}
&-search:not(&-empty) {
.@{cascader-prefix-cls}-menu {
&-item:first-child {
.property-setting(@cascader-menu-item-p, 'hover', background-color);
}
}
}
&-sm {
border-radius: @R2;
}
}
&-menu-wrap-hidden {
opacity: 0;
}
&-menu&-submenu {
position: absolute;
left: 100%;
top: -@P;
margin-left: 1px;
}
&-menu-item {
.basic-config(@cascader-menu-item-tp, @cascader-menu-item-p);
display: flex;
justify-content: space-between;
padding: 0 3 * @P;
height: @cascader-menu-item-height;
line-height: @cascader-menu-item-height;
cursor: pointer;
white-space: nowrap;
text-overflow: ellipsis;
transition: all .3s;
&-content {
display: flex;
overflow: hidden;
text-overflow: ellipsis;
}
&-checkbox.@{acud-prefix}-checkbox-wrapper {
vertical-align: middle;
margin-right: 2 * @P;
overflow: hidden;
text-overflow: ellipsis;
.@{acud-prefix}-checkbox {
top: 0;
& + span {
overflow: hidden;
text-overflow: ellipsis;
}
}
}
&-label {
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
&-disabled {
cursor: not-allowed;
&:hover {
background: transparent;
}
}
.@{cascader-prefix-cls}-menu-empty & {
cursor: default;
pointer-events: none;
}
&-hovered {
.property-setting(@cascader-menu-item-p, 'hover', background-color);
}
&-active:not(&-disabled) {
color: @B6;
}
&-expand {
position: relative;
padding-right: 2 * @P;
}
&-expand &-expand-icon,
&-loading-icon {
.basic-tp-config(tp7);
}
& &-keyword {
color: @B6;
}
}
&-tag-tooltip,
&-picker-label-tooltip,
&-menu-item-tooltip {
&.@{acud-prefix}-tooltip {
max-width: initial;
}
}
&-tag-tooltip-label-item:not(:first-child) {
margin-top: 8px;
}
}
// @import './rtl';