element-variables.scss 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017
  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 0.3s cubic-bezier(0.645, 0.045, 0.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 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
  12. $--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
  13. /* Color
  14. -------------------------- */
  15. /// color|1|Brand Color|0
  16. $--color-primary: #2d74e7 !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: #e7304e !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: #333333 !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, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !default;
  86. // boxShadow|1|Shadow|1
  87. $--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 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-width: 140px !default;
  386. /// height||Other|4
  387. $--input-height: 40px !default;
  388. $--input-border: $--border-base !default;
  389. $--input-border-color: $--border-color-base !default;
  390. /// borderRadius||Border|2
  391. $--input-border-radius: $--border-radius-base !default;
  392. $--input-border-color-hover: $--border-color-hover !default;
  393. /// color||Color|0
  394. $--input-background-color: $--color-white !default;
  395. $--input-fill-disabled: $--disabled-fill-base !default;
  396. $--input-color-disabled: $--font-color-disabled-base !default;
  397. /// color||Color|0
  398. $--input-icon-color: $--color-text-placeholder !default;
  399. /// color||Color|0
  400. $--input-placeholder-color: $--color-text-placeholder !default;
  401. $--input-max-width: 314px !default;
  402. $--input-hover-border: $--border-color-hover !default;
  403. $--input-clear-hover-color: $--color-text-secondary !default;
  404. $--input-focus-border: $--color-primary !default;
  405. $--input-focus-fill: $--color-white !default;
  406. $--input-disabled-fill: $--disabled-fill-base !default;
  407. $--input-disabled-border: $--disabled-border-base !default;
  408. $--input-disabled-color: $--disabled-color-base !default;
  409. $--input-disabled-placeholder-color: $--color-text-placeholder !default;
  410. /// fontSize||Font|1
  411. $--input-medium-font-size: 14px !default;
  412. /// height||Other|4
  413. $--input-medium-height: 36px !default;
  414. /// fontSize||Font|1
  415. $--input-small-font-size: 13px !default;
  416. /// height||Other|4
  417. $--input-small-height: 32px !default;
  418. /// fontSize||Font|1
  419. $--input-mini-font-size: 12px !default;
  420. /// height||Other|4
  421. $--input-mini-height: 28px !default;
  422. /* Cascader
  423. -------------------------- */
  424. /// color||Color|0
  425. $--cascader-menu-font-color: $--color-text-regular !default;
  426. /// color||Color|0
  427. $--cascader-menu-selected-font-color: $--color-primary !default;
  428. $--cascader-menu-fill: $--fill-base !default;
  429. $--cascader-menu-font-size: $--font-size-base !default;
  430. $--cascader-menu-radius: $--border-radius-base !default;
  431. $--cascader-menu-border: solid 1px $--border-color-light !default;
  432. $--cascader-menu-shadow: $--box-shadow-light !default;
  433. $--cascader-node-background-hover: $--background-color-base !default;
  434. $--cascader-node-color-disabled: $--color-text-placeholder !default;
  435. $--cascader-color-empty: $--color-text-placeholder !default;
  436. $--cascader-tag-background: #f0f2f5;
  437. /* Group
  438. -------------------------- */
  439. $--group-option-flex: 0 0 (1/5) * 100% !default;
  440. $--group-option-offset-bottom: 12px !default;
  441. $--group-option-fill-hover: rgba($--color-black, 0.06) !default;
  442. $--group-title-color: $--color-black !default;
  443. $--group-title-font-size: $--font-size-base !default;
  444. $--group-title-width: 66px !default;
  445. /* Tab
  446. -------------------------- */
  447. $--tab-font-size: $--font-size-base !default;
  448. $--tab-border-line: 1px solid #e4e4e4 !default;
  449. $--tab-header-color-active: $--color-text-secondary !default;
  450. $--tab-header-color-hover: $--color-text-regular !default;
  451. $--tab-header-color: $--color-text-regular !default;
  452. $--tab-header-fill-active: rgba($--color-black, 0.06) !default;
  453. $--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
  454. $--tab-vertical-header-width: 90px !default;
  455. $--tab-vertical-header-count-color: $--color-white !default;
  456. $--tab-vertical-header-count-fill: $--color-text-secondary !default;
  457. /* Button
  458. -------------------------- */
  459. /// fontSize||Font|1
  460. $--button-font-size: $--font-size-base !default;
  461. /// fontWeight||Font|1
  462. $--button-font-weight: $--font-weight-primary !default;
  463. /// borderRadius||Border|2
  464. $--button-border-radius: $--border-radius-base !default;
  465. /// padding||Spacing|3
  466. $--button-padding-vertical: 12px !default;
  467. /// padding||Spacing|3
  468. $--button-padding-horizontal: 20px !default;
  469. /// fontSize||Font|1
  470. $--button-medium-font-size: $--font-size-base !default;
  471. /// borderRadius||Border|2
  472. $--button-medium-border-radius: $--border-radius-base !default;
  473. /// padding||Spacing|3
  474. $--button-medium-padding-vertical: 10px !default;
  475. /// padding||Spacing|3
  476. $--button-medium-padding-horizontal: 20px !default;
  477. /// fontSize||Font|1
  478. $--button-small-font-size: 12px !default;
  479. $--button-small-border-radius: #{$--border-radius-base - 1} !default;
  480. /// padding||Spacing|3
  481. $--button-small-padding-vertical: 9px !default;
  482. /// padding||Spacing|3
  483. $--button-small-padding-horizontal: 15px !default;
  484. /// fontSize||Font|1
  485. $--button-mini-font-size: 12px !default;
  486. $--button-mini-border-radius: #{$--border-radius-base - 1} !default;
  487. /// padding||Spacing|3
  488. $--button-mini-padding-vertical: 7px !default;
  489. /// padding||Spacing|3
  490. $--button-mini-padding-horizontal: 15px !default;
  491. /// color||Color|0
  492. $--button-default-font-color: $--color-text-regular !default;
  493. /// color||Color|0
  494. $--button-default-background-color: $--color-white !default;
  495. /// color||Color|0
  496. $--button-default-border-color: $--border-color-base !default;
  497. /// color||Color|0
  498. $--button-disabled-font-color: $--color-text-placeholder !default;
  499. /// color||Color|0
  500. $--button-disabled-background-color: $--color-white !default;
  501. /// color||Color|0
  502. $--button-disabled-border-color: $--border-color-lighter !default;
  503. /// color||Color|0
  504. $--button-primary-border-color: $--color-primary !default;
  505. /// color||Color|0
  506. $--button-primary-font-color: $--color-white !default;
  507. /// color||Color|0
  508. $--button-primary-background-color: $--color-primary !default;
  509. /// color||Color|0
  510. $--button-success-border-color: $--color-success !default;
  511. /// color||Color|0
  512. $--button-success-font-color: $--color-white !default;
  513. /// color||Color|0
  514. $--button-success-background-color: $--color-success !default;
  515. /// color||Color|0
  516. $--button-warning-border-color: $--color-warning !default;
  517. /// color||Color|0
  518. $--button-warning-font-color: $--color-white !default;
  519. /// color||Color|0
  520. $--button-warning-background-color: $--color-warning !default;
  521. /// color||Color|0
  522. $--button-danger-border-color: $--color-danger !default;
  523. /// color||Color|0
  524. $--button-danger-font-color: $--color-white !default;
  525. /// color||Color|0
  526. $--button-danger-background-color: $--color-danger !default;
  527. /// color||Color|0
  528. $--button-info-border-color: $--color-info !default;
  529. /// color||Color|0
  530. $--button-info-font-color: $--color-white !default;
  531. /// color||Color|0
  532. $--button-info-background-color: $--color-info !default;
  533. $--button-hover-tint-percent: 20% !default;
  534. $--button-active-shade-percent: 10% !default;
  535. /* cascader
  536. -------------------------- */
  537. $--cascader-height: 200px !default;
  538. /* Switch
  539. -------------------------- */
  540. /// color||Color|0
  541. $--switch-on-color: $--color-primary !default;
  542. /// color||Color|0
  543. $--switch-off-color: $--border-color-base !default;
  544. /// fontSize||Font|1
  545. $--switch-font-size: $--font-size-base !default;
  546. $--switch-core-border-radius: 10px !default;
  547. // height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义
  548. $--switch-width: 40px !default;
  549. // height||Other|4
  550. $--switch-height: 20px !default;
  551. // height||Other|4
  552. $--switch-button-size: 16px !default;
  553. /* Dialog
  554. -------------------------- */
  555. $--dialog-background-color: $--color-white !default;
  556. $--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
  557. /// fontSize||Font|1
  558. $--dialog-title-font-size: $--font-size-large !default;
  559. /// fontSize||Font|1
  560. $--dialog-content-font-size: 14px !default;
  561. /// fontLineHeight||LineHeight|2
  562. $--dialog-font-line-height: $--font-line-height-primary !default;
  563. /// padding||Spacing|3
  564. $--dialog-padding-primary: 20px !default;
  565. /* Table
  566. -------------------------- */
  567. /// color||Color|0
  568. $--table-border-color: $--border-color-lighter !default;
  569. $--table-border: 1px solid $--table-border-color !default;
  570. /// color||Color|0
  571. $--table-font-color: $--color-text-regular !default;
  572. /// color||Color|0
  573. $--table-header-font-color: $--color-text-secondary !default;
  574. /// color||Color|0
  575. $--table-row-hover-background-color: $--background-color-base !default;
  576. $--table-current-row-background-color: $--color-primary-light-9 !default;
  577. /// color||Color|0
  578. $--table-header-background-color: $--color-white !default;
  579. $--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
  580. /* Pagination
  581. -------------------------- */
  582. /// fontSize||Font|1
  583. $--pagination-font-size: 13px !default;
  584. /// color||Color|0
  585. $--pagination-background-color: $--color-white !default;
  586. /// color||Color|0
  587. $--pagination-font-color: $--color-text-primary !default;
  588. $--pagination-border-radius: 3px !default;
  589. /// color||Color|0
  590. $--pagination-button-color: $--color-text-primary !default;
  591. /// height||Other|4
  592. $--pagination-button-width: 35.5px !default;
  593. /// height||Other|4
  594. $--pagination-button-height: 28px !default;
  595. /// color||Color|0
  596. $--pagination-button-disabled-color: $--color-text-placeholder !default;
  597. /// color||Color|0
  598. $--pagination-button-disabled-background-color: $--color-white !default;
  599. /// color||Color|0
  600. $--pagination-hover-color: $--color-primary !default;
  601. /* Popup
  602. -------------------------- */
  603. /// color||Color|0
  604. $--popup-modal-background-color: $--color-black !default;
  605. /// opacity||Other|1
  606. $--popup-modal-opacity: 0.5 !default;
  607. /* Popover
  608. -------------------------- */
  609. /// color||Color|0
  610. $--popover-background-color: $--color-white !default;
  611. /// fontSize||Font|1
  612. $--popover-font-size: $--font-size-base !default;
  613. /// color||Color|0
  614. $--popover-border-color: $--border-color-lighter !default;
  615. $--popover-arrow-size: 6px !default;
  616. /// padding||Spacing|3
  617. $--popover-padding: 12px !default;
  618. $--popover-padding-large: 18px 20px !default;
  619. /// fontSize||Font|1
  620. $--popover-title-font-size: 16px !default;
  621. /// color||Color|0
  622. $--popover-title-font-color: $--color-text-primary !default;
  623. /* Tooltip
  624. -------------------------- */
  625. /// color|1|Color|0
  626. $--tooltip-fill: $--color-text-primary !default;
  627. /// color|1|Color|0
  628. $--tooltip-color: $--color-white !default;
  629. /// fontSize||Font|1
  630. $--tooltip-font-size: 12px !default;
  631. /// color||Color|0
  632. $--tooltip-border-color: $--color-text-primary !default;
  633. $--tooltip-arrow-size: 6px !default;
  634. /// padding||Spacing|3
  635. $--tooltip-padding: 10px !default;
  636. /* Tag
  637. -------------------------- */
  638. /// color||Color|0
  639. $--tag-info-color: $--color-info !default;
  640. /// color||Color|0
  641. $--tag-primary-color: $--color-primary !default;
  642. /// color||Color|0
  643. $--tag-success-color: $--color-success !default;
  644. /// color||Color|0
  645. $--tag-warning-color: $--color-warning !default;
  646. /// color||Color|0
  647. $--tag-danger-color: $--color-danger !default;
  648. /// fontSize||Font|1
  649. $--tag-font-size: 12px !default;
  650. $--tag-border-radius: 4px !default;
  651. $--tag-padding: 0 10px !default;
  652. /* Tree
  653. -------------------------- */
  654. /// color||Color|0
  655. $--tree-node-hover-background-color: $--background-color-base !default;
  656. /// color||Color|0
  657. $--tree-font-color: $--color-text-regular !default;
  658. /// color||Color|0
  659. $--tree-expand-icon-color: $--color-text-placeholder !default;
  660. /* Dropdown
  661. -------------------------- */
  662. $--dropdown-menu-box-shadow: $--box-shadow-light !default;
  663. $--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
  664. $--dropdown-menuItem-hover-color: $--link-color !default;
  665. /* Badge
  666. -------------------------- */
  667. /// color||Color|0
  668. $--badge-background-color: $--color-danger !default;
  669. $--badge-radius: 10px !default;
  670. /// fontSize||Font|1
  671. $--badge-font-size: 12px !default;
  672. /// padding||Spacing|3
  673. $--badge-padding: 6px !default;
  674. /// height||Other|4
  675. $--badge-size: 18px !default;
  676. /* Card
  677. --------------------------*/
  678. /// color||Color|0
  679. $--card-border-color: $--border-color-lighter !default;
  680. $--card-border-radius: 4px !default;
  681. /// padding||Spacing|3
  682. $--card-padding: 20px !default;
  683. /* Slider
  684. --------------------------*/
  685. /// color||Color|0
  686. $--slider-main-background-color: $--color-primary !default;
  687. /// color||Color|0
  688. $--slider-runway-background-color: $--border-color-light !default;
  689. $--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
  690. $--slider-stop-background-color: $--color-white !default;
  691. $--slider-disable-color: $--color-text-placeholder !default;
  692. $--slider-margin: 16px 0 !default;
  693. $--slider-border-radius: 3px !default;
  694. /// height|1|Other|4
  695. $--slider-height: 0px !default;
  696. /// height||Other|4
  697. $--slider-button-size: 16px !default;
  698. $--slider-button-wrapper-size: 36px !default;
  699. $--slider-button-wrapper-offset: -15px !default;
  700. /* Steps
  701. --------------------------*/
  702. $--steps-border-color: $--disabled-border-base !default;
  703. $--steps-border-radius: 4px !default;
  704. $--steps-padding: 20px !default;
  705. /* Menu
  706. --------------------------*/
  707. /// fontSize||Font|1
  708. $--menu-item-font-size: $--font-size-base !default;
  709. /// color||Color|0
  710. $--menu-item-font-color: $--color-text-primary !default;
  711. /// color||Color|0
  712. $--menu-background-color: $--color-white !default;
  713. $--menu-item-hover-fill: $--color-primary-light-9 !default;
  714. /* Rate
  715. --------------------------*/
  716. $--rate-height: 20px !default;
  717. /// fontSize||Font|1
  718. $--rate-font-size: $--font-size-base !default;
  719. /// height||Other|3
  720. $--rate-icon-size: 18px !default;
  721. /// margin||Spacing|2
  722. $--rate-icon-margin: 6px !default;
  723. $--rate-icon-color: $--color-text-placeholder !default;
  724. /* DatePicker
  725. --------------------------*/
  726. $--datepicker-font-color: $--color-text-regular !default;
  727. /// color|1|Color|0
  728. $--datepicker-off-font-color: $--color-text-placeholder !default;
  729. /// color||Color|0
  730. $--datepicker-header-font-color: $--color-text-regular !default;
  731. $--datepicker-icon-color: $--color-text-primary !default;
  732. $--datepicker-border-color: $--disabled-border-base !default;
  733. $--datepicker-inner-border-color: #e4e4e4 !default;
  734. /// color||Color|0
  735. $--datepicker-inrange-background-color: $--border-color-extra-light !default;
  736. /// color||Color|0
  737. $--datepicker-inrange-hover-background-color: $--border-color-extra-light !default;
  738. /// color||Color|0
  739. $--datepicker-active-color: $--color-primary !default;
  740. /// color||Color|0
  741. $--datepicker-hover-font-color: $--color-primary !default;
  742. $--datepicker-cell-hover-color: #fff !default;
  743. /* Loading
  744. --------------------------*/
  745. /// height||Other|4
  746. $--loading-spinner-size: 42px !default;
  747. /// height||Other|4
  748. $--loading-fullscreen-spinner-size: 50px !default;
  749. /* Scrollbar
  750. --------------------------*/
  751. $--scrollbar-background-color: rgba($--color-text-secondary, 0.3) !default;
  752. $--scrollbar-hover-background-color: rgba($--color-text-secondary, 0.5) !default;
  753. /* Carousel
  754. --------------------------*/
  755. /// fontSize||Font|1
  756. $--carousel-arrow-font-size: 12px !default;
  757. $--carousel-arrow-size: 36px !default;
  758. $--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
  759. $--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
  760. /// width||Other|4
  761. $--carousel-indicator-width: 30px !default;
  762. /// height||Other|4
  763. $--carousel-indicator-height: 2px !default;
  764. $--carousel-indicator-padding-horizontal: 4px !default;
  765. $--carousel-indicator-padding-vertical: 12px !default;
  766. $--carousel-indicator-out-color: $--border-color-hover !default;
  767. /* Collapse
  768. --------------------------*/
  769. /// color||Color|0
  770. $--collapse-border-color: $--border-color-lighter !default;
  771. /// height||Other|4
  772. $--collapse-header-height: 48px !default;
  773. /// color||Color|0
  774. $--collapse-header-background-color: $--color-white !default;
  775. /// color||Color|0
  776. $--collapse-header-font-color: $--color-text-primary !default;
  777. /// fontSize||Font|1
  778. $--collapse-header-font-size: 13px !default;
  779. /// color||Color|0
  780. $--collapse-content-background-color: $--color-white !default;
  781. /// fontSize||Font|1
  782. $--collapse-content-font-size: 13px !default;
  783. /// color||Color|0
  784. $--collapse-content-font-color: $--color-text-primary !default;
  785. /* Transfer
  786. --------------------------*/
  787. $--transfer-border-color: $--border-color-lighter !default;
  788. $--transfer-border-radius: $--border-radius-base !default;
  789. /// height||Other|4
  790. $--transfer-panel-width: 200px !default;
  791. /// height||Other|4
  792. $--transfer-panel-header-height: 40px !default;
  793. /// color||Color|0
  794. $--transfer-panel-header-background-color: $--background-color-base !default;
  795. /// height||Other|4
  796. $--transfer-panel-footer-height: 40px !default;
  797. /// height||Other|4
  798. $--transfer-panel-body-height: 246px !default;
  799. /// height||Other|4
  800. $--transfer-item-height: 30px !default;
  801. /// height||Other|4
  802. $--transfer-filter-height: 32px !default;
  803. /* Header
  804. --------------------------*/
  805. $--header-padding: 0 20px !default;
  806. /* Footer
  807. --------------------------*/
  808. $--footer-padding: 0 20px !default;
  809. /* Main
  810. --------------------------*/
  811. $--main-padding: 20px !default;
  812. /* Timeline
  813. --------------------------*/
  814. $--timeline-node-size-normal: 12px !default;
  815. $--timeline-node-size-large: 14px !default;
  816. $--timeline-node-color: $--border-color-light !default;
  817. /* Backtop
  818. --------------------------*/
  819. /// color||Color|0
  820. $--backtop-background-color: $--color-white !default;
  821. /// color||Color|0
  822. $--backtop-font-color: $--color-primary !default;
  823. /// color||Color|0
  824. $--backtop-hover-background-color: $--border-color-extra-light !default;
  825. /* Link
  826. --------------------------*/
  827. /// fontSize||Font|1
  828. $--link-font-size: $--font-size-base !default;
  829. /// fontWeight||Font|1
  830. $--link-font-weight: $--font-weight-primary !default;
  831. /// color||Color|0
  832. $--link-default-font-color: $--color-text-regular !default;
  833. /// color||Color|0
  834. $--link-default-active-color: $--color-primary !default;
  835. /// color||Color|0
  836. $--link-disabled-font-color: $--color-text-placeholder !default;
  837. /// color||Color|0
  838. $--link-primary-font-color: $--color-primary !default;
  839. /// color||Color|0
  840. $--link-success-font-color: $--color-success !default;
  841. /// color||Color|0
  842. $--link-warning-font-color: $--color-warning !default;
  843. /// color||Color|0
  844. $--link-danger-font-color: $--color-danger !default;
  845. /// color||Color|0
  846. $--link-info-font-color: $--color-info !default;
  847. /* Calendar
  848. --------------------------*/
  849. /// border||Other|4
  850. $--calendar-border: $--table-border !default;
  851. /// color||Other|4
  852. $--calendar-selected-background-color: #f2f8fe !default;
  853. $--calendar-cell-width: 85px !default;
  854. /* Form
  855. -------------------------- */
  856. /// fontSize||Font|1
  857. $--form-label-font-size: $--font-size-base !default;
  858. /* Avatar
  859. --------------------------*/
  860. /// color||Color|0
  861. $--avatar-font-color: #fff !default;
  862. /// color||Color|0
  863. $--avatar-background-color: #c0c4cc !default;
  864. /// fontSize||Font Size|1
  865. $--avatar-text-font-size: 14px !default;
  866. /// fontSize||Font Size|1
  867. $--avatar-icon-font-size: 18px !default;
  868. /// borderRadius||Border|2
  869. $--avatar-border-radius: $--border-radius-base !default;
  870. /// size|1|Avatar Size|3
  871. $--avatar-large-size: 40px !default;
  872. /// size|1|Avatar Size|3
  873. $--avatar-medium-size: 36px !default;
  874. /// size|1|Avatar Size|3
  875. $--avatar-small-size: 28px !default;
  876. /* Break-point
  877. --------------------------*/
  878. $--sm: 768px !default;
  879. $--md: 992px !default;
  880. $--lg: 1200px !default;
  881. $--xl: 1920px !default;
  882. $--breakpoints: (
  883. 'xs': (
  884. max-width: $--sm - 1
  885. ),
  886. 'sm': (
  887. min-width: $--sm
  888. ),
  889. 'md': (
  890. min-width: $--md
  891. ),
  892. 'lg': (
  893. min-width: $--lg
  894. ),
  895. 'xl': (
  896. min-width: $--xl
  897. )
  898. );
  899. $--breakpoints-spec: (
  900. 'xs-only': (
  901. max-width: $--sm - 1
  902. ),
  903. 'sm-and-up': (
  904. min-width: $--sm
  905. ),
  906. 'sm-only': '(min-width: #{$--sm}) and (max-width: #{$--md - 1})',
  907. 'sm-and-down': (
  908. max-width: $--md - 1
  909. ),
  910. 'md-and-up': (
  911. min-width: $--md
  912. ),
  913. 'md-only': '(min-width: #{$--md}) and (max-width: #{$--lg - 1})',
  914. 'md-and-down': (
  915. max-width: $--lg - 1
  916. ),
  917. 'lg-and-up': (
  918. min-width: $--lg
  919. ),
  920. 'lg-only': '(min-width: #{$--lg}) and (max-width: #{$--xl - 1})',
  921. 'lg-and-down': (
  922. max-width: $--xl - 1
  923. ),
  924. 'xl-only': (
  925. min-width: $--xl
  926. )
  927. );