index.less 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. @import './var.less';
  2. @import '../style/mixins/hairline';
  3. :root {
  4. --van-action-sheet-max-height: @action-sheet-max-height;
  5. --van-action-sheet-header-height: @action-sheet-header-height;
  6. --van-action-sheet-header-font-size: @action-sheet-header-font-size;
  7. --van-action-sheet-description-color: @action-sheet-description-color;
  8. --van-action-sheet-description-font-size: @action-sheet-description-font-size;
  9. --van-action-sheet-description-line-height: @action-sheet-description-line-height;
  10. --van-action-sheet-item-background: @action-sheet-item-background;
  11. --van-action-sheet-item-font-size: @action-sheet-item-font-size;
  12. --van-action-sheet-item-line-height: @action-sheet-item-line-height;
  13. --van-action-sheet-item-text-color: @action-sheet-item-text-color;
  14. --van-action-sheet-item-disabled-text-color: @action-sheet-item-disabled-text-color;
  15. --van-action-sheet-subname-color: @action-sheet-subname-color;
  16. --van-action-sheet-subname-font-size: @action-sheet-subname-font-size;
  17. --van-action-sheet-subname-line-height: @action-sheet-subname-line-height;
  18. --van-action-sheet-close-icon-size: @action-sheet-close-icon-size;
  19. --van-action-sheet-close-icon-color: @action-sheet-close-icon-color;
  20. --van-action-sheet-close-icon-padding: @action-sheet-close-icon-padding;
  21. --van-action-sheet-cancel-text-color: @action-sheet-cancel-text-color;
  22. --van-action-sheet-cancel-padding-top: @action-sheet-cancel-padding-top;
  23. --van-action-sheet-cancel-padding-color: @action-sheet-cancel-padding-color;
  24. --van-action-sheet-loading-icon-size: @action-sheet-loading-icon-size;
  25. }
  26. .van-action-sheet {
  27. display: flex;
  28. flex-direction: column;
  29. max-height: var(--van-action-sheet-max-height);
  30. overflow: hidden;
  31. color: var(--van-action-sheet-item-text-color);
  32. &__content {
  33. flex: 1 auto;
  34. overflow-y: auto;
  35. -webkit-overflow-scrolling: touch;
  36. }
  37. &__item,
  38. &__cancel {
  39. display: block;
  40. width: 100%;
  41. padding: 14px var(--van-padding-md);
  42. font-size: var(--van-action-sheet-item-font-size);
  43. background: var(--van-action-sheet-item-background);
  44. border: none;
  45. cursor: pointer;
  46. &:active {
  47. background-color: var(--van-active-color);
  48. }
  49. }
  50. &__item {
  51. line-height: var(--van-action-sheet-item-line-height);
  52. &--loading,
  53. &--disabled {
  54. color: var(--van-action-sheet-item-disabled-text-color);
  55. &:active {
  56. background-color: var(--van-action-sheet-item-background);
  57. }
  58. }
  59. &--disabled {
  60. cursor: not-allowed;
  61. }
  62. &--loading {
  63. cursor: default;
  64. }
  65. }
  66. &__cancel {
  67. flex-shrink: 0;
  68. box-sizing: border-box;
  69. color: var(--van-action-sheet-cancel-text-color);
  70. }
  71. &__subname {
  72. margin-top: var(--van-padding-xs);
  73. color: var(--van-action-sheet-subname-color);
  74. font-size: var(--van-action-sheet-subname-font-size);
  75. line-height: var(--van-action-sheet-subname-line-height);
  76. }
  77. &__gap {
  78. display: block;
  79. height: var(--van-action-sheet-cancel-padding-top);
  80. background: var(--van-action-sheet-cancel-padding-color);
  81. }
  82. &__header {
  83. flex-shrink: 0;
  84. font-weight: var(--van-font-weight-bold);
  85. font-size: var(--van-action-sheet-header-font-size);
  86. line-height: var(--van-action-sheet-header-height);
  87. text-align: center;
  88. }
  89. &__description {
  90. position: relative;
  91. flex-shrink: 0;
  92. padding: 20px var(--van-padding-md);
  93. color: var(--van-action-sheet-description-color);
  94. font-size: var(--van-action-sheet-description-font-size);
  95. line-height: var(--van-action-sheet-description-line-height);
  96. text-align: center;
  97. &::after {
  98. .hairline-bottom(var(--van-border-color), var(--van-padding-md), var(--van-padding-md));
  99. }
  100. }
  101. &__loading-icon .van-loading__spinner {
  102. width: var(--van-action-sheet-loading-icon-size);
  103. height: var(--van-action-sheet-loading-icon-size);
  104. }
  105. &__close {
  106. position: absolute;
  107. top: 0;
  108. right: 0;
  109. padding: var(--van-action-sheet-close-icon-padding);
  110. color: var(--van-action-sheet-close-icon-color);
  111. font-size: var(--van-action-sheet-close-icon-size);
  112. line-height: inherit;
  113. }
  114. }