index.less 2.4 KB

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