Warning, /iDDS/monitor/data/scss/bootstrap/_reboot.scss is written in an unsupported language. File is not indexed.
0001 // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
0002
0003
0004 // Reboot
0005 //
0006 // Normalization of HTML elements, manually forked from Normalize.css to remove
0007 // styles targeting irrelevant browsers while applying new styles.
0008 //
0009 // Normalize is licensed MIT. https://github.com/necolas/normalize.css
0010
0011
0012 // Document
0013 //
0014 // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
0015
0016 *,
0017 *::before,
0018 *::after {
0019 box-sizing: border-box;
0020 }
0021
0022
0023 // Root
0024 //
0025 // Ability to the value of the root font sizes, affecting the value of `rem`.
0026 // null by default, thus nothing is generated.
0027
0028 :root {
0029 font-size: $font-size-root;
0030
0031 @if $enable-smooth-scroll {
0032 @media (prefers-reduced-motion: no-preference) {
0033 scroll-behavior: smooth;
0034 }
0035 }
0036 }
0037
0038
0039 // Body
0040 //
0041 // 1. Remove the margin in all browsers.
0042 // 2. As a best practice, apply a default `background-color`.
0043 // 3. Prevent adjustments of font size after orientation changes in iOS.
0044 // 4. Change the default tap highlight to be completely transparent in iOS.
0045
0046 body {
0047 margin: 0; // 1
0048 font-family: $font-family-base;
0049 @include font-size($font-size-base);
0050 font-weight: $font-weight-base;
0051 line-height: $line-height-base;
0052 color: $body-color;
0053 text-align: $body-text-align;
0054 background-color: $body-bg; // 2
0055 -webkit-text-size-adjust: 100%; // 3
0056 -webkit-tap-highlight-color: rgba($black, 0); // 4
0057 }
0058
0059
0060 // Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
0061 // on elements that programmatically receive focus but wouldn't normally show a visible
0062 // focus outline. In general, this would mean that the outline is only applied if the
0063 // interaction that led to the element receiving programmatic focus was a keyboard interaction,
0064 // or the browser has somehow determined that the user is primarily a keyboard user and/or
0065 // wants focus outlines to always be presented.
0066 // See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
0067 // and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
0068
0069 [tabindex="-1"]:focus:not(:focus-visible) {
0070 outline: 0 !important;
0071 }
0072
0073
0074 // Content grouping
0075 //
0076 // 1. Reset Firefox's gray color
0077 // 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
0078
0079 hr {
0080 margin: $hr-margin-y 0;
0081 color: $hr-color; // 1
0082 background-color: currentColor;
0083 border: 0;
0084 opacity: $hr-opacity;
0085 }
0086
0087 hr:not([size]) {
0088 height: $hr-height; // 2
0089 }
0090
0091
0092 // Typography
0093 //
0094 // 1. Remove top margins from headings
0095 // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
0096 // margin for easier control within type scales as it avoids margin collapsing.
0097
0098 %heading {
0099 margin-top: 0; // 1
0100 margin-bottom: $headings-margin-bottom;
0101 font-family: $headings-font-family;
0102 font-style: $headings-font-style;
0103 font-weight: $headings-font-weight;
0104 line-height: $headings-line-height;
0105 color: $headings-color;
0106 }
0107
0108 h1 {
0109 @extend %heading;
0110 @include font-size($h1-font-size);
0111 }
0112
0113 h2 {
0114 @extend %heading;
0115 @include font-size($h2-font-size);
0116 }
0117
0118 h3 {
0119 @extend %heading;
0120 @include font-size($h3-font-size);
0121 }
0122
0123 h4 {
0124 @extend %heading;
0125 @include font-size($h4-font-size);
0126 }
0127
0128 h5 {
0129 @extend %heading;
0130 @include font-size($h5-font-size);
0131 }
0132
0133 h6 {
0134 @extend %heading;
0135 @include font-size($h6-font-size);
0136 }
0137
0138
0139 // Reset margins on paragraphs
0140 //
0141 // Similarly, the top margin on `<p>`s get reset. However, we also reset the
0142 // bottom margin to use `rem` units instead of `em`.
0143
0144 p {
0145 margin-top: 0;
0146 margin-bottom: $paragraph-margin-bottom;
0147 }
0148
0149
0150 // Abbreviations
0151 //
0152 // 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
0153 // 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
0154 // 3. Add explicit cursor to indicate changed behavior.
0155 // 4. Prevent the text-decoration to be skipped.
0156
0157 abbr[title],
0158 abbr[data-bs-original-title] { // 1
0159 text-decoration: underline; // 2
0160 text-decoration: underline dotted; // 2
0161 cursor: help; // 3
0162 text-decoration-skip-ink: none; // 4
0163 }
0164
0165
0166 // Address
0167
0168 address {
0169 margin-bottom: 1rem;
0170 font-style: normal;
0171 line-height: inherit;
0172 }
0173
0174
0175 // Lists
0176
0177 ol,
0178 ul {
0179 padding-left: 2rem;
0180 }
0181
0182 ol,
0183 ul,
0184 dl {
0185 margin-top: 0;
0186 margin-bottom: 1rem;
0187 }
0188
0189 ol ol,
0190 ul ul,
0191 ol ul,
0192 ul ol {
0193 margin-bottom: 0;
0194 }
0195
0196 dt {
0197 font-weight: $dt-font-weight;
0198 }
0199
0200 // 1. Undo browser default
0201
0202 dd {
0203 margin-bottom: .5rem;
0204 margin-left: 0; // 1
0205 }
0206
0207
0208 // Blockquote
0209
0210 blockquote {
0211 margin: 0 0 1rem;
0212 }
0213
0214
0215 // Strong
0216 //
0217 // Add the correct font weight in Chrome, Edge, and Safari
0218
0219 b,
0220 strong {
0221 font-weight: $font-weight-bolder;
0222 }
0223
0224
0225 // Small
0226 //
0227 // Add the correct font size in all browsers
0228
0229 small {
0230 @include font-size($small-font-size);
0231 }
0232
0233
0234 // Mark
0235
0236 mark {
0237 padding: $mark-padding;
0238 background-color: $mark-bg;
0239 }
0240
0241
0242 // Sub and Sup
0243 //
0244 // Prevent `sub` and `sup` elements from affecting the line height in
0245 // all browsers.
0246
0247 sub,
0248 sup {
0249 position: relative;
0250 @include font-size($sub-sup-font-size);
0251 line-height: 0;
0252 vertical-align: baseline;
0253 }
0254
0255 sub { bottom: -.25em; }
0256 sup { top: -.5em; }
0257
0258
0259 // Links
0260
0261 a {
0262 color: $link-color;
0263 text-decoration: $link-decoration;
0264
0265 &:hover {
0266 color: $link-hover-color;
0267 text-decoration: $link-hover-decoration;
0268 }
0269 }
0270
0271 // And undo these styles for placeholder links/named anchors (without href).
0272 // It would be more straightforward to just use a[href] in previous block, but that
0273 // causes specificity issues in many other styles that are too complex to fix.
0274 // See https://github.com/twbs/bootstrap/issues/19402
0275
0276 a:not([href]):not([class]) {
0277 &,
0278 &:hover {
0279 color: inherit;
0280 text-decoration: none;
0281 }
0282 }
0283
0284
0285 // Code
0286
0287 pre,
0288 code,
0289 kbd,
0290 samp {
0291 font-family: $font-family-code;
0292 @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
0293 direction: ltr #{"/* rtl:ignore */"};
0294 unicode-bidi: bidi-override;
0295 }
0296
0297 // 1. Remove browser default top margin
0298 // 2. Reset browser default of `1em` to use `rem`s
0299 // 3. Don't allow content to break outside
0300
0301 pre {
0302 display: block;
0303 margin-top: 0; // 1
0304 margin-bottom: 1rem; // 2
0305 overflow: auto; // 3
0306 @include font-size($code-font-size);
0307 color: $pre-color;
0308
0309 // Account for some code outputs that place code tags in pre tags
0310 code {
0311 @include font-size(inherit);
0312 color: inherit;
0313 word-break: normal;
0314 }
0315 }
0316
0317 code {
0318 @include font-size($code-font-size);
0319 color: $code-color;
0320 word-wrap: break-word;
0321
0322 // Streamline the style when inside anchors to avoid broken underline and more
0323 a > & {
0324 color: inherit;
0325 }
0326 }
0327
0328 kbd {
0329 padding: $kbd-padding-y $kbd-padding-x;
0330 @include font-size($kbd-font-size);
0331 color: $kbd-color;
0332 background-color: $kbd-bg;
0333 @include border-radius($border-radius-sm);
0334
0335 kbd {
0336 padding: 0;
0337 @include font-size(1em);
0338 font-weight: $nested-kbd-font-weight;
0339 }
0340 }
0341
0342
0343 // Figures
0344 //
0345 // Apply a consistent margin strategy (matches our type styles).
0346
0347 figure {
0348 margin: 0 0 1rem;
0349 }
0350
0351
0352 // Images and content
0353
0354 img,
0355 svg {
0356 vertical-align: middle;
0357 }
0358
0359
0360 // Tables
0361 //
0362 // Prevent double borders
0363
0364 table {
0365 caption-side: bottom;
0366 border-collapse: collapse;
0367 }
0368
0369 caption {
0370 padding-top: $table-cell-padding-y;
0371 padding-bottom: $table-cell-padding-y;
0372 color: $table-caption-color;
0373 text-align: left;
0374 }
0375
0376 // 1. Removes font-weight bold by inheriting
0377 // 2. Matches default `<td>` alignment by inheriting `text-align`.
0378 // 3. Fix alignment for Safari
0379
0380 th {
0381 font-weight: $table-th-font-weight; // 1
0382 text-align: inherit; // 2
0383 text-align: -webkit-match-parent; // 3
0384 }
0385
0386 thead,
0387 tbody,
0388 tfoot,
0389 tr,
0390 td,
0391 th {
0392 border-color: inherit;
0393 border-style: solid;
0394 border-width: 0;
0395 }
0396
0397
0398 // Forms
0399 //
0400 // 1. Allow labels to use `margin` for spacing.
0401
0402 label {
0403 display: inline-block; // 1
0404 }
0405
0406 // Remove the default `border-radius` that macOS Chrome adds.
0407 // See https://github.com/twbs/bootstrap/issues/24093
0408
0409 button {
0410 // stylelint-disable-next-line property-disallowed-list
0411 border-radius: 0;
0412 }
0413
0414 // Work around a Firefox bug where the transparent `button` background
0415 // results in a loss of the default `button` focus styles.
0416 // Credit https://github.com/suitcss/base/
0417
0418 button:focus {
0419 outline: dotted 1px;
0420 outline: -webkit-focus-ring-color auto 5px;
0421 }
0422
0423 // 1. Remove the margin in Firefox and Safari
0424
0425 input,
0426 button,
0427 select,
0428 optgroup,
0429 textarea {
0430 margin: 0; // 1
0431 font-family: inherit;
0432 @include font-size(inherit);
0433 line-height: inherit;
0434 }
0435
0436 // Remove the inheritance of text transform in Firefox
0437
0438 button,
0439 select {
0440 text-transform: none;
0441 }
0442
0443 // Set the cursor for non-`<button>` buttons
0444 //
0445 // Details at https://github.com/twbs/bootstrap/pull/30562
0446 [role="button"] {
0447 cursor: pointer;
0448 }
0449
0450 // Remove the inheritance of word-wrap in Safari.
0451 // See https://github.com/twbs/bootstrap/issues/24990
0452
0453 select {
0454 word-wrap: normal;
0455 }
0456
0457 // Remove the dropdown arrow in Chrome from inputs built with datalists.
0458 // See https://stackoverflow.com/a/54997118
0459
0460 [list]::-webkit-calendar-picker-indicator {
0461 display: none;
0462 }
0463
0464 // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
0465 // controls in Android 4.
0466 // 2. Correct the inability to style clickable types in iOS and Safari.
0467 // 3. Opinionated: add "hand" cursor to non-disabled button elements.
0468
0469 button,
0470 [type="button"], // 1
0471 [type="reset"],
0472 [type="submit"] {
0473 -webkit-appearance: button; // 2
0474
0475 @if $enable-button-pointers {
0476 &:not(:disabled) {
0477 cursor: pointer; // 3
0478 }
0479 }
0480 }
0481
0482 // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
0483
0484 ::-moz-focus-inner {
0485 padding: 0;
0486 border-style: none;
0487 }
0488
0489 // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
0490
0491 textarea {
0492 resize: vertical; // 1
0493 }
0494
0495 // 1. Browsers set a default `min-width: min-content;` on fieldsets,
0496 // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
0497 // So we reset that to ensure fieldsets behave more like a standard block element.
0498 // See https://github.com/twbs/bootstrap/issues/12359
0499 // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
0500 // 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
0501
0502 fieldset {
0503 min-width: 0; // 1
0504 padding: 0; // 2
0505 margin: 0; // 2
0506 border: 0; // 2
0507 }
0508
0509 // 1. By using `float: left`, the legend will behave like a block element.
0510 // This way the border of a fieldset wraps around the legend if present.
0511 // 2. Fix wrapping bug.
0512 // See https://github.com/twbs/bootstrap/issues/29712
0513
0514 legend {
0515 float: left; // 1
0516 width: 100%;
0517 padding: 0;
0518 margin-bottom: $legend-margin-bottom;
0519 @include font-size($legend-font-size);
0520 font-weight: $legend-font-weight;
0521 line-height: inherit;
0522
0523 + * {
0524 clear: left; // 2
0525 }
0526 }
0527
0528 // Fix height of inputs with a type of datetime-local, date, month, week, or time
0529 // See https://github.com/twbs/bootstrap/issues/18842
0530
0531 ::-webkit-datetime-edit-fields-wrapper,
0532 ::-webkit-datetime-edit-text,
0533 ::-webkit-datetime-edit-minute,
0534 ::-webkit-datetime-edit-hour-field,
0535 ::-webkit-datetime-edit-day-field,
0536 ::-webkit-datetime-edit-month-field,
0537 ::-webkit-datetime-edit-year-field {
0538 padding: 0;
0539 }
0540
0541 ::-webkit-inner-spin-button {
0542 height: auto;
0543 }
0544
0545 // 1. Correct the outline style in Safari.
0546 // 2. This overrides the extra rounded corners on search inputs in iOS so that our
0547 // `.form-control` class can properly style them. Note that this cannot simply
0548 // be added to `.form-control` as it's not specific enough. For details, see
0549 // https://github.com/twbs/bootstrap/issues/11586.
0550
0551 [type="search"] {
0552 outline-offset: -2px; // 1
0553 -webkit-appearance: textfield; // 2
0554 }
0555
0556 // 1. A few input types should stay LTR
0557 // See https://rtlstyling.com/posts/rtl-styling#form-inputs
0558 // 2. RTL only output
0559 // See https://rtlcss.com/learn/usage-guide/control-directives/#raw
0560
0561 /* rtl:raw:
0562 [type="tel"],
0563 [type="url"],
0564 [type="email"],
0565 [type="number"] {
0566 direction: ltr;
0567 }
0568 */
0569
0570 // Remove the inner padding in Chrome and Safari on macOS.
0571
0572 ::-webkit-search-decoration {
0573 -webkit-appearance: none;
0574 }
0575
0576 // Remove padding around color pickers in webkit browsers
0577
0578 ::-webkit-color-swatch-wrapper {
0579 padding: 0;
0580 }
0581
0582
0583 // Inherit font family and line height for file input buttons
0584
0585 // stylelint-disable-next-line selector-pseudo-element-no-unknown
0586 ::file-selector-button {
0587 font: inherit;
0588 }
0589
0590 // 1. Change font properties to `inherit`
0591 // 2. Correct the inability to style clickable types in iOS and Safari.
0592
0593 ::-webkit-file-upload-button {
0594 font: inherit; // 1
0595 -webkit-appearance: button; // 2
0596 }
0597
0598 // Correct element displays
0599
0600 output {
0601 display: inline-block;
0602 }
0603
0604 // Remove border from iframe
0605
0606 iframe {
0607 border: 0;
0608 }
0609
0610 // Summary
0611 //
0612 // 1. Add the correct display in all browsers
0613
0614 summary {
0615 display: list-item; // 1
0616 cursor: pointer;
0617 }
0618
0619
0620 // Progress
0621 //
0622 // Add the correct vertical alignment in Chrome, Firefox, and Opera.
0623
0624 progress {
0625 vertical-align: baseline;
0626 }
0627
0628
0629 // Hidden attribute
0630 //
0631 // Always hide an element with the `hidden` HTML attribute.
0632
0633 [hidden] {
0634 display: none !important;
0635 }