vertical-align: baseline;
@include border-radius($badge-border-radius);
@include transition($badge-transition);
-/*
+
@at-root a#{&} {
@include hover-focus() {
text-decoration: none;
}
}
-*/
+
// Empty badges collapse automatically
&:empty {
display: none;
}
.breadcrumb-item {
- display: flex;
-
// The separator between breadcrumbs (by default, a forward-slash: "/")
+ .breadcrumb-item {
padding-left: $breadcrumb-item-padding;
&::before {
- display: inline-block; // Suppress underlining of the separator in modern browsers
+ float: left; // Suppress inline spacings and underlining of the separator
padding-right: $breadcrumb-item-padding;
color: $breadcrumb-divider-color;
content: escape-svg($breadcrumb-divider);
display: inline-block;
width: $carousel-control-icon-width;
height: $carousel-control-icon-width;
- background: no-repeat 50% / 100% 100%;
+ background: 50% / 100% 100% no-repeat;
}
.carousel-control-prev-icon {
background-image: escape-svg($carousel-control-prev-icon-bg);
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
content: "";
- background: no-repeat 50% / #{$custom-control-indicator-bg-size};
+ background: 50% / #{$custom-control-indicator-bg-size} no-repeat;
}
}
width: 100%;
height: $custom-file-height;
margin: 0;
+ overflow: hidden;
opacity: 0;
&:focus ~ .custom-file-label {
z-index: 1;
height: $custom-file-height;
padding: $custom-file-padding-y $custom-file-padding-x;
+ overflow: hidden;
font-family: $custom-file-font-family;
font-weight: $custom-file-font-weight;
line-height: $custom-file-line-height;
}
}
-// When enabled Popper.js, reset basic dropdown position
+// When Popper is enabled, reset the basic dropdown position
// stylelint-disable-next-line no-duplicate-selectors
.dropdown-menu {
&[x-placement^="top"],
> .form-control,
> .custom-select {
- &:not(:last-child) { @include border-right-radius(0); }
&:not(:first-child) { @include border-left-radius(0); }
}
align-items: center;
&:not(:last-child) .custom-file-label,
- &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
&:not(:first-child) .custom-file-label { @include border-left-radius(0); }
}
+
+ &:not(.has-validation) {
+ > .form-control:not(:last-child),
+ > .custom-select:not(:last-child),
+ > .custom-file:not(:last-child) .custom-file-label::after {
+ @include border-right-radius(0);
+ }
+ }
+
+ &.has-validation {
+ > .form-control:nth-last-child(n + 3),
+ > .custom-select:nth-last-child(n + 3),
+ > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
+ @include border-right-radius(0);
+ }
+ }
}
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
-.input-group > .input-group-append:not(:last-child) > .btn,
-.input-group > .input-group-append:not(:last-child) > .input-group-text,
+.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
+.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
+.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
+.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
@include border-right-radius(0);
height: 1.5em;
vertical-align: middle;
content: "";
- background: no-repeat center center;
- background-size: 100% 100%;
+ background: 50% / 100% 100% no-repeat;
}
// Generate series of `.navbar-expand-*` responsive classes for configuring
@if $enable-transitions {
.progress-bar-animated {
- animation: progress-bar-stripes $progress-bar-animation-timing;
+ animation: $progress-bar-animation-timing progress-bar-stripes;
@if $enable-prefers-reduced-motion-media-query {
@media (prefers-reduced-motion: reduce) {
-// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
// Reboot
//
//
// Credit: https://github.com/suitcss/base/
button:focus {
- outline: 1px dotted;
- outline: 5px auto -webkit-focus-ring-color;
+ outline: dotted 1px;
+ outline: -webkit-focus-ring-color auto 5px;
}
input,
-// Do not forget to update getting-started/theming.md!
:root {
// Custom variable values only support SassScript inside `#{}`.
@each $color, $value in $colors {
border-right-color: transparent;
// stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
- animation: spinner-border .75s linear infinite;
+ animation: .75s linear infinite spinner-border;
}
.spinner-border-sm {
// stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
opacity: 0;
- animation: spinner-grow .75s linear infinite;
+ animation: .75s linear infinite spinner-grow;
}
.spinner-grow-sm {
width: $spinner-width-sm;
height: $spinner-height-sm;
}
+
+@if $enable-prefers-reduced-motion-media-query {
+ @media (prefers-reduced-motion: reduce) {
+ .spinner-border,
+ .spinner-grow {
+ animation-duration: 1.5s;
+ }
+ }
+}
-// stylelint-disable declaration-no-important, selector-list-comma-newline-after
+// stylelint-disable selector-list-comma-newline-after
//
// Headings
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
// Color system
-@import "functions";
-
$white: #fff !default;
$gray-100: #f8f9fa !default;
// Font, line-height, and color for body text, headings, and more.
// stylelint-disable value-keyword-case
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
// stylelint-enable value-keyword-case
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
$custom-select-indicator-color: $gray-800 !default;
$custom-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
-$custom-select-background: escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+$custom-select-background: escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
@import "functions";
@import "variables";
+@import "mixins/deprecate";
@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
-/*
-Caller should import variables (which in turn includes functions..)
+
@import "functions";
@import "variables";
-*/
@import "mixins";
@import "root";
@import "reboot";
color: color-yiq($bg);
background-color: $bg;
- /* @at-root a#{&} { */
- &[href] {
+ @at-root a#{&} {
@include hover-focus() {
color: color-yiq($bg);
background-color: darken($bg, 10%);
color: color-yiq($color);
background-color: rgba($color, $form-feedback-tooltip-opacity);
@include border-radius($form-feedback-tooltip-border-radius);
+
+ // See https://github.com/twbs/bootstrap/pull/31557
+ // Align tooltip to form elements
+ .form-row > .col > &,
+ .form-row > [class*="col-"] > & {
+ left: $form-grid-gutter-width / 2;
+ }
}
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
padding-right: $custom-select-feedback-icon-padding-right;
- background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
+ background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
}
&:focus {
// Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
// but doesn't convert dppx=>dpi.
// There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
- // Compatibility info: https://caniuse.com/#feat=css-media-resolution
+ // Compatibility info: https://caniuse.com/css-media-resolution
@media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
only screen and (min-resolution: 2dppx) { // Standardized
background-image: url($file-2x);