custom-component.scss 1.8 KB

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