_reboot.scss 8.4 KB

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