global.less 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491
  1. /* stylelint-disable property-no-vendor-prefix, at-rule-no-vendor-prefix */
  2. // Reboot
  3. //
  4. // Normalization of HTML elements, manually forked from Normalize.css to remove
  5. // styles targeting irrelevant browsers while applying new styles.
  6. //
  7. // Normalize is licensed MIT. https://github.com/necolas/normalize.css
  8. // HTML & Body reset
  9. @{html-selector},
  10. body {
  11. .square(100%);
  12. }
  13. // remove the clear button of a text input control in IE10+
  14. input::-ms-clear,
  15. input::-ms-reveal {
  16. display: none;
  17. }
  18. // Document
  19. //
  20. // 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
  21. // 2. Change the default font family in all browsers.
  22. // 3. Correct the line height in all browsers.
  23. // 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
  24. // 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
  25. // we force a non-overlapping, non-auto-hiding scrollbar to counteract.
  26. // 6. Change the default tap highlight to be completely transparent in iOS.
  27. *,
  28. *::before,
  29. *::after {
  30. box-sizing: border-box; // 1
  31. }
  32. @{html-selector} {
  33. font-family: sans-serif; // 2
  34. line-height: 1.15; // 3
  35. -webkit-text-size-adjust: 100%; // 4
  36. -ms-text-size-adjust: 100%; // 4
  37. -ms-overflow-style: scrollbar; // 5
  38. -webkit-tap-highlight-color: fade(@black, 0%); // 6
  39. }
  40. // IE10+ doesn't honor `<meta name="viewport">` in some cases.
  41. @-ms-viewport {
  42. width: device-width;
  43. }
  44. // Body
  45. //
  46. // 1. remove the margin in all browsers.
  47. // 2. As a best practice, apply a default `body-background`.
  48. body {
  49. margin: 0; // 1
  50. color: @text-color;
  51. font-size: @font-size-base;
  52. font-family: @font-family;
  53. font-variant: @font-variant-base;
  54. line-height: @line-height-base;
  55. background-color: @body-background; // 2
  56. font-feature-settings: @font-feature-settings-base;
  57. }
  58. // Suppress the focus outline on elements that cannot be accessed via keyboard.
  59. // This prevents an unwanted focus outline from appearing around elements that
  60. // might still respond to pointer events.
  61. //
  62. // Credit: https://github.com/suitcss/base
  63. [tabindex='-1']:focus {
  64. outline: none !important;
  65. }
  66. // Content grouping
  67. //
  68. // 1. Add the correct box sizing in Firefox.
  69. // 2. Show the overflow in Edge and IE.
  70. hr {
  71. box-sizing: content-box; // 1
  72. height: 0; // 1
  73. overflow: visible; // 2
  74. }
  75. //
  76. // Typography
  77. //
  78. // remove top margins from headings
  79. //
  80. // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
  81. // margin for easier control within type scales as it avoids margin collapsing.
  82. h1,
  83. h2,
  84. h3,
  85. h4,
  86. h5,
  87. h6 {
  88. margin-top: 0;
  89. margin-bottom: 0.5em;
  90. color: @heading-color;
  91. font-weight: 500;
  92. }
  93. // Reset margins on paragraphs
  94. //
  95. // Similarly, the top margin on `<p>`s get reset. However, we also reset the
  96. // bottom margin to use `em` units instead of `em`.
  97. p {
  98. margin-top: 0;
  99. margin-bottom: 1em;
  100. }
  101. // Abbreviations
  102. //
  103. // 1. remove the bottom border in Firefox 39-.
  104. // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  105. // 3. Add explicit cursor to indicate changed behavior.
  106. // 4. Duplicate behavior to the data-* attribute for our tooltip plugin
  107. abbr[title],
  108. abbr[data-original-title] {
  109. // 4
  110. text-decoration: underline; // 2
  111. text-decoration: underline dotted; // 2
  112. border-bottom: 0; // 1
  113. cursor: help; // 3
  114. }
  115. address {
  116. margin-bottom: 1em;
  117. font-style: normal;
  118. line-height: inherit;
  119. }
  120. input[type='text'],
  121. input[type='password'],
  122. input[type='number'],
  123. textarea {
  124. -webkit-appearance: none;
  125. }
  126. ol,
  127. ul,
  128. dl {
  129. margin-top: 0;
  130. margin-bottom: 1em;
  131. }
  132. ol ol,
  133. ul ul,
  134. ol ul,
  135. ul ol {
  136. margin-bottom: 0;
  137. }
  138. dt {
  139. font-weight: 500;
  140. }
  141. dd {
  142. margin-bottom: 0.5em;
  143. margin-left: 0; // Undo browser default
  144. }
  145. blockquote {
  146. margin: 0 0 1em;
  147. }
  148. dfn {
  149. font-style: italic; // Add the correct font style in Android 4.3-
  150. }
  151. b,
  152. strong {
  153. font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
  154. }
  155. small {
  156. font-size: 80%; // Add the correct font size in all browsers
  157. }
  158. //
  159. // Prevent `sub` and `sup` elements from affecting the line height in
  160. // all browsers.
  161. //
  162. sub,
  163. sup {
  164. position: relative;
  165. font-size: 75%;
  166. line-height: 0;
  167. vertical-align: baseline;
  168. }
  169. sub {
  170. bottom: -0.25em;
  171. }
  172. sup {
  173. top: -0.5em;
  174. }
  175. //
  176. // Links
  177. //
  178. a {
  179. color: @link-color;
  180. text-decoration: @link-decoration;
  181. background-color: transparent; // remove the gray background on active links in IE 10.
  182. outline: none;
  183. cursor: pointer;
  184. transition: color 0.3s;
  185. -webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+.
  186. &:hover {
  187. color: @link-hover-color;
  188. }
  189. &:active {
  190. color: @link-active-color;
  191. }
  192. &:active,
  193. &:hover {
  194. text-decoration: @link-hover-decoration;
  195. outline: 0;
  196. }
  197. // https://github.com/ant-design/ant-design/issues/22503
  198. &:focus {
  199. text-decoration: @link-focus-decoration;
  200. outline: @link-focus-outline;
  201. }
  202. &[disabled] {
  203. color: @disabled-color;
  204. cursor: not-allowed;
  205. }
  206. }
  207. //
  208. // Code
  209. //
  210. pre,
  211. code,
  212. kbd,
  213. samp {
  214. font-size: 1em; // Correct the odd `em` font sizing in all browsers.
  215. font-family: @code-family;
  216. }
  217. pre {
  218. // remove browser default top margin
  219. margin-top: 0;
  220. // Reset browser default of `1em` to use `em`s
  221. margin-bottom: 1em;
  222. // Don't allow content to break outside
  223. overflow: auto;
  224. }
  225. //
  226. // Figures
  227. //
  228. figure {
  229. // Apply a consistent margin strategy (matches our type styles).
  230. margin: 0 0 1em;
  231. }
  232. //
  233. // Images and content
  234. //
  235. img {
  236. vertical-align: middle;
  237. border-style: none; // remove the border on images inside links in IE 10-.
  238. }
  239. // Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
  240. //
  241. // In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
  242. // DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
  243. // However, they DO support emoving the click delay via `touch-action: manipulation`.
  244. // See:
  245. // * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
  246. // * http://caniuse.com/#feat=css-touch-action
  247. // * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
  248. a,
  249. area,
  250. button,
  251. [role='button'],
  252. input:not([type='range']),
  253. label,
  254. select,
  255. summary,
  256. textarea {
  257. touch-action: manipulation;
  258. }
  259. //
  260. // Tables
  261. //
  262. table {
  263. border-collapse: collapse; // Prevent double borders
  264. }
  265. caption {
  266. padding-top: 0.75em;
  267. padding-bottom: 0.3em;
  268. color: @text-color-secondary;
  269. text-align: left;
  270. caption-side: bottom;
  271. }
  272. //
  273. // Forms
  274. //
  275. input,
  276. button,
  277. select,
  278. optgroup,
  279. textarea {
  280. margin: 0; // remove the margin in Firefox and Safari
  281. color: inherit;
  282. font-size: inherit;
  283. font-family: inherit;
  284. line-height: inherit;
  285. }
  286. button,
  287. input {
  288. overflow: visible; // Show the overflow in Edge
  289. }
  290. button,
  291. select {
  292. text-transform: none; // remove the inheritance of text transform in Firefox
  293. }
  294. // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
  295. // controls in Android 4.
  296. // 2. Correct the inability to style clickable types in iOS and Safari.
  297. button,
  298. @{html-selector} [type="button"], /* 1 */
  299. [type="reset"],
  300. [type="submit"] {
  301. -webkit-appearance: button; // 2
  302. }
  303. // remove inner border and padding from Firefox, but don't restore the outline like Normalize.
  304. button::-moz-focus-inner,
  305. [type='button']::-moz-focus-inner,
  306. [type='reset']::-moz-focus-inner,
  307. [type='submit']::-moz-focus-inner {
  308. padding: 0;
  309. border-style: none;
  310. }
  311. input[type='radio'],
  312. input[type='checkbox'] {
  313. box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
  314. padding: 0; // 2. remove the padding in IE 10-
  315. }
  316. input[type='date'],
  317. input[type='time'],
  318. input[type='datetime-local'],
  319. input[type='month'] {
  320. // remove the default appearance of temporal inputs to avoid a Mobile Safari
  321. // bug where setting a custom line-height prevents text from being vertically
  322. // centered within the input.
  323. // See https://bugs.webkit.org/show_bug.cgi?id=139848
  324. // and https://github.com/twbs/bootstrap/issues/11266
  325. -webkit-appearance: listbox;
  326. }
  327. textarea {
  328. overflow: auto; // remove the default vertical scrollbar in IE.
  329. // Textareas should really only resize vertically so they don't break their (horizontal) containers.
  330. resize: vertical;
  331. }
  332. fieldset {
  333. // Browsers set a default `min-width: min-content;` on fieldsets,
  334. // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
  335. // So we reset that to ensure fieldsets behave more like a standard block element.
  336. // See https://github.com/twbs/bootstrap/issues/12359
  337. // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
  338. min-width: 0;
  339. margin: 0;
  340. // Reset the default outline behavior of fieldsets so they don't affect page layout.
  341. padding: 0;
  342. border: 0;
  343. }
  344. // 1. Correct the text wrapping in Edge and IE.
  345. // 2. Correct the color inheritance from `fieldset` elements in IE.
  346. legend {
  347. display: block;
  348. width: 100%;
  349. max-width: 100%; // 1
  350. margin-bottom: 0.5em;
  351. padding: 0;
  352. color: inherit; // 2
  353. font-size: 1.5em;
  354. line-height: inherit;
  355. white-space: normal; // 1
  356. }
  357. progress {
  358. vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
  359. }
  360. // Correct the cursor style of incement and decement buttons in Chrome.
  361. [type='number']::-webkit-inner-spin-button,
  362. [type='number']::-webkit-outer-spin-button {
  363. height: auto;
  364. }
  365. [type='search'] {
  366. // This overrides the extra rounded corners on search inputs in iOS so that our
  367. // `.form-control` class can properly style them. Note that this cannot simply
  368. // be added to `.form-control` as it's not specific enough. For details, see
  369. // https://github.com/twbs/bootstrap/issues/11586.
  370. outline-offset: -2px; // 2. Correct the outline style in Safari.
  371. -webkit-appearance: none;
  372. }
  373. //
  374. // remove the inner padding and cancel buttons in Chrome and Safari on macOS.
  375. //
  376. [type='search']::-webkit-search-cancel-button,
  377. [type='search']::-webkit-search-decoration {
  378. -webkit-appearance: none;
  379. }
  380. //
  381. // 1. Correct the inability to style clickable types in iOS and Safari.
  382. // 2. Change font properties to `inherit` in Safari.
  383. //
  384. ::-webkit-file-upload-button {
  385. font: inherit; // 2
  386. -webkit-appearance: button; // 1
  387. }
  388. //
  389. // Correct element displays
  390. //
  391. output {
  392. display: inline-block;
  393. }
  394. summary {
  395. display: list-item; // Add the correct display in all browsers
  396. }
  397. template {
  398. display: none; // Add the correct display in IE
  399. }
  400. // Always hide an element with the `hidden` HTML attribute (from PureCSS).
  401. // Needed for proper display in IE 10-.
  402. [hidden] {
  403. display: none !important;
  404. }
  405. mark {
  406. padding: 0.2em;
  407. background-color: @yellow-1;
  408. }
  409. ::selection {
  410. color: @text-color-inverse;
  411. background: @text-selection-bg;
  412. }
  413. // Utility classes
  414. .clearfix {
  415. .clearfix();
  416. }