custom-component.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. @use './variables.scss' as *;
  2. .custom-tooltip {
  3. max-width: 1000px;
  4. }
  5. .custom-tooltip--opacity0 {
  6. opacity: 0;
  7. }
  8. .customDialog--pushObject {
  9. height: 50vh;
  10. max-height: 60vh;
  11. border-radius: 8px !important;
  12. overflow-y: hidden;
  13. .el-dialog__body {
  14. width: 100%;
  15. max-height: calc(60vh - 190px);
  16. overflow-y: auto;
  17. }
  18. }
  19. .basic-dialog--custom {
  20. max-height: 60vh;
  21. overflow-y: auto;
  22. display: flex;
  23. flex-direction: column;
  24. .el-dialog__body {
  25. flex: 1;
  26. }
  27. }
  28. $message-box-content-padding--default: 0;
  29. $message-box-content-padding--icon: 36px;
  30. .customMessageBox {
  31. padding: 20px 24px !important;
  32. border-radius: 8px !important;
  33. color: rgba(0, 0, 0, 0.88);
  34. .el-message-box__title {
  35. display: flex;
  36. align-items: center;
  37. font-weight: 550;
  38. font-size: 16px;
  39. }
  40. .el-message-box__content {
  41. font-size: 14px;
  42. }
  43. }
  44. .customMessageBox--icon {
  45. @extend .customMessageBox;
  46. .el-message-box__title::before {
  47. content: '';
  48. display: inline-block;
  49. width: 24px;
  50. height: 24px;
  51. margin-right: 12px;
  52. background-size: 100% 100%;
  53. }
  54. .el-message-box__content {
  55. padding-left: $message-box-content-padding--icon;
  56. }
  57. }
  58. .customMessageBox--default {
  59. @extend .customMessageBox;
  60. .el-message-box__content {
  61. padding-left: $message-box-content-padding--default;
  62. }
  63. }
  64. .customMessageBox--primary {
  65. @extend .customMessageBox--icon;
  66. .el-message-box__title::before {
  67. background-image: url('@/assets/images/message-box/primary@1X.png');
  68. }
  69. }
  70. .customMessageBox--warning {
  71. @extend .customMessageBox--icon;
  72. .el-message-box__title::before {
  73. background-image: url('@/assets/images/message-box/warning@1X.png');
  74. }
  75. }
  76. .customMessageBox--error {
  77. @extend .customMessageBox--icon;
  78. .el-message-box__title::before {
  79. background-image: url('@/assets/images/message-box/error@1X.png');
  80. }
  81. }
  82. .custom-el-button {
  83. --el-border-color: #1890ff;
  84. --el-text-color-regular: #1890ff;
  85. --el-color-primary: #fff;
  86. --el-color-primary-light-9: #1890ff;
  87. }
  88. .el-scrollbar--custom {
  89. max-width: 520px;
  90. .el-scrollbar {
  91. max-width: 515px;
  92. }
  93. }
  94. .cascader-popper--custom {
  95. .el-checkbox,
  96. .el-radio {
  97. width: 100%;
  98. height: 100%;
  99. position: absolute;
  100. top: 0;
  101. left: 0;
  102. z-index: 10;
  103. }
  104. .el-cascader-node {
  105. padding-left: 34px;
  106. }
  107. .el-checkbox__input,
  108. .el-radio__input {
  109. position: absolute;
  110. left: 20px;
  111. }
  112. }
  113. .el-table .row--highlight {
  114. color: $primary-color;
  115. background: rgba($primary-color, 0.2);
  116. }