index.less 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  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 charactor
  20. white-space: pre-wrap;
  21. text-align: center;
  22. word-wrap: break-word;
  23. background-color: @toast-background-color;
  24. border-radius: @toast-border-radius;
  25. transform: translate3d(-50%, -50%, 0);
  26. &--unclickable {
  27. // lock scroll
  28. overflow: hidden;
  29. // should not add pointer-events: none directly to body tag
  30. // that will cause unexpected tap-highlight-color in mobile safari
  31. * {
  32. pointer-events: none;
  33. }
  34. }
  35. &--text,
  36. &--html {
  37. width: fit-content;
  38. min-width: @toast-text-min-width;
  39. min-height: 0;
  40. padding: @toast-text-padding;
  41. .van-toast__text {
  42. margin-top: 0;
  43. }
  44. }
  45. &--top {
  46. top: @toast-position-top-distance;
  47. }
  48. &--bottom {
  49. top: auto;
  50. bottom: @toast-position-bottom-distance;
  51. }
  52. &__icon {
  53. font-size: @toast-icon-size;
  54. }
  55. &__loading {
  56. padding: @padding-base;
  57. color: @toast-loading-icon-color;
  58. }
  59. &__text {
  60. margin-top: @padding-xs;
  61. }
  62. }