ten-design-vue
Version:
ten-vue
81 lines (69 loc) • 1.43 kB
text/less
/* dependencies input,icon,loading,radio,checkbox */
@import '../vars.less';
// cascader panel
.ten-cascader-panel {
display: flex;
}
.ten-cascader-menu {
min-width: 150px;
}
.ten-cascader-menu + .ten-cascader-menu {
border-left: @border-main-2;
}
.ten-cascader-menu {
&__title {
color: @text-color-lighter-2;
font-size: 14px;
font-weight: normal;
padding: 6px 8px;
padding-top: 16px;
}
}
// options
.ten-options {
position: relative;
max-height: 400px;
overflow-y: auto;
outline: none;
&--loading {
min-height: 100px;
}
&__empty {
text-align: center;
color: @text-color-lighter-2;
line-height: 48px;
}
}
.ten-option {
display: flex;
align-items: center;
padding: 14px 10px;
line-height: 20px;
cursor: pointer;
&__check {
margin-left: 0;
margin-right: 8px;
}
&__content {
flex: 1;
}
&__suffix-icon.ten-icon {
color: @text-color-lighter-2;
}
&--selected, &--selected &__suffix-icon.ten-icon {
color: @primary-color;
}
&--active, &--active &__suffix-icon.ten-icon {
color: @primary-color;
}
&:hover:not(.ten-option--disabled),
&:focus:not(.ten-option--disabled),
&.ten-option--focused:not(.ten-option--disabled) {
background: @primary-color-ligher-7;
}
// 禁用
&--disabled, &--disabled, &--disabled &__suffix-icon.ten-icon {
color: @disabled-color;
cursor: not-allowed;
}
}