@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序
66 lines (65 loc) • 2 kB
CSS
/* #ifdef harmony */
/* #endif */
/* #ifndef harmony */
/* #endif */
.nut-cascader {
width: 100%;
font-size: var(--nutui-cascader-font-size, var(--nutui-font-size-base, 14px));
}
.nut-cascader .nut-tabs-titles {
padding: var(--nutui-cascader-tabs-item-padding, 0 10px);
background: var(--nutui-color-background-overlay, #ffffff);
}
.nut-cascader .nut-tabs-titles-item {
flex: initial;
min-width: auto;
width: auto;
padding: var(--nutui-cascader-tabs-item-padding, 0 10px);
white-space: nowrap;
}
.nut-cascader .nut-tabpane {
padding: 0;
background: var(--nutui-color-background-overlay, #ffffff);
}
.nut-cascader-pane {
display: block;
width: 100%;
padding-top: var(--nutui-cascader-pane-paddingTop, 10px);
height: var(--nutui-cascader-pane-height, 342px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nut-cascader-item {
display: flex;
align-items: center;
justify-content: center;
padding: var(--nutui-cascader-item-padding, 10px 20px);
margin: var(--nutui-cascader-item-margin, 0px);
border-bottom: var(--nutui-cascader-item-border-bottom, 0px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
font-size: var(--nutui-cascader-item-font-size, var(--nutui-font-size-base, 14px));
color: var(--nutui-cascader-item-color, var(--nutui-color-title, #1a1a1a));
cursor: pointer;
}
.nut-cascader-item.disabled {
opacity: 0.6;
cursor: not-allowed;
}
.nut-cascader-item.active:not(.disabled) {
color: var(--nutui-cascader-item-active-color, var(--nutui-color-primary, #ff0f23));
}
.nut-cascader-item.active .nut-cascader-item-icon-check {
visibility: visible;
color: inherit;
}
.nut-cascader-item-title {
flex: 1;
}
.nut-cascader .nut-icon-checklist {
margin-left: var(--nutui-cascader-icon-checklist-marginLeft, 10px);
visibility: hidden;
}
[dir=rtl] .nut-cascader .nut-icon-checklist,
.nut-rtl .nut-cascader .nut-icon-checklist {
margin-left: 0;
margin-right: var(--nutui-cascader-icon-checklist-marginLeft, 10px);
}