compact.less 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. @import './default.less';
  2. @line-height-base: 1.66667;
  3. @mode: compact;
  4. @font-size-base: 12px;
  5. @font-size-lg: @font-size-base + 2px;
  6. // default paddings
  7. @default-padding-lg: 24px; // containers
  8. @default-padding-md: 16px; // small containers and buttons
  9. @default-padding-sm: 12px; // Form controls and items
  10. @default-padding-xs: 8px; // small items
  11. @default-padding-xss: 4px; // more small
  12. // vertical paddings
  13. @padding-lg: 16px; // containers
  14. @padding-md: 8px; // small containers and buttons
  15. @padding-sm: 8px; // Form controls and items
  16. @padding-xs: 4px; // small items
  17. @padding-xss: 0px; // more small
  18. // vertical padding for all form controls
  19. @control-padding-horizontal: @padding-sm;
  20. @control-padding-horizontal-sm: @default-padding-xs;
  21. // vertical margins
  22. @margin-lg: 16px; // containers
  23. @margin-md: 8px; // small containers and buttons
  24. @margin-sm: 8px; // Form controls and items
  25. @margin-xs: 4px; // small items
  26. @margin-xss: 0px; // more small
  27. // height rules
  28. @height-base: 28px;
  29. @height-lg: 32px;
  30. @height-sm: 22px;
  31. // Button
  32. // ---
  33. @btn-padding-horizontal-base: @default-padding-sm - 1px;
  34. @btn-padding-horizontal-lg: @btn-padding-horizontal-base;
  35. @btn-padding-horizontal-sm: @default-padding-xs - 1px;
  36. @btn-square-only-icon-size-lg: 16px;
  37. @btn-square-only-icon-size: 14px;
  38. @btn-square-only-icon-size-sm: 12px;
  39. // Breadcrumb
  40. // ---
  41. @breadcrumb-font-size: @font-size-base;
  42. @breadcrumb-icon-font-size: @font-size-base;
  43. //Dropdown
  44. @dropdown-line-height: 18px;
  45. // Menu
  46. @menu-item-padding: 0 12px;
  47. @menu-horizontal-line-height: 38px;
  48. @menu-inline-toplevel-item-height: 32px;
  49. @menu-item-height: 32px;
  50. @menu-item-vertical-margin: 0px;
  51. @menu-item-boundary-margin: 0px;
  52. @menu-icon-margin-right: 8px;
  53. // Checkbox
  54. @checkbox-size: 14px;
  55. @checkbox-group-item-margin-right: 6px;
  56. // picker
  57. @picker-panel-cell-height: 22px;
  58. @picker-panel-cell-width: 32px;
  59. @picker-text-height: 32px;
  60. @picker-time-panel-cell-height: 24px;
  61. @picker-panel-without-time-cell-height: 48px;
  62. // Form
  63. // ---
  64. @form-item-margin-bottom: 16px;
  65. @form-vertical-label-padding: 0 0 4px;
  66. // Rate
  67. // ---
  68. @rate-star-size: 16px;
  69. // Radio
  70. // ---
  71. @radio-size: 14px;
  72. @radio-wrapper-margin-right: 6px;
  73. // Switch
  74. // ---
  75. @switch-height: 20px;
  76. @switch-sm-height: 14px;
  77. @switch-min-width: 40px;
  78. @switch-sm-min-width: 24px;
  79. @switch-inner-margin-min: 4px;
  80. @switch-inner-margin-max: 22px;
  81. // Slider
  82. // ---
  83. @slider-handle-size: 12px;
  84. @slider-handle-margin-top: -4px;
  85. // Input
  86. // ---
  87. @input-padding-vertical-base: round(
  88. max(
  89. (round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) -
  90. @border-width-base,
  91. 2px
  92. )
  93. );
  94. @input-padding-horizontal-lg: 11px;
  95. // PageHeader
  96. // ---
  97. @page-header-padding: 16px;
  98. @page-header-padding-vertical: 8px;
  99. @page-header-heading-title: 16px;
  100. @page-header-heading-sub-title: 12px;
  101. @page-header-tabs-tab-font-size: 14px;
  102. // Pagination
  103. // ---
  104. @pagination-mini-options-size-changer-top: 1px;
  105. @pagination-item-size-sm: 22px;
  106. // Cascader
  107. // ----
  108. @cascader-dropdown-line-height: @dropdown-line-height;
  109. // Select
  110. // ---
  111. @select-dropdown-height: @height-base;
  112. @select-single-item-height-lg: 32px;
  113. @select-multiple-item-height: @input-height-base - max(@input-padding-vertical-base, 4) * 2; // Normal 24px
  114. @select-multiple-item-height-lg: 24px;
  115. @select-multiple-item-spacing-half: 3px;
  116. // Tree
  117. // ---
  118. @tree-title-height: 20px;
  119. // Transfer
  120. // ---
  121. @transfer-item-padding-vertical: 3px;
  122. @transfer-list-search-icon-top: 8px;
  123. @transfer-header-height: 36px;
  124. // Comment
  125. // ---
  126. @comment-actions-margin-bottom: 0px;
  127. @comment-actions-margin-top: @margin-xs;
  128. @comment-content-detail-p-margin-bottom: 0px;
  129. // Steps
  130. // ---
  131. @steps-icon-size: 24px;
  132. @steps-icon-custom-size: 20px;
  133. @steps-icon-custom-font-size: 20px;
  134. @steps-icon-custom-top: 2px;
  135. @steps-icon-margin: 2px 8px 2px 0;
  136. @steps-icon-font-size: @font-size-base;
  137. @steps-dot-top: 4px;
  138. @steps-icon-top: 0px;
  139. @steps-small-icon-size: 20px;
  140. @steps-vertical-icon-width: 12px;
  141. @steps-vertical-tail-width: 12px;
  142. @steps-vertical-tail-width-sm: 10px;
  143. // Collapse
  144. // ---
  145. //@collapse-header-padding-extra: 32px;
  146. @collapse-content-padding: @padding-md @padding-lg;
  147. // List
  148. // ---
  149. @list-item-meta-description-font-size: @font-size-sm;
  150. @list-item-padding-sm: 4px 12px;
  151. @list-item-padding-lg: 12px 16px;
  152. // Drawer
  153. // ---
  154. @drawer-header-padding: 11px @padding-lg;
  155. @drawer-footer-padding-vertical: @padding-sm;
  156. @drawer-footer-padding-horizontal: @padding-sm;
  157. @drawer-header-close-size: 44px;
  158. // Modal
  159. // --
  160. @modal-header-padding: 11px @modal-header-padding-horizontal;
  161. @modal-footer-padding-vertical: @padding-sm;
  162. @modal-header-close-size: 44px;
  163. @modal-confirm-body-padding: 24px 24px 16px;
  164. // Message
  165. // ---
  166. @message-notice-content-padding: 8px 16px;
  167. // popover
  168. // --
  169. @popover-min-height: 28px;
  170. @popover-padding-horizontal: @default-padding-sm;
  171. // Card
  172. // ---
  173. @card-padding-base: 16px;
  174. @card-head-height: 36px;
  175. @card-head-font-size: @card-head-font-size-sm;
  176. @card-head-padding: 8.5px;
  177. @card-padding-base: 12px;
  178. @card-padding-base-sm: @card-padding-base;
  179. @card-head-height-sm: 30px;
  180. @card-head-padding-sm: 6px;
  181. @card-actions-li-margin: 4px 0;
  182. @card-head-tabs-margin-bottom: -9px;
  183. // Table
  184. // ---
  185. @table-padding-vertical: 12px;
  186. @table-padding-horizontal: 8px;
  187. @table-padding-vertical-md: 8px;
  188. @table-padding-horizontal-md: 8px;
  189. @table-padding-vertical-sm: 4px;
  190. @table-padding-horizontal-sm: 4px;
  191. @table-selection-column-width: 32px;
  192. // Statistic
  193. // ---
  194. @statistic-content-font-size: 20px;
  195. // Alert
  196. // ---
  197. @alert-with-description-no-icon-padding-vertical: 7px;
  198. @alert-with-description-padding-vertical: 11px;
  199. @alert-icon-top: 7px + @font-size-base * (@line-height-base / 2) - (@font-size-base / 2);
  200. @alert-with-description-icon-size: 20px;
  201. // Skeleton
  202. // ---
  203. @skeleton-paragraph-margin-top: 20px;
  204. @skeleton-paragraph-li-margin-top: 12px;
  205. @skeleton-paragraph-li-height: 14px;
  206. @skeleton-title-height: 14px;
  207. @skeleton-title-paragraph-margin-top: 20px;
  208. // Descriptions
  209. @descriptions-title-margin-bottom: 8px;
  210. @descriptions-default-padding: 12px @padding-lg;
  211. @descriptions-item-padding-bottom: @padding-xs;
  212. // Avatar
  213. // ---
  214. @avatar-size-base: 28px;
  215. @avatar-size-lg: 32px;
  216. @avatar-size-sm: 22px;
  217. @avatar-font-size-base: 16px;
  218. @avatar-font-size-lg: 20px;
  219. @avatar-font-size-sm: 12px;
  220. // Badge
  221. // ---
  222. @badge-height: 18px;
  223. // Tag
  224. // ---
  225. @tag-line-height: 18px;
  226. // Notification
  227. // ---
  228. @notification-padding-vertical: 12px;
  229. @notification-padding-horizontal: 16px;
  230. // Result
  231. // ---
  232. @result-title-font-size: 20px;
  233. @result-icon-font-size: 64px;
  234. @result-extra-margin: 24px 0 0 0;
  235. // Anchor
  236. // ---
  237. @anchor-link-top: 4px;
  238. @anchor-link-left: 16px;
  239. @anchor-link-padding: @anchor-link-top 0 @anchor-link-top @anchor-link-left;
  240. // Tabs
  241. // ---
  242. @tabs-card-horizontal-padding: 4px @padding-md;
  243. // Progress
  244. // ---
  245. @progress-circle-text-font-size: 0.833333em;
  246. // Image
  247. // ---
  248. @image-size-base: 48px;
  249. @image-font-size-base: 24px;