Layout von Websiten mit Bootstrap und Foundation
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_reboot.scss 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
  1. // stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-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. // Document
  9. //
  10. // 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
  11. // 2. Change the default font family in all browsers.
  12. // 3. Correct the line height in all browsers.
  13. // 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
  14. // 5. Change the default tap highlight to be completely transparent in iOS.
  15. *,
  16. *::before,
  17. *::after {
  18. box-sizing: border-box; // 1
  19. }
  20. html {
  21. font-family: sans-serif; // 2
  22. line-height: 1.15; // 3
  23. -webkit-text-size-adjust: 100%; // 4
  24. -webkit-tap-highlight-color: rgba($black, 0); // 5
  25. }
  26. // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
  27. // TODO: remove in v5
  28. // stylelint-disable-next-line selector-list-comma-newline-after
  29. article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  30. display: block;
  31. }
  32. // Body
  33. //
  34. // 1. Remove the margin in all browsers.
  35. // 2. As a best practice, apply a default `background-color`.
  36. // 3. Set an explicit initial text-align value so that we can later use
  37. // the `inherit` value on things like `<th>` elements.
  38. body {
  39. margin: 0; // 1
  40. font-family: $font-family-base;
  41. @include font-size($font-size-base);
  42. font-weight: $font-weight-base;
  43. line-height: $line-height-base;
  44. color: $body-color;
  45. text-align: left; // 3
  46. background-color: $body-bg; // 2
  47. }
  48. // Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
  49. // on elements that programmatically receive focus but wouldn't normally show a visible
  50. // focus outline. In general, this would mean that the outline is only applied if the
  51. // interaction that led to the element receiving programmatic focus was a keyboard interaction,
  52. // or the browser has somehow determined that the user is primarily a keyboard user and/or
  53. // wants focus outlines to always be presented.
  54. //
  55. // See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
  56. // and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
  57. [tabindex="-1"]:focus:not(:focus-visible) {
  58. outline: 0 !important;
  59. }
  60. // Content grouping
  61. //
  62. // 1. Add the correct box sizing in Firefox.
  63. // 2. Show the overflow in Edge and IE.
  64. hr {
  65. box-sizing: content-box; // 1
  66. height: 0; // 1
  67. overflow: visible; // 2
  68. }
  69. //
  70. // Typography
  71. //
  72. // Remove top margins from headings
  73. //
  74. // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
  75. // margin for easier control within type scales as it avoids margin collapsing.
  76. // stylelint-disable-next-line selector-list-comma-newline-after
  77. h1, h2, h3, h4, h5, h6 {
  78. margin-top: 0;
  79. margin-bottom: $headings-margin-bottom;
  80. }
  81. // Reset margins on paragraphs
  82. //
  83. // Similarly, the top margin on `<p>`s get reset. However, we also reset the
  84. // bottom margin to use `rem` units instead of `em`.
  85. p {
  86. margin-top: 0;
  87. margin-bottom: $paragraph-margin-bottom;
  88. }
  89. // Abbreviations
  90. //
  91. // 1. Duplicate behavior to the data-* attribute for our tooltip plugin
  92. // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  93. // 3. Add explicit cursor to indicate changed behavior.
  94. // 4. Remove the bottom border in Firefox 39-.
  95. // 5. Prevent the text-decoration to be skipped.
  96. abbr[title],
  97. abbr[data-original-title] { // 1
  98. text-decoration: underline; // 2
  99. text-decoration: underline dotted; // 2
  100. cursor: help; // 3
  101. border-bottom: 0; // 4
  102. text-decoration-skip-ink: none; // 5
  103. }
  104. address {
  105. margin-bottom: 1rem;
  106. font-style: normal;
  107. line-height: inherit;
  108. }
  109. ol,
  110. ul,
  111. dl {
  112. margin-top: 0;
  113. margin-bottom: 1rem;
  114. }
  115. ol ol,
  116. ul ul,
  117. ol ul,
  118. ul ol {
  119. margin-bottom: 0;
  120. }
  121. dt {
  122. font-weight: $dt-font-weight;
  123. }
  124. dd {
  125. margin-bottom: .5rem;
  126. margin-left: 0; // Undo browser default
  127. }
  128. blockquote {
  129. margin: 0 0 1rem;
  130. }
  131. b,
  132. strong {
  133. font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari
  134. }
  135. small {
  136. @include font-size(80%); // Add the correct font size in all browsers
  137. }
  138. //
  139. // Prevent `sub` and `sup` elements from affecting the line height in
  140. // all browsers.
  141. //
  142. sub,
  143. sup {
  144. position: relative;
  145. @include font-size(75%);
  146. line-height: 0;
  147. vertical-align: baseline;
  148. }
  149. sub { bottom: -.25em; }
  150. sup { top: -.5em; }
  151. //
  152. // Links
  153. //
  154. a {
  155. color: $link-color;
  156. text-decoration: $link-decoration;
  157. background-color: transparent; // Remove the gray background on active links in IE 10.
  158. @include hover() {
  159. color: $link-hover-color;
  160. text-decoration: $link-hover-decoration;
  161. }
  162. }
  163. // And undo these styles for placeholder links/named anchors (without href).
  164. // It would be more straightforward to just use a[href] in previous block, but that
  165. // causes specificity issues in many other styles that are too complex to fix.
  166. // See https://github.com/twbs/bootstrap/issues/19402
  167. a:not([href]) {
  168. color: inherit;
  169. text-decoration: none;
  170. @include hover() {
  171. color: inherit;
  172. text-decoration: none;
  173. }
  174. }
  175. //
  176. // Code
  177. //
  178. pre,
  179. code,
  180. kbd,
  181. samp {
  182. font-family: $font-family-monospace;
  183. @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
  184. }
  185. pre {
  186. // Remove browser default top margin
  187. margin-top: 0;
  188. // Reset browser default of `1em` to use `rem`s
  189. margin-bottom: 1rem;
  190. // Don't allow content to break outside
  191. overflow: auto;
  192. // Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,
  193. // making it impossible to interact with the content
  194. -ms-overflow-style: scrollbar;
  195. }
  196. //
  197. // Figures
  198. //
  199. figure {
  200. // Apply a consistent margin strategy (matches our type styles).
  201. margin: 0 0 1rem;
  202. }
  203. //
  204. // Images and content
  205. //
  206. img {
  207. vertical-align: middle;
  208. border-style: none; // Remove the border on images inside links in IE 10-.
  209. }
  210. svg {
  211. // Workaround for the SVG overflow bug in IE10/11 is still required.
  212. // See https://github.com/twbs/bootstrap/issues/26878
  213. overflow: hidden;
  214. vertical-align: middle;
  215. }
  216. //
  217. // Tables
  218. //
  219. table {
  220. border-collapse: collapse; // Prevent double borders
  221. }
  222. caption {
  223. padding-top: $table-cell-padding;
  224. padding-bottom: $table-cell-padding;
  225. color: $table-caption-color;
  226. text-align: left;
  227. caption-side: bottom;
  228. }
  229. th {
  230. // Matches default `<td>` alignment by inheriting from the `<body>`, or the
  231. // closest parent with a set `text-align`.
  232. text-align: inherit;
  233. }
  234. //
  235. // Forms
  236. //
  237. label {
  238. // Allow labels to use `margin` for spacing.
  239. display: inline-block;
  240. margin-bottom: $label-margin-bottom;
  241. }
  242. // Remove the default `border-radius` that macOS Chrome adds.
  243. //
  244. // Details at https://github.com/twbs/bootstrap/issues/24093
  245. button {
  246. // stylelint-disable-next-line property-blacklist
  247. border-radius: 0;
  248. }
  249. // Work around a Firefox/IE bug where the transparent `button` background
  250. // results in a loss of the default `button` focus styles.
  251. //
  252. // Credit: https://github.com/suitcss/base/
  253. button:focus {
  254. outline: 1px dotted;
  255. outline: 5px auto -webkit-focus-ring-color;
  256. }
  257. input,
  258. button,
  259. select,
  260. optgroup,
  261. textarea {
  262. margin: 0; // Remove the margin in Firefox and Safari
  263. font-family: inherit;
  264. @include font-size(inherit);
  265. line-height: inherit;
  266. }
  267. button,
  268. input {
  269. overflow: visible; // Show the overflow in Edge
  270. }
  271. button,
  272. select {
  273. text-transform: none; // Remove the inheritance of text transform in Firefox
  274. }
  275. // Set the cursor for non-`<button>` buttons
  276. //
  277. // Details at https://github.com/twbs/bootstrap/pull/30562
  278. [role="button"] {
  279. cursor: pointer;
  280. }
  281. // Remove the inheritance of word-wrap in Safari.
  282. //
  283. // Details at https://github.com/twbs/bootstrap/issues/24990
  284. select {
  285. word-wrap: normal;
  286. }
  287. // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
  288. // controls in Android 4.
  289. // 2. Correct the inability to style clickable types in iOS and Safari.
  290. button,
  291. [type="button"], // 1
  292. [type="reset"],
  293. [type="submit"] {
  294. -webkit-appearance: button; // 2
  295. }
  296. // Opinionated: add "hand" cursor to non-disabled button elements.
  297. @if $enable-pointer-cursor-for-buttons {
  298. button,
  299. [type="button"],
  300. [type="reset"],
  301. [type="submit"] {
  302. &:not(:disabled) {
  303. cursor: pointer;
  304. }
  305. }
  306. }
  307. // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
  308. button::-moz-focus-inner,
  309. [type="button"]::-moz-focus-inner,
  310. [type="reset"]::-moz-focus-inner,
  311. [type="submit"]::-moz-focus-inner {
  312. padding: 0;
  313. border-style: none;
  314. }
  315. input[type="radio"],
  316. input[type="checkbox"] {
  317. box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
  318. padding: 0; // 2. Remove the padding in IE 10-
  319. }
  320. textarea {
  321. overflow: auto; // Remove the default vertical scrollbar in IE.
  322. // Textareas should really only resize vertically so they don't break their (horizontal) containers.
  323. resize: vertical;
  324. }
  325. fieldset {
  326. // Browsers set a default `min-width: min-content;` on fieldsets,
  327. // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
  328. // So we reset that to ensure fieldsets behave more like a standard block element.
  329. // See https://github.com/twbs/bootstrap/issues/12359
  330. // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
  331. min-width: 0;
  332. // Reset the default outline behavior of fieldsets so they don't affect page layout.
  333. padding: 0;
  334. margin: 0;
  335. border: 0;
  336. }
  337. // 1. Correct the text wrapping in Edge and IE.
  338. // 2. Correct the color inheritance from `fieldset` elements in IE.
  339. legend {
  340. display: block;
  341. width: 100%;
  342. max-width: 100%; // 1
  343. padding: 0;
  344. margin-bottom: .5rem;
  345. @include font-size(1.5rem);
  346. line-height: inherit;
  347. color: inherit; // 2
  348. white-space: normal; // 1
  349. }
  350. progress {
  351. vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
  352. }
  353. // Correct the cursor style of increment and decrement buttons in Chrome.
  354. [type="number"]::-webkit-inner-spin-button,
  355. [type="number"]::-webkit-outer-spin-button {
  356. height: auto;
  357. }
  358. [type="search"] {
  359. // This overrides the extra rounded corners on search inputs in iOS so that our
  360. // `.form-control` class can properly style them. Note that this cannot simply
  361. // be added to `.form-control` as it's not specific enough. For details, see
  362. // https://github.com/twbs/bootstrap/issues/11586.
  363. outline-offset: -2px; // 2. Correct the outline style in Safari.
  364. -webkit-appearance: none;
  365. }
  366. //
  367. // Remove the inner padding in Chrome and Safari on macOS.
  368. //
  369. [type="search"]::-webkit-search-decoration {
  370. -webkit-appearance: none;
  371. }
  372. //
  373. // 1. Correct the inability to style clickable types in iOS and Safari.
  374. // 2. Change font properties to `inherit` in Safari.
  375. //
  376. ::-webkit-file-upload-button {
  377. font: inherit; // 2
  378. -webkit-appearance: button; // 1
  379. }
  380. //
  381. // Correct element displays
  382. //
  383. output {
  384. display: inline-block;
  385. }
  386. summary {
  387. display: list-item; // Add the correct display in all browsers
  388. cursor: pointer;
  389. }
  390. template {
  391. display: none; // Add the correct display in IE
  392. }
  393. // Always hide an element with the `hidden` HTML attribute (from PureCSS).
  394. // Needed for proper display in IE 10-.
  395. [hidden] {
  396. display: none !important;
  397. }