index.less 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. @import './var.less';
  2. :root {
  3. --van-toast-max-width: @toast-max-width;
  4. --van-toast-font-size: @toast-font-size;
  5. --van-toast-text-color: @toast-text-color;
  6. --van-toast-loading-icon-color: @toast-loading-icon-color;
  7. --van-toast-line-height: @toast-line-height;
  8. --van-toast-border-radius: @toast-border-radius;
  9. --van-toast-background-color: @toast-background-color;
  10. --van-toast-icon-size: @toast-icon-size;
  11. --van-toast-text-min-width: @toast-text-min-width;
  12. --van-toast-text-padding: @toast-text-padding;
  13. --van-toast-default-padding: @toast-default-padding;
  14. --van-toast-default-width: @toast-default-width;
  15. --van-toast-default-min-height: @toast-default-min-height;
  16. --van-toast-position-top-distance: @toast-position-top-distance;
  17. --van-toast-position-bottom-distance: @toast-position-bottom-distance;
  18. }
  19. .van-toast {
  20. display: flex;
  21. flex-direction: column;
  22. align-items: center;
  23. justify-content: center;
  24. box-sizing: content-box;
  25. transition: all var(--van-animation-duration-fast);
  26. // hack for avoid max-width when use left & fixed
  27. width: var(--van-toast-default-width);
  28. max-width: var(--van-toast-max-width);
  29. min-height: var(--van-toast-default-min-height);
  30. padding: var(--van-toast-default-padding);
  31. color: var(--van-toast-text-color);
  32. font-size: var(--van-toast-font-size);
  33. line-height: var(--van-toast-line-height);
  34. // allow newline character
  35. white-space: pre-wrap;
  36. text-align: center;
  37. // https://github.com/vant-ui/vant/issues/8959
  38. word-break: break-all;
  39. background: var(--van-toast-background-color);
  40. border-radius: var(--van-toast-border-radius);
  41. &--unclickable {
  42. // lock scroll
  43. overflow: hidden;
  44. cursor: not-allowed;
  45. // should not add pointer-events: none directly to body tag
  46. // that will cause unexpected tap-highlight-color in mobile safari
  47. * {
  48. pointer-events: none;
  49. }
  50. }
  51. &--text,
  52. &--html {
  53. width: fit-content;
  54. min-width: var(--van-toast-text-min-width);
  55. min-height: 0;
  56. padding: var(--van-toast-text-padding);
  57. .van-toast__text {
  58. margin-top: 0;
  59. }
  60. }
  61. &--top {
  62. top: var(--van-toast-position-top-distance);
  63. }
  64. &--bottom {
  65. top: auto;
  66. bottom: var(--van-toast-position-bottom-distance);
  67. }
  68. &__icon {
  69. font-size: var(--van-toast-icon-size);
  70. }
  71. &__loading {
  72. padding: var(--van-padding-base);
  73. color: var(--van-toast-loading-icon-color);
  74. }
  75. &__text {
  76. margin-top: var(--van-padding-xs);
  77. }
  78. }