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

126 lines
2.5 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;
2023-04-24 18:19:32 +08:00
padding-left: px2rem(10px);
border: 1px solid var(--Cascader-border-color);
&::-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;
2023-04-24 18:19:32 +08:00
padding: px2rem(6px) 0 px2rem(6px) px2rem(10px);
font-size: var(--fontSizeMd);
line-height: var(--Cascader-option-lineHeight);
cursor: pointer;
position: relative;
2023-04-24 18:19:32 +08:00
&.is-active {
background-color: var(--Cascader-border-active-bg-color);
}
&.selected {
2023-04-24 18:19:32 +08:00
.#{$ns}Cascader-option--text {
color: var(--primary);
}
}
&.disabled {
span {
color: gray;
}
}
&--text {
2023-04-24 18:19:32 +08:00
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
user-select: none;
2023-04-24 18:19:32 +08:00
&.disabled {
color: var(--Cascader-option-disable-color);
}
}
2023-04-24 18:19:32 +08:00
&-arrow {
flex: 1;
text-align: right;
padding-right: px2rem(6px);
> svg {
transform: scale(0.8);
}
}
&-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);
}
}