12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- @import './var.less';
- :root {
- --van-cascader-header-height: @cascader-header-height;
- --van-cascader-header-padding: @cascader-header-padding;
- --van-cascader-title-font-size: @cascader-title-font-size;
- --van-cascader-title-line-height: @cascader-title-line-height;
- --van-cascader-close-icon-size: @cascader-close-icon-size;
- --van-cascader-close-icon-color: @cascader-close-icon-color;
- --van-cascader-selected-icon-size: @cascader-selected-icon-size;
- --van-cascader-tabs-height: @cascader-tabs-height;
- --van-cascader-active-color: @cascader-active-color;
- --van-cascader-options-height: @cascader-options-height;
- --van-cascader-option-disabled-color: @cascader-option-disabled-color;
- --van-cascader-tab-color: @cascader-tab-color;
- --van-cascader-unselected-tab-color: @cascader-unselected-tab-color;
- }
- .van-cascader {
- &__header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- height: var(--van-cascader-header-height);
- padding: var(--van-cascader-header-padding);
- }
- &__title {
- font-weight: var(--van-font-weight-bold);
- font-size: var(--van-cascader-title-font-size);
- line-height: var(--van-cascader-title-line-height);
- }
- &__close-icon {
- color: var(--van-cascader-close-icon-color);
- font-size: var(--van-cascader-close-icon-size);
- }
- &__tabs {
- &.van-tabs--line .van-tabs__wrap {
- height: var(--van-cascader-tabs-height);
- }
- }
- &__tab {
- color: var(--van-cascader-tab-color);
- font-weight: var(--van-font-weight-bold);
- &--unselected {
- color: var(--van-cascader-unselected-tab-color);
- font-weight: normal;
- }
- }
- &__option {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 10px var(--van-padding-md);
- font-size: var(--van-font-size-md);
- line-height: var(--van-line-height-md);
- cursor: pointer;
- &:active {
- background-color: var(--van-active-color);
- }
- &--selected {
- color: var(--van-cascader-active-color);
- font-weight: var(--van-font-weight-bold);
- }
- &--disabled {
- color: var(--van-cascader-option-disabled-color);
- cursor: not-allowed;
- &:active {
- background-color: transparent;
- }
- }
- }
- &__selected-icon {
- font-size: var(--van-cascader-selected-icon-size);
- }
- &__options {
- box-sizing: border-box;
- height: var(--van-cascader-options-height);
- padding-top: 6px;
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
- }
- }
|