toast.wxss 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. .t-float-left {
  2. float: left;
  3. }
  4. .t-float-right {
  5. float: right;
  6. }
  7. @keyframes tdesign-fade-out {
  8. from {
  9. opacity: 1;
  10. }
  11. to {
  12. opacity: 0;
  13. }
  14. }
  15. .hotspot-expanded.relative {
  16. position: relative;
  17. }
  18. .hotspot-expanded::after {
  19. content: '';
  20. display: block;
  21. position: absolute;
  22. left: 0;
  23. top: 0;
  24. right: 0;
  25. bottom: 0;
  26. transform: scale(1.5);
  27. }
  28. .t-toast {
  29. position: fixed;
  30. right: -50%;
  31. left: 50%;
  32. transform: translate(-50%, -50%);
  33. z-index: 12001;
  34. opacity: 1;
  35. transition: opacity 300ms ease;
  36. background-color: var(--td-toast-bg-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
  37. border-radius: var(--td-toast-radius, 8rpx);
  38. font-size: 28rpx;
  39. color: var(--td-toast-color, var(--td-white-color-1, #fff));
  40. max-width: var(--td-toast-max-width, 374rpx);
  41. width: fit-content;
  42. box-sizing: border-box;
  43. }
  44. .t-toast--column {
  45. padding: 48rpx;
  46. min-width: 160rpx;
  47. min-height: 160rpx;
  48. border-radius: 16rpx;
  49. display: flex;
  50. align-items: center;
  51. justify-content: center;
  52. }
  53. .t-toast--loading.t-toast--with-text {
  54. min-width: 204rpx;
  55. min-height: 204rpx;
  56. padding-top: 0;
  57. padding-bottom: 0;
  58. }
  59. .t-toast__content {
  60. align-items: center;
  61. line-height: 44rpx;
  62. }
  63. .t-toast__content--row {
  64. display: flex;
  65. text-align: left;
  66. padding: 28rpx 44rpx;
  67. }
  68. .t-toast__content--column {
  69. display: flex;
  70. flex-direction: column;
  71. justify-content: center;
  72. align-items: center;
  73. }
  74. .t-toast__icon--row {
  75. display: flex;
  76. font-size: var(--td-toast-row-icon-size, 48rpx);
  77. }
  78. .t-toast__icon--column {
  79. font-size: var(--td-toast-column-icon-size, 64rpx);
  80. }
  81. .t-toast__text {
  82. overflow: hidden;
  83. text-overflow: ellipsis;
  84. -webkit-line-clamp: 3;
  85. display: -webkit-box;
  86. -webkit-box-orient: vertical;
  87. white-space: pre-line;
  88. }
  89. .t-toast__text--column:not(:empty):not(:only-child) {
  90. margin-top: 16rpx;
  91. }
  92. .t-toast__text--row:not(:empty):not(:only-child) {
  93. margin-left: 16rpx;
  94. }
  95. .t-toast.t-fade-enter,
  96. .t-toast.t-fade-leave-to {
  97. opacity: 0;
  98. }