src/scss/bootstrap-4.0.0-alpha.6/scss/_reboot.scss

   1 // scss-lint:disable QualifyingElement, DuplicateProperty
   2
   3 // Reboot
   4 //
   5 // Global resets to common HTML elements and more for easier usage by Bootstrap.
   6 // Adds additional rules on top of Normalize.css, including several overrides.
   7
   8
   9 // Reset the box-sizing
  10 //
  11 // Change from `box-sizing: content-box` to `border-box` so that when you add
  12 // `padding` or `border`s to an element, the overall declared `width` does not
  13 // change. For example, `width: 100px;` will always be `100px` despite the
  14 // `border: 10px solid red;` and `padding: 20px;`.
  15 //
  16 // Heads up! This reset may cause conflicts with some third-party widgets. For
  17 // recommendations on resolving such conflicts, see
  18 // https://getbootstrap.com/getting-started/#third-box-sizing.
  19 //
  20 // Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
  21
  22 html {
  23   box-sizing: border-box;
  24 }
  25
  26 *,
  27 *::before,
  28 *::after {
  29   box-sizing: inherit;
  30 }
  31
  32
  33 // Make viewport responsive
  34 //
  35 // @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
  36 // some cases. See https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
  37 // Eventually @viewport will replace <meta name="viewport">.
  38 //
  39 // However, `device-width` is broken on IE 10 on Windows (Phone) 8,
  40 // (see https://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
  41 // and the fix for that involves a snippet of JavaScript to sniff the user agent
  42 // and apply some conditional CSS.
  43 //
  44 // See https://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
  45 //
  46 // Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
  47 // `.class-name { @import "bootstrap"; }`).
  48 @at-root {
  49   @-ms-viewport { width: device-width; }
  50 }
  51
  52
  53 //
  54 // Reset HTML, body, and more
  55 //
  56
  57 html {
  58   // We assume no initial pixel `font-size` for accessibility reasons. This
  59   // allows web visitors to customize their browser default font-size, making
  60   // your project more inclusive and accessible to everyone.
  61
  62   // As a side-effect of setting the @viewport above,
  63   // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
  64   // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
  65   // thus making it hard to click on stuff near the right edge of the page.
  66   // So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
  67   // See https://github.com/twbs/bootstrap/issues/18543
  68   // and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383/
  69   -ms-overflow-style: scrollbar;
  70
  71   // Changes the default tap highlight to be completely transparent in iOS.
  72   -webkit-tap-highlight-color: rgba(0,0,0,0);
  73 }
  74
  75 body {
  76   font-family: $font-family-base;
  77   font-size: $font-size-base;
  78   font-weight: $font-weight-base;
  79   line-height: $line-height-base;
  80   // Go easy on the eyes and use something other than `#000` for text
  81   color: $body-color;
  82   // By default, `<body>` has no `background-color` so we set one as a best practice.
  83   background-color: $body-bg;
  84 }
  85
  86 // Suppress the focus outline on elements that cannot be accessed via keyboard.
  87 // This prevents an unwanted focus outline from appearing around elements that
  88 // might still respond to pointer events.
  89 //
  90 // Credit: https://github.com/suitcss/base
  91 [tabindex="-1"]:focus {
  92   outline: none !important;
  93 }
  94
  95
  96 //
  97 // Typography
  98 //
  99
 100 // Remove top margins from headings
 101 //
 102 // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
 103 // margin for easier control within type scales as it avoids margin collapsing.
 104 h1, h2, h3, h4, h5, h6 {
 105   margin-top: 0;
 106   margin-bottom: .5rem;
 107 }
 108
 109 // Reset margins on paragraphs
 110 //
 111 // Similarly, the top margin on `<p>`s get reset. However, we also reset the
 112 // bottom margin to use `rem` units instead of `em`.
 113 p {
 114   margin-top: 0;
 115   margin-bottom: 1rem;
 116 }
 117
 118 // Abbreviations
 119 abbr[title],
 120 // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
 121 abbr[data-original-title] {
 122   cursor: help;
 123 }
 124
 125 address {
 126   margin-bottom: 1rem;
 127   font-style: normal;
 128   line-height: inherit;
 129 }
 130
 131 ol,
 132 ul,
 133 dl {
 134   margin-top: 0;
 135   margin-bottom: 1rem;
 136 }
 137
 138 ol ol,
 139 ul ul,
 140 ol ul,
 141 ul ol {
 142   margin-bottom: 0;
 143 }
 144
 145 dt {
 146   font-weight: $dt-font-weight;
 147 }
 148
 149 dd {
 150   margin-bottom: .5rem;
 151   margin-left: 0; // Undo browser default
 152 }
 153
 154 blockquote {
 155   margin: 0 0 1rem;
 156 }
 157
 158
 159 //
 160 // Links
 161 //
 162
 163 a {
 164   color: $link-color;
 165   text-decoration: $link-decoration;
 166
 167   @include hover-focus {
 168     color: $link-hover-color;
 169     text-decoration: $link-hover-decoration;
 170   }
 171 }
 172
 173 // And undo these styles for placeholder links/named anchors (without href)
 174 // which have not been made explicitly keyboard-focusable (without tabindex).
 175 // It would be more straightforward to just use a[href] in previous block, but that
 176 // causes specificity issues in many other styles that are too complex to fix.
 177 // See https://github.com/twbs/bootstrap/issues/19402
 178
 179 a:not([href]):not([tabindex]) {
 180   color: inherit;
 181   text-decoration: none;
 182
 183   @include hover-focus {
 184     color: inherit;
 185     text-decoration: none;
 186   }
 187
 188   &:focus {
 189     outline: 0;
 190   }
 191 }
 192
 193
 194 //
 195 // Code
 196 //
 197
 198 pre {
 199   // Remove browser default top margin
 200   margin-top: 0;
 201   // Reset browser default of `1em` to use `rem`s
 202   margin-bottom: 1rem;
 203   // Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets
 204   overflow: auto;
 205 }
 206
 207
 208 //
 209 // Figures
 210 //
 211
 212 figure {
 213   // Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
 214   // We reset that to create a better flow in-page.
 215   margin: 0 0 1rem;
 216 }
 217
 218
 219 //
 220 // Images
 221 //
 222
 223 img {
 224   // By default, `<img>`s are `inline-block`. This assumes that, and vertically
 225   // centers them. This won't apply should you reset them to `block` level.
 226   vertical-align: middle;
 227   // Note: `<img>`s are deliberately not made responsive by default.
 228   // For the rationale behind this, see the comments on the `.img-fluid` class.
 229 }
 230
 231
 232 // iOS "clickable elements" fix for role="button"
 233 //
 234 // Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
 235 // for traditionally non-focusable elements with role="button"
 236 // see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 237
 238 [role="button"] {
 239   cursor: pointer;
 240 }
 241
 242
 243 // Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
 244 //
 245 // In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
 246 // DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
 247 // However, they DO support removing the click delay via `touch-action: manipulation`.
 248 // See:
 249 // * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
 250 // * http://caniuse.com/#feat=css-touch-action
 251 // * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
 252
 253 a,
 254 area,
 255 button,
 256 [role="button"],
 257 input,
 258 label,
 259 select,
 260 summary,
 261 textarea {
 262   touch-action: manipulation;
 263 }
 264
 265
 266 //
 267 // Tables
 268 //
 269
 270 table {
 271   // No longer part of Normalize since v4
 272   border-collapse: collapse;
 273   // Reset for nesting within parents with `background-color`.
 274   background-color: $table-bg;
 275 }
 276
 277 caption {
 278   padding-top: $table-cell-padding;
 279   padding-bottom: $table-cell-padding;
 280   color: $text-muted;
 281   text-align: left;
 282   caption-side: bottom;
 283 }
 284
 285 th {
 286   // Centered by default, but left-align-ed to match the `td`s below.
 287   text-align: left;
 288 }
 289
 290
 291 //
 292 // Forms
 293 //
 294
 295 label {
 296   // Allow labels to use `margin` for spacing.
 297   display: inline-block;
 298   margin-bottom: .5rem;
 299 }
 300
 301 // Work around a Firefox/IE bug where the transparent `button` background
 302 // results in a loss of the default `button` focus styles.
 303 //
 304 // Credit: https://github.com/suitcss/base/
 305 button:focus {
 306   outline: 1px dotted;
 307   outline: 5px auto -webkit-focus-ring-color;
 308 }
 309
 310 input,
 311 button,
 312 select,
 313 textarea {
 314   // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
 315   // properly inherited. However, `line-height` isn't inherited there.
 316   line-height: inherit;
 317 }
 318
 319 input[type="radio"],
 320 input[type="checkbox"] {
 321   // Apply a disabled cursor for radios and checkboxes.
 322   //
 323   // Note: Neither radios nor checkboxes can be readonly.
 324   &:disabled {
 325     cursor: $cursor-disabled;
 326   }
 327 }
 328
 329
 330 input[type="date"],
 331 input[type="time"],
 332 input[type="datetime-local"],
 333 input[type="month"] {
 334   // Remove the default appearance of temporal inputs to avoid a Mobile Safari
 335   // bug where setting a custom line-height prevents text from being vertically
 336   // centered within the input.
 337   // See https://bugs.webkit.org/show_bug.cgi?id=139848
 338   // and https://github.com/twbs/bootstrap/issues/11266
 339   -webkit-appearance: listbox;
 340 }
 341
 342 textarea {
 343   // Textareas should really only resize vertically so they don't break their (horizontal) containers.
 344   resize: vertical;
 345 }
 346
 347 fieldset {
 348   // Browsers set a default `min-width: min-content;` on fieldsets,
 349   // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
 350   // So we reset that to ensure fieldsets behave more like a standard block element.
 351   // See https://github.com/twbs/bootstrap/issues/12359
 352   // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
 353   min-width: 0;
 354   // Reset the default outline behavior of fieldsets so they don't affect page layout.
 355   padding: 0;
 356   margin: 0;
 357   border: 0;
 358 }
 359
 360 legend {
 361   // Reset the entire legend element to match the `fieldset`
 362   display: block;
 363   width: 100%;
 364   padding: 0;
 365   margin-bottom: .5rem;
 366   font-size: 1.5rem;
 367   line-height: inherit;
 368 }
 369
 370 input[type="search"] {
 371   // This overrides the extra rounded corners on search inputs in iOS so that our
 372   // `.form-control` class can properly style them. Note that this cannot simply
 373   // be added to `.form-control` as it's not specific enough. For details, see
 374   // https://github.com/twbs/bootstrap/issues/11586.
 375   -webkit-appearance: none;
 376 }
 377
 378 // todo: needed?
 379 output {
 380   display: inline-block;
 381 //  font-size: $font-size-base;
 382 //  line-height: $line-height;
 383 //  color: $input-color;
 384 }
 385
 386 // Always hide an element with the `hidden` HTML attribute (from PureCSS).
 387 [hidden] {
 388   display: none !important;
 389 }