element-variables.scss 34 KB

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