* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
@import '../mixins/common.less';
@import '../custom.less';
@import './vars.less';
@cascader-prefix-cls: ~'@{css-prefix}cascader';
@input-prefix-cls: ~'@{css-prefix}input';
@tag-prefix-cls: ~'@{css-prefix}tag';
.@{cascader-prefix-cls} {
.inject-Cascader-vars();
display: inline-block;
position: relative;
font-size: var(--tv-Cascader-font-size);
&:not(.is-disabled):hover {
.@{input-prefix-cls}__inner {
cursor: pointer;
border-color: var(--tv-Cascader-hover-border-color);
}
}
.@{input-prefix-cls} {
cursor: pointer;
.@{input-prefix-cls}__inner {
text-overflow: ellipsis;
&:focus {
border-color: var(--tv-Cascader-focus-border-color);
}
}
.@{input-prefix-cls}__icon {
font-size: var(--tv-Cascader-input-icon-font-size);
}
&.is-focus .@{input-prefix-cls}__inner {
border-color: var(--tv-Cascader-focus-border-color);
}
.@{css-prefix}icon-arrow-down {
transition: transform 0.3s;
font-size: var(--tv-Cascader-font-size);
&.is-reverse {
transform: rotateZ(180deg);
}
}
.@{css-prefix}icon-circle-close:hover {
color: var(--tv-Cascader-icon-color);
}
.@{input-prefix-cls}__icon-close:hover {
fill: var(--tv-Cascader-close-hover-icon-color);
}
}
&--medium {
font-size: var(--tv-Cascader-medium-font-size);
line-height: var(--tv-Cascader-medium-line-height);
}
&--small {
font-size: var(--tv-Cascader-small-font-size);
line-height: var(--tv-Cascader-small-line-height);
}
&--mini {
font-size: var(--tv-Cascader-mini-font-size);
line-height: var(--tv-Cascader-mini-line-height);
}
&.is-disabled {
.@{cascader-prefix-cls}__label {
z-index: 2;
color: var(--tv-Cascader-disabled-text-color);
}
}
&.show-auto-width {
width: 100%;
}
&__dropdown {
.inject-Cascader-vars();
margin-left: var(--tv-Cascader-dropdown-margin-left);
margin-right: var(--tv-Cascader-dropdown-margin-right);
margin-top: var(--tv-Cascader-dropdown-margin-top);
margin-bottom: var(--tv-Cascader-dropdown-margin-bottom);
font-size: var(--tv-Cascader-font-size);
background: var(--tv-Cascader-dropdown-bg-color);
border: none;
border-radius: var(--tv-Cascader-border-radius);
box-shadow: var(--tv-Cascader-dropdown-box-shadow);
&.is-auto-size {
background: transparent;
border: none;
box-shadow: none;
.@{cascader-prefix-cls}-panel {
justify-content: flex-start;
align-items: flex-start;
border: solid 1px var(--tv-Cascader-border-color);
}
.@{cascader-prefix-cls}-menu {
background:var(--tv-Cascader-dropdown-bg-color);
.@{cascader-prefix-cls}-menu__wrap {
height: auto;
padding-bottom: 6px;
max-height: 220px;
}
}
}
}
&__tags {
position: absolute;
left: 0;
right: 30px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-wrap: wrap;
line-height: normal;
text-align: left;
box-sizing: border-box;
.@{tag-prefix-cls} {
display: inline-flex;
align-items: center;
max-width: 100%;
margin-left: var(--tv-Cascader-tag-margin-left);
margin-right: var(--tv-Cascader-tag-margin-right);
margin-top: var(--tv-Cascader-tag-margin-top);
margin-bottom: var(--tv-Cascader-tag-margin-bottom);
text-overflow: ellipsis;
background: var(--tv-Cascader-tag-bg-color);
&:not(.is-hit) {
border-color: transparent;
}
& > span {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
flex-basis: auto;
}
}
.@{tag-prefix-cls}__close {
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
flex-shrink: 0;
}
}
.@{css-prefix}icon-close {
flex: none;
background-color: var(--tv-Cascader-tag-icon-bg-color);
color: var(--tv-Cascader-tag-icon-color);
&:hover {
background-color: var(--tv-Cascader-tag-icon-hover-bg-color);
}
}
}
}
&.is-hover-expand {
height: 30px;
vertical-align: top;
.@{cascader-prefix-cls}-content {
position: relative;
}
.@{cascader-prefix-cls}__tags {
height: 26px;
overflow: hidden;
.@{tag-prefix-cls} {
max-width: 180px;
}
&-collapse {
visibility: visible;
position: static;
&.is-hidden {
visibility: hidden;
position: absolute;
}
}
}
&.@{cascader-prefix-cls}--medium,
&.@{cascader-prefix-cls}--small,
&.@{cascader-prefix-cls}--mini {
height: inherit;
}
&.@{cascader-prefix-cls}--small {
.@{cascader-prefix-cls}__tags {
height: 20px;
}
}
&.@{cascader-prefix-cls}--mini {
.@{cascader-prefix-cls}__tags {
height: 16px;
}
}
& .@{cascader-prefix-cls}__tags.is-expand-content {
height: auto;
max-height: 96px;
overflow: auto;
}
}
&__suggestion-panel {
border-radius: calc(var(--tv-Cascader-border-radius) + 4px);
min-height: 192px;
background: var(--tv-Cascader-dropdown-bg-color);
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
}
&__suggestion-list {
max-height: 204px;
margin-left: var(--tv-Cascader-list-margin-left);
margin-right: var(--tv-Cascader-list-margin-right);
margin-top: var(--tv-Cascader-list-margin-top);
margin-bottom: var(--tv-Cascader-list-margin-bottom);
padding-left: var(--tv-Cascader-list-padding-left);
padding-right: var(--tv-Cascader-list-padding-right);
padding-top: var(--tv-Cascader-list-padding-top);
padding-bottom: var(--tv-Cascader-list-padding-bottom);
font-size: var(--tv-Cascader-font-size);
color: var(--tv-Cascader-list-text-color);
text-align: center;
}
&__suggestion-panel &__suggestion-item {
display: flex;
justify-content: space-between;
align-items: center;
height: var(--tv-Cascader-item-height);
padding: 0 8px;
font-size: var(--tv-Cascader-item-font-size);
color: var(--tv-Cascader-search-input-text-color);
text-align: left;
outline: 0;
cursor: pointer;
&:focus,
&:hover {
background: var(--tv-Cascader-item-hover-bg-color);
}
&.is-checked {
color: var(--tv-Cascader-item-checked-text-color);
font-weight: 700;
.icon-check {
fill: var(--tv-Cascader-item-checked-text-color);
}
}
& > span {
margin-right: 10px;
}
}
&__empty-text {
margin-left: var(--tv-Cascader-empty-margin-left);
margin-right: var(--tv-Cascader-empty-margin-right);
margin-top: var(--tv-Cascader-empty-margin-top);
margin-bottom: var(--tv-Cascader-empty-margin-bottom);
color: var(--tv-Cascader-empty-text-color);
line-height: 200px;
}
&__search-input {
flex: 1;
height: 24px;
min-width: 60px;
margin-left: var(--tv-Cascader-search-input-margin-left);
padding-left: var(--tv-Cascader-search-input-padding-left);
color: var(--tv-Cascader-search-input-text-color);
font-size: var(--tv-Cascader-search-input-font-size);
border: none;
outline: 0;
box-sizing: border-box;
background: var(--tv-Input-bg-color);
}
&__search-input {
.placeholder(
@color: var(--tv-Cascader-search-input-placeholder-text-color)
);
}
}
.@{cascader-prefix-cls}-multiple {
width: var(--tv-Cascader-width);
}