custom-component.scss 1.7 KB

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