Newer
Older
KaiFengPC / src / assets / styles / element-ui.scss
@zhangdeliang zhangdeliang on 28 Aug 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.  
  327. /** 表格布局 **/
  328. .pagination-container {
  329. margin-bottom: 10px;
  330. margin-top: 10px;
  331. padding: 10px 20px !important;
  332. background: transparent !important;
  333. .el-pagination {
  334. float: right;
  335. button {
  336. background: #0073a5 !important;
  337. }
  338. .el-pagination__total,
  339. .el-pagination__jump {
  340. color: #fff !important;
  341. }
  342. .el-pager li {
  343. background-color: #004770 !important;
  344. color: #fff;
  345. }
  346. .el-pager li.is-active {
  347. background-color: #00c7f2 !important;
  348. }
  349. }
  350. }
  351.  
  352. @media (max-width: 768px) {
  353. .pagination-container .el-pagination > .el-pagination__jump {
  354. display: none !important;
  355. }
  356. .pagination-container .el-pagination > .el-pagination__sizes {
  357. display: none !important;
  358. }
  359. }
  360.  
  361. .el-button {
  362. color: #fff !important;
  363. --el-button-bg-color: transparent !important;
  364. border-color: $--color-info !important;
  365. &:hover {
  366. background-color: $--color-info !important;
  367. }
  368. }
  369. .el-button--primary {
  370. background-color: $mainColor2 !important;
  371. border-color: $mainColor1 !important;
  372. &:hover {
  373. background-color: $mainColor1 !important;
  374. }
  375. }
  376. .el-button--success {
  377. background-color: $green !important;
  378. border-color: $panGreen !important;
  379. &:hover {
  380. background-color: $tiffany !important;
  381. }
  382. }
  383. .el-button--danger {
  384. background-color: $--color-danger !important;
  385. border-color: $red !important;
  386. &:hover {
  387. background-color: $red !important;
  388. }
  389. }
  390. .el-button--warning {
  391. background-color: $--color-warning !important;
  392. border-color: $yellow !important;
  393. &:hover {
  394. background-color: $yellow !important;
  395. }
  396. }
  397. .el-button--info {
  398. background-color: $light-blue !important;
  399. border-color: $light-blue !important;
  400. &:hover {
  401. background-color: $--color-info !important;
  402. }
  403. }
  404.  
  405. .el-picker-panel {
  406. background: $mainColor1 !important;
  407. --el-text-color-regular: #fff;
  408. --el-text-color-placeholder: #8a969d;
  409. }
  410. .el-loading-mask {
  411. --el-mask-color: rgba(255, 255, 255, 0.2);
  412. }
  413.  
  414. .el-tree {
  415. background-color: $mainColor1 !important;
  416. --el-tree-text-color: #fff !important;
  417. --el-fill-color-light: $mainColor1 !important;
  418. .el-tree-node__content > .el-checkbox {
  419. margin-right: 8px;
  420. }
  421. .el-tree-node {
  422. .el-tree-node__children {
  423. .el-tree-node__expand-icon {
  424. visibility: hidden;
  425. }
  426. }
  427. .el-tree-node__content .is-leaf {
  428. visibility: hidden;
  429. }
  430. }
  431. }
  432. .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  433. background-color: $mainColor2 !important;
  434. }
  435.  
  436. .el-input-number__decrease,
  437. .el-input-number__increase {
  438. background-color: $mainColor1 !important;
  439. border-left: 1px solid $mainColor2 !important;
  440. }
  441.  
  442. .el-empty__description p {
  443. color: #c6c6c6 !important;
  444. }
  445. .el-input-group__append,
  446. .el-input-group__prepend {
  447. border-color: $mainColor2 !important;
  448. background-color: $mainColor2 !important;
  449. box-shadow: none !important;
  450. }
  451. .el-input-group__append button.el-button,
  452. .el-input-group__append button.el-button:hover,
  453. .el-input-group__append div.el-select .el-input__wrapper,
  454. .el-input-group__append div.el-select:hover .el-input__wrapper,
  455. .el-input-group__prepend button.el-button,
  456. .el-input-group__prepend button.el-button:hover,
  457. .el-input-group__prepend div.el-select .el-input__wrapper,
  458. .el-input-group__prepend div.el-select:hover .el-input__wrapper {
  459. border-color: #409eff !important;
  460. background-color: #409eff !important;
  461. box-shadow: none !important;
  462. }
  463.  
  464. .el-radio,
  465. .el-checkbox,
  466. .icon-body .icon-list span,
  467. .el-year-table td.today .cell {
  468. color: #c6c6c6 !important;
  469. }
  470.  
  471. .el-time-spinner__item,
  472. .el-time-panel__btn.cancel {
  473. color: #c6c6c6 !important;
  474. }
  475. .el-time-spinner__item.is-active:not(.is-disabled) {
  476. color: #409eff !important;
  477. }
  478. .el-picker-panel__footer {
  479. background-color: transparent !important;
  480. }
  481. .el-rate .el-rate__item {
  482. svg path {
  483. fill: $yellow !important;
  484. }
  485. }
  486. .el-card {
  487. background-color: transparent !important;
  488. border-color: transparent !important;
  489. color: #c6c6c6 !important;
  490. }
  491. .el-tabs__item {
  492. color: #c6c6c6 !important;
  493. }
  494. .el-tabs__item.is-active {
  495. color: #409eff !important;
  496. }
  497. .el-tabs__item:focus-visible {
  498. box-shadow: none !important;
  499. }
  500. .link-type,
  501. .link-type:focus {
  502. color: #409eff !important;
  503. }
  504. .el-transfer {
  505. margin-bottom: 20px;
  506. .el-transfer-panel,
  507. .el-transfer-panel .el-transfer-panel__header {
  508. background-color: $mainColor1 !important;
  509. border-color: $mainColor1 !important;
  510. color: #c6c6c6 !important;
  511. }
  512. .el-transfer-panel__body {
  513. border-color: $mainColor1 !important;
  514. }
  515. .el-checkbox__label {
  516. color: #c6c6c6 !important;
  517. }
  518. }
  519. .el-step__title.is-process {
  520. color: #409eff !important;
  521. }
  522. .el-divider__text {
  523. background-color: $mainColor1 !important;
  524. border-color: $mainColor1 !important;
  525. color: #c6c6c6 !important;
  526. }
  527. .el-divider--horizontal {
  528. border-color: $mainColor1 !important;
  529. }
  530. .el-progress-bar__outer {
  531. background-color: $mainColor2 !important;
  532. }
  533. .el-form-item__content {
  534. color: #fff;
  535. }
  536. .el-tag.el-tag--info {
  537. background: $mainColor2 !important;
  538. }
  539. .el-radio-group {
  540. .el-radio-button {
  541. &.is-active {
  542. .el-radio-button__inner {
  543. background: $mainColor2 !important;
  544. border-color: $mainColor2 !important;
  545. }
  546. }
  547. }
  548. }