var.less 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
  1. // Color variables
  2. @black: #000;
  3. @white: #fff;
  4. @red: #f44;
  5. @blue: #1989fa;
  6. @orange: #ff976a;
  7. @orange-dark: #ed6a0c;
  8. @orange-light: #fffbe8;
  9. @green: #07c160;
  10. @gray: #c8c9cc;
  11. @gray-light: #e5e5e5;
  12. @gray-darker: #7d7e80;
  13. @gray-dark: #969799;
  14. // Default colors
  15. @text-color: #323233;
  16. @border-color: #ebedf0;
  17. @active-color: #f2f3f5;
  18. @background-color: #f8f8f8;
  19. @background-color-light: #fafafa;
  20. // ActionSheet
  21. @action-sheet-max-height: 90%;
  22. @action-sheet-header-height: 44px;
  23. @action-sheet-header-font-size: 16px;
  24. @action-sheet-item-height: 50px;
  25. @action-sheet-item-background: @white;
  26. @action-sheet-item-font-size: 16px;
  27. @action-sheet-item-text-color: @text-color;
  28. @action-sheet-subname-color: @gray-darker;
  29. @action-sheet-subname-font-size: 12px;
  30. @action-sheet-close-icon-size: 18px;
  31. @action-sheet-close-icon-color: @gray-dark;
  32. // Badge
  33. @badge-font-size: 14px;
  34. @badge-line-height: 1.4;
  35. @badge-text-color: @gray-darker;
  36. @badge-padding: 20px 12px 20px 9px;
  37. @badge-active-color: @active-color;
  38. @badge-background-color: @background-color;
  39. @badge-selected-font-weight: 500;
  40. @badge-selected-text-color: @text-color;
  41. @badge-selected-border-color: @red;
  42. @badge-selected-background-color: @white;
  43. // BadgeGroup
  44. @badge-group-width: 85px;
  45. // Button
  46. @button-mini-height: 22px;
  47. @button-mini-min-width: 50px;
  48. @button-mini-font-size: 10px;
  49. @button-mini-line-height: 20px;
  50. @button-small-height: 30px;
  51. @button-small-font-size: 12px;
  52. @button-small-min-width: 60px;
  53. @button-small-line-height: 28px;
  54. @button-normal-font-size: 14px;
  55. @button-large-height: 50px;
  56. @button-large-line-height: 48px;
  57. @button-default-height: 44px;
  58. @button-default-line-height: 42px;
  59. @button-default-font-size: 16px;
  60. @button-default-color: @text-color;
  61. @button-default-background-color: @white;
  62. @button-default-border-color: @border-color;
  63. @button-primary-color: @white;
  64. @button-primary-background-color: @green;
  65. @button-primary-border-color: @green;
  66. @button-info-color: @white;
  67. @button-info-background-color: @blue;
  68. @button-info-border-color: @blue;
  69. @button-danger-color: @white;
  70. @button-danger-background-color: @red;
  71. @button-danger-border-color: @red;
  72. @button-warning-color: @white;
  73. @button-warning-background-color: @orange;
  74. @button-warning-border-color: @orange;
  75. @button-bottom-action-default-color: @white;
  76. @button-bottom-action-default-background-color: @orange;
  77. @button-bottom-action-primary-color: @white;
  78. @button-bottom-action-primary-background-color: @red;
  79. @button-border-width: 1px;
  80. @button-border-radius: 2px;
  81. @button-round-border-radius: 10em;
  82. @button-plain-background-color: @white;
  83. @button-disabled-opacity: .5;
  84. // Card
  85. @card-padding: 5px 15px;
  86. @card-font-size: 12px;
  87. @card-text-color: @text-color;
  88. @card-background-color: @background-color-light;
  89. @card-thumb-size: 90px;
  90. @card-title-line-height: 16px;
  91. @card-desc-color: @gray-darker;
  92. @card-desc-line-height: 20px;
  93. @card-price-color: @red;
  94. @card-origin-price-color: @gray-darker;
  95. @card-origin-price-font-size: 10px;
  96. // Cell
  97. @cell-font-size: 14px;
  98. @cell-line-height: 24px;
  99. @cell-vertical-padding: 10px;
  100. @cell-horizontal-padding: 15px;
  101. @cell-text-color: @text-color;
  102. @cell-background-color: @white;
  103. @cell-border-color: @border-color;
  104. @cell-active-color: @active-color;
  105. @cell-required-color: @red;
  106. @cell-label-color: @gray-dark;
  107. @cell-label-font-size: 12px;
  108. @cell-label-line-height: 18px;
  109. @cell-label-margin-top: 3px;
  110. @cell-value-color: @gray-dark;
  111. @cell-icon-size: 16px;
  112. @cell-right-icon-color: @gray-dark;
  113. @cell-large-vertical-padding: 12px;
  114. @cell-large-title-font-size: 16px;
  115. @cell-large-label-font-size: 14px;
  116. // CellGroup
  117. @cell-group-background-color: @white;
  118. @cell-group-title-color: @gray-dark;
  119. @cell-group-title-padding: 15px 15px 5px;
  120. @cell-group-title-font-size: 14px;
  121. @cell-group-title-line-height: 16px;
  122. // Checkbox
  123. @checkbox-size: 20px;
  124. @checkbox-border-color: @gray-light;
  125. @checkbox-transition-duration: .2s;
  126. @checkbox-label-margin: 10px;
  127. @checkbox-label-color: @text-color;
  128. @checkbox-checked-icon-color: @blue;
  129. @checkbox-disabled-icon-color: @gray;
  130. @checkbox-disabled-label-color: @gray;
  131. @checkbox-disabled-background-color: @border-color;
  132. // Circle
  133. @circle-text-color: @text-color;
  134. // Collapse
  135. @collapse-item-transition-duration: .3s;
  136. @collapse-item-content-padding: 15px;
  137. @collapse-item-content-font-size: 13px;
  138. @collapse-item-content-line-height: 1.5;
  139. @collapse-item-content-text-color: @gray-dark;
  140. @collapse-item-content-background-color: @white;
  141. @collapse-item-title-disabled-color: @gray;
  142. // Dialog
  143. @dialog-width: 85%;
  144. @dialog-font-size: 16px;
  145. @dialog-transition: .3s;
  146. @dialog-border-radius: 4px;
  147. @dialog-background-color: @white;
  148. @dialog-header-font-weight: 500;
  149. @dialog-header-padding-top: 25px;
  150. @dialog-header-isolated-padding: 25px 0;
  151. @dialog-message-padding: 25px;
  152. @dialog-message-font-size: 14px;
  153. @dialog-message-line-height: 1.5;
  154. @dialog-message-max-height: 60vh;
  155. @dialog-has-title-message-text-color: @gray-darker;
  156. @dialog-has-title-message-padding-top: 12px;
  157. @dialog-confirm-button-text-color: @blue;
  158. // Field
  159. @field-label-max-width: 90px;
  160. @field-input-text-color: @text-color;
  161. @field-input-error-text-color: @red;
  162. @field-input-disabled-text-color: @gray-dark;
  163. @field-placeholder-text-color: @gray-dark;
  164. @field-icon-size: 16px;
  165. @field-clear-icon-size: 16px;
  166. @field-clear-icon-color: @gray;
  167. @field-right-icon-color: @gray-dark;
  168. @field-error-message-color: @red;
  169. @field-error-message-text-color: 12px;
  170. @field-text-area-min-height: 60px;
  171. // Info
  172. @info-size: 16px;
  173. @info-color: @white;
  174. @info-padding: 0 3px;
  175. @info-font-size: 12px;
  176. @info-font-weight: 500;
  177. @info-border-width: 1px;
  178. @info-background-color: @red;
  179. @info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
  180. // List
  181. @list-icon-size: 16px;
  182. @list-icon-margin-right: 5px;
  183. @list-text-color: @gray-dark;
  184. @list-text-font-size: 13px;
  185. @list-text-line-height: 50px;
  186. // NavBar
  187. @nav-bar-height: 46px;
  188. @nav-bar-background-color: @white;
  189. @nav-bar-arrow-size: 16px;
  190. @nav-bar-icon-color: @blue;
  191. @nav-bar-text-color: @blue;
  192. @nav-bar-title-font-size: 16px;
  193. @nav-bar-title-text-color: @text-color;
  194. // Notify
  195. @notify-padding: 6px 15px;
  196. @notify-font-size: 14px;
  197. @notify-line-height: 20px;
  198. // NumberKeyboard
  199. @number-keyboard-key-height: 54px;
  200. @number-keyboard-key-background: #ebedf0;
  201. // Overlay
  202. @overlay-background-color: rgba(0, 0, 0, 0.7);
  203. // Panel
  204. @panel-background-color: @white;
  205. @panel-header-value-color: @red;
  206. @panel-footer-padding: 10px 15px;
  207. // Radio
  208. @radio-size: 20px;
  209. @radio-border-color: @gray-light;
  210. @radio-transition-duration: .2s;
  211. @radio-label-margin: 10px;
  212. @radio-label-color: @text-color;
  213. @radio-checked-icon-color: @blue;
  214. @radio-disabled-icon-color: @gray;
  215. @radio-disabled-label-color: @gray;
  216. @radio-disabled-background-color: @border-color;
  217. // Rate
  218. @rate-horizontal-padding: 2px;
  219. // Slider
  220. @slider-active-background-color: @blue;
  221. @slider-inactive-background-color: @gray-light;
  222. @slider-disabled-opacity: .3;
  223. @slider-button-width: 20px;
  224. @slider-button-height: 20px;
  225. @slider-button-border-radius: 50%;
  226. @slider-button-background-color: @white;
  227. @slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  228. // Swipe
  229. @swipe-indicator-size: 6px;
  230. @swipe-indicator-margin: 10px;
  231. @swipe-indicator-active-opacity: 1;
  232. @swipe-indicator-inactive-opacity: .3;
  233. @swipe-indicator-active-background-color: @blue;
  234. @swipe-indicator-inactive-background-color: @border-color;
  235. // Switch
  236. @switch-width: 2em;
  237. @switch-height: 1em;
  238. @switch-node-size: 1em;
  239. @switch-node-z-index: 1;
  240. @switch-node-background-color: @white;
  241. @switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
  242. @switch-background-color: @white;
  243. @switch-on-background-color: @blue;
  244. @switch-transition-duration: .3s;
  245. @switch-disabled-opacity: .4;
  246. @switch-border: 1px solid rgba(0, 0, 0, .1);
  247. // SwitchCell
  248. @switch-cell-padding-top: 9px;
  249. @switch-cell-padding-bottom: 9px;
  250. // Tab
  251. @tabs-line-height: 44px;
  252. @tabs-card-height: 30px;
  253. // Tabbar
  254. @tabbar-height: 50px;
  255. @tabbar-background-color: @white;
  256. // TabbarItem
  257. @tabbar-item-font-size: 12px;
  258. @tabbar-item-text-color: @gray-darker;
  259. @tabbar-item-active-color: @blue;
  260. @tabbar-item-line-height: 1;
  261. @tabbar-item-icon-size: 18px;
  262. @tabbar-item-margin-bottom: 5px;
  263. // Tag
  264. @tag-padding: .2em .5em;
  265. @tag-font-size: 10px;
  266. @tag-medium-font-size: 12px;
  267. @tag-large-font-size: 14px;
  268. @tag-text-color: @white;
  269. @tag-border-radius: .2em;
  270. @tag-round-border-radius: .8em;
  271. // Toast
  272. @toast-max-width: 70%;
  273. @toast-font-size: 14px;
  274. @toast-text-color: @white;
  275. @toast-line-height: 20px;
  276. @toast-border-radius: 4px;
  277. @toast-background-color: rgba(@text-color, .88);
  278. @toast-icon-size: 48px;
  279. @toast-text-min-width: 96px;
  280. @toast-text-padding: 8px 12px;
  281. @toast-default-padding: 15px;
  282. @toast-default-width: 90px;
  283. @toast-default-min-height: 90px;
  284. @toast-position-top-distance: 50px;
  285. @toast-position-bottom-distance: 50px;
  286. // Search
  287. @search-background-color: #f7f8fA;
  288. // Stepper
  289. @stepper-active-color: #e8e8e8;
  290. @stepper-background-color: @active-color;
  291. @stepper-button-disabled-color: #f7f8fa;
  292. @stepper-input-disabled-color: @active-color;
  293. @stepper-border-radius: 4px;