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