index.less 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. @import '../style/var';
  2. .van-dialog {
  3. position: fixed;
  4. top: 50%;
  5. left: 50%;
  6. overflow: hidden;
  7. width: @dialog-width;
  8. font-size: @dialog-font-size;
  9. transition: @dialog-transition;
  10. border-radius: @dialog-border-radius;
  11. background-color: @dialog-background-color;
  12. transform: translate3d(-50%, -50%, 0);
  13. backface-visibility: hidden; // avoid blurry text after scale animation
  14. &__header {
  15. text-align: center;
  16. font-weight: @dialog-header-font-weight;
  17. padding-top: @dialog-header-padding-top;
  18. &--isolated {
  19. padding: @dialog-header-isolated-padding;
  20. }
  21. }
  22. &__message {
  23. padding: @dialog-message-padding;
  24. font-size: @dialog-message-font-size;
  25. line-height: @dialog-message-line-height;
  26. max-height: @dialog-message-max-height;
  27. overflow-y: auto;
  28. text-align: center;
  29. -webkit-overflow-scrolling: touch;
  30. // allow newline charactor
  31. white-space: pre-wrap;
  32. &--has-title {
  33. color: @dialog-has-title-message-text-color;
  34. padding-top: @dialog-has-title-message-padding-top;
  35. }
  36. &--left {
  37. text-align: left;
  38. }
  39. &--right {
  40. text-align: right;
  41. }
  42. }
  43. &__footer {
  44. overflow: hidden;
  45. user-select: none;
  46. &--buttons {
  47. display: flex;
  48. .van-button {
  49. flex: 1;
  50. }
  51. }
  52. }
  53. .van-button {
  54. border: 0;
  55. }
  56. &__confirm {
  57. &,
  58. &:active {
  59. color: @dialog-confirm-button-text-color;
  60. }
  61. }
  62. &-bounce-enter {
  63. opacity: 0;
  64. transform: translate3d(-50%, -50%, 0) scale(0.7);
  65. }
  66. &-bounce-leave-active {
  67. opacity: 0;
  68. transform: translate3d(-50%, -50%, 0) scale(0.9);
  69. }
  70. }