amis2/scss/components/_cascader.scss
龙少 1c21a0c977
fix: 移动端: 城市选择器数据结构调整、日期弹层高度优化、PopUp按钮样式修改 (#3313)
* fix: useMobileUI接受位置修改

* fix:移动端禁用inline模式

* feat: 移动端城市选择器优化

* fix: 颜色选择器移动端禁止输入否则键盘和popup冲突

* fix: 弹出框高度调整

* fix: 去除标题

* fix: 禁止focus选中

* Update _picker-columns.scss

* Update _picker-columns.scss

* fix: 修复城市选择器适配picker数据结构变化

* fix: 日期弹出层高度修改

* fix: PopUp按钮统一使用text形式

Co-authored-by: zhangxulong <zhangxulong@baidu.com>
2021-12-30 19:43:12 +08:00

103 lines
2.0 KiB
SCSS

.#{$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(370px);
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);
}
}