index.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. @import "./../common/abstracts/_mixin.scss";
  2. @import "./../common/abstracts/variable.scss";
  3. @include b(toast) {
  4. display: inline-block;
  5. max-width: $-toast-max-width;
  6. padding: $-toast-padding;
  7. background-color: $-toast-bg;
  8. border-radius: $-toast-radius;
  9. color: $-toast-color;
  10. transition: all 0.2s;
  11. font-size: $-toast-fs;
  12. box-sizing: border-box;
  13. box-shadow: $-toast-box-shadow;
  14. @include when(vertical) {
  15. flex-direction: column;
  16. }
  17. @include e(msg) {
  18. font-size: $-toast-fs;
  19. word-break: break-all;
  20. line-height: $-toast-line-height;
  21. text-align: left;
  22. font-family: "San Francisco", Rotobo, arial, "PingFang SC", "Noto SansCJK", "Microsoft Yahei", sans-serif;
  23. }
  24. @include edeep(icon) {
  25. display: inline-block;
  26. margin-right: $-toast-icon-margin-right;
  27. font-size: $-toast-icon-size;
  28. @include when(vertical) {
  29. margin-right: 0;
  30. margin-bottom: $-toast-icon-margin-bottom;
  31. }
  32. }
  33. @include e(iconWrap){
  34. font-size: 0;
  35. line-height: 0;
  36. vertical-align: middle;
  37. }
  38. @include e(iconBox){
  39. display: block;
  40. width: 100%;
  41. height: 100%;
  42. }
  43. @include e(iconSvg){
  44. width: $-toast-icon-size;
  45. height: $-toast-icon-size;
  46. background-size: cover;
  47. background-repeat: no-repeat;
  48. }
  49. @include e(loading) {
  50. margin-bottom: $-toast-loading-margin-bottom;
  51. display: inline-block;
  52. }
  53. @include m(top) {
  54. transform: translate3d(0, -40vh, 0);
  55. }
  56. @include m(middle-top){
  57. transform: translate3d(0%,-18.8vh,0);
  58. }
  59. @include m(bottom) {
  60. transform: translate3d(0, 40vh, 0);
  61. }
  62. @include m(with-icon) {
  63. min-width: $-toast-with-icon-min-width;
  64. display: inline-flex;
  65. align-items: center;
  66. }
  67. @include m(loading) {
  68. min-width: auto;
  69. padding: $-toast-loading-padding;
  70. }
  71. }