Newer
Older
KaiFengPC / src / assets / styles / element-ui.scss
@zhangdeliang zhangdeliang on 23 Oct 12 KB update
  1. // cover some element-ui styles
  2.  
  3. .el-breadcrumb__inner,
  4. .el-breadcrumb__inner a {
  5. font-weight: 400 !important;
  6. color: #fff !important;
  7. }
  8.  
  9. .el-upload {
  10. input[type='file'] {
  11. display: none !important;
  12. }
  13. }
  14.  
  15. .el-upload__input {
  16. display: none;
  17. }
  18.  
  19. .cell {
  20. .el-tag {
  21. margin-right: 0px;
  22. }
  23. }
  24.  
  25. .small-padding {
  26. .cell {
  27. padding-left: 5px;
  28. padding-right: 5px;
  29. }
  30. }
  31.  
  32. .fixed-width {
  33. .el-button--mini {
  34. padding: 7px 10px;
  35. width: 60px;
  36. }
  37. }
  38.  
  39. .status-col {
  40. .cell {
  41. padding: 0 10px;
  42. text-align: center;
  43.  
  44. .el-tag {
  45. margin-right: 0px;
  46. }
  47. }
  48. }
  49.  
  50. // refine element ui upload
  51. .el-upload {
  52. width: 100%;
  53. .el-upload-dragger {
  54. width: 100%;
  55. height: 200px;
  56. background: transparent !important;
  57. }
  58. }
  59.  
  60. // dropdown
  61. .el-dropdown-menu {
  62. background: $mainColor1 !important;
  63. a {
  64. display: block;
  65. }
  66. .more {
  67. text-align: center;
  68. color: #409eff;
  69. cursor: pointer;
  70. }
  71. .el-dropdown-menu__item {
  72. color: #c6c6c6 !important;
  73. &:hover {
  74. background: $mainColor2 !important;
  75. color: #fff !important;
  76. }
  77. }
  78. .el-dropdown-menu__item:not(.is-disabled):focus {
  79. background: $mainColor2 !important;
  80. color: #fff !important;
  81. }
  82. }
  83. .el-input__wrapper,
  84. .el-textarea__inner {
  85. background: $mainColor1 !important;
  86. box-shadow: 0 0 0 1px $mainColor2 inset !important;
  87. color: #fff !important;
  88. .el-input__inner {
  89. color: #fff !important;
  90. }
  91. }
  92.  
  93. .el-date-editor {
  94. .el-range-input,
  95. .el-range-separator {
  96. color: #c6c6c6 !important;
  97. }
  98. .el-range-editor.el-input__inner {
  99. display: inline-flex !important;
  100. }
  101. .el-range-separator {
  102. box-sizing: content-box;
  103. }
  104. }
  105. .el-date-table td.in-range .el-date-table-cell {
  106. background: $mainColor2 !important;
  107. }
  108. .el-menu {
  109. background: $mainColor1 !important;
  110. --el-menu-border-color: $mainColor2 !important;
  111. .el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  112. display: none;
  113. }
  114. .el-menu-item,
  115. .el-sub-menu__title {
  116. color: #c6c6c6 !important;
  117. }
  118. }
  119.  
  120. .el-dropdown .el-dropdown-link {
  121. color: var(--el-color-primary) !important;
  122. }
  123.  
  124. // 重新定义elementplus样式
  125. // 弹窗
  126. .el-dialog {
  127. transform: none;
  128. position: absolute;
  129. top: 50%;
  130. left: 50%;
  131. z-index: 2000;
  132. display: flex;
  133. flex-direction: column;
  134. transform: translate(-50%, -50%);
  135. margin: 0 !important;
  136. background: $mainBg !important;
  137. box-shadow: 0px 0px 40px rgba(0, 21, 41, 0.35) !important;
  138. max-height: calc(100% - 30px);
  139. max-width: calc(100% - 30px);
  140. .el-dialog__header {
  141. border-bottom: 1px solid $mainColor1;
  142. width: 100%;
  143. .el-dialog__close {
  144. font-size: 26px;
  145. font-weight: bold;
  146. svg path {
  147. fill: #3afff8 !important;
  148. }
  149. }
  150. }
  151. .el-dialog__title {
  152. font-family: YouSheBiaoTiHei;
  153. font-weight: 400;
  154. font-size: 22px;
  155. color: #e4f5ff;
  156. }
  157. .el-dialog__footer {
  158. border-top: 1px solid $mainColor1;
  159. }
  160. .el-dialog__body {
  161. padding-top: 20px !important;
  162. padding-bottom: 0 !important;
  163. overflow: auto;
  164. flex: 1;
  165. }
  166. }
  167.  
  168. .el-dialog.scrollbar .el-dialog__body {
  169. overflow: auto;
  170. overflow-x: hidden;
  171. max-height: 75vh;
  172. padding: 10px 20px 0;
  173. }
  174.  
  175. .el-message-box {
  176. background: $mainBg !important;
  177. border-color: $mainColor1 !important;
  178. box-shadow: 0px 0px 40px rgba(0, 21, 41, 0.35) !important;
  179. .el-message-box__title {
  180. color: #fff !important;
  181. }
  182. .el-message-box__message {
  183. color: #c6c6c6 !important;
  184. }
  185. }
  186. .el-message--success {
  187. svg path {
  188. fill: $--color-success !important;
  189. }
  190. }
  191. .el-message--error {
  192. svg path {
  193. fill: $--color-danger !important;
  194. }
  195. }
  196.  
  197. .el-popper {
  198. background-color: $mainColor1 !important;
  199. border-color: $mainColor1 !important;
  200. box-shadow: 0px 0px 20px rgba(0, 21, 41, 0.35) !important;
  201. .el-popper__arrow::before {
  202. --el-border-color-light: #fff !important;
  203. background-color: $mainColor1 !important;
  204. }
  205. .el-select-dropdown__item {
  206. color: #fff !important;
  207. }
  208. .el-select-dropdown__item.selected {
  209. background-color: $mainBg !important;
  210. color: #00d1ff !important;
  211. }
  212. .el-select-dropdown__item:hover,
  213. .el-select-dropdown__item.hover {
  214. background-color: $mainBg !important;
  215. }
  216. }
  217. .el-select .el-select__tags-text,
  218. .el-select__input {
  219. color: #fff !important;
  220. }
  221.  
  222. .el-table {
  223. --el-table-border-color: $mainColor1 !important;
  224. --el-table-bg-color: $mainColor1 !important;
  225. .el-table__body {
  226. border-bottom: 1px solid $mainColor2 !important;
  227. }
  228. .el-table__header-wrapper,
  229. .el-table__fixed-header-wrapper {
  230. th {
  231. word-break: break-word;
  232. background-color: $mainColor1 !important;
  233. height: 40px !important;
  234. font-size: 13px;
  235. }
  236. }
  237. .el-table__body-wrapper {
  238. background-color: #004770 !important;
  239. .el-button [class*='el-icon-'] + span {
  240. margin-left: 1px;
  241. }
  242. td.el-table-fixed-column--right {
  243. background: $mainBg !important;
  244. }
  245. }
  246.  
  247. tr {
  248. background-color: $mainColor1 !important;
  249. }
  250. tr:nth-of-type(even) {
  251. background-color: $mainBg !important;
  252. }
  253. tr:hover > td {
  254. background-color: $mainColor2 !important;
  255. }
  256.  
  257. th.el-table__cell,
  258. td.el-table__cell {
  259. text-align: center;
  260. border-bottom: 1px solid $mainBg !important;
  261. color: #c6c6c6;
  262. border-right: none !important;
  263. position: static !important; // 设置position 使得 子元素不与其产生新的层叠关系
  264. }
  265. .el-table__empty-block {
  266. background-color: #004770 !important;
  267. .el-table__empty-text {
  268. color: #c6c6c6 !important;
  269. }
  270. }
  271. .el-button {
  272. border: none !important;
  273. background: none !important;
  274. &:hover {
  275. background: none !important;
  276. transform: scale(1.01);
  277. }
  278. }
  279. .el-button--primary {
  280. color: $--color-primary !important;
  281. svg path {
  282. fill: $--color-primary !important;
  283. }
  284. }
  285. .el-button--danger {
  286. color: $--color-danger !important;
  287. svg path {
  288. fill: $--color-danger !important;
  289. }
  290. }
  291. .el-button--warning {
  292. color: $--color-warning !important;
  293. svg path {
  294. fill: $--color-warning !important;
  295. }
  296. }
  297. .el-button--success {
  298. color: $--color-success !important;
  299. svg path {
  300. fill: $--color-success !important;
  301. }
  302. }
  303. }
  304. .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  305. background: $mainBg !important;
  306. }
  307. .el-table__body-wrapper tr td.el-table-fixed-column--left,
  308. .el-table__body-wrapper tr td.el-table-fixed-column--right,
  309. .el-table__body-wrapper tr th.el-table-fixed-column--left,
  310. .el-table__body-wrapper tr th.el-table-fixed-column--right,
  311. .el-table__footer-wrapper tr td.el-table-fixed-column--left,
  312. .el-table__footer-wrapper tr td.el-table-fixed-column--right,
  313. .el-table__footer-wrapper tr th.el-table-fixed-column--left,
  314. .el-table__footer-wrapper tr th.el-table-fixed-column--right,
  315. .el-table__header-wrapper tr td.el-table-fixed-column--left,
  316. .el-table__header-wrapper tr td.el-table-fixed-column--right,
  317. .el-table__header-wrapper tr th.el-table-fixed-column--left,
  318. .el-table__header-wrapper tr th.el-table-fixed-column--right {
  319. background: $mainColor1 !important;
  320. }
  321. /* 用来设置当前页面element全局table 选中某行时的背景色*/
  322. .el-table__body tr.current-row > td {
  323. background-color: #1d8db4 !important;
  324. color: #fff;
  325. }
  326. .el-table__body tr.hover-row.current-row > td.el-table__cell,
  327. .el-table__body tr.hover-row.el-table__row--striped.current-row > td.el-table__cell,
  328. .el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
  329. .el-table__body tr.hover-row > td.el-table__cell {
  330. background-color: $mainColor2 !important;
  331. }
  332.  
  333. /** 表格布局 **/
  334. .pagination-container {
  335. margin-bottom: 10px;
  336. margin-top: 10px;
  337. padding: 10px 20px !important;
  338. background: transparent !important;
  339. .el-pagination {
  340. float: right;
  341. button {
  342. background: #0073a5 !important;
  343. }
  344. .el-pagination__total,
  345. .el-pagination__jump {
  346. color: #fff !important;
  347. }
  348. .el-pager li {
  349. background-color: #004770 !important;
  350. color: #fff;
  351. }
  352. .el-pager li.is-active {
  353. background-color: #00c7f2 !important;
  354. }
  355. }
  356. }
  357.  
  358. @media (max-width: 768px) {
  359. .pagination-container .el-pagination > .el-pagination__jump {
  360. display: none !important;
  361. }
  362. .pagination-container .el-pagination > .el-pagination__sizes {
  363. display: none !important;
  364. }
  365. }
  366.  
  367. .el-button {
  368. color: #fff !important;
  369. --el-button-bg-color: transparent !important;
  370. border-color: $--color-info !important;
  371. &:hover {
  372. background-color: $--color-info !important;
  373. }
  374. }
  375. .el-button--primary {
  376. background-color: $mainColor2 !important;
  377. border-color: $mainColor1 !important;
  378. &:hover {
  379. background-color: $mainColor1 !important;
  380. }
  381. }
  382. .el-button--success {
  383. background-color: $green !important;
  384. border-color: $panGreen !important;
  385. &:hover {
  386. background-color: $tiffany !important;
  387. }
  388. }
  389. .el-button--danger {
  390. background-color: $--color-danger !important;
  391. border-color: $red !important;
  392. &:hover {
  393. background-color: $red !important;
  394. }
  395. }
  396. .el-button--warning {
  397. background-color: $--color-warning !important;
  398. border-color: $yellow !important;
  399. &:hover {
  400. background-color: $yellow !important;
  401. }
  402. }
  403. .el-button--info {
  404. background-color: $light-blue !important;
  405. border-color: $light-blue !important;
  406. &:hover {
  407. background-color: $--color-info !important;
  408. }
  409. }
  410.  
  411. .el-picker-panel {
  412. background: $mainColor1 !important;
  413. --el-text-color-regular: #fff;
  414. --el-text-color-placeholder: #8a969d;
  415. }
  416. .el-loading-mask {
  417. --el-mask-color: rgba(255, 255, 255, 0.2);
  418. }
  419.  
  420. .el-tree {
  421. background-color: $mainColor1 !important;
  422. --el-tree-text-color: #fff !important;
  423. --el-fill-color-light: $mainColor1 !important;
  424. .el-tree-node__content > .el-checkbox {
  425. margin-right: 8px;
  426. }
  427. .el-tree-node {
  428. .el-tree-node__children {
  429. .el-tree-node__expand-icon {
  430. visibility: hidden;
  431. }
  432. }
  433. .el-tree-node__content .is-leaf {
  434. visibility: hidden;
  435. }
  436. }
  437. }
  438. .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  439. background-color: $mainColor2 !important;
  440. }
  441.  
  442. .el-input-number__decrease,
  443. .el-input-number__increase {
  444. background-color: $mainColor1 !important;
  445. border-left: 1px solid $mainColor2 !important;
  446. }
  447.  
  448. .el-empty__description p {
  449. color: #c6c6c6 !important;
  450. }
  451. .el-input-group__append,
  452. .el-input-group__prepend {
  453. border-color: $mainColor2 !important;
  454. background-color: $mainColor2 !important;
  455. box-shadow: none !important;
  456. }
  457. .el-input-group__append button.el-button,
  458. .el-input-group__append button.el-button:hover,
  459. .el-input-group__append div.el-select .el-input__wrapper,
  460. .el-input-group__append div.el-select:hover .el-input__wrapper,
  461. .el-input-group__prepend button.el-button,
  462. .el-input-group__prepend button.el-button:hover,
  463. .el-input-group__prepend div.el-select .el-input__wrapper,
  464. .el-input-group__prepend div.el-select:hover .el-input__wrapper {
  465. border-color: #409eff !important;
  466. background-color: #409eff !important;
  467. box-shadow: none !important;
  468. }
  469.  
  470. .el-radio,
  471. .el-checkbox,
  472. .icon-body .icon-list span,
  473. .el-year-table td.today .cell {
  474. color: #c6c6c6 !important;
  475. }
  476.  
  477. .el-time-spinner__item,
  478. .el-time-panel__btn.cancel {
  479. color: #c6c6c6 !important;
  480. }
  481. .el-time-spinner__item.is-active:not(.is-disabled) {
  482. color: #409eff !important;
  483. }
  484. .el-picker-panel__footer {
  485. background-color: transparent !important;
  486. }
  487. .el-rate .el-rate__item {
  488. svg path {
  489. fill: $yellow !important;
  490. }
  491. }
  492. .el-card {
  493. background-color: transparent !important;
  494. border-color: transparent !important;
  495. color: #c6c6c6 !important;
  496. }
  497. .el-tabs__item {
  498. color: #c6c6c6 !important;
  499. }
  500. .el-tabs__item.is-active {
  501. color: #409eff !important;
  502. }
  503. .el-tabs__item:focus-visible {
  504. box-shadow: none !important;
  505. }
  506. .link-type,
  507. .link-type:focus {
  508. color: #409eff !important;
  509. }
  510. .el-transfer {
  511. margin-bottom: 20px;
  512. .el-transfer-panel,
  513. .el-transfer-panel .el-transfer-panel__header {
  514. background-color: $mainColor1 !important;
  515. border-color: $mainColor1 !important;
  516. color: #c6c6c6 !important;
  517. }
  518. .el-transfer-panel__body {
  519. border-color: $mainColor1 !important;
  520. }
  521. .el-checkbox__label {
  522. color: #c6c6c6 !important;
  523. }
  524. }
  525. .el-step__title.is-process {
  526. color: #409eff !important;
  527. }
  528. .el-divider__text {
  529. background-color: $mainColor1 !important;
  530. border-color: $mainColor1 !important;
  531. color: #c6c6c6 !important;
  532. }
  533. .el-divider--horizontal {
  534. border-color: $mainColor1 !important;
  535. }
  536. .el-progress-bar__outer {
  537. background-color: $mainColor2 !important;
  538. }
  539. .el-form-item__content {
  540. color: #fff;
  541. }
  542. .el-tag.el-tag--info {
  543. background: $mainColor2 !important;
  544. }
  545. .el-radio-group {
  546. .el-radio-button {
  547. &.is-active {
  548. .el-radio-button__inner {
  549. background: $mainColor2 !important;
  550. border-color: $mainColor2 !important;
  551. }
  552. }
  553. }
  554. }