index.less 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. @import './var.less';
  2. :root {
  3. --van-cascader-header-height: @cascader-header-height;
  4. --van-cascader-header-padding: @cascader-header-padding;
  5. --van-cascader-title-font-size: @cascader-title-font-size;
  6. --van-cascader-title-line-height: @cascader-title-line-height;
  7. --van-cascader-close-icon-size: @cascader-close-icon-size;
  8. --van-cascader-close-icon-color: @cascader-close-icon-color;
  9. --van-cascader-selected-icon-size: @cascader-selected-icon-size;
  10. --van-cascader-tabs-height: @cascader-tabs-height;
  11. --van-cascader-active-color: @cascader-active-color;
  12. --van-cascader-options-height: @cascader-options-height;
  13. --van-cascader-option-disabled-color: @cascader-option-disabled-color;
  14. --van-cascader-tab-color: @cascader-tab-color;
  15. --van-cascader-unselected-tab-color: @cascader-unselected-tab-color;
  16. }
  17. .van-cascader {
  18. &__header {
  19. display: flex;
  20. align-items: center;
  21. justify-content: space-between;
  22. height: var(--van-cascader-header-height);
  23. padding: var(--van-cascader-header-padding);
  24. }
  25. &__title {
  26. font-weight: var(--van-font-weight-bold);
  27. font-size: var(--van-cascader-title-font-size);
  28. line-height: var(--van-cascader-title-line-height);
  29. }
  30. &__close-icon {
  31. color: var(--van-cascader-close-icon-color);
  32. font-size: var(--van-cascader-close-icon-size);
  33. }
  34. &__tabs {
  35. &.van-tabs--line .van-tabs__wrap {
  36. height: var(--van-cascader-tabs-height);
  37. }
  38. }
  39. &__tab {
  40. color: var(--van-cascader-tab-color);
  41. font-weight: var(--van-font-weight-bold);
  42. &--unselected {
  43. color: var(--van-cascader-unselected-tab-color);
  44. font-weight: normal;
  45. }
  46. }
  47. &__option {
  48. display: flex;
  49. align-items: center;
  50. justify-content: space-between;
  51. padding: 10px var(--van-padding-md);
  52. font-size: var(--van-font-size-md);
  53. line-height: var(--van-line-height-md);
  54. cursor: pointer;
  55. &:active {
  56. background-color: var(--van-active-color);
  57. }
  58. &--selected {
  59. color: var(--van-cascader-active-color);
  60. font-weight: var(--van-font-weight-bold);
  61. }
  62. &--disabled {
  63. color: var(--van-cascader-option-disabled-color);
  64. cursor: not-allowed;
  65. &:active {
  66. background-color: transparent;
  67. }
  68. }
  69. }
  70. &__selected-icon {
  71. font-size: var(--van-cascader-selected-icon-size);
  72. }
  73. &__options {
  74. box-sizing: border-box;
  75. height: var(--van-cascader-options-height);
  76. padding-top: 6px;
  77. overflow-y: auto;
  78. -webkit-overflow-scrolling: touch;
  79. }
  80. }