_reboot.scss 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
  1. // scss-lint:disable ImportantRule, QualifyingElement, DuplicateProperty
  2. // Reboot
  3. //
  4. // Global resets to common HTML elements and more for easier usage by Bootstrap.
  5. // Adds additional rules on top of Normalize.css, including several overrides.
  6. // Reset the box-sizing
  7. //
  8. // Change from `box-sizing: content-box` to `border-box` so that when you add
  9. // `padding` or `border`s to an element, the overall declared `width` does not
  10. // change. For example, `width: 100px;` will always be `100px` despite the
  11. // `border: 10px solid red;` and `padding: 20px;`.
  12. //
  13. // Heads up! This reset may cause conflicts with some third-party widgets. For
  14. // recommendations on resolving such conflicts, see
  15. // http://getbootstrap.com/getting-started/#third-box-sizing.
  16. //
  17. // Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
  18. html {
  19. box-sizing: border-box;
  20. }
  21. *,
  22. *::before,
  23. *::after {
  24. box-sizing: inherit;
  25. }
  26. // Make viewport responsive
  27. //
  28. // @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
  29. // some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
  30. // Eventually @viewport will replace <meta name="viewport">.
  31. //
  32. // However, `device-width` is broken on IE 10 on Windows (Phone) 8,
  33. // (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
  34. // and the fix for that involves a snippet of JavaScript to sniff the user agent
  35. // and apply some conditional CSS.
  36. //
  37. // See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
  38. //
  39. // Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
  40. // `.class-name { @import "bootstrap"; }`).
  41. @at-root {
  42. @-ms-viewport {
  43. width: device-width;
  44. }
  45. }
  46. //
  47. // Reset HTML, body, and more
  48. //
  49. html {
  50. // Sets a specific default `font-size` for user with `rem` type scales.
  51. font-size: $font-size-root;
  52. // As a side-effect of setting the @viewport above,
  53. // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
  54. // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
  55. // thus making it hard to click on stuff near the right edge of the page.
  56. // So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
  57. // See https://github.com/twbs/bootstrap/issues/18543
  58. -ms-overflow-style: scrollbar;
  59. // Changes the default tap highlight to be completely transparent in iOS.
  60. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  61. height: 100%;
  62. }
  63. body {
  64. // Make the `body` use the `font-size-root`
  65. font-family: $font-family-sans-serif;
  66. font-size: $font-size-base;
  67. line-height: $line-height-base;
  68. // Go easy on the eyes and use something other than `#000` for text
  69. color: $body-color;
  70. // By default, `<body>` has no `background-color` so we set one as a best practice.
  71. background-color: $body-bg;
  72. height: 100%;
  73. width: 100%;
  74. position: absolute;
  75. }
  76. // Suppress the focus outline on elements that cannot be accessed via keyboard.
  77. // This prevents an unwanted focus outline from appearing around elements that
  78. // might still respond to pointer events.
  79. //
  80. // Credit: https://github.com/suitcss/base
  81. [tabindex='-1']:focus {
  82. outline: none !important;
  83. }
  84. //
  85. // Typography
  86. //
  87. // Remove top margins from headings
  88. //
  89. // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
  90. // margin for easier control within type scales as it avoids margin collapsing.
  91. h1,
  92. h2,
  93. h3,
  94. h4,
  95. h5,
  96. h6 {
  97. margin-top: 0;
  98. margin-bottom: $space-sm;
  99. }
  100. // Reset margins on paragraphs
  101. //
  102. // Similarly, the top margin on `<p>`s get reset. However, we also reset the
  103. // bottom margin to use `rem` units instead of `em`.
  104. p {
  105. margin-top: 0;
  106. margin-bottom: $space-md;
  107. }
  108. // Abbreviations and acronyms
  109. abbr[title] {
  110. cursor: help;
  111. border-bottom: 1px dotted $abbr-border-color;
  112. }
  113. address {
  114. margin-bottom: $space-md;
  115. font-style: normal;
  116. line-height: inherit;
  117. }
  118. ol,
  119. ul,
  120. dl {
  121. margin-top: 0;
  122. margin-bottom: 0;
  123. }
  124. ol ol,
  125. ul ul,
  126. ol ul,
  127. ul ol {
  128. margin-bottom: 0;
  129. }
  130. dt {
  131. font-weight: $font-weight-semi-bold;
  132. }
  133. dd {
  134. margin-bottom: $space-sm;
  135. margin-left: 0; // Undo browser default
  136. }
  137. blockquote {
  138. margin: 0 0 $space-md;
  139. }
  140. //
  141. // Links
  142. //
  143. a {
  144. color: $link-color;
  145. text-decoration: $link-decoration;
  146. @include hover-focus {
  147. color: $link-hover-color;
  148. text-decoration: $link-hover-decoration;
  149. }
  150. &:focus {
  151. @include no-focus();
  152. }
  153. }
  154. //
  155. // Code
  156. //
  157. pre {
  158. // Remove browser default top margin
  159. margin-top: 0;
  160. // Reset browser default of `1em` to use `rem`s
  161. margin-bottom: $space-md;
  162. }
  163. //
  164. // Figures
  165. //
  166. figure {
  167. // Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
  168. // We reset that to create a better flow in-page.
  169. margin: 0 0 $space-md;
  170. }
  171. //
  172. // Images
  173. //
  174. img {
  175. // By default, `<img>`s are `inline-block`. This assumes that, and vertically
  176. // centers them. This won't apply should you reset them to `block` level.
  177. vertical-align: middle;
  178. // Note: `<img>`s are deliberately not made responsive by default.
  179. // For the rationale behind this, see the comments on the `.img-fluid` class.
  180. }
  181. // iOS "clickable elements" fix for role="button"
  182. //
  183. // Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
  184. // for traditionally non-focusable elements with role="button"
  185. // see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
  186. [role='button'] {
  187. cursor: pointer;
  188. }
  189. // Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
  190. //
  191. // In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
  192. // DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
  193. // However, they DO support removing the click delay via `touch-action: manipulation`.
  194. // See:
  195. // * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
  196. // * http://caniuse.com/#feat=css-touch-action
  197. // * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
  198. a,
  199. area,
  200. button,
  201. [role='button'],
  202. input,
  203. label,
  204. select,
  205. summary,
  206. textarea {
  207. touch-action: manipulation;
  208. }
  209. //
  210. // Tables
  211. //
  212. table {
  213. // Reset for nesting within parents with `background-color`.
  214. background-color: transparent;
  215. }
  216. caption {
  217. padding-top: $space-inset-squish-md;
  218. padding-bottom: $space-inset-squish-md;
  219. color: $text-muted;
  220. text-align: left;
  221. caption-side: bottom;
  222. }
  223. th {
  224. // Centered by default, but left-align-ed to match the `td`s below.
  225. text-align: left;
  226. }
  227. //
  228. // Forms
  229. //
  230. label {
  231. // Allow labels to use `margin` for spacing.
  232. display: inline-block;
  233. }
  234. // Work around a Firefox/IE bug where the transparent `button` background
  235. // results in a loss of the default `button` focus styles.
  236. //
  237. // Credit: https://github.com/suitcss/base/
  238. button:focus {
  239. outline: 1px dotted;
  240. outline: 5px auto -webkit-focus-ring-color;
  241. }
  242. input,
  243. button,
  244. select,
  245. textarea {
  246. // Remove all `margin`s so our classes don't have to do it themselves.
  247. margin: 0;
  248. // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
  249. // properly inherited. However, `line-height` isn't addressed there. Using this
  250. // ensures we don't need to unnecessarily redeclare the global font stack.
  251. line-height: inherit;
  252. // iOS adds rounded borders by default
  253. border-radius: 0;
  254. }
  255. textarea {
  256. // Textareas should really only resize vertically so they don't break their (horizontal) containers.
  257. resize: vertical;
  258. }
  259. fieldset {
  260. // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
  261. // so we reset that to ensure it behaves more like a standard block element.
  262. // See https://github.com/twbs/bootstrap/issues/12359.
  263. min-width: 0;
  264. // Reset the default outline behavior of fieldsets so they don't affect page layout.
  265. padding: 0;
  266. margin: 0;
  267. border: 0;
  268. }
  269. legend {
  270. // Reset the entire legend element to match the `fieldset`
  271. display: block;
  272. width: 100%;
  273. padding: 0;
  274. margin-bottom: $space-sm;
  275. font-size: $space-lg;
  276. line-height: inherit;
  277. // border: 0;
  278. }
  279. input[type='search'] {
  280. // This overrides the extra rounded corners on search inputs in iOS so that our
  281. // `.form-control` class can properly style them. Note that this cannot simply
  282. // be added to `.form-control` as it's not specific enough. For details, see
  283. // https://github.com/twbs/bootstrap/issues/11586.
  284. -webkit-appearance: none;
  285. }
  286. // todo: needed?
  287. output {
  288. display: inline-block;
  289. // font-size: $font-size-base;
  290. // line-height: $line-height;
  291. // color: $input-color;
  292. }
  293. // Always hide an element with the `hidden` HTML attribute (from PureCSS).
  294. [hidden] {
  295. display: none !important;
  296. }