5b70bf4cb52cd762b21ea70b4828aa7646b20ae6e6c73e0f4da8f5fcd4e218aeec7966ac43a7fbec8616b5363de9556c58ae69bed995239f26c4b907a3d605 36 KB

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