amis2/packages/amis-ui/scss/components/_cascader.scss

103 lines
2.0 KiB
SCSS
Raw Normal View History

.#{$ns}Cascader-tabs {
display: flex;
&.scrollable {
display: block;
overflow-x: auto;
white-space: nowrap;
&::-webkit-scrollbar {
display: none;
}
}
}
.#{$ns}Cascader-tab {
flex: 1;
width: calc((100vw - 20px) / 3);
height: px2rem(260px);
overflow-y: auto;
display: inline-block;
&::-webkit-scrollbar {
display: none;
}
}
.#{$ns}Cascader {
width: 100%;
padding: 0 10px;
&-Nav {
overflow-x: auto;
&Item {
display: inline-block;
margin-right: px2rem(10px);
list-style: none;
cursor: pointer;
user-select: none;
padding: 0 px2rem(6px);
}
}
&-btnGroup {
display: flex;
justify-content: space-between;
align-items: center;
height: px2rem(60px);
}
&-options {
box-sizing: border-box;
height: var(--Cascader-option-height);
padding-top: px2rem(6px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
padding: 0;
}
&-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: px2rem(6px) 0;
font-size: var(--fontSizeMd);
line-height: var(--Cascader-option-lineHeight);
cursor: pointer;
position: relative;
&.selected {
span {
color: var(--primary);
}
}
&.disabled {
span {
color: gray;
}
}
&--text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
user-select: none;
}
&-selectedNum {
min-width: px2rem(16px);
height: px2rem(16px);
line-height: px2rem(16px);
border-radius: 100%;
text-align: center;
background: var(--Form-select-menu-onActive-color);
color: var(--white) !important;
font-size: var(--fontSizeSm);
display: inline-block;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
}
&-icon {
color: var(--primary);
}
&-tab {
padding: 0;
}
&-btnCancel {
color: var(--PopUp-cancelAction-color);
}
}