index.less 1.5 KB

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