notification.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. @import "mixins/mixins";
  2. @import "common/var";
  3. @include b(notification) {
  4. display: flex;
  5. width: $--notification-width;
  6. padding: $--notification-padding;
  7. border-radius: $--notification-radius;
  8. box-sizing: border-box;
  9. border: 1px solid $--notification-border-color;
  10. position: fixed;
  11. background-color: $--color-white;
  12. box-shadow: $--notification-shadow;
  13. transition: opacity .3s, transform .3s, left .3s, right .3s, top 0.4s, bottom .3s;
  14. overflow: hidden;
  15. &.right {
  16. right: 16px;
  17. }
  18. &.left {
  19. left: 16px;
  20. }
  21. @include e(group) {
  22. margin-left: $--notification-group-margin-left;
  23. margin-right: $--notification-group-margin-right;
  24. }
  25. @include e(title) {
  26. font-weight: bold;
  27. font-size: $--notification-title-font-size;
  28. color: $--notification-title-color;
  29. margin: 0;
  30. }
  31. @include e(content) {
  32. font-size: $--notification-content-font-size;
  33. line-height: 21px;
  34. margin: 6px 0 0 0;
  35. color: $--notification-content-color;
  36. text-align: justify;
  37. p {
  38. margin: 0;
  39. }
  40. }
  41. @include e(icon) {
  42. height: $--notification-icon-size;
  43. width: $--notification-icon-size;
  44. font-size: $--notification-icon-size;
  45. }
  46. @include e(closeBtn) {
  47. position: absolute;
  48. top: 18px;
  49. right: 15px;
  50. cursor: pointer;
  51. color: $--notification-close-color;
  52. font-size: $--notification-close-font-size;
  53. &:hover {
  54. color: $--notification-close-hover-color;
  55. }
  56. }
  57. .el-icon-success {
  58. color: $--notification-success-icon-color;
  59. }
  60. .el-icon-error {
  61. color: $--notification-danger-icon-color;
  62. }
  63. .el-icon-info {
  64. color: $--notification-info-icon-color;
  65. }
  66. .el-icon-warning {
  67. color: $--notification-warning-icon-color;
  68. }
  69. }
  70. .el-notification-fade-enter {
  71. &.right {
  72. right: 0;
  73. transform: translateX(100%);
  74. }
  75. &.left {
  76. left: 0;
  77. transform: translateX(-100%);
  78. }
  79. }
  80. .el-notification-fade-leave-active {
  81. opacity: 0;
  82. }