index.less 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. @import (reference) './variable.less';
  2. @import (reference) '../style/mixins/hairline.less';
  3. @actionsheetPrefix: ant-actionsheet;
  4. .@{actionsheetPrefix} {
  5. padding-left: 24 * @rpx;
  6. padding-right: 24 * @rpx;
  7. padding-bottom: constant(safe-area-inset-bottom);
  8. padding-bottom: env(safe-area-inset-bottom);
  9. &-title-wrap {
  10. text-align: center;
  11. position: relative;
  12. margin: 0 -24 * @rpx;
  13. }
  14. &-title-content {
  15. display: inline-block;
  16. text-align: left;
  17. padding: 36 * @rpx 30 * @rpx;
  18. font-size: 30 * @rpx;
  19. color: @COLOR_TEXT_ASSIST;
  20. .hairline('bottom', @COLOR_BORDER);
  21. }
  22. &-list {
  23. margin: 0 -24 * @rpx;
  24. }
  25. &-list-item {
  26. color: @COLOR_TEXT_PRIMARY;
  27. padding: 32 * @rpx 30 * @rpx;
  28. text-align: center;
  29. position: relative;
  30. font-size: 36 * @rpx;
  31. .hairline('bottom', @COLOR_BORDER);
  32. &-title-danger {
  33. color: @actionsheet-danger-color;
  34. font-weight: bold;
  35. }
  36. &-description {
  37. color: @COLOR_TEXT_ASSIST;
  38. font-size: 28 * @rpx;
  39. line-height: 40 * @rpx;
  40. margin-top: 8 * @rpx;
  41. }
  42. &-active {
  43. background-color: @COLOR_BORDER;
  44. }
  45. &:last-child {
  46. &&:after {
  47. display: none;
  48. }
  49. }
  50. }
  51. &-list-item-disabled {
  52. .@{actionsheetPrefix}-list-item-icon,
  53. .@{actionsheetPrefix}-list-item-content {
  54. opacity: @opacity-disabled;
  55. }
  56. }
  57. &-cancel-gap {
  58. height: 16 * @rpx;
  59. background: @COLOR_BACKGROUND;
  60. margin: 0 -24 * @rpx;
  61. }
  62. &-cancel {
  63. color: @COLOR_TEXT_PRIMARY;
  64. padding: 32 * @rpx 30 * @rpx;
  65. font-size: 36 * @rpx;
  66. text-align: center;
  67. margin: 0 -24 * @rpx;
  68. &:active {
  69. background-color: @COLOR_BORDER;
  70. }
  71. }
  72. }
  73. .@{actionsheetPrefix}-icon {
  74. .@{actionsheetPrefix}-title-wrap {
  75. text-align: left;
  76. }
  77. .@{actionsheetPrefix}-list-item {
  78. display: flex;
  79. align-items: center;
  80. &-icon {
  81. height: @actionsheet-icon-height;
  82. flex: 0 0 @actionsheet-icon-width;
  83. margin-right: 24 * @rpx;
  84. background-size: contain;
  85. background-position: center center;
  86. background-repeat: no-repeat;
  87. }
  88. &-content {
  89. text-align: left;
  90. }
  91. }
  92. }