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.

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