index.less 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. @import './var.less';
  2. :root {
  3. --van-dialog-width: @dialog-width;
  4. --van-dialog-small-screen-width: @dialog-small-screen-width;
  5. --van-dialog-font-size: @dialog-font-size;
  6. --van-dialog-transition: @dialog-transition;
  7. --van-dialog-border-radius: @dialog-border-radius;
  8. --van-dialog-background-color: @dialog-background-color;
  9. --van-dialog-header-font-weight: @dialog-header-font-weight;
  10. --van-dialog-header-line-height: @dialog-header-line-height;
  11. --van-dialog-header-padding-top: @dialog-header-padding-top;
  12. --van-dialog-header-isolated-padding: @dialog-header-isolated-padding;
  13. --van-dialog-message-padding: @dialog-message-padding;
  14. --van-dialog-message-font-size: @dialog-message-font-size;
  15. --van-dialog-message-line-height: @dialog-message-line-height;
  16. --van-dialog-message-max-height: @dialog-message-max-height;
  17. --van-dialog-has-title-message-text-color: @dialog-has-title-message-text-color;
  18. --van-dialog-has-title-message-padding-top: @dialog-has-title-message-padding-top;
  19. --van-dialog-button-height: @dialog-button-height;
  20. --van-dialog-round-button-height: @dialog-round-button-height;
  21. --van-dialog-confirm-button-text-color: @dialog-confirm-button-text-color;
  22. }
  23. .van-dialog {
  24. top: 45%;
  25. left: 50%;
  26. width: var(--van-dialog-width);
  27. overflow: hidden;
  28. font-size: var(--van-dialog-font-size);
  29. background: var(--van-dialog-background-color);
  30. border-radius: var(--van-dialog-border-radius);
  31. backface-visibility: hidden; // avoid blurry text after scale animation
  32. transition: var(--van-dialog-transition);
  33. transition-property: transform, opacity;
  34. @media (max-width: 321px) {
  35. width: var(--van-dialog-small-screen-width);
  36. }
  37. &__header {
  38. padding-top: var(--van-dialog-header-padding-top);
  39. font-weight: var(--van-dialog-header-font-weight);
  40. line-height: var(--van-dialog-header-line-height);
  41. text-align: center;
  42. &--isolated {
  43. padding: var(--van-dialog-header-isolated-padding);
  44. }
  45. }
  46. &__content {
  47. &--isolated {
  48. display: flex;
  49. align-items: center;
  50. min-height: 104px;
  51. }
  52. }
  53. &__message {
  54. flex: 1;
  55. max-height: var(--van-dialog-message-max-height);
  56. padding: 26px var(--van-dialog-message-padding);
  57. overflow-y: auto;
  58. font-size: var(--van-dialog-message-font-size);
  59. line-height: var(--van-dialog-message-line-height);
  60. // allow newline character
  61. white-space: pre-wrap;
  62. text-align: center;
  63. word-wrap: break-word;
  64. -webkit-overflow-scrolling: touch;
  65. &--has-title {
  66. padding-top: var(--van-dialog-has-title-message-padding-top);
  67. color: var(--van-dialog-has-title-message-text-color);
  68. }
  69. &--left {
  70. text-align: left;
  71. }
  72. &--right {
  73. text-align: right;
  74. }
  75. &--justify {
  76. text-align: justify;
  77. }
  78. }
  79. &__footer {
  80. display: flex;
  81. overflow: hidden;
  82. user-select: none;
  83. }
  84. &__confirm,
  85. &__cancel {
  86. flex: 1;
  87. height: var(--van-dialog-button-height);
  88. margin: 0;
  89. border: 0;
  90. }
  91. &__confirm {
  92. &,
  93. &:active {
  94. color: var(--van-dialog-confirm-button-text-color);
  95. }
  96. }
  97. &--round-button {
  98. .van-dialog__footer {
  99. position: relative;
  100. height: auto;
  101. padding: var(--van-padding-xs) var(--van-padding-lg) var(--van-padding-md);
  102. }
  103. .van-dialog__message {
  104. padding-bottom: var(--van-padding-md);
  105. color: var(--van-text-color);
  106. }
  107. .van-dialog__confirm,
  108. .van-dialog__cancel {
  109. height: var(--van-dialog-round-button-height);
  110. }
  111. .van-dialog__confirm {
  112. color: var(--van-white);
  113. }
  114. }
  115. &-bounce-enter-from {
  116. transform: translate3d(-50%, -50%, 0) scale(0.7);
  117. opacity: 0;
  118. }
  119. &-bounce-leave-active {
  120. transform: translate3d(-50%, -50%, 0) scale(0.9);
  121. opacity: 0;
  122. }
  123. }