custom-component.scss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. @use './variables.scss' as *;
  2. .custom-tooltip {
  3. max-width: 1000px;
  4. }
  5. .customDialog--pushObject {
  6. height: 60vh;
  7. border-radius: 8px !important;
  8. .el-dialog__body {
  9. display: flex;
  10. flex-direction: column;
  11. gap: 10px;
  12. width: 100%;
  13. height: calc(100% - 50px);
  14. overflow-y: auto;
  15. }
  16. }
  17. $message-box-content-padding--default: 0;
  18. $message-box-content-padding--icon: 36px;
  19. .customMessageBox {
  20. padding: 20px 24px !important;
  21. border-radius: 8px !important;
  22. color: rgba(0, 0, 0, 0.88);
  23. .el-message-box__title {
  24. display: flex;
  25. align-items: center;
  26. font-weight: 550;
  27. font-size: 16px;
  28. }
  29. .el-message-box__content {
  30. font-size: 14px;
  31. }
  32. }
  33. .customMessageBox--icon {
  34. @extend .customMessageBox;
  35. .el-message-box__title::before {
  36. content: '';
  37. display: inline-block;
  38. width: 24px;
  39. height: 24px;
  40. margin-right: 12px;
  41. background-size: 100% 100%;
  42. }
  43. .el-message-box__content {
  44. padding-left: $message-box-content-padding--icon;
  45. }
  46. }
  47. .customMessageBox--default {
  48. @extend .customMessageBox;
  49. .el-message-box__content {
  50. padding-left: $message-box-content-padding--default;
  51. }
  52. }
  53. .customMessageBox--primary {
  54. @extend .customMessageBox--icon;
  55. .el-message-box__title::before {
  56. background-image: url('@/assets/images/message-box/primary@1X.png');
  57. }
  58. }
  59. .customMessageBox--warning {
  60. @extend .customMessageBox--icon;
  61. .el-message-box__title::before {
  62. background-image: url('@/assets/images/message-box/warning@1X.png');
  63. }
  64. }
  65. .customMessageBox--error {
  66. @extend .customMessageBox--icon;
  67. .el-message-box__title::before {
  68. background-image: url('@/assets/images/message-box/error@1X.png');
  69. }
  70. }