index.less 2.3 KB

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