toast.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. .cl-toast {
  2. display: flex;
  3. align-items: center;
  4. flex-direction: column;
  5. min-width: auto;
  6. max-width: 80%;
  7. box-sizing: border-box;
  8. border-radius: 10rpx;
  9. position: fixed;
  10. left: 50%;
  11. transform: translate(-50%, -50%);
  12. overflow: hidden;
  13. padding: 14rpx;
  14. background-color: rgba(0, 0, 0, 0.5);
  15. z-index: 3020;
  16. opacity: 0;
  17. pointer-events: none;
  18. transition: opacity 0.3s;
  19. &__icon {
  20. padding: 20rpx 50rpx;
  21. text {
  22. font-size: 70rpx;
  23. color: #eee;
  24. }
  25. }
  26. &__content {
  27. padding: 0;
  28. font-size: 26rpx;
  29. line-height: 36rpx;
  30. color: #fff;
  31. text-align: center;
  32. }
  33. &--default {
  34. background-color: rgba(0, 0, 0, 0.5);
  35. }
  36. &--primary {
  37. background-color: $cl-color-primary;
  38. }
  39. &--success {
  40. background-color: $cl-color-success;
  41. }
  42. &--error {
  43. background-color: $cl-color-error;
  44. }
  45. &--warning {
  46. background-color: $cl-color-warning;
  47. }
  48. &--info {
  49. background-color: $cl-color-info;
  50. }
  51. &.is-show {
  52. opacity: 1;
  53. pointer-events: auto;
  54. }
  55. &.is-top {
  56. top: 150rpx;
  57. }
  58. &.is-middle {
  59. top: 50%;
  60. }
  61. &.is-bottom {
  62. bottom: 150rpx;
  63. }
  64. &.is-icon {
  65. padding-bottom: 30rpx;
  66. }
  67. }