You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1020 lines
35 KiB

2 years ago
  1. /* Element Chalk Variables */
  2. // Special comment for theme configurator
  3. // type|skipAutoTranslation|Category|Order
  4. // skipAutoTranslation 1
  5. /* Transition
  6. -------------------------- */
  7. $--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
  8. $--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
  9. $--fade-linear-transition: opacity 200ms linear !default;
  10. $--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
  11. $--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
  12. $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
  13. /* Color
  14. -------------------------- */
  15. $--color-menu-background: #303030;
  16. $--color-menu-item-hover: rgb(38, 38, 38);
  17. $--background-color-base: #2b2a2a !default;
  18. $--color-warning: #FFBA00 !default;
  19. $--color-text-primary: #fff !default;
  20. $--color-table-border: #303030;
  21. $--color-table-font: #fff;
  22. $--color-table-current-row-background: #0d0d0d;
  23. $--color-table-header-background: #0d0d0d;
  24. $--color-tree-font: #fff;
  25. $--color-tooltip-fill: #303133;
  26. $--color-input: #fff !default;
  27. $--color-button-primary-background: #1890ff !default;
  28. $--color-button-primary-text: #fff !default;
  29. $--color-button-primary-active: red !default;
  30. $--color-button-default: #fff;
  31. /// color|1|Brand Color|0
  32. $--color-primary: #1890ff !default;
  33. /// color|1|Background Color|4
  34. $--color-white: #FFFFFF !default;
  35. /// color|1|Background Color|4
  36. $--color-black: #000000 !default;
  37. $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
  38. $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
  39. $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
  40. $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
  41. $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
  42. $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
  43. $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
  44. $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
  45. $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
  46. /// color|1|Functional Color|1
  47. $--color-success: #67C23A !default;
  48. /// color|1|Functional Color|1
  49. //$--color-warning: #E6A23C !default;
  50. /// color|1|Functional Color|1
  51. $--color-danger: #F56C6C !default;
  52. /// color|1|Functional Color|1
  53. $--color-info: #909399 !default;
  54. $--color-success-light: mix($--color-white, $--color-success, 80%) !default;
  55. $--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
  56. $--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
  57. $--color-info-light: mix($--color-white, $--color-info, 80%) !default;
  58. $--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
  59. $--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
  60. $--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
  61. $--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
  62. /// color|1|Font Color|2
  63. //$--color-text-primary: #303133 !default;
  64. /// color|1|Font Color|2
  65. $--color-text-regular: #606266 !default;
  66. /// color|1|Font Color|2
  67. $--color-text-secondary: #909399 !default;
  68. /// color|1|Font Color|2
  69. $--color-text-placeholder: #C0C4CC !default;
  70. /// color|1|Border Color|3
  71. $--border-color-base: #DCDFE6 !default;
  72. /// color|1|Border Color|3
  73. $--border-color-light: #E4E7ED !default;
  74. /// color|1|Border Color|3
  75. $--border-color-lighter: #EBEEF5 !default;
  76. /// color|1|Border Color|3
  77. $--border-color-extra-light: #F2F6FC !default;
  78. // Background
  79. /// color|1|Background Color|4
  80. //$--background-color-base: #2b2a2a !default;
  81. /* Link
  82. -------------------------- */
  83. $--link-color: $--color-primary-light-2 !default;
  84. $--link-hover-color: $--color-primary !default;
  85. /* Border
  86. -------------------------- */
  87. $--border-width-base: 1px !default;
  88. $--border-style-base: solid !default;
  89. $--border-color-hover: $--color-text-placeholder !default;
  90. $--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
  91. /// borderRadius|1|Radius|0
  92. $--border-radius-base: 4px !default;
  93. /// borderRadius|1|Radius|0
  94. $--border-radius-small: 2px !default;
  95. /// borderRadius|1|Radius|0
  96. $--border-radius-circle: 100% !default;
  97. /// borderRadius|1|Radius|0
  98. $--border-radius-zero: 0 !default;
  99. // Box-shadow
  100. /// boxShadow|1|Shadow|1
  101. $--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
  102. // boxShadow|1|Shadow|1
  103. $--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
  104. /// boxShadow|1|Shadow|1
  105. $--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
  106. /* Fill
  107. -------------------------- */
  108. $--fill-base: $--color-white !default;
  109. /* Typography
  110. -------------------------- */
  111. $--font-path: 'fonts' !default;
  112. $--font-display: 'auto' !default;
  113. /// fontSize|1|Font Size|0
  114. $--font-size-extra-large: 20px !default;
  115. /// fontSize|1|Font Size|0
  116. $--font-size-large: 18px !default;
  117. /// fontSize|1|Font Size|0
  118. $--font-size-medium: 16px !default;
  119. /// fontSize|1|Font Size|0
  120. $--font-size-base: 14px !default;
  121. /// fontSize|1|Font Size|0
  122. $--font-size-small: 13px !default;
  123. /// fontSize|1|Font Size|0
  124. $--font-size-extra-small: 12px !default;
  125. /// fontWeight|1|Font Weight|1
  126. $--font-weight-primary: 500 !default;
  127. /// fontWeight|1|Font Weight|1
  128. $--font-weight-secondary: 100 !default;
  129. /// fontLineHeight|1|Line Height|2
  130. $--font-line-height-primary: 24px !default;
  131. /// fontLineHeight|1|Line Height|2
  132. $--font-line-height-secondary: 16px !default;
  133. $--font-color-disabled-base: #bbb !default;
  134. /* Size
  135. -------------------------- */
  136. $--size-base: 14px !default;
  137. /* z-index
  138. -------------------------- */
  139. $--index-normal: 1 !default;
  140. $--index-top: 1000 !default;
  141. $--index-popper: 2000 !default;
  142. /* Disable base
  143. -------------------------- */
  144. $--disabled-fill-base: $--background-color-base !default;
  145. $--disabled-color-base: $--color-text-placeholder !default;
  146. $--disabled-border-base: $--border-color-light !default;
  147. /* Icon
  148. -------------------------- */
  149. $--icon-color: #666 !default;
  150. $--icon-color-base: $--color-info !default;
  151. /* Checkbox
  152. -------------------------- */
  153. /// fontSize||Font|1
  154. $--checkbox-font-size: 14px !default;
  155. /// fontWeight||Font|1
  156. $--checkbox-font-weight: $--font-weight-primary !default;
  157. /// color||Color|0
  158. $--checkbox-font-color: $--color-text-regular !default;
  159. $--checkbox-input-height: 14px !default;
  160. $--checkbox-input-width: 14px !default;
  161. /// borderRadius||Border|2
  162. $--checkbox-border-radius: $--border-radius-small !default;
  163. /// color||Color|0
  164. $--checkbox-background-color: $--color-white !default;
  165. $--checkbox-input-border: $--border-base !default;
  166. /// color||Color|0
  167. $--checkbox-disabled-border-color: $--border-color-base !default;
  168. $--checkbox-disabled-input-fill: #edf2fc !default;
  169. $--checkbox-disabled-icon-color: $--color-text-placeholder !default;
  170. $--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
  171. $--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
  172. $--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
  173. /// color||Color|0
  174. $--checkbox-checked-font-color: $--color-primary !default;
  175. $--checkbox-checked-input-border-color: $--color-primary !default;
  176. /// color||Color|0
  177. $--checkbox-checked-background-color: $--color-primary !default;
  178. $--checkbox-checked-icon-color: $--fill-base !default;
  179. $--checkbox-input-border-color-hover: $--color-primary !default;
  180. /// height||Other|4
  181. $--checkbox-bordered-height: 40px !default;
  182. /// padding||Spacing|3
  183. $--checkbox-bordered-padding: 9px 20px 9px 10px !default;
  184. /// padding||Spacing|3
  185. $--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
  186. /// padding||Spacing|3
  187. $--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
  188. /// padding||Spacing|3
  189. $--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
  190. $--checkbox-bordered-medium-input-height: 14px !default;
  191. $--checkbox-bordered-medium-input-width: 14px !default;
  192. /// height||Other|4
  193. $--checkbox-bordered-medium-height: 36px !default;
  194. $--checkbox-bordered-small-input-height: 12px !default;
  195. $--checkbox-bordered-small-input-width: 12px !default;
  196. /// height||Other|4
  197. $--checkbox-bordered-small-height: 32px !default;
  198. $--checkbox-bordered-mini-input-height: 12px !default;
  199. $--checkbox-bordered-mini-input-width: 12px !default;
  200. /// height||Other|4
  201. $--checkbox-bordered-mini-height: 28px !default;
  202. /// color||Color|0
  203. $--checkbox-button-checked-background-color: $--color-primary !default;
  204. /// color||Color|0
  205. $--checkbox-button-checked-font-color: $--color-white !default;
  206. /// color||Color|0
  207. $--checkbox-button-checked-border-color: $--color-primary !default;
  208. /* Radio
  209. -------------------------- */
  210. /// fontSize||Font|1
  211. $--radio-font-size: $--font-size-base !default;
  212. /// fontWeight||Font|1
  213. $--radio-font-weight: $--font-weight-primary !default;
  214. /// color||Color|0
  215. $--radio-font-color: $--color-text-regular !default;
  216. $--radio-input-height: 14px !default;
  217. $--radio-input-width: 14px !default;
  218. /// borderRadius||Border|2
  219. $--radio-input-border-radius: $--border-radius-circle !default;
  220. /// color||Color|0
  221. $--radio-input-background-color: $--color-white !default;
  222. $--radio-input-border: $--border-base !default;
  223. /// color||Color|0
  224. $--radio-input-border-color: $--border-color-base !default;
  225. /// color||Color|0
  226. $--radio-icon-color: $--color-white !default;
  227. $--radio-disabled-input-border-color: $--disabled-border-base !default;
  228. $--radio-disabled-input-fill: $--disabled-fill-base !default;
  229. $--radio-disabled-icon-color: $--disabled-fill-base !default;
  230. $--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
  231. $--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
  232. $--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
  233. /// color||Color|0
  234. $--radio-checked-font-color: $--color-primary !default;
  235. /// color||Color|0
  236. $--radio-checked-input-border-color: $--color-primary !default;
  237. /// color||Color|0
  238. $--radio-checked-input-background-color: $--color-white !default;
  239. /// color||Color|0
  240. $--radio-checked-icon-color: $--color-primary !default;
  241. $--radio-input-border-color-hover: $--color-primary !default;
  242. $--radio-bordered-height: 40px !default;
  243. $--radio-bordered-padding: 12px 20px 0 10px !default;
  244. $--radio-bordered-medium-padding: 10px 20px 0 10px !default;
  245. $--radio-bordered-small-padding: 8px 15px 0 10px !default;
  246. $--radio-bordered-mini-padding: 6px 15px 0 10px !default;
  247. $--radio-bordered-medium-input-height: 14px !default;
  248. $--radio-bordered-medium-input-width: 14px !default;
  249. $--radio-bordered-medium-height: 36px !default;
  250. $--radio-bordered-small-input-height: 12px !default;
  251. $--radio-bordered-small-input-width: 12px !default;
  252. $--radio-bordered-small-height: 32px !default;
  253. $--radio-bordered-mini-input-height: 12px !default;
  254. $--radio-bordered-mini-input-width: 12px !default;
  255. $--radio-bordered-mini-height: 28px !default;
  256. /// fontSize||Font|1
  257. $--radio-button-font-size: $--font-size-base !default;
  258. /// color||Color|0
  259. $--radio-button-checked-background-color: $--color-primary !default;
  260. /// color||Color|0
  261. $--radio-button-checked-font-color: $--color-white !default;
  262. /// color||Color|0
  263. $--radio-button-checked-border-color: $--color-primary !default;
  264. $--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
  265. /* Select
  266. -------------------------- */
  267. $--select-border-color-hover: $--border-color-hover !default;
  268. $--select-disabled-border: $--disabled-border-base !default;
  269. /// fontSize||Font|1
  270. $--select-font-size: $--font-size-base !default;
  271. $--select-close-hover-color: $--color-text-secondary !default;
  272. $--select-input-color: $--color-text-placeholder !default;
  273. $--select-multiple-input-color: #666 !default;
  274. /// color||Color|0
  275. $--select-input-focus-border-color: $--color-primary !default;
  276. /// fontSize||Font|1
  277. $--select-input-font-size: 14px !default;
  278. $--color-select-option: #fff;
  279. $--select-option-color: $--color-select-option !default;
  280. $--select-option-disabled-color: $--color-text-placeholder !default;
  281. $--select-option-disabled-background: $--color-white !default;
  282. /// height||Other|4
  283. $--select-option-height: 34px !default;
  284. $--select-option-hover-background: $--background-color-base !default;
  285. /// color||Color|0
  286. $--select-option-selected-font-color: $--color-primary !default;
  287. $--select-option-selected-hover: $--background-color-base !default;
  288. $--select-group-color: $--color-info !default;
  289. $--select-group-height: 30px !default;
  290. $--select-group-font-size: 12px !default;
  291. $--select-dropdown-background: $--color-white !default;
  292. $--select-dropdown-shadow: $--box-shadow-light !default;
  293. $--select-dropdown-empty-color: #999 !default;
  294. /// height||Other|4
  295. $--select-dropdown-max-height: 274px !default;
  296. $--select-dropdown-padding: 6px 0 !default;
  297. $--select-dropdown-empty-padding: 10px 0 !default;
  298. $--select-dropdown-border: solid 1px $--border-color-light !default;
  299. /* Alert
  300. -------------------------- */
  301. $--alert-padding: 8px 16px !default;
  302. /// borderRadius||Border|2
  303. $--alert-border-radius: $--border-radius-base !default;
  304. /// fontSize||Font|1
  305. $--alert-title-font-size: 13px !default;
  306. /// fontSize||Font|1
  307. $--alert-description-font-size: 12px !default;
  308. /// fontSize||Font|1
  309. $--alert-close-font-size: 12px !default;
  310. /// fontSize||Font|1
  311. $--alert-close-customed-font-size: 13px !default;
  312. $--alert-success-color: $--color-success-lighter !default;
  313. $--alert-info-color: $--color-info-lighter !default;
  314. $--alert-warning-color: $--color-warning-lighter !default;
  315. $--alert-danger-color: $--color-danger-lighter !default;
  316. /// height||Other|4
  317. $--alert-icon-size: 16px !default;
  318. /// height||Other|4
  319. $--alert-icon-large-size: 28px !default;
  320. /* MessageBox
  321. -------------------------- */
  322. /// color||Color|0
  323. $--messagebox-title-color: $--color-text-primary !default;
  324. $--msgbox-width: 420px !default;
  325. $--msgbox-border-radius: 4px !default;
  326. /// fontSize||Font|1
  327. $--messagebox-font-size: $--font-size-large !default;
  328. /// fontSize||Font|1
  329. $--messagebox-content-font-size: $--font-size-base !default;
  330. /// color||Color|0
  331. $--messagebox-content-color: $--color-text-regular !default;
  332. /// fontSize||Font|1
  333. $--messagebox-error-font-size: 12px !default;
  334. $--msgbox-padding-primary: 15px !default;
  335. /// color||Color|0
  336. $--messagebox-success-color: $--color-success !default;
  337. /// color||Color|0
  338. $--messagebox-info-color: $--color-info !default;
  339. /// color||Color|0
  340. $--messagebox-warning-color: $--color-warning !default;
  341. /// color||Color|0
  342. $--messagebox-danger-color: $--color-danger !default;
  343. /* Message
  344. -------------------------- */
  345. $--message-shadow: $--box-shadow-base !default;
  346. $--message-min-width: 380px !default;
  347. $--message-background-color: #edf2fc !default;
  348. $--message-padding: 15px 15px 15px 20px !default;
  349. /// color||Color|0
  350. $--message-close-icon-color: $--color-text-placeholder !default;
  351. /// height||Other|4
  352. $--message-close-size: 16px !default;
  353. /// color||Color|0
  354. $--message-close-hover-color: $--color-text-secondary !default;
  355. /// color||Color|0
  356. $--message-success-font-color: $--color-success !default;
  357. /// color||Color|0
  358. $--message-info-font-color: $--color-info !default;
  359. /// color||Color|0
  360. $--message-warning-font-color: $--color-warning !default;
  361. /// color||Color|0
  362. $--message-danger-font-color: $--color-danger !default;
  363. /* Notification
  364. -------------------------- */
  365. $--notification-width: 330px !default;
  366. /// padding||Spacing|3
  367. $--notification-padding: 14px 26px 14px 13px !default;
  368. $--notification-radius: 8px !default;
  369. $--notification-shadow: $--box-shadow-light !default;
  370. /// color||Color|0
  371. $--notification-border-color: $--border-color-lighter !default;
  372. $--notification-icon-size: 24px !default;
  373. $--notification-close-font-size: $--message-close-size !default;
  374. $--notification-group-margin-left: 13px !default;
  375. $--notification-group-margin-right: 8px !default;
  376. /// fontSize||Font|1
  377. $--notification-content-font-size: $--font-size-base !default;
  378. /// color||Color|0
  379. $--notification-content-color: $--color-text-regular !default;
  380. /// fontSize||Font|1
  381. $--notification-title-font-size: 16px !default;
  382. /// color||Color|0
  383. $--notification-title-color: $--color-text-primary !default;
  384. /// color||Color|0
  385. $--notification-close-color: $--color-text-secondary !default;
  386. /// color||Color|0
  387. $--notification-close-hover-color: $--color-text-regular !default;
  388. /// color||Color|0
  389. $--notification-success-icon-color: $--color-success !default;
  390. /// color||Color|0
  391. $--notification-info-icon-color: $--color-info !default;
  392. /// color||Color|0
  393. $--notification-warning-icon-color: $--color-warning !default;
  394. /// color||Color|0
  395. $--notification-danger-icon-color: $--color-danger !default;
  396. /* Input
  397. -------------------------- */
  398. $--input-font-size: $--font-size-base !default;
  399. /// color||Color|0
  400. $--input-font-color: $--color-text-regular !default;
  401. /// height||Other|4
  402. $--input-width: 140px !default;
  403. /// height||Other|4
  404. $--input-height: 40px !default;
  405. $--input-border: $--border-base !default;
  406. $--input-border-color: $--border-color-base !default;
  407. /// borderRadius||Border|2
  408. $--input-border-radius: $--border-radius-base !default;
  409. $--input-border-color-hover: $--border-color-hover !default;
  410. /// color||Color|0
  411. $--input-background-color: $--color-input !default;
  412. $--input-fill-disabled: $--disabled-fill-base !default;
  413. $--input-color-disabled: $--font-color-disabled-base !default;
  414. /// color||Color|0
  415. $--input-icon-color: $--color-text-placeholder !default;
  416. /// color||Color|0
  417. $--input-placeholder-color: $--color-text-placeholder !default;
  418. $--input-max-width: 314px !default;
  419. $--input-hover-border: $--border-color-hover !default;
  420. $--input-clear-hover-color: $--color-text-secondary !default;
  421. $--input-focus-border: $--color-primary !default;
  422. $--input-focus-fill: $--color-white !default;
  423. $--input-disabled-fill: $--disabled-fill-base !default;
  424. $--input-disabled-border: $--disabled-border-base !default;
  425. $--input-disabled-color: $--disabled-color-base !default;
  426. $--input-disabled-placeholder-color: $--color-text-placeholder !default;
  427. /// fontSize||Font|1
  428. $--input-medium-font-size: 14px !default;
  429. /// height||Other|4
  430. $--input-medium-height: 36px !default;
  431. /// fontSize||Font|1
  432. $--input-small-font-size: 13px !default;
  433. /// height||Other|4
  434. $--input-small-height: 32px !default;
  435. /// fontSize||Font|1
  436. $--input-mini-font-size: 12px !default;
  437. /// height||Other|4
  438. $--input-mini-height: 28px !default;
  439. /* Cascader
  440. -------------------------- */
  441. /// color||Color|0
  442. $--cascader-menu-font-color: $--color-text-regular !default;
  443. /// color||Color|0
  444. $--cascader-menu-selected-font-color: $--color-primary !default;
  445. $--cascader-menu-fill: $--fill-base !default;
  446. $--cascader-menu-font-size: $--font-size-base !default;
  447. $--cascader-menu-radius: $--border-radius-base !default;
  448. $--cascader-menu-border: solid 1px $--border-color-light !default;
  449. $--cascader-menu-shadow: $--box-shadow-light !default;
  450. $--cascader-node-background-hover: $--background-color-base !default;
  451. $--cascader-node-color-disabled:$--color-text-placeholder !default;
  452. $--cascader-color-empty:$--color-text-placeholder !default;
  453. $--cascader-tag-background: #f0f2f5;
  454. /* Group
  455. -------------------------- */
  456. $--group-option-flex: 0 0 (1/5) * 100% !default;
  457. $--group-option-offset-bottom: 12px !default;
  458. $--group-option-fill-hover: rgba($--color-black, 0.06) !default;
  459. $--group-title-color: $--color-black !default;
  460. $--group-title-font-size: $--font-size-base !default;
  461. $--group-title-width: 66px !default;
  462. /* Tab
  463. -------------------------- */
  464. $--tab-font-size: $--font-size-base !default;
  465. $--tab-border-line: 1px solid #e4e4e4 !default;
  466. $--tab-header-color-active: $--color-text-secondary !default;
  467. $--tab-header-color-hover: $--color-text-regular !default;
  468. $--tab-header-color: $--color-text-regular !default;
  469. $--tab-header-fill-active: rgba($--color-black, 0.06) !default;
  470. $--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
  471. $--tab-vertical-header-width: 90px !default;
  472. $--tab-vertical-header-count-color: $--color-white !default;
  473. $--tab-vertical-header-count-fill: $--color-text-secondary !default;
  474. /* Button
  475. -------------------------- */
  476. /// fontSize||Font|1
  477. $--button-font-size: $--font-size-base !default;
  478. /// fontWeight||Font|1
  479. $--button-font-weight: $--font-weight-primary !default;
  480. /// borderRadius||Border|2
  481. $--button-border-radius: $--border-radius-base !default;
  482. /// padding||Spacing|3
  483. $--button-padding-vertical: 12px !default;
  484. /// padding||Spacing|3
  485. $--button-padding-horizontal: 20px !default;
  486. /// fontSize||Font|1
  487. $--button-medium-font-size: $--font-size-base !default;
  488. /// borderRadius||Border|2
  489. $--button-medium-border-radius: $--border-radius-base !default;
  490. /// padding||Spacing|3
  491. $--button-medium-padding-vertical: 10px !default;
  492. /// padding||Spacing|3
  493. $--button-medium-padding-horizontal: 20px !default;
  494. /// fontSize||Font|1
  495. $--button-small-font-size: 12px !default;
  496. $--button-small-border-radius: #{$--border-radius-base - 1} !default;
  497. /// padding||Spacing|3
  498. $--button-small-padding-vertical: 9px !default;
  499. /// padding||Spacing|3
  500. $--button-small-padding-horizontal: 15px !default;
  501. /// fontSize||Font|1
  502. $--button-mini-font-size: 12px !default;
  503. $--button-mini-border-radius: #{$--border-radius-base - 1} !default;
  504. /// padding||Spacing|3
  505. $--button-mini-padding-vertical: 7px !default;
  506. /// padding||Spacing|3
  507. $--button-mini-padding-horizontal: 15px !default;
  508. /// color||Color|0
  509. $--button-default-font-color: $--color-text-regular !default;
  510. /// color||Color|0
  511. $--button-default-background-color: $--color-button-default !default;
  512. /// color||Color|0
  513. $--button-default-border-color: $--border-color-base !default;
  514. /// color||Color|0
  515. $--button-disabled-font-color: $--color-text-placeholder !default;
  516. /// color||Color|0
  517. $--button-disabled-background-color: $--color-white !default;
  518. /// color||Color|0
  519. $--button-disabled-border-color: $--border-color-lighter !default;
  520. /// color||Color|0
  521. $--button-primary-border-color: $--color-primary !default;
  522. /// color||Color|0
  523. $--button-primary-font-color: $--color-button-primary-text !default;
  524. /// color||Color|0
  525. $--button-primary-background-color: $--color-button-primary-background !default;
  526. /// color||Color|0
  527. $--button-success-border-color: $--color-success !default;
  528. /// color||Color|0
  529. $--button-success-font-color: $--color-white !default;
  530. /// color||Color|0
  531. $--button-success-background-color: $--color-success !default;
  532. /// color||Color|0
  533. $--button-warning-border-color: $--color-warning !default;
  534. /// color||Color|0
  535. $--button-warning-font-color: $--color-white !default;
  536. /// color||Color|0
  537. $--button-warning-background-color: $--color-warning !default;
  538. /// color||Color|0
  539. $--button-danger-border-color: $--color-danger !default;
  540. /// color||Color|0
  541. $--button-danger-font-color: $--color-white !default;
  542. /// color||Color|0
  543. $--button-danger-background-color: $--color-danger !default;
  544. /// color||Color|0
  545. $--button-info-border-color: $--color-info !default;
  546. /// color||Color|0
  547. $--button-info-font-color: $--color-white !default;
  548. /// color||Color|0
  549. $--button-info-background-color: $--color-info !default;
  550. $--button-hover-tint-percent: 20% !default;
  551. $--button-active-shade-percent: 10% !default;
  552. /* cascader
  553. -------------------------- */
  554. $--cascader-height: 200px !default;
  555. /* Switch
  556. -------------------------- */
  557. /// color||Color|0
  558. $--switch-on-color: $--color-primary !default;
  559. /// color||Color|0
  560. $--switch-off-color: $--border-color-base !default;
  561. /// fontSize||Font|1
  562. $--switch-font-size: $--font-size-base !default;
  563. $--switch-core-border-radius: 10px !default;
  564. // height||Other|4 TODO: width 代码写死的40px,所以下面这三个属性都没有意义
  565. $--switch-width: 40px !default;
  566. // height||Other|4
  567. $--switch-height: 20px !default;
  568. // height||Other|4
  569. $--switch-button-size: 16px !default;
  570. /* Dialog
  571. -------------------------- */
  572. $--dialog-background-color: $--color-white !default;
  573. $--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
  574. /// fontSize||Font|1
  575. $--dialog-title-font-size: $--font-size-large !default;
  576. /// fontSize||Font|1
  577. $--dialog-content-font-size: 14px !default;
  578. /// fontLineHeight||LineHeight|2
  579. $--dialog-font-line-height: $--font-line-height-primary !default;
  580. /// padding||Spacing|3
  581. $--dialog-padding-primary: 20px !default;
  582. /* Table
  583. -------------------------- */
  584. /// color||Color|0
  585. $--table-border-color: $--color-table-border !default;
  586. $--table-border: 1px solid $--table-border-color !default;
  587. /// color||Color|0
  588. $--table-font-color: $--color-table-font !default;
  589. /// color||Color|0
  590. $--table-header-font-color: $--color-table-font !default;
  591. /// color||Color|0
  592. $--table-row-hover-background-color: $--background-color-base !default;
  593. $--table-current-row-background-color: $--color-table-current-row-background !default;
  594. /// color||Color|0
  595. $--table-header-background-color: $--color-table-header-background !default;
  596. $--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
  597. /* Pagination
  598. -------------------------- */
  599. /// fontSize||Font|1
  600. $--pagination-font-size: 13px !default;
  601. /// color||Color|0
  602. $--pagination-background-color: $--color-white !default;
  603. /// color||Color|0
  604. $--pagination-font-color: $--color-text-primary !default;
  605. $--pagination-border-radius: 3px !default;
  606. /// color||Color|0
  607. $--pagination-button-color: $--color-text-primary !default;
  608. /// height||Other|4
  609. $--pagination-button-width: 35.5px !default;
  610. /// height||Other|4
  611. $--pagination-button-height: 28px !default;
  612. /// color||Color|0
  613. $--pagination-button-disabled-color: $--color-text-placeholder !default;
  614. /// color||Color|0
  615. $--pagination-button-disabled-background-color: $--color-white !default;
  616. /// color||Color|0
  617. $--pagination-hover-color: $--color-primary !default;
  618. /* Popup
  619. -------------------------- */
  620. /// color||Color|0
  621. $--popup-modal-background-color: $--color-black !default;
  622. /// opacity||Other|1
  623. $--popup-modal-opacity: 0.5 !default;
  624. /* Popover
  625. -------------------------- */
  626. /// color||Color|0
  627. $--popover-background-color: $--color-white !default;
  628. /// fontSize||Font|1
  629. $--popover-font-size: $--font-size-base !default;
  630. /// color||Color|0
  631. $--popover-border-color: $--border-color-lighter !default;
  632. $--popover-arrow-size: 6px !default;
  633. /// padding||Spacing|3
  634. $--popover-padding: 12px !default;
  635. $--popover-padding-large: 18px 20px !default;
  636. /// fontSize||Font|1
  637. $--popover-title-font-size: 16px !default;
  638. /// color||Color|0
  639. $--popover-title-font-color: $--color-text-primary !default;
  640. /* Tooltip
  641. -------------------------- */
  642. /// color|1|Color|0
  643. $--tooltip-fill: $--color-tooltip-fill !default;
  644. /// color|1|Color|0
  645. $--tooltip-color: $--color-white !default;
  646. /// fontSize||Font|1
  647. $--tooltip-font-size: 12px !default;
  648. /// color||Color|0
  649. $--tooltip-border-color: $--color-text-primary !default;
  650. $--tooltip-arrow-size: 6px !default;
  651. /// padding||Spacing|3
  652. $--tooltip-padding: 10px !default;
  653. /* Tag
  654. -------------------------- */
  655. /// color||Color|0
  656. $--tag-info-color: $--color-info !default;
  657. /// color||Color|0
  658. $--tag-primary-color: $--color-primary !default;
  659. /// color||Color|0
  660. $--tag-success-color: $--color-success !default;
  661. /// color||Color|0
  662. $--tag-warning-color: $--color-warning !default;
  663. /// color||Color|0
  664. $--tag-danger-color: $--color-danger !default;
  665. /// fontSize||Font|1
  666. $--tag-font-size: 12px !default;
  667. $--tag-border-radius: 4px !default;
  668. $--tag-padding: 0 10px !default;
  669. /* Tree
  670. -------------------------- */
  671. /// color||Color|0
  672. $--tree-node-hover-background-color: $--background-color-base !default;
  673. /// color||Color|0
  674. $--tree-font-color: $--color-tree-font !default;
  675. /// color||Color|0
  676. $--tree-expand-icon-color: $--color-text-placeholder !default;
  677. /* Dropdown
  678. -------------------------- */
  679. $--dropdown-menu-box-shadow: $--box-shadow-light !default;
  680. $--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
  681. $--dropdown-menuItem-hover-color: $--link-color !default;
  682. /* Badge
  683. -------------------------- */
  684. /// color||Color|0
  685. $--badge-background-color: $--color-danger !default;
  686. $--badge-radius: 10px !default;
  687. /// fontSize||Font|1
  688. $--badge-font-size: 12px !default;
  689. /// padding||Spacing|3
  690. $--badge-padding: 6px !default;
  691. /// height||Other|4
  692. $--badge-size: 18px !default;
  693. /* Card
  694. --------------------------*/
  695. $--color-card-border: #535353;
  696. /// color||Color|0
  697. $--card-border-color: $--color-card-border !default;
  698. $--card-border-radius: 0 !default;
  699. /// padding||Spacing|3
  700. $--card-padding: 10px !default;
  701. /* Slider
  702. --------------------------*/
  703. /// color||Color|0
  704. $--slider-main-background-color: $--color-primary !default;
  705. /// color||Color|0
  706. $--slider-runway-background-color: $--border-color-light !default;
  707. $--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
  708. $--slider-stop-background-color: $--color-white !default;
  709. $--slider-disable-color: $--color-text-placeholder !default;
  710. $--slider-margin: 16px 0 !default;
  711. $--slider-border-radius: 3px !default;
  712. /// height|1|Other|4
  713. $--slider-height: 6px !default;
  714. /// height||Other|4
  715. $--slider-button-size: 16px !default;
  716. $--slider-button-wrapper-size: 36px !default;
  717. $--slider-button-wrapper-offset: -15px !default;
  718. /* Steps
  719. --------------------------*/
  720. $--steps-border-color: $--disabled-border-base !default;
  721. $--steps-border-radius: 4px !default;
  722. $--steps-padding: 20px !default;
  723. /* Menu
  724. --------------------------*/
  725. /// fontSize||Font|1
  726. $--menu-item-font-size: $--font-size-base !default;
  727. /// color||Color|0
  728. $--menu-item-font-color: $--color-text-primary !default;
  729. /// color||Color|0
  730. $--menu-background-color: $--color-menu-background !default;
  731. $--menu-item-hover-fill: $--color-menu-item-hover !default;
  732. /* Rate
  733. --------------------------*/
  734. $--rate-height: 20px !default;
  735. /// fontSize||Font|1
  736. $--rate-font-size: $--font-size-base !default;
  737. /// height||Other|3
  738. $--rate-icon-size: 18px !default;
  739. /// margin||Spacing|2
  740. $--rate-icon-margin: 6px !default;
  741. $--rate-icon-color: $--color-text-placeholder !default;
  742. /* DatePicker
  743. --------------------------*/
  744. $--datepicker-font-color: $--color-text-regular !default;
  745. /// color|1|Color|0
  746. $--datepicker-off-font-color: $--color-text-placeholder !default;
  747. /// color||Color|0
  748. $--datepicker-header-font-color: $--color-text-regular !default;
  749. $--datepicker-icon-color: $--color-text-primary !default;
  750. $--datepicker-border-color: $--disabled-border-base !default;
  751. $--datepicker-inner-border-color: #e4e4e4 !default;
  752. /// color||Color|0
  753. $--datepicker-inrange-background-color: $--border-color-extra-light !default;
  754. /// color||Color|0
  755. $--datepicker-inrange-hover-background-color: $--border-color-extra-light !default;
  756. /// color||Color|0
  757. $--datepicker-active-color: $--color-primary !default;
  758. /// color||Color|0
  759. $--datepicker-hover-font-color: $--color-primary !default;
  760. $--datepicker-cell-hover-color: #fff !default;
  761. /* Loading
  762. --------------------------*/
  763. /// height||Other|4
  764. $--loading-spinner-size: 42px !default;
  765. /// height||Other|4
  766. $--loading-fullscreen-spinner-size: 50px !default;
  767. /* Scrollbar
  768. --------------------------*/
  769. $--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;
  770. $--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;
  771. /* Carousel
  772. --------------------------*/
  773. /// fontSize||Font|1
  774. $--carousel-arrow-font-size: 12px !default;
  775. $--carousel-arrow-size: 36px !default;
  776. $--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
  777. $--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
  778. /// width||Other|4
  779. $--carousel-indicator-width: 30px !default;
  780. /// height||Other|4
  781. $--carousel-indicator-height: 2px !default;
  782. $--carousel-indicator-padding-horizontal: 4px !default;
  783. $--carousel-indicator-padding-vertical: 12px !default;
  784. $--carousel-indicator-out-color: $--border-color-hover !default;
  785. /* Collapse
  786. --------------------------*/
  787. /// color||Color|0
  788. $--collapse-border-color: $--border-color-lighter !default;
  789. /// height||Other|4
  790. $--collapse-header-height: 48px !default;
  791. /// color||Color|0
  792. $--collapse-header-background-color: $--color-white !default;
  793. /// color||Color|0
  794. $--collapse-header-font-color: $--color-text-primary !default;
  795. /// fontSize||Font|1
  796. $--collapse-header-font-size: 13px !default;
  797. /// color||Color|0
  798. $--collapse-content-background-color: $--color-white !default;
  799. /// fontSize||Font|1
  800. $--collapse-content-font-size: 13px !default;
  801. /// color||Color|0
  802. $--collapse-content-font-color: $--color-text-primary !default;
  803. /* Transfer
  804. --------------------------*/
  805. $--transfer-border-color: $--border-color-lighter !default;
  806. $--transfer-border-radius: $--border-radius-base !default;
  807. /// height||Other|4
  808. $--transfer-panel-width: 200px !default;
  809. /// height||Other|4
  810. $--transfer-panel-header-height: 40px !default;
  811. /// color||Color|0
  812. $--transfer-panel-header-background-color: $--background-color-base !default;
  813. /// height||Other|4
  814. $--transfer-panel-footer-height: 40px !default;
  815. /// height||Other|4
  816. $--transfer-panel-body-height: 246px !default;
  817. /// height||Other|4
  818. $--transfer-item-height: 30px !default;
  819. /// height||Other|4
  820. $--transfer-filter-height: 32px !default;
  821. /* Header
  822. --------------------------*/
  823. $--header-padding: 0 20px !default;
  824. /* Footer
  825. --------------------------*/
  826. $--footer-padding: 0 20px !default;
  827. /* Main
  828. --------------------------*/
  829. $--main-padding: 20px !default;
  830. /* Timeline
  831. --------------------------*/
  832. $--timeline-node-size-normal: 12px !default;
  833. $--timeline-node-size-large: 14px !default;
  834. $--timeline-node-color: $--border-color-light !default;
  835. /* Backtop
  836. --------------------------*/
  837. /// color||Color|0
  838. $--backtop-background-color: $--color-white !default;
  839. /// color||Color|0
  840. $--backtop-font-color: $--color-primary !default;
  841. /// color||Color|0
  842. $--backtop-hover-background-color: $--border-color-extra-light !default;
  843. /* Link
  844. --------------------------*/
  845. /// fontSize||Font|1
  846. $--link-font-size: $--font-size-base !default;
  847. /// fontWeight||Font|1
  848. $--link-font-weight: $--font-weight-primary !default;
  849. /// color||Color|0
  850. $--link-default-font-color: $--color-text-regular !default;
  851. /// color||Color|0
  852. $--link-default-active-color: $--color-primary !default;
  853. /// color||Color|0
  854. $--link-disabled-font-color: $--color-text-placeholder !default;
  855. /// color||Color|0
  856. $--link-primary-font-color: $--color-primary !default;
  857. /// color||Color|0
  858. $--link-success-font-color: $--color-success !default;
  859. /// color||Color|0
  860. $--link-warning-font-color: $--color-warning !default;
  861. /// color||Color|0
  862. $--link-danger-font-color: $--color-danger !default;
  863. /// color||Color|0
  864. $--link-info-font-color: $--color-info !default;
  865. /* Calendar
  866. --------------------------*/
  867. /// border||Other|4
  868. $--calendar-border: $--table-border !default;
  869. /// color||Other|4
  870. $--calendar-selected-background-color: #F2F8FE !default;
  871. $--calendar-cell-width: 85px !default;
  872. /* Form
  873. -------------------------- */
  874. /// fontSize||Font|1
  875. $--form-label-font-size: $--font-size-base !default;
  876. /* Avatar
  877. --------------------------*/
  878. /// color||Color|0
  879. $--avatar-font-color: #fff !default;
  880. /// color||Color|0
  881. $--avatar-background-color: #C0C4CC !default;
  882. /// fontSize||Font Size|1
  883. $--avatar-text-font-size: 14px !default;
  884. /// fontSize||Font Size|1
  885. $--avatar-icon-font-size: 18px !default;
  886. /// borderRadius||Border|2
  887. $--avatar-border-radius: $--border-radius-base !default;
  888. /// size|1|Avatar Size|3
  889. $--avatar-large-size: 40px !default;
  890. /// size|1|Avatar Size|3
  891. $--avatar-medium-size: 36px !default;
  892. /// size|1|Avatar Size|3
  893. $--avatar-small-size: 28px !default;
  894. /* Break-point
  895. --------------------------*/
  896. $--sm: 768px !default;
  897. $--md: 992px !default;
  898. $--lg: 1200px !default;
  899. $--xl: 1920px !default;
  900. $--breakpoints: (
  901. 'xs' : (max-width: $--sm - 1),
  902. 'sm' : (min-width: $--sm),
  903. 'md' : (min-width: $--md),
  904. 'lg' : (min-width: $--lg),
  905. 'xl' : (min-width: $--xl)
  906. );
  907. $--breakpoints-spec: (
  908. 'xs-only' : (max-width: $--sm - 1),
  909. 'sm-and-up' : (min-width: $--sm),
  910. 'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})",
  911. 'sm-and-down': (max-width: $--md - 1),
  912. 'md-and-up' : (min-width: $--md),
  913. 'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})",
  914. 'md-and-down': (max-width: $--lg - 1),
  915. 'lg-and-up' : (min-width: $--lg),
  916. 'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})",
  917. 'lg-and-down': (max-width: $--xl - 1),
  918. 'xl-only' : (min-width: $--xl),
  919. );