Element-UI自定义主题

1.介绍：我们可以自定义样式去覆盖element-ui的默认样式

  1. // 在项目目录中新建 element-variables.scss  文件
  2.  
  3. // 上面为修改的变量
  4.  
  5. $--color-white: #fff !default;
  6. $--color-black: #000 !default;
  7.  
  8. $--color-primary: yellow !default;
  9. $--color-primary-light-1: mix($--color-white, $--color-primary, 30%) !default; 
  10.  
  11. $--color-success: green !default;
  12. $--color-success-light: mix($--color-white, $--color-success, 80%) !default;
  13.  
  14. // 必须引入
  15.  
  16. $--font-path: '~element-ui/lib/theme-chalk/fonts';
  17.  
  18. @import "~element-ui/packages/theme-chalk/src/index";
  19.  
  20. // 在main.js中引入该sass文件
  21.  
  22. import '../public/css/element-variables.scss'
  23.  
  24. // 更多可修改变量
  25.  
  26. 全部变量如下：
  27.  
  28. /* Transition  过渡
  29. -------------------------- */
  30. $--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
  31. $--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
  32. $--fade-linear-transition: opacity 200ms linear !default;
  33. $--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
  34. $--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
  35. $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
  36.  
  37. /* Colors 字体颜色，以及高亮显示
  38. -------------------------- */
  39. $--color-white: #fff !default;
  40. $--color-black: #000 !default;
  41.  
  42. $--color-primary: #409EFF !default;
  43. $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
  44. $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
  45. $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
  46. $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
  47. $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
  48. $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
  49. $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
  50. $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
  51. $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
  52.  
  53. $--color-success: #67c23a !default;
  54. $--color-warning: #e6a23c !default;
  55. $--color-danger: #f56c6c !default;
  56. $--color-info: #909399 !default;
  57.  
  58. $--color-success-light: mix($--color-white, $--color-success, 80%) !default;
  59. $--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
  60. $--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
  61. $--color-info-light: mix($--color-white, $--color-info, 80%) !default;
  62.  
  63. $--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
  64. $--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
  65. $--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
  66. $--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
  67.  
  68. $--color-text-primary: #303133 !default;
  69. $--color-text-regular: #606266 !default;
  70. $--color-text-secondary: #909399 !default;
  71. $--color-text-placeholder: #c0c4cc !default;
  72.  
  73. /* Link 链接的字体颜色
  74. -------------------------- */
  75. $--link-color: $--color-primary-light-2 !default;
  76. $--link-hover-color: $--color-primary !default;
  77.  
  78. /* Background 背景颜色
  79. -------------------------- */
  80. $--background-color-base: #f5f7fa !default;
  81.  
  82. /* Border 边框
  83. -------------------------- */
  84. $--border-width-base: 1px !default;
  85. $--border-style-base: solid !default;
  86. $--border-color-base: #dcdfe6 !default;
  87. $--border-color-light: #e4e7ed !default;
  88. $--border-color-lighter: #ebeef5 !default;
  89. $--border-color-extra-light: #f2f6fc !default;
  90. $--border-color-hover: $--color-text-placeholder !default;
  91. $--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
  92. $--border-radius-base: 4px !default;
  93. $--border-radius-small: 2px !default;
  94. $--border-radius-circle: 100% !default;
  95.  
  96. /* Box-shadow 盒子模型
  97. -------------------------- */
  98. $--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
  99. $--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
  100. $--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
  101.  
  102. /* Fill
  103. -------------------------- */
  104. $--fill-base: $--color-white !default;
  105.  
  106. /* Font
  107. -------------------------- */
  108. $--font-path: 'fonts' !default;
  109. $--font-size-base: 14px !default;
  110. $--font-size-small: 13px !default;
  111. $--font-size-large: 18px !default;
  112. $--font-color-disabled-base: #bbb !default;
  113. $--font-weight-primary: 500 !default;
  114. $--font-line-height-primary: 24px !default;
  115.  
  116. /* Size
  117. -------------------------- */
  118. $--size-base: 14px !default;
  119.  
  120. /* z-index
  121. -------------------------- */
  122. $--index-normal: 1 !default;
  123. $--index-top: 1000 !default;
  124. $--index-popper: 2000 !default;
  125.  
  126. /* Disable base
  127. -------------------------- */
  128. $--disabled-fill-base: $--background-color-base !default;
  129. $--disabled-color-base: $--color-text-placeholder !default;
  130. $--disabled-border-base: $--border-color-light !default;
  131.  
  132. /* Icon
  133. -------------------------- */
  134. $--icon-color: #666 !default;
  135. $--icon-color-base: $--color-info !default;
  136.  
  137. /* Checkbox
  138. -------------------------- */
  139. $--checkbox-font-size: 14px !default;
  140. $--checkbox-font-weight: $--font-weight-primary !default;
  141. $--checkbox-color: $--color-text-regular !default;
  142. $--checkbox-input-height: 14px !default;
  143. $--checkbox-input-width: 14px !default;
  144. $--checkbox-input-border-radius: $--border-radius-small !default;
  145. $--checkbox-input-fill: $--color-white !default;
  146. $--checkbox-input-border: $--border-base !default;
  147. $--checkbox-input-border-color: $--border-color-base !default;
  148. $--checkbox-icon-color: $--color-white !default;
  149.  
  150. $--checkbox-disabled-input-border-color: $--border-color-base !default;
  151. $--checkbox-disabled-input-fill: #edf2fc !default;
  152. $--checkbox-disabled-icon-color: $--color-text-placeholder !default;
  153.  
  154. $--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
  155. $--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
  156. $--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
  157.  
  158. $--checkbox-checked-text-color: $--color-primary !default;
  159. $--checkbox-checked-input-border-color: $--color-primary !default;
  160. $--checkbox-checked-input-fill: $--color-primary !default;
  161. $--checkbox-checked-icon-color: $--fill-base !default;
  162.  
  163. $--checkbox-input-border-color-hover: $--color-primary !default;
  164.  
  165. $--checkbox-bordered-height: 40px !default;
  166. $--checkbox-bordered-padding: 9px 20px 9px 10px !default;
  167. $--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
  168. $--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
  169. $--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
  170. $--checkbox-bordered-medium-input-height: 14px !default;
  171. $--checkbox-bordered-medium-input-width: 14px !default;
  172. $--checkbox-bordered-medium-height: 36px !default;
  173. $--checkbox-bordered-small-input-height: 12px !default;
  174. $--checkbox-bordered-small-input-width: 12px !default;
  175. $--checkbox-bordered-small-height: 32px !default;
  176. $--checkbox-bordered-mini-input-height: 12px !default;
  177. $--checkbox-bordered-mini-input-width: 12px !default;
  178. $--checkbox-bordered-mini-height: 28px !default;
  179.  
  180. $--checkbox-button-font-size: $--font-size-base !default;
  181. $--checkbox-button-checked-fill: $--color-primary !default;
  182. $--checkbox-button-checked-color: $--color-white !default;
  183. $--checkbox-button-checked-border-color: $--color-primary !default;
  184.  
  185. /* Radio
  186. -------------------------- */
  187. $--radio-font-size: 14px !default;
  188. $--radio-font-weight: $--font-weight-primary !default;
  189. $--radio-color: $--color-text-regular !default;
  190. $--radio-input-height: 14px !default;
  191. $--radio-input-width: 14px !default;
  192. $--radio-input-border-radius: $--border-radius-circle !default;
  193. $--radio-input-fill: $--color-white !default;
  194. $--radio-input-border: $--border-base !default;
  195. $--radio-input-border-color: $--border-color-base !default;
  196. $--radio-icon-color: $--color-white !default;
  197.  
  198. $--radio-disabled-input-border-color: $--disabled-border-base !default;
  199. $--radio-disabled-input-fill: $--disabled-fill-base !default;
  200. $--radio-disabled-icon-color: $--disabled-fill-base !default;
  201.  
  202. $--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
  203. $--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
  204. $--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
  205.  
  206. $--radio-checked-text-color: $--color-primary !default;
  207. $--radio-checked-input-border-color: $--color-primary !default;
  208. $--radio-checked-input-fill: $--color-white !default;
  209. $--radio-checked-icon-color: $--color-primary !default;
  210.  
  211. $--radio-input-border-color-hover: $--color-primary !default;
  212.  
  213. $--radio-bordered-height: 40px !default;
  214. $--radio-bordered-padding: 12px 20px 0 10px !default;
  215. $--radio-bordered-medium-padding: 10px 20px 0 10px !default;
  216. $--radio-bordered-small-padding: 8px 15px 0 10px !default;
  217. $--radio-bordered-mini-padding: 6px 15px 0 10px !default;
  218. $--radio-bordered-medium-input-height: 14px !default;
  219. $--radio-bordered-medium-input-width: 14px !default;
  220. $--radio-bordered-medium-height: 36px !default;
  221. $--radio-bordered-small-input-height: 12px !default;
  222. $--radio-bordered-small-input-width: 12px !default;
  223. $--radio-bordered-small-height: 32px !default;
  224. $--radio-bordered-mini-input-height: 12px !default;
  225. $--radio-bordered-mini-input-width: 12px !default;
  226. $--radio-bordered-mini-height: 28px !default;
  227.  
  228. $--radio-button-font-size: $--font-size-base !default;
  229. $--radio-button-checked-fill: $--color-primary !default;
  230. $--radio-button-checked-color: $--color-white !default;
  231. $--radio-button-checked-border-color: $--color-primary !default;
  232. $--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
  233.  
  234. /* Select
  235. -------------------------- */
  236. $--select-border-color-hover: $--border-color-hover !default;
  237. $--select-disabled-border: $--disabled-border-base !default;
  238. $--select-font-size: $--font-size-base !default;
  239. $--select-close-hover-color: $--color-text-secondary !default;
  240.  
  241. $--select-input-color: $--color-text-placeholder !default;
  242. $--select-multiple-input-color: #666 !default;
  243. $--select-input-focus-background: $--color-primary !default;
  244. $--select-input-font-size: 14px !default;
  245.  
  246. $--select-option-color: $--color-text-regular !default;
  247. $--select-option-disabled-color: $--color-text-placeholder !default;
  248. $--select-option-disabled-background: $--color-white !default;
  249. $--select-option-height: 34px !default;
  250. $--select-option-hover-background: $--background-color-base !default;
  251. $--select-option-selected: $--color-primary !default;
  252. $--select-option-selected-hover: $--background-color-base !default;
  253.  
  254. $--select-group-color: $--color-info !default;
  255. $--select-group-height: 30px !default;
  256. $--select-group-font-size: 12px !default;
  257.  
  258. $--select-dropdown-background: $--color-white !default;
  259. $--select-dropdown-shadow: $--box-shadow-light !default;
  260. $--select-dropdown-empty-color: #999 !default;
  261. $--select-dropdown-max-height: 274px !default;
  262. $--select-dropdown-padding: 6px 0 !default;
  263. $--select-dropdown-empty-padding: 10px 0 !default;
  264. $--select-dropdown-border: solid 1px $--border-color-light !default;
  265.  
  266. /* Alert
  267. -------------------------- */
  268. $--alert-padding: 8px 16px !default;
  269. $--alert-border-radius: $--border-radius-base !default;
  270. $--alert-title-font-size: 13px !default;
  271. $--alert-description-font-size: 12px !default;
  272. $--alert-close-font-size: 12px !default;
  273. $--alert-close-customed-font-size: 13px !default;
  274.  
  275. $--alert-success-color: $--color-success-lighter !default;
  276. $--alert-info-color: $--color-info-lighter !default;
  277. $--alert-warning-color: $--color-warning-lighter !default;
  278. $--alert-danger-color: $--color-danger-lighter !default;
  279.  
  280. $--alert-icon-size: 16px !default;
  281. $--alert-icon-large-size: 28px !default;
  282.  
  283. /* Message Box
  284. -------------------------- */
  285. $--msgbox-width: 420px !default;
  286. $--msgbox-border-radius: 4px !default;
  287. $--msgbox-font-size: $--font-size-large !default;
  288. $--msgbox-content-font-size: $--font-size-base !default;
  289. $--msgbox-content-color: $--color-text-regular !default;
  290. $--msgbox-error-font-size: 12px !default;
  291. $--msgbox-padding-primary: 15px !default;
  292.  
  293. $--msgbox-success-color: $--color-success !default;
  294. $--msgbox-info-color: $--color-info !default;
  295. $--msgbox-warning-color: $--color-warning !default;
  296. $--msgbox-danger-color: $--color-danger !default;
  297.  
  298. /* Message
  299. -------------------------- */
  300. $--message-shadow: $--box-shadow-base !default;
  301. $--message-min-width: 380px !default;
  302. $--message-background-color: #edf2fc !default;
  303. $--message-padding: 15px 15px 15px 20px !default;
  304. $--message-content-color: $--color-text-regular !default;
  305. $--message-close-color: $--color-text-placeholder !default;
  306. $--message-close-size: 16px !default;
  307. $--message-close-hover-color: $--color-text-secondary !default;
  308.  
  309. $--message-success-color: $--color-success !default;
  310. $--message-info-color: $--color-info !default;
  311. $--message-warning-color: $--color-warning !default;
  312. $--message-danger-color: $--color-danger !default;
  313.  
  314. /* Notification
  315. -------------------------- */
  316. $--notification-width: 330px !default;
  317. $--notification-padding: 14px 26px 14px 13px !default;
  318. $--notification-radius: 8px !default;
  319. $--notification-shadow: $--box-shadow-light !default;
  320. $--notification-border-color: $--border-color-lighter !default;
  321. $--notification-icon-size: 24px !default;
  322. $--notification-close-font-size: $--message-close-size !default;
  323. $--notification-group-margin: 13px !default;
  324. $--notification-font-size: $--font-size-base !default;
  325. $--notification-color: $--color-text-regular !default;
  326. $--notification-title-font-size: 16px !default;
  327. $--notification-title-color: $--color-text-primary !default;
  328.  
  329. $--notification-close-color: $--color-text-secondary !default;
  330. $--notification-close-hover-color: $--color-text-regular !default;
  331.  
  332. $--notification-success-color: $--color-success !default;
  333. $--notification-info-color: $--color-info !default;
  334. $--notification-warning-color: $--color-warning !default;
  335. $--notification-danger-color: $--color-danger !default;
  336.  
  337. /* Input
  338. -------------------------- */
  339. $--input-font-size: $--font-size-base !default;
  340. $--input-color: $--color-text-regular !default;
  341. $--input-width: 140px !default;
  342. $--input-height: 40px !default;
  343. $--input-border: $--border-base !default;
  344. $--input-border-color: $--border-color-base !default;
  345. $--input-border-radius: $--border-radius-base !default;
  346. $--input-border-color-hover: $--border-color-hover !default;
  347. $--input-fill: $--color-white !default;
  348. $--input-fill-disabled: $--disabled-fill-base !default;
  349. $--input-color-disabled: $--font-color-disabled-base !default;
  350. $--input-icon-color: $--color-text-placeholder !default;
  351. $--input-placeholder-color: $--color-text-placeholder !default;
  352. $--input-max-width: 314px !default;
  353.  
  354. $--input-hover-border: $--border-color-hover !default;
  355. $--input-clear-hover-color: $--color-text-secondary !default;
  356.  
  357. $--input-focus-border: $--color-primary !default;
  358. $--input-focus-fill: $--color-white !default;
  359.  
  360. $--input-disabled-fill: $--disabled-fill-base !default;
  361. $--input-disabled-border: $--disabled-border-base !default;
  362. $--input-disabled-color: $--disabled-color-base !default;
  363. $--input-disabled-placeholder-color: $--color-text-placeholder !default;
  364.  
  365. $--input-medium-font-size: 14px !default;
  366. $--input-medium-height: 36px !default;
  367.  
  368. $--input-small-font-size: 13px !default;
  369. $--input-small-height: 32px !default;
  370.  
  371. $--input-mini-font-size: 12px !default;
  372. $--input-mini-height: 28px !default;
  373.  
  374. /* Cascader
  375. -------------------------- */
  376. $--cascader-menu-fill: $--fill-base !default;
  377. $--cascader-menu-font-size: $--font-size-base !default;
  378. $--cascader-menu-radius: $--border-radius-base !default;
  379. $--cascader-menu-border: $--border-base !default;
  380. $--cascader-menu-border-color: $--border-color-base !default;
  381. $--cascader-menu-border-width: $--border-width-base !default;
  382. $--cascader-menu-color: $--color-text-regular !default;
  383. $--cascader-menu-option-color-active: $--color-text-secondary !default;
  384. $--cascader-menu-option-fill-active: rgba($--color-text-secondary, 0.12) !default;
  385. $--cascader-menu-option-color-hover: $--color-text-regular !default;
  386. $--cascader-menu-option-fill-hover: rgba($--color-text-primary, 0.06) !default;
  387. $--cascader-menu-option-color-disabled: #999 !default;
  388. $--cascader-menu-option-fill-disabled: rgba($--color-black, 0.06) !default;
  389. $--cascader-menu-option-empty-color: #666 !default;
  390. $--cascader-menu-group-color: #999 !default;
  391. $--cascader-menu-shadow: 0 1px 2px rgba($--color-black, 0.14), 0 0 3px rgba($--color-black, 0.14) !default;
  392. $--cascader-menu-option-pinyin-color: #999 !default;
  393. $--cascader-menu-submenu-shadow: 1px 1px 2px rgba($--color-black, 0.14), 1px 0 2px rgba($--color-black, 0.14) !default;
  394.  
  395. /* Group
  396. -------------------------- */
  397. $--group-option-flex: 0 0 (1/5) * 100% !default;
  398. $--group-option-offset-bottom: 12px !default;
  399. $--group-option-fill-hover: rgba($--color-black, 0.06) !default;
  400. $--group-title-color: $--color-black !default;
  401. $--group-title-font-size: $--font-size-base !default;
  402. $--group-title-width: 66px !default;
  403.  
  404. /* Tab
  405. -------------------------- */
  406. $--tab-font-size: $--font-size-base !default;
  407. $--tab-border-line: 1px solid #e4e4e4 !default;
  408. $--tab-header-color-active: $--color-text-secondary !default;
  409. $--tab-header-color-hover: $--color-text-regular !default;
  410. $--tab-header-color: $--color-text-regular !default;
  411. $--tab-header-fill-active: rgba($--color-black, 0.06) !default;
  412. $--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
  413. $--tab-vertical-header-width: 90px !default;
  414. $--tab-vertical-header-count-color: $--color-white !default;
  415. $--tab-vertical-header-count-fill: $--color-text-secondary !default;
  416.  
  417. /* Button
  418. -------------------------- */
  419. $--button-font-size: 14px !default;
  420. $--button-font-weight: $--font-weight-primary !default;
  421. $--button-border-radius: $--border-radius-base !default;
  422. $--button-padding-vertical: 12px !default;
  423. $--button-padding-horizontal: 20px !default;
  424.  
  425. $--button-medium-font-size: 14px !default;
  426. $--button-medium-border-radius: $--border-radius-base !default;
  427. $--button-medium-padding-vertical: 10px !default;
  428. $--button-medium-padding-horizontal: 20px !default;
  429.  
  430. $--button-small-font-size: 12px !default;
  431. $--button-small-border-radius: #{$--border-radius-base - 1} !default;
  432. $--button-small-padding-vertical: 9px !default;
  433. $--button-small-padding-horizontal: 15px !default;
  434.  
  435. $--button-mini-font-size: 12px !default;
  436. $--button-mini-border-radius: #{$--border-radius-base - 1} !default;
  437. $--button-mini-padding-vertical: 7px !default;
  438. $--button-mini-padding-horizontal: 15px !default;
  439.  
  440. $--button-default-color: $--color-text-regular !default;
  441. $--button-default-fill: $--color-white !default;
  442. $--button-default-border: $--border-color-base !default;
  443.  
  444. $--button-disabled-color: $--color-text-placeholder !default;
  445. $--button-disabled-fill: $--color-white !default;
  446. $--button-disabled-border: $--border-color-lighter !default;
  447.  
  448. $--button-primary-border: $--color-primary !default;
  449. $--button-primary-color: $--color-white !default;
  450. $--button-primary-fill: $--color-primary !default;
  451.  
  452. $--button-success-border: $--color-success !default;
  453. $--button-success-color: $--color-white !default;
  454. $--button-success-fill: $--color-success !default;
  455.  
  456. $--button-warning-border: $--color-warning !default;
  457. $--button-warning-color: $--color-white !default;
  458. $--button-warning-fill: $--color-warning !default;
  459.  
  460. $--button-danger-border: $--color-danger !default;
  461. $--button-danger-color: $--color-white !default;
  462. $--button-danger-fill: $--color-danger !default;
  463.  
  464. $--button-info-border: $--color-info !default;
  465. $--button-info-color: $--color-white !default;
  466. $--button-info-fill: $--color-info !default;
  467.  
  468. $--button-hover-tint-percent: 20% !default;
  469. $--button-active-shade-percent: 10% !default;
  470.  
  471. /* cascader
  472. -------------------------- */
  473. $--cascader-height: 200px !default;
  474.  
  475. /* Switch
  476. -------------------------- */
  477. $--switch-on-color: $--color-primary !default;
  478. $--switch-off-color: $--border-color-base !default;
  479. $--switch-disabled-color: $--border-color-lighter !default;
  480. $--switch-disabled-text-color: $--color-text-placeholder !default;
  481.  
  482. $--switch-font-size: $--font-size-base !default;
  483. $--switch-core-border-radius: 10px !default;
  484. $--switch-width: 40px !default;
  485. $--switch-height: 20px !default;
  486. $--switch-button-size: 16px !default;
  487.  
  488. /* Dialog
  489. -------------------------- */
  490. $--dialog-background-color: $--color-primary-light-4 !default;
  491. $--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
  492. $--dialog-close-hover-color: $--color-primary !default;
  493. $--dialog-title-font-size: $--font-size-large !default;
  494. $--dialog-font-size: 14px !default;
  495. $--dialog-line-height: $--font-line-height-primary !default;
  496. $--dialog-padding-primary: 20px !default;
  497.  
  498. /* Table
  499. -------------------------- */
  500. $--table-border-color: $--border-color-lighter !default;
  501. $--table-border: 1px solid $--table-border-color !default;
  502. $--table-text-color: $--color-text-regular !default;
  503. $--table-header-color: $--color-text-secondary !default;
  504. $--table-row-hover-background: $--background-color-base !default;
  505. $--table-current-row-background: $--color-primary-light-9 !default;
  506. $--table-header-background: $--color-white !default;
  507. $--table-footer-background: $--color-text-placeholder !default;
  508. $--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
  509.  
  510. /* Pagination
  511. -------------------------- */
  512. $--pagination-font-size: 13px !default;
  513. $--pagination-fill: $--color-white !default;
  514. $--pagination-color: $--color-text-primary !default;
  515. $--pagination-border-radius: 3px !default;
  516. $--pagination-button-color: $--color-text-primary !default;
  517. $--pagination-button-width: 35.5px !default;
  518. $--pagination-button-height: 28px !default;
  519. $--pagination-button-disabled-color: $--color-text-placeholder !default;
  520. $--pagination-button-disabled-fill: $--color-white !default;
  521. $--pagination-hover-fill: $--color-primary !default;
  522. $--pagination-hover-color: $--color-white !default;
  523.  
  524. /* Popover
  525. -------------------------- */
  526. $--popover-fill: $--color-white !default;
  527. $--popover-font-size: $--font-size-base !default;
  528. $--popover-border-color: $--border-color-lighter !default;
  529. $--popover-arrow-size: 6px !default;
  530. $--popover-padding: 12px !default;
  531. $--popover-padding-large: 18px 20px !default;
  532. $--popover-title-font-size: 16px !default;
  533. $--popover-title-color: $--color-text-primary !default;
  534.  
  535. /* Tooltip
  536. -------------------------- */
  537. $--tooltip-fill: $--color-text-primary !default;
  538. $--tooltip-color: $--color-white !default;
  539. $--tooltip-font-size: 12px !default;
  540. $--tooltip-border-color: $--color-text-primary !default;
  541. $--tooltip-arrow-size: 6px !default;
  542. $--tooltip-padding: 10px !default;
  543.  
  544. /* Tag
  545. -------------------------- */
  546. $--tag-padding: 0 10px !default;
  547. $--tag-fill: rgba($--color-primary, 0.10) !default;
  548. $--tag-color: $--color-primary !default;
  549. $--tag-border: rgba($--color-primary, 0.20) !default;
  550. $--tag-font-size: 12px !default;
  551. $--tag-border-radius: 4px !default;
  552.  
  553. $--tag-info-fill: rgba($--color-info, 0.10) !default;
  554. $--tag-info-border: rgba($--color-info, 0.20) !default;
  555. $--tag-info-color: $--color-info !default;
  556.  
  557. $--tag-primary-fill: rgba($--color-primary, 0.10) !default;
  558. $--tag-primary-border: rgba($--color-primary, 0.20) !default;
  559. $--tag-primary-color: $--color-primary !default;
  560.  
  561. $--tag-success-fill: rgba($--color-success, 0.10) !default;
  562. $--tag-success-border: rgba($--color-success, 0.20) !default;
  563. $--tag-success-color: $--color-success !default;
  564.  
  565. $--tag-warning-fill: rgba($--color-warning, 0.10) !default;
  566. $--tag-warning-border: rgba($--color-warning, 0.20) !default;
  567. $--tag-warning-color: $--color-warning !default;
  568.  
  569. $--tag-danger-fill: rgba($--color-danger, 0.10) !default;
  570. $--tag-danger-border: rgba($--color-danger, 0.20) !default;
  571. $--tag-danger-color: $--color-danger !default;
  572.  
  573. /* Tree
  574. -------------------------- */
  575. $--tree-node-hover-color: $--background-color-base !default;
  576. $--tree-text-color: $--color-text-regular !default;
  577. $--tree-expand-icon-color: $--color-text-placeholder !default;
  578.  
  579. /* Dropdown
  580. -------------------------- */
  581. $--dropdown-menu-box-shadow: $--box-shadow-light !default;
  582. $--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
  583. $--dropdown-menuItem-hover-color: $--link-color !default;
  584.  
  585. /* Badge
  586. -------------------------- */
  587. $--badge-fill: $--color-danger !default;
  588. $--badge-radius: 10px !default;
  589. $--badge-font-size: 12px !default;
  590. $--badge-padding: 6px !default;
  591. $--badge-size: 18px !default;
  592.  
  593. /* Card
  594. --------------------------*/
  595. $--card-border-color: $--border-color-lighter !default;
  596. $--card-border-radius: 4px !default;
  597. $--card-padding: 20px !default;
  598.  
  599. /* Slider
  600. --------------------------*/
  601. $--slider-main-background-color: $--color-primary !default;
  602. $--slider-runway-background-color: $--border-color-light !default;
  603. $--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
  604. $--slider-stop-background-color: $--color-white !default;
  605. $--slider-disable-color: $--color-text-placeholder !default;
  606.  
  607. $--slider-margin: 16px 0 !default;
  608. $--slider-border-radius: 3px !default;
  609. $--slider-height: 6px !default;
  610. $--slider-button-size: 16px !default;
  611. $--slider-button-wrapper-size: 36px !default;
  612. $--slider-button-wrapper-offset: -15px !default;
  613.  
  614. /* Steps
  615. --------------------------*/
  616. $--steps-border-color: $--disabled-border-base !default;
  617. $--steps-border-radius: 4px !default;
  618. $--steps-padding: 20px !default;
  619.  
  620. /* Menu
  621. --------------------------*/
  622. $--menu-item-font-size: $--font-size-base !default;
  623. $--menu-item-color: $--color-text-primary !default;
  624. $--menu-item-fill: $--color-white !default;
  625. $--menu-item-hover-fill: $--color-primary-light-9 !default;
  626.  
  627. /* Rate
  628. --------------------------*/
  629. $--rate-height: 20px !default;
  630. $--rate-font-size: $--font-size-base !default;
  631. $--rate-icon-size: 18px !default;
  632. $--rate-icon-margin: 6px !default;
  633. $--rate-icon-color: $--color-text-placeholder !default;
  634.  
  635. /* DatePicker
  636. --------------------------*/
  637. $--datepicker-color: $--color-text-regular !default;
  638. $--datepicker-off-color: $--color-text-placeholder !default;
  639. $--datepicker-header-color: $--color-text-regular !default;
  640. $--datepicker-icon-color: $--color-text-primary !default;
  641. $--datepicker-border-color: $--disabled-border-base !default;
  642. $--datepicker-inner-border-color: #e4e4e4 !default;
  643. $--datepicker-inrange-color: $--border-color-extra-light !default;
  644. $--datepicker-inrange-hover-color: $--border-color-extra-light !default;
  645. $--datepicker-active-color: $--color-primary !default;
  646. $--datepicker-text-hover-color: $--color-primary !default;
  647. $--datepicker-cell-hover-color: #fff !default;
  648.  
  649. /* Loading
  650. --------------------------*/
  651. $--loading-spinner-size: 42px !default;
  652. $--loading-fullscreen-spinner-size: 50px !default;
  653.  
  654. /* Scrollbar
  655. --------------------------*/
  656. $--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;
  657. $--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;
  658.  
  659. /* Carousel
  660. --------------------------*/
  661. $--carousel-arrow-font-size: 12px !default;
  662. $--carousel-arrow-size: 36px !default;
  663. $--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
  664. $--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
  665. $--carousel-indicator-width: 30px !default;
  666. $--carousel-indicator-height: 2px !default;
  667. $--carousel-indicator-padding-horizontal: 4px !default;
  668. $--carousel-indicator-padding-vertical: 12px !default;
  669. $--carousel-indicator-out-color: $--border-color-hover !default;
  670.  
  671. /* Collapse
  672. --------------------------*/
  673. $--collapse-border-color: $--border-color-lighter !default;
  674. $--collapse-header-height: 48px !default;
  675. $--collapse-header-padding: 20px !default;
  676. $--collapse-header-fill: $--color-white !default;
  677. $--collapse-header-color: $--color-text-primary !default;
  678. $--collapse-header-size: 13px !default;
  679. $--collapse-content-fill: $--color-white !default;
  680. $--collapse-content-size: 13px !default;
  681. $--collapse-content-color: $--color-text-primary !default;
  682.  
  683. /* Transfer
  684. --------------------------*/
  685. $--transfer-border-color: $--border-color-lighter !default;
  686. $--transfer-border-radius: $--border-radius-base !default;
  687. $--transfer-panel-width: 200px !default;
  688. $--transfer-panel-header-height: 40px !default;
  689. $--transfer-panel-header-background: $--background-color-base !default;
  690. $--transfer-panel-footer-height: 40px !default;
  691. $--transfer-panel-body-height: 246px !default;
  692. $--transfer-item-height: 30px !default;
  693. $--transfer-item-hover-background: $--color-text-secondary !default;
  694. $--transfer-filter-height: 32px !default;
  695.  
  696. /* Header
  697. --------------------------*/
  698. $--header-padding: 0 20px !default;
  699.  
  700. /* Footer
  701. --------------------------*/
  702. $--footer-padding: 0 20px !default;
  703.  
  704. /* Main
  705. --------------------------*/
  706. $--main-padding: 20px !default;
  707.  
  708. /* Break-point
  709. --------------------------*/
  710. $--sm: 768px !default;
  711. $--md: 992px !default;
  712. $--lg: 1200px !default;
  713. $--xl: 1920px !default;
  714.  
  715. $--breakpoints: (
  716. 'xs' : (max-width: $--sm - 1),
  717. 'sm' : (min-width: $--sm),
  718. 'md' : (min-width: $--md),
  719. 'lg' : (min-width: $--lg),
  720. 'xl' : (min-width: $--xl)
  721. );
  722.  
  723. $--breakpoints-spec: (
  724. 'xs-only' : (max-width: $--sm - 1),
  725. 'sm-and-up' : (min-width: $--sm),
  726. 'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md} - 1)",
  727. 'sm-and-down': (max-width: $--md - 1),
  728. 'md-and-up' : (min-width: $--md),
  729. 'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg } - 1)",
  730. 'md-and-down': (max-width: $--lg - 1),
  731. 'lg-and-up' : (min-width: $--lg),
  732. 'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl } - 1)",
  733. 'lg-and-down': (max-width: $--xl - 1),
  734. 'xl-only' : (min-width: $--xl),
  735. );

Element-UI自定义主题的更多相关文章

  1. element ui 自定义主题失败（primordials is not defined）

    卸载: 1.卸载cnpm npm uninstall cnpm -g 2.卸载vue-cli npm uninstall @vue/cli -g 3.卸载nodejs和删除文件 C:\Program ...

  2. element 如何自定义主题

    自定义主题 在我学习element的时候,就直接忽略了.现在返回来学习一下 ,原来 通过自定义主题可以改变elemnt中默认的一些样式.这样,对于一些不想用elment自带但是用到比较多的样式,可以进 ...

  3. element ui 自定义异步验证

    之前提到过,axios是一个异步请求,但是很多时候我们都需要同步请求,比如在element的表单验证中需要验证一个用户名是否存在的时候,异步请求好像就不太好用了.前边博客中提到过,这种情况可以用es6 ...

  4. element.ui 自定义样式问题

    方法有很多种 自定义类名 <el-button class="search_button" @click="search">查询</el-bu ...

  5. element ui table render-header自定义表头信息使用

    在使用vue自定义组件内容过程之中,我们绝大多数情况下都是通过预先写好不同的html模板,再通过props传入不同的值来渲染不同的模板.例如我们需要实现一个<v-title size='1'&g ...

  6. element ui主题色跟换

    node_modules\ element ui\ lib\ theme-dafault  下载的主题色替换掉改文件... ================== 但是会出现  搜索框iocon 样式换 ...

  7. vue + element ui 表格自定义表头，提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  8. 18 UI美化自定义主题样式代码

    自定义主题 假设我们我们对现有的样式不大满意 那么可在工程目录res/values下的styles.xml自定义 方法: 1. res/values下的styles.xml文件中自定义一个标签 < ...

  9. Vue + Element UI 实现权限管理系统（更换皮肤主题）

    自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动. yarn add ele ...

  10. Vue + Element UI 实现权限管理系统 前端篇（六）：更换皮肤主题

    自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动. yarn add ele ...

随机推荐

  1. 如何迅速分析出系统CPU的瓶颈在哪里？

    内容出自极客时间专栏<Linux 性能优化实战> CPU 的性能指标那么多,CPU 性能分析工具一抓一大把,换成实际的工作场景,该观察什么指标.选择哪个性能工具呢? 不要担心,今天我就以多 ...

  2. innobackupex 出现Unrecognized character \x01; marked by

    centos 7.2 mysql 5.7.16 innobackupex version 2.4.6 [root@Devops-mysql-150-115 sh]# innobackupex --de ...

  3. Python自动化运维一之psutil

    1.1系统性能信息模块psutil 1.1.1下载安装psutil 1.   wget https://pypi.python.org/packages/source/p/psutil/psutil- ...

  4. CultureInfo 类中需要的【区域性名称】查询

    2019独角兽企业重金招聘Python工程师标准>>> 提供有关特定区域性的信息(对于非托管代码开发,则称为"区域设置"). 这些信息包括区域性的名称.书写系统. ...

  5. 历史上的今天mysql数据库包含详情分类以及图片

    历史上的今天mysql数据库包含详情分类以及图片 https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111debo71iaJ& ...

  6. C. Cave Painting(最小公倍数的应用)

    \(\color{Red}{网上的题解都是投机取巧啊,虽然也没错}\) \(Ⅰ.先说一下投机取巧的方法\) \(自己写几个例子会发现k很小的时候满足条件的n就变得很大\) \(所以我们直接暴力从1判断 ...

  7. 简单ajax跨域请求

    最近遇到需要ajax跨域的需求 首先看下不做任何处理特别处理的ajax跨域请求会出现什么样的错误 客户端代码: <script type="text/javascript"& ...

  8. javaScript 添加和移除class类名的几种方法

    添加类属性: // 一次只能设置一个类值,如果当前属性本身存在类值,会被替换 element.className = '类名'; /* * .setAttribute 用来设置自定义属性和值的 * 自 ...

  9. 【Hadoop离线基础总结】关键路径转化率分析（漏斗模型）

    关键路径转化 需求 在一条指定的业务流程中,各个步骤的完成人数及相对上一个步骤的百分比 模型设计 定义好业务流程中的页面标识 Step1. /item Step2. /category Step3. ...

  10. Python：日薪工资计算

    劳动者离职,当天要结清工资,实际操作是当天算清,三日内结清.有的公司省人力和吃利息,统一计算,统一下月月底发放. 有时要验算下离职工资,用Python操作一番,输入计时天数.请假小时.加班小时.基本工 ...