diff options
Diffstat (limited to 'scss')
47 files changed, 614 insertions, 300 deletions
diff --git a/scss/_accordion.scss b/scss/_accordion.scss index a68aaa70e..fc62ceb88 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -10,19 +10,17 @@ padding: $accordion-button-padding-y $accordion-button-padding-x; @include font-size($font-size-base); color: $accordion-button-color; + text-align: left; // Reset button style background-color: $accordion-button-bg; - border: $accordion-border-width solid $accordion-border-color; + border: 0; @include border-radius(0); overflow-anchor: none; @include transition($accordion-transition); - &.collapsed { - border-bottom-width: 0; - } - &:not(.collapsed) { color: $accordion-button-active-color; background-color: $accordion-button-active-bg; + box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color; &::after { background-image: escape-svg($accordion-button-active-icon); @@ -60,33 +58,37 @@ } .accordion-item { + background-color: $accordion-bg; + border: $accordion-border-width solid $accordion-border-color; + &:first-of-type { + @include border-top-radius($accordion-border-radius); + .accordion-button { - @include border-top-radius($accordion-border-radius); + @include border-top-radius($accordion-inner-border-radius); } } + &:not(:first-of-type) { + border-top: 0; + } + + // Only set a border-radius on the last item if the accordion is collapsed &:last-of-type { + @include border-bottom-radius($accordion-border-radius); + .accordion-button { - // Only set a border-radius on the last item if the accordion is collapsed &.collapsed { - border-bottom-width: $accordion-border-width; - @include border-bottom-radius($accordion-border-radius); + @include border-bottom-radius($accordion-inner-border-radius); } } .accordion-collapse { - border-bottom-width: $accordion-border-width; @include border-bottom-radius($accordion-border-radius); } } } -.accordion-collapse { - border: solid $accordion-border-color; - border-width: 0 $accordion-border-width; -} - .accordion-body { padding: $accordion-body-padding-y $accordion-body-padding-x; } @@ -97,29 +99,20 @@ // Remove borders and border-radius to keep accordion items edge-to-edge. .accordion-flush { - .accordion-button { - border-right: 0; - border-left: 0; - @include border-radius(0); - } - .accordion-collapse { border-width: 0; } .accordion-item { - &:first-of-type { - .accordion-button { - border-top-width: 0; - @include border-top-radius(0); - } - } + border-right: 0; + border-left: 0; + @include border-radius(0); - &:last-of-type { - .accordion-button.collapsed { - border-bottom-width: 0; - @include border-bottom-radius(0); - } + &:first-child { border-top: 0; } + &:last-child { border-bottom: 0; } + + .accordion-button { + @include border-radius(0); } } } diff --git a/scss/_alert.scss b/scss/_alert.scss index 3d9b69bcd..34f1e84ed 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -44,14 +44,14 @@ // Generate contextual modifier classes for colorizing the alert. @each $state, $value in $theme-colors { - $background: shift-color($value, $alert-bg-scale); - $border: shift-color($value, $alert-border-scale); - $color: shift-color($value, $alert-color-scale); - @if (contrast-ratio($background, $color) < $min-contrast-ratio) { - $color: mix($value, color-contrast($background), abs($alert-color-scale)); + $alert-background: shift-color($value, $alert-bg-scale); + $alert-border: shift-color($value, $alert-border-scale); + $alert-color: shift-color($value, $alert-color-scale); + @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) { + $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale)); } .alert-#{$state} { - @include alert-variant($background, $border, $color); + @include alert-variant($alert-background, $alert-border, $alert-color); } } // scss-docs-end alert-modifiers diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 8f28d0277..ee4287c92 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -55,6 +55,7 @@ // Alternate buttons // +// scss-docs-start btn-variant-loops @each $color, $value in $theme-colors { .btn-#{$color} { @include button-variant($value, $value); @@ -66,6 +67,7 @@ @include button-outline-variant($value); } } +// scss-docs-end btn-variant-loops // diff --git a/scss/_card.scss b/scss/_card.scss index 4b2eebf13..e3314219f 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -69,7 +69,7 @@ } + .card-link { - margin-left: $card-spacer-x #{"/* rtl:ignore */"}; + margin-left: $card-spacer-x; } } diff --git a/scss/_carousel.scss b/scss/_carousel.scss index d2e42bc10..d389c3042 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -98,8 +98,11 @@ align-items: center; // 2. vertically center contents justify-content: center; // 3. horizontally center contents width: $carousel-control-width; + padding: 0; color: $carousel-control-color; text-align: center; + background: none; + border: 0; opacity: $carousel-control-opacity; @include transition($carousel-control-transition); @@ -147,10 +150,10 @@ background-image: escape-svg($carousel-control-next-icon-bg); } -// Optional indicator pips +// Optional indicator pips/controls // -// Add an ordered list with the following class and add a list item for each -// slide your carousel holds. +// Add a container (such as a list) with the following class and add an item (ideally a focusable control, +// like a button) with data-bs-target for each slide your carousel holds. .carousel-indicators { position: absolute; @@ -160,23 +163,26 @@ z-index: 2; display: flex; justify-content: center; - padding-left: 0; // override <ol> default + padding: 0; // Use the .carousel-control's width as margin so we don't overlay those margin-right: $carousel-control-width; + margin-bottom: 1rem; margin-left: $carousel-control-width; list-style: none; - li { + [data-bs-target] { box-sizing: content-box; flex: 0 1 auto; width: $carousel-indicator-width; height: $carousel-indicator-height; + padding: 0; margin-right: $carousel-indicator-spacer; margin-left: $carousel-indicator-spacer; text-indent: -999px; cursor: pointer; background-color: $carousel-indicator-active-bg; background-clip: padding-box; + border: 0; // Use transparent borders to increase the hit area by 10px on top and bottom. border-top: $carousel-indicator-hit-area-height solid transparent; border-bottom: $carousel-indicator-hit-area-height solid transparent; @@ -213,7 +219,7 @@ filter: $carousel-dark-control-icon-filter; } - .carousel-indicators li { + .carousel-indicators [data-bs-target] { background-color: $carousel-dark-indicator-active-bg; } diff --git a/scss/_close.scss b/scss/_close.scss index db5d02787..32a0f68cc 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -22,7 +22,7 @@ } &:focus { - outline: none; + outline: 0; box-shadow: $btn-close-focus-shadow; opacity: $btn-close-focus-opacity; } diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 7cad64009..06e70f701 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -16,13 +16,11 @@ // The dropdown menu .dropdown-menu { position: absolute; - top: 100%; - left: 0; z-index: $zindex-dropdown; display: none; // none by default, but block on "open" of the menu min-width: $dropdown-min-width; padding: $dropdown-padding-y $dropdown-padding-x; - margin: $dropdown-spacer 0 0; // override default ul + margin: 0; // Override default margin of ul @include font-size($dropdown-font-size); color: $dropdown-color; text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) @@ -32,21 +30,38 @@ border: $dropdown-border-width solid $dropdown-border-color; @include border-radius($dropdown-border-radius); @include box-shadow($dropdown-box-shadow); + + &[data-bs-popper] { + top: 100%; + left: 0; + margin-top: $dropdown-spacer; + } } // scss-docs-start responsive-breakpoints +// We deliberately hardcode the `bs-` prefix because we check +// this custom property in JS to determine Popper's positioning + @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); .dropdown-menu#{$infix}-start { - right: auto #{"/* rtl:ignore */"}; - left: 0 #{"/* rtl:ignore */"}; + --bs-position: start; + + &[data-bs-popper] { + right: auto #{"/* rtl:ignore */"}; + left: 0 #{"/* rtl:ignore */"}; + } } .dropdown-menu#{$infix}-end { - right: 0 #{"/* rtl:ignore */"}; - left: auto #{"/* rtl:ignore */"}; + --bs-position: end; + + &[data-bs-popper] { + right: 0 #{"/* rtl:ignore */"}; + left: auto #{"/* rtl:ignore */"}; + } } } } @@ -55,7 +70,7 @@ // Allow for dropdowns to go bottom up (aka, dropup-menu) // Just add .dropup after the standard .dropdown class and you're set. .dropup { - .dropdown-menu { + .dropdown-menu[data-bs-popper] { top: auto; bottom: 100%; margin-top: 0; @@ -68,7 +83,7 @@ } .dropend { - .dropdown-menu { + .dropdown-menu[data-bs-popper] { top: 0; right: auto; left: 100%; @@ -85,7 +100,7 @@ } .dropstart { - .dropdown-menu { + .dropdown-menu[data-bs-popper] { top: 0; right: 100%; left: auto; @@ -101,19 +116,6 @@ } } -// When Popper is enabled, reset the basic dropdown position -// stylelint-disable-next-line no-duplicate-selectors -.dropdown-menu { - &[x-placement^="top"], - &[x-placement^="right"], - &[x-placement^="bottom"], - &[x-placement^="left"] { - right: auto; - bottom: auto; - left: auto; - } -} - // Dividers (basically an `<hr>`) within the dropdown .dropdown-divider { diff --git a/scss/_list-group.scss b/scss/_list-group.scss index a95adc181..7daa9f10d 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -12,6 +12,17 @@ @include border-radius($list-group-border-radius); } +.list-group-numbered { + list-style-type: none; + counter-reset: section; + + > li::before { + // Increments only this instance of the section counter + content: counters(section, ".") ". "; + counter-increment: section; + } +} + // Interactive list items // @@ -152,12 +163,12 @@ // Organizationally, this must come after the `:hover` states. @each $state, $value in $theme-colors { - $background: shift-color($value, $list-group-item-bg-scale); - $color: shift-color($value, $list-group-item-color-scale); - @if (contrast-ratio($background, $color) < $min-contrast-ratio) { - $color: mix($value, color-contrast($background), abs($alert-color-scale)); + $list-group-background: shift-color($value, $list-group-item-bg-scale); + $list-group-color: shift-color($value, $list-group-item-color-scale); + @if (contrast-ratio($list-group-background, $list-group-color) < $min-contrast-ratio) { + $list-group-color: mix($value, color-contrast($list-group-background), abs($list-group-item-color-scale)); } - @include list-group-item-variant($state, $background, $color); + @include list-group-item-variant($state, $list-group-background, $list-group-color); } // scss-docs-end list-group-modifiers diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 7b06cd819..eec085789 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -10,6 +10,7 @@ // Helpers @import "mixins/breakpoints"; +@import "mixins/color-scheme"; @import "mixins/image"; @import "mixins/resize"; @import "mixins/visually-hidden"; diff --git a/scss/_modal.scss b/scss/_modal.scss index 06ab5644d..513898644 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -159,15 +159,6 @@ } } -// Measure scrollbar width for padding body during modal show/hide -.modal-scrollbar-measure { - position: absolute; - top: -9999px; - width: 50px; - height: 50px; - overflow: scroll; -} - // Scale up the modal @include media-breakpoint-up(sm) { // Automatically set modal's width for larger viewports @@ -202,6 +193,7 @@ .modal-xl { max-width: $modal-xl; } } +// scss-docs-start modal-fullscreen-loop @each $breakpoint in map-keys($grid-breakpoints) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); $postfix: if($infix != "", $infix + "-down", ""); @@ -233,3 +225,4 @@ } } } +// scss-docs-end modal-fullscreen-loop diff --git a/scss/_nav.scss b/scss/_nav.scss index 30c2c819b..ffb27d869 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -43,12 +43,15 @@ .nav-link { margin-bottom: -$nav-tabs-border-width; + background: none; border: $nav-tabs-border-width solid transparent; @include border-top-radius($nav-tabs-border-radius); &:hover, &:focus { border-color: $nav-tabs-link-hover-border-color; + // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link + isolation: isolate; } &.disabled { @@ -80,6 +83,8 @@ .nav-pills { .nav-link { + background: none; + border: 0; @include border-radius($nav-pills-border-radius); } @@ -112,6 +117,13 @@ } } +.nav-fill, +.nav-justified { + .nav-item .nav-link { + width: 100%; // Make sure button will grow + } +} + // Tabbable tabs // diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 852328aca..2ccef11b7 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -109,10 +109,11 @@ // the default flexbox row orientation. Requires the use of `flex-wrap: wrap` // on the `.navbar` parent. .navbar-collapse { + flex-basis: 100%; + flex-grow: 1; // For always expanded or extra full navbars, ensure content aligns itself // properly vertically. Can be easily overridden with flex utilities. align-items: center; - width: 100%; } // Button for toggling the navbar when in its collapsed state @@ -148,6 +149,12 @@ background-size: 100%; } +.navbar-nav-scroll { + max-height: var(--#{$variable-prefix}scroll-height, 75vh); + overflow-y: auto; +} + +// scss-docs-start navbar-expand-loop // Generate series of `.navbar-expand-*` responsive classes for configuring // where your navbar collapses. .navbar-expand { @@ -174,8 +181,13 @@ } } + .navbar-nav-scroll { + overflow: visible; + } + .navbar-collapse { display: flex !important; // stylelint-disable-line declaration-no-important + flex-basis: auto; } .navbar-toggler { @@ -185,6 +197,7 @@ } } } +// scss-docs-end navbar-expand-loop // Navbar themes diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss new file mode 100644 index 000000000..f1d994564 --- /dev/null +++ b/scss/_offcanvas.scss @@ -0,0 +1,77 @@ +.offcanvas { + position: fixed; + bottom: 0; + z-index: $zindex-offcanvas; + display: flex; + flex-direction: column; + max-width: 100%; + color: $offcanvas-color; + visibility: hidden; + background-color: $offcanvas-bg-color; + background-clip: padding-box; + outline: 0; + @include box-shadow($offcanvas-box-shadow); + @include transition(transform $offcanvas-transition-duration ease-in-out); +} + +.offcanvas-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: $offcanvas-padding-y $offcanvas-padding-x; + + .btn-close { + padding: ($offcanvas-padding-y / 2) ($offcanvas-padding-x / 2); + margin: ($offcanvas-padding-y / -2) ($offcanvas-padding-x / -2) ($offcanvas-padding-y / -2) auto; + } +} + +.offcanvas-title { + margin-bottom: 0; + line-height: $offcanvas-title-line-height; +} + +.offcanvas-body { + flex-grow: 1; + padding: $offcanvas-padding-y $offcanvas-padding-x; + overflow-y: auto; +} + +.offcanvas-start { + top: 0; + left: 0; + width: $offcanvas-horizontal-width; + border-right: $offcanvas-border-width solid $offcanvas-border-color; + transform: translateX(-100%); +} + +.offcanvas-end { + top: 0; + right: 0; + width: $offcanvas-horizontal-width; + border-left: $offcanvas-border-width solid $offcanvas-border-color; + transform: translateX(100%); +} + +.offcanvas-top { + top: 0; + right: 0; + left: 0; + height: $offcanvas-vertical-height; + max-height: 100%; + border-bottom: $offcanvas-border-width solid $offcanvas-border-color; + transform: translateY(-100%); +} + +.offcanvas-bottom { + right: 0; + left: 0; + height: $offcanvas-vertical-height; + max-height: 100%; + border-top: $offcanvas-border-width solid $offcanvas-border-color; + transform: translateY(100%); +} + +.offcanvas.show { + transform: none; +} diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 04bf82536..9c466662e 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -56,9 +56,9 @@ @include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius); .pagination-lg { - @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $border-radius-lg); + @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg); } .pagination-sm { - @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $border-radius-sm); + @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm); } diff --git a/scss/_popover.scss b/scss/_popover.scss index 6688f729c..a55555e2e 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -22,7 +22,6 @@ display: block; width: $popover-arrow-width; height: $popover-arrow-height; - margin: 0 $popover-border-radius; &::before, &::after { @@ -36,8 +35,6 @@ } .bs-popover-top { - margin-bottom: $popover-arrow-height; - > .popover-arrow { bottom: subtract(-$popover-arrow-height, $popover-border-width); @@ -56,31 +53,26 @@ } .bs-popover-end { - margin-left: $popover-arrow-height #{"/* rtl:ignore */"}; - > .popover-arrow { - left: subtract(-$popover-arrow-height, $popover-border-width) #{"/* rtl:ignore */"}; + left: subtract(-$popover-arrow-height, $popover-border-width); width: $popover-arrow-height; height: $popover-arrow-width; - margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners &::before { - left: 0 #{"/* rtl:ignore */"}; - border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0 #{"/* rtl:ignore */"}; - border-right-color: $popover-arrow-outer-color #{"/* rtl:ignore */"}; + left: 0; + border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0; + border-right-color: $popover-arrow-outer-color; } &::after { - left: $popover-border-width #{"/* rtl:ignore */"}; - border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0 #{"/* rtl:ignore */"}; - border-right-color: $popover-arrow-color #{"/* rtl:ignore */"}; + left: $popover-border-width; + border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0; + border-right-color: $popover-arrow-color; } } } .bs-popover-bottom { - margin-top: $popover-arrow-height; - > .popover-arrow { top: subtract(-$popover-arrow-height, $popover-border-width); @@ -111,39 +103,36 @@ } .bs-popover-start { - margin-right: $popover-arrow-height #{"/* rtl:ignore */"}; - > .popover-arrow { - right: subtract(-$popover-arrow-height, $popover-border-width) #{"/* rtl:ignore */"}; + right: subtract(-$popover-arrow-height, $popover-border-width); width: $popover-arrow-height; height: $popover-arrow-width; - margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners &::before { - right: 0 #{"/* rtl:ignore */"}; - border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height #{"/* rtl:ignore */"}; - border-left-color: $popover-arrow-outer-color #{"/* rtl:ignore */"}; + right: 0; + border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height; + border-left-color: $popover-arrow-outer-color; } &::after { - right: $popover-border-width #{"/* rtl:ignore */"}; - border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height #{"/* rtl:ignore */"}; - border-left-color: $popover-arrow-color #{"/* rtl:ignore */"}; + right: $popover-border-width; + border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height; + border-left-color: $popover-arrow-color; } } } .bs-popover-auto { - &[x-placement^="top"] { + &[data-popper-placement^="top"] { @extend .bs-popover-top; } - &[x-placement^="right"] { + &[data-popper-placement^="right"] { @extend .bs-popover-end; } - &[x-placement^="bottom"] { + &[data-popper-placement^="bottom"] { @extend .bs-popover-bottom; } - &[x-placement^="left"] { + &[data-popper-placement^="left"] { @extend .bs-popover-start; } } diff --git a/scss/_progress.scss b/scss/_progress.scss index b48ffc4b8..5715ab00c 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -1,9 +1,12 @@ // Disable animation if transitions are disabled + +// scss-docs-start progress-keyframes @if $enable-transitions { @keyframes progress-bar-stripes { 0% { background-position-x: $progress-height; } } } +// scss-docs-end progress-keyframes .progress { display: flex; diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 50ba7431b..352046988 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -57,20 +57,6 @@ body { } -// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline -// on elements that programmatically receive focus but wouldn't normally show a visible -// focus outline. In general, this would mean that the outline is only applied if the -// interaction that led to the element receiving programmatic focus was a keyboard interaction, -// or the browser has somehow determined that the user is primarily a keyboard user and/or -// wants focus outlines to always be presented. -// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible -// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ - -[tabindex="-1"]:focus:not(:focus-visible) { - outline: 0 !important; -} - - // Content grouping // // 1. Reset Firefox's gray color @@ -156,7 +142,6 @@ p { abbr[title], abbr[data-bs-original-title] { // 1 - text-decoration: underline; // 2 text-decoration: underline dotted; // 2 cursor: help; // 3 text-decoration-skip-ink: none; // 4 @@ -411,13 +396,13 @@ button { border-radius: 0; } -// Work around a Firefox bug where the transparent `button` background -// results in a loss of the default `button` focus styles. -// Credit https://github.com/suitcss/base/ +// Explicitly remove focus outline in Chromium when it shouldn't be +// visible (e.g. as result of mouse click or touch tap). It already +// should be doing this automatically, but seems to currently be +// confused and applies its very visible two-tone outline anyway. -button:focus { - outline: dotted 1px; - outline: -webkit-focus-ring-color auto 5px; +button:focus:not(:focus-visible) { + outline: 0; } // 1. Remove the margin in Firefox and Safari @@ -434,12 +419,10 @@ textarea { } // Remove the inheritance of text transform in Firefox - button, select { text-transform: none; } - // Set the cursor for non-`<button>` buttons // // Details at https://github.com/twbs/bootstrap/pull/30562 @@ -447,11 +430,15 @@ select { cursor: pointer; } -// Remove the inheritance of word-wrap in Safari. -// See https://github.com/twbs/bootstrap/issues/24990 - select { + // Remove the inheritance of word-wrap in Safari. + // See https://github.com/twbs/bootstrap/issues/24990 word-wrap: normal; + + // Undo the opacity change from Chrome + &:disabled { + opacity: 1; + } } // Remove the dropdown arrow in Chrome from inputs built with datalists. @@ -582,7 +569,6 @@ legend { // Inherit font family and line height for file input buttons -// stylelint-disable-next-line selector-pseudo-element-no-unknown ::file-selector-button { font: inherit; } diff --git a/scss/_spinners.scss b/scss/_spinners.scss index 7444ed1d1..a4a2c77cf 100644 --- a/scss/_spinners.scss +++ b/scss/_spinners.scss @@ -2,15 +2,17 @@ // Rotating border // +// scss-docs-start spinner-border-keyframes @keyframes spinner-border { to { transform: rotate(360deg) #{"/* rtl:ignore */"}; } } +// scss-docs-end spinner-border-keyframes .spinner-border { display: inline-block; width: $spinner-width; height: $spinner-height; - vertical-align: text-bottom; + vertical-align: $spinner-vertical-align; border: $spinner-border-width solid currentColor; border-right-color: transparent; // stylelint-disable-next-line property-disallowed-list @@ -28,6 +30,7 @@ // Growing circle // +// scss-docs-start spinner-grow-keyframes @keyframes spinner-grow { 0% { transform: scale(0); @@ -37,12 +40,13 @@ transform: none; } } +// scss-docs-end spinner-grow-keyframes .spinner-grow { display: inline-block; width: $spinner-width; height: $spinner-height; - vertical-align: text-bottom; + vertical-align: $spinner-vertical-align; background-color: currentColor; // stylelint-disable-next-line property-disallowed-list border-radius: 50%; diff --git a/scss/_tables.scss b/scss/_tables.scss index 506c60be0..50368293a 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -25,8 +25,8 @@ > :not(caption) > * > * { padding: $table-cell-padding-y $table-cell-padding-x; background-color: var(--#{$variable-prefix}table-bg); - background-image: linear-gradient(var(--#{$variable-prefix}table-accent-bg), var(--#{$variable-prefix}table-accent-bg)); border-bottom-width: $table-border-width; + box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg); } > tbody { diff --git a/scss/_toasts.scss b/scss/_toasts.scss index e2b98e600..5c533d7f5 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -1,29 +1,31 @@ .toast { - max-width: $toast-max-width; + width: $toast-max-width; + max-width: 100%; @include font-size($toast-font-size); color: $toast-color; + pointer-events: auto; background-color: $toast-background-color; background-clip: padding-box; border: $toast-border-width solid $toast-border-color; box-shadow: $toast-box-shadow; - opacity: 0; @include border-radius($toast-border-radius); - &:not(:last-child) { - margin-bottom: $toast-padding-x; + &:not(.showing):not(.show) { + opacity: 0; } - &.showing { - opacity: 1; + &.hide { + display: none; } +} - &.show { - display: block; - opacity: 1; - } +.toast-container { + width: max-content; + max-width: 100%; + pointer-events: none; - &.hide { - display: none; + > :not(:last-child) { + margin-bottom: $toast-spacing; } } @@ -45,4 +47,5 @@ .toast-body { padding: $toast-padding-x; // apply to both vertical and horizontal + word-wrap: break-word; } diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index a98ff4db5..2993bf7de 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -36,7 +36,7 @@ bottom: 0; &::before { - top: 0; + top: -1px; border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; border-top-color: $tooltip-arrow-color; } @@ -47,14 +47,14 @@ padding: 0 $tooltip-arrow-height; .tooltip-arrow { - left: 0 #{"/* rtl:ignore */"}; + left: 0; width: $tooltip-arrow-height; height: $tooltip-arrow-width; &::before { - right: 0 #{"/* rtl:ignore */"}; - border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0 #{"/* rtl:ignore */"}; - border-right-color: $tooltip-arrow-color #{"/* rtl:ignore */"}; + right: -1px; + border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; + border-right-color: $tooltip-arrow-color; } } } @@ -66,7 +66,7 @@ top: 0; &::before { - bottom: 0; + bottom: -1px; border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; border-bottom-color: $tooltip-arrow-color; } @@ -77,29 +77,29 @@ padding: 0 $tooltip-arrow-height; .tooltip-arrow { - right: 0 #{"/* rtl:ignore */"}; + right: 0; width: $tooltip-arrow-height; height: $tooltip-arrow-width; &::before { - left: 0 #{"/* rtl:ignore */"}; - border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height #{"/* rtl:ignore */"}; - border-left-color: $tooltip-arrow-color #{"/* rtl:ignore */"}; + left: -1px; + border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; + border-left-color: $tooltip-arrow-color; } } } .bs-tooltip-auto { - &[x-placement^="top"] { + &[data-popper-placement^="top"] { @extend .bs-tooltip-top; } - &[x-placement^="right"] { + &[data-popper-placement^="right"] { @extend .bs-tooltip-end; } - &[x-placement^="bottom"] { + &[data-popper-placement^="bottom"] { @extend .bs-tooltip-bottom; } - &[x-placement^="left"] { + &[data-popper-placement^="left"] { @extend .bs-tooltip-start; } } diff --git a/scss/_transitions.scss b/scss/_transitions.scss index 3d1db3e9d..2905df45c 100644 --- a/scss/_transitions.scss +++ b/scss/_transitions.scss @@ -6,6 +6,7 @@ } } +// scss-docs-start collapse-classes .collapse { &:not(.show) { display: none; @@ -17,3 +18,4 @@ overflow: hidden; @include transition($transition-collapse); } +// scss-docs-end collapse-classes diff --git a/scss/_utilities.scss b/scss/_utilities.scss index dacd8b289..3c927cf59 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -1,14 +1,19 @@ +// stylelint-disable indentation + // Utilities $utilities: () !default; // stylelint-disable-next-line scss/dollar-variable-default $utilities: map-merge( ( + // scss-docs-start utils-vertical-align "align": ( property: vertical-align, class: align, values: baseline top middle bottom text-bottom text-top ), + // scss-docs-end utils-vertical-align + // scss-docs-start utils-float "float": ( responsive: true, property: float, @@ -18,10 +23,14 @@ $utilities: map-merge( none: none, ) ), + // scss-docs-end utils-float + // scss-docs-start utils-overflow "overflow": ( property: overflow, values: auto hidden visible scroll, ), + // scss-docs-end utils-overflow + // scss-docs-start utils-display "display": ( responsive: true, print: true, @@ -29,6 +38,8 @@ $utilities: map-merge( class: d, values: inline inline-block block grid table table-row table-cell flex inline-flex none ), + // scss-docs-end utils-display + // scss-docs-start utils-shadow "shadow": ( property: box-shadow, class: shadow, @@ -39,6 +50,8 @@ $utilities: map-merge( none: none, ) ), + // scss-docs-end utils-shadow + // scss-docs-start utils-position "position": ( property: position, values: static relative absolute fixed sticky @@ -65,9 +78,13 @@ $utilities: map-merge( property: transform, class: translate-middle, values: ( - null: (translateX(-50%) translateY(-50%)) + null: translate(-50%, -50%), + x: translateX(-50%), + y: translateY(-50%), ) ), + // scss-docs-end utils-position + // scss-docs-start utils-borders "border": ( property: border, values: ( @@ -115,7 +132,9 @@ $utilities: map-merge( class: border, values: $border-widths ), + // scss-docs-end utils-borders // Sizing utilities + // scss-docs-start utils-sizing "width": ( property: width, class: w, @@ -168,7 +187,9 @@ $utilities: map-merge( class: min-vh, values: (100: 100vh) ), + // scss-docs-end utils-sizing // Flex utilities + // scss-docs-start utils-flex "flex": ( responsive: true, property: flex, @@ -271,7 +292,9 @@ $utilities: map-merge( last: 6, ), ), + // scss-docs-end utils-flex // Margin utilities + // scss-docs-start utils-spacing "margin": ( responsive: true, property: margin, @@ -400,7 +423,14 @@ $utilities: map-merge( class: ps, values: $spacers ), + // scss-docs-end utils-spacing // Text + // scss-docs-start utils-text + "font-family": ( + property: font-family, + class: font, + values: (monospace: var(--#{$variable-prefix}font-monospace)) + ), "font-size": ( rfs: true, property: font-size, @@ -423,10 +453,15 @@ $utilities: map-merge( bolder: $font-weight-bolder ) ), - "text-transform": ( - property: text-transform, - class: text, - values: lowercase uppercase capitalize + "line-height": ( + property: line-height, + class: lh, + values: ( + 1: 1, + sm: $line-height-sm, + base: $line-height-base, + lg: $line-height-lg, + ) ), "text-align": ( responsive: true, @@ -438,6 +473,31 @@ $utilities: map-merge( center: center, ) ), + "text-decoration": ( + property: text-decoration, + values: none underline line-through + ), + "text-transform": ( + property: text-transform, + class: text, + values: lowercase uppercase capitalize + ), + "white-space": ( + property: white-space, + class: text, + values: ( + wrap: normal, + nowrap: nowrap, + ) + ), + "word-wrap": ( + property: word-wrap word-break, + class: text, + values: (break: break-word), + rtl: false + ), + // scss-docs-end utils-text + // scss-docs-start utils-color "color": ( property: color, class: text, @@ -453,16 +513,8 @@ $utilities: map-merge( ) ) ), - "line-height": ( - property: line-height, - class: lh, - values: ( - 1: 1, - sm: $line-height-sm, - base: $line-height-base, - lg: $line-height-lg, - ) - ), + // scss-docs-end utils-color + // scss-docs-start utils-bg-color "background-color": ( property: background-color, class: bg, @@ -475,34 +527,13 @@ $utilities: map-merge( ) ) ), + // scss-docs-end utils-bg-color "gradient": ( property: background-image, class: bg, values: (gradient: var(--#{$variable-prefix}gradient)) ), - "white-space": ( - property: white-space, - class: text, - values: ( - wrap: normal, - nowrap: nowrap, - ) - ), - "text-decoration": ( - property: text-decoration, - values: none underline line-through - ), - "word-wrap": ( - property: word-wrap word-break, - class: text, - values: (break: break-word), - rtl: false - ), - "font-family": ( - property: font-family, - class: font, - values: (monospace: var(--#{$variable-prefix}font-monospace)) - ), + // scss-docs-start utils-interaction "user-select": ( property: user-select, values: all auto none @@ -512,6 +543,8 @@ $utilities: map-merge( class: pe, values: none auto, ), + // scss-docs-end utils-interaction + // scss-docs-start utils-border-radius "rounded": ( property: border-radius, class: rounded, @@ -545,6 +578,8 @@ $utilities: map-merge( class: rounded-start, values: (null: $border-radius) ), + // scss-docs-end utils-border-radius + // scss-docs-start utils-visibility "visibility": ( property: visibility, class: null, @@ -553,6 +588,7 @@ $utilities: map-merge( invisible: hidden, ) ) + // scss-docs-end utils-visibility ), $utilities ); diff --git a/scss/_variables.scss b/scss/_variables.scss index b97e520d7..1e17606f4 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -5,6 +5,7 @@ // Color system +// scss-docs-start gray-color-variables $white: #fff !default; $gray-100: #f8f9fa !default; $gray-200: #e9ecef !default; @@ -16,8 +17,10 @@ $gray-700: #495057 !default; $gray-800: #343a40 !default; $gray-900: #212529 !default; $black: #000 !default; +// scss-docs-end gray-color-variables // fusv-disable +// scss-docs-start gray-colors-map $grays: ( "100": $gray-100, "200": $gray-200, @@ -29,8 +32,10 @@ $grays: ( "800": $gray-800, "900": $gray-900 ) !default; +// scss-docs-end gray-colors-map // fusv-enable +// scss-docs-start color-variables $blue: #0d6efd !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; @@ -41,6 +46,7 @@ $yellow: #ffc107 !default; $green: #198754 !default; $teal: #20c997 !default; $cyan: #0dcaf0 !default; +// scss-docs-end color-variables // scss-docs-start colors-map $colors: ( @@ -60,6 +66,7 @@ $colors: ( ) !default; // scss-docs-end colors-map +// scss-docs-start theme-color-variables $primary: $blue !default; $secondary: $gray-600 !default; $success: $green !default; @@ -68,6 +75,7 @@ $warning: $yellow !default; $danger: $red !default; $light: $gray-100 !default; $dark: $gray-900 !default; +// scss-docs-end theme-color-variables // scss-docs-start theme-colors-map $theme-colors: ( @@ -228,7 +236,9 @@ $variable-prefix: bs- !default; // // The gradient which is added to components if `$enable-gradients` is `true` // This gradient is also added to elements with `.bg-gradient` +// scss-docs-start variable-gradient $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default; +// scss-docs-end variable-gradient // Spacing // @@ -236,6 +246,7 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default; // variables. Mostly focused on spacing. // You can add more entries to the $spacers map, should you need more variation. +// scss-docs-start spacer-variables-maps $spacer: 1rem !default; $spacers: ( 0: 0, @@ -247,17 +258,19 @@ $spacers: ( ) !default; $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; +// scss-docs-end spacer-variables-maps // Position // // Define the edge positioning anchors of the position utilities. +// scss-docs-start position-map $position-values: ( 0: 0, 50: 50%, 100: 100% ) !default; - +// scss-docs-end position-map // Body // @@ -344,9 +357,9 @@ $container-padding-x: $grid-gutter-width / 2 !default; // // Define common padding and border radius sizes and more. +// scss-docs-start border-variables $border-width: 1px !default; $border-widths: ( - 0: 0, 1: 1px, 2: 2px, 3: 3px, @@ -355,27 +368,36 @@ $border-widths: ( ) !default; $border-color: $gray-300 !default; +// scss-docs-end border-variables +// scss-docs-start border-radius-variables $border-radius: .25rem !default; $border-radius-sm: .2rem !default; $border-radius-lg: .3rem !default; $border-radius-pill: 50rem !default; +// scss-docs-end border-radius-variables +// scss-docs-start box-shadow-variables $box-shadow: 0 .5rem 1rem rgba($black, .15) !default; $box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default; $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; $box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default; +// scss-docs-end box-shadow-variables $component-active-color: $white !default; $component-active-bg: $primary !default; +// scss-docs-start caret-variables $caret-width: .3em !default; $caret-vertical-align: $caret-width * .85 !default; $caret-spacing: $caret-width * .85 !default; +// scss-docs-end caret-variables $transition-base: all .2s ease-in-out !default; $transition-fade: opacity .15s linear !default; +// scss-docs-start collapse-transition $transition-collapse: height .35s ease !default; +// scss-docs-end collapse-transition // stylelint-disable function-disallowed-list // scss-docs-start aspect-ratios @@ -392,6 +414,7 @@ $aspect-ratios: ( // // Font, line-height, and color for body text, headings, and more. +// scss-docs-start font-variables // stylelint-disable value-keyword-case $font-family-sans-serif: system-ui, -apple-system, "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; @@ -424,6 +447,7 @@ $h3-font-size: $font-size-base * 1.75 !default; $h4-font-size: $font-size-base * 1.5 !default; $h5-font-size: $font-size-base * 1.25 !default; $h6-font-size: $font-size-base !default; +// scss-docs-end font-variables // scss-docs-start font-sizes $font-sizes: ( @@ -436,12 +460,14 @@ $font-sizes: ( ) !default; // scss-docs-end font-sizes +// scss-docs-start headings-variables $headings-margin-bottom: $spacer / 2 !default; $headings-font-family: null !default; $headings-font-style: null !default; $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; $headings-color: null !default; +// scss-docs-end headings-variables // scss-docs-start display-headings $display-font-sizes: ( @@ -457,6 +483,7 @@ $display-font-weight: 300 !default; $display-line-height: $headings-line-height !default; // scss-docs-end display-headings +// scss-docs-start type-variables $lead-font-size: $font-size-base * 1.25 !default; $lead-font-weight: 300 !default; @@ -491,6 +518,7 @@ $nested-kbd-font-weight: $font-weight-bold !default; $list-inline-padding: .5rem !default; $mark-bg: #fcf8e3 !default; +// scss-docs-end type-variables // Tables @@ -533,7 +561,9 @@ $table-group-separator-color: currentColor !default; $table-caption-color: $text-muted !default; $table-bg-scale: -80% !default; +// scss-docs-end table-variables +// scss-docs-start table-loop $table-variants: ( "primary": shift-color($primary, $table-bg-scale), "secondary": shift-color($secondary, $table-bg-scale), @@ -544,13 +574,14 @@ $table-variants: ( "light": $light, "dark": $dark, ) !default; -// scss-docs-end table-variables +// scss-docs-end table-loop // Buttons + Forms // // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. +// scss-docs-start input-btn-variables $input-btn-padding-y: .375rem !default; $input-btn-padding-x: .75rem !default; $input-btn-font-family: null !default; @@ -560,7 +591,8 @@ $input-btn-line-height: $line-height-base !default; $input-btn-focus-width: .25rem !default; $input-btn-focus-color-opacity: .25 !default; $input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default; -$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; +$input-btn-focus-blur: 0 !default; +$input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default; $input-btn-padding-y-sm: .25rem !default; $input-btn-padding-x-sm: .5rem !default; @@ -571,12 +603,14 @@ $input-btn-padding-x-lg: 1rem !default; $input-btn-font-size-lg: $font-size-lg !default; $input-btn-border-width: $border-width !default; +// scss-docs-end input-btn-variables // Buttons // // For each of Bootstrap's buttons, define text, background, and border color. +// scss-docs-start btn-variables $btn-padding-y: $input-btn-padding-y !default; $btn-padding-x: $input-btn-padding-x !default; $btn-font-family: $input-btn-font-family !default; @@ -612,21 +646,36 @@ $btn-border-radius-lg: $border-radius-lg !default; $btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +$btn-hover-bg-shade-amount: 15% !default; +$btn-hover-bg-tint-amount: 15% !default; +$btn-hover-border-shade-amount: 20% !default; +$btn-hover-border-tint-amount: 10% !default; +$btn-active-bg-shade-amount: 20% !default; +$btn-active-bg-tint-amount: 20% !default; +$btn-active-border-shade-amount: 25% !default; +$btn-active-border-tint-amount: 10% !default; +// scss-docs-end btn-variables + // Forms +// scss-docs-start form-text-variables $form-text-margin-top: .25rem !default; $form-text-font-size: $small-font-size !default; $form-text-font-style: null !default; $form-text-font-weight: null !default; $form-text-color: $text-muted !default; +// scss-docs-end form-text-variables +// scss-docs-start form-label-variables $form-label-margin-bottom: .5rem !default; $form-label-font-size: null !default; $form-label-font-style: null !default; $form-label-font-weight: null !default; $form-label-color: null !default; +// scss-docs-end form-label-variables +// scss-docs-start form-input-variables $input-padding-y: $input-btn-padding-y !default; $input-padding-x: $input-btn-padding-x !default; $input-font-family: $input-btn-font-family !default; @@ -675,20 +724,21 @@ $input-height-sm: add($input-line-height * 1em, add($input $input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default; $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +// scss-docs-end form-input-variables - +// scss-docs-start form-check-variables $form-check-input-width: 1em !default; $form-check-min-height: $font-size-base * $line-height-base !default; $form-check-padding-start: $form-check-input-width + .5em !default; $form-check-margin-bottom: .125rem !default; $form-check-label-color: null !default; $form-check-label-cursor: null !default; -$form-check-transition: background-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +$form-check-transition: null !default; $form-check-input-active-filter: brightness(90%) !default; -$form-check-input-bg: $body-bg !default; -$form-check-input-border: 1px solid rgba(0, 0, 0, .25) !default; +$form-check-input-bg: $input-bg !default; +$form-check-input-border: 1px solid rgba($black, .25) !default; $form-check-input-border-radius: .25em !default; $form-check-radio-border-radius: 50% !default; $form-check-input-focus-border: $input-focus-border-color !default; @@ -709,11 +759,16 @@ $form-check-input-disabled-opacity: .5 !default; $form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default; $form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default; +$form-check-inline-margin-end: 1rem !default; +// scss-docs-end form-check-variables + +// scss-docs-start form-switch-variables $form-switch-color: rgba(0, 0, 0, .25) !default; $form-switch-width: 2em !default; $form-switch-padding-start: $form-switch-width + .5em !default; $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default; $form-switch-border-radius: $form-switch-width !default; +$form-switch-transition: background-position .15s ease-in-out !default; $form-switch-focus-color: $input-focus-border-color !default; $form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default; @@ -721,26 +776,28 @@ $form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www $form-switch-checked-color: $component-active-color !default; $form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default; $form-switch-checked-bg-position: right center !default; +// scss-docs-end form-switch-variables -$form-check-inline-margin-end: 1rem !default; - +// scss-docs-start input-group-variables $input-group-addon-padding-y: $input-padding-y !default; $input-group-addon-padding-x: $input-padding-x !default; $input-group-addon-font-weight: $input-font-weight !default; $input-group-addon-color: $input-color !default; $input-group-addon-bg: $gray-200 !default; $input-group-addon-border-color: $input-border-color !default; +// scss-docs-end input-group-variables +// scss-docs-start form-select-variables $form-select-padding-y: $input-padding-y !default; $form-select-padding-x: $input-padding-x !default; $form-select-font-family: $input-font-family !default; $form-select-font-size: $input-font-size !default; -$form-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator +$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image $form-select-font-weight: $input-font-weight !default; $form-select-line-height: $input-line-height !default; $form-select-color: $input-color !default; -$form-select-disabled-color: $gray-600 !default; $form-select-bg: $input-bg !default; +$form-select-disabled-color: null !default; $form-select-disabled-bg: $gray-200 !default; $form-select-disabled-border-color: $input-disabled-border-color !default; $form-select-bg-position: right $form-select-padding-x center !default; @@ -748,8 +805,8 @@ $form-select-bg-size: 16px 12px !default; // In pixels because ima $form-select-indicator-color: $gray-800 !default; $form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default; -$form-select-feedback-icon-padding-end: add(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding) !default; -$form-select-feedback-icon-position: center right ($form-select-padding-x + $form-select-indicator-padding) !default; +$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default; +$form-select-feedback-icon-position: center right $form-select-indicator-padding !default; $form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default; $form-select-border-width: $input-border-width !default; @@ -768,7 +825,9 @@ $form-select-font-size-sm: $input-font-size-sm !default; $form-select-padding-y-lg: $input-padding-y-lg !default; $form-select-padding-x-lg: $input-padding-x-lg !default; $form-select-font-size-lg: $input-font-size-lg !default; +// scss-docs-end form-select-variables +// scss-docs-start form-range-variables $form-range-track-width: 100% !default; $form-range-track-height: .5rem !default; $form-range-track-cursor: pointer !default; @@ -787,11 +846,15 @@ $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For f $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default; $form-range-thumb-disabled-bg: $gray-500 !default; $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +// scss-docs-end form-range-variables +// scss-docs-start form-file-variables $form-file-button-color: $input-color !default; $form-file-button-bg: $input-group-addon-bg !default; $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default; +// scss-docs-end form-file-variables +// scss-docs-start form-floating-variables $form-floating-height: add(3.5rem, $input-height-border) !default; $form-floating-padding-x: $input-padding-x !default; $form-floating-padding-y: 1rem !default; @@ -800,9 +863,11 @@ $form-floating-input-padding-b: .625rem !default; $form-floating-label-opacity: .65 !default; $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default; $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default; +// scss-docs-end form-floating-variables // Form validation +// scss-docs-start form-feedback-variables $form-feedback-margin-top: $form-text-margin-top !default; $form-feedback-font-size: $form-text-font-size !default; $form-feedback-font-style: $form-text-font-style !default; @@ -813,6 +878,7 @@ $form-feedback-icon-valid-color: $form-feedback-valid-color !default; $form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default; $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; $form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default; +// scss-docs-end form-feedback-variables // scss-docs-start form-validation-states $form-validation-states: ( @@ -837,20 +903,22 @@ $zindex-dropdown: 1000 !default; $zindex-sticky: 1020 !default; $zindex-fixed: 1030 !default; $zindex-modal-backdrop: 1040 !default; -$zindex-modal: 1050 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; +$zindex-offcanvas: 1050 !default; +$zindex-modal: 1060 !default; +$zindex-popover: 1070 !default; +$zindex-tooltip: 1080 !default; // scss-docs-end zindex-stack // Navs +// scss-docs-start nav-variables $nav-link-padding-y: .5rem !default; $nav-link-padding-x: 1rem !default; $nav-link-font-size: null !default; $nav-link-font-weight: null !default; -$nav-link-color: null !default; -$nav-link-hover-color: null !default; +$nav-link-color: $link-color !default; +$nav-link-hover-color: $link-hover-color !default; $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default; $nav-link-disabled-color: $gray-600 !default; @@ -865,10 +933,12 @@ $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg $nav-pills-border-radius: $border-radius !default; $nav-pills-link-active-color: $component-active-color !default; $nav-pills-link-active-bg: $component-active-bg !default; +// scss-docs-end nav-variables // Navbar +// scss-docs-start navbar-variables $navbar-padding-y: $spacer / 2 !default; $navbar-padding-x: null !default; @@ -887,7 +957,9 @@ $navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-border-radius: $btn-border-radius !default; $navbar-toggler-focus-width: $btn-focus-width !default; $navbar-toggler-transition: box-shadow .15s ease-in-out !default; +// scss-docs-end navbar-variables +// scss-docs-start navbar-theme-variables $navbar-dark-color: rgba($white, .55) !default; $navbar-dark-hover-color: rgba($white, .75) !default; $navbar-dark-active-color: $white !default; @@ -906,12 +978,14 @@ $navbar-light-brand-color: $navbar-light-active-color !default; $navbar-light-brand-hover-color: $navbar-light-active-color !default; $navbar-dark-brand-color: $navbar-dark-active-color !default; $navbar-dark-brand-hover-color: $navbar-dark-active-color !default; +// scss-docs-end navbar-theme-variables // Dropdowns // // Dropdown menu container and contents. +// scss-docs-start dropdown-variables $dropdown-min-width: 10rem !default; $dropdown-padding-x: 0 !default; $dropdown-padding-y: .5rem !default; @@ -929,19 +1003,21 @@ $dropdown-box-shadow: $box-shadow !default; $dropdown-link-color: $gray-900 !default; $dropdown-link-hover-color: shade-color($gray-900, 10%) !default; -$dropdown-link-hover-bg: $gray-100 !default; +$dropdown-link-hover-bg: $gray-200 !default; $dropdown-link-active-color: $component-active-color !default; $dropdown-link-active-bg: $component-active-bg !default; -$dropdown-link-disabled-color: $gray-600 !default; +$dropdown-link-disabled-color: $gray-500 !default; $dropdown-item-padding-y: $spacer / 4 !default; $dropdown-item-padding-x: $spacer !default; $dropdown-header-color: $gray-600 !default; $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default; +// scss-docs-end dropdown-variables +// scss-docs-start dropdown-dark-variables $dropdown-dark-color: $gray-300 !default; $dropdown-dark-bg: $gray-800 !default; $dropdown-dark-border-color: $dropdown-border-color !default; @@ -954,10 +1030,12 @@ $dropdown-dark-link-active-color: $dropdown-link-active-color !default; $dropdown-dark-link-active-bg: $dropdown-link-active-bg !default; $dropdown-dark-link-disabled-color: $gray-500 !default; $dropdown-dark-header-color: $gray-500 !default; +// scss-docs-end dropdown-dark-variables // Pagination +// scss-docs-start pagination-variables $pagination-padding-y: .375rem !default; $pagination-padding-x: .75rem !default; $pagination-padding-y-sm: .25rem !default; @@ -991,8 +1069,14 @@ $pagination-disabled-border-color: $gray-300 !default; $pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +$pagination-border-radius-sm: $border-radius-sm !default; +$pagination-border-radius-lg: $border-radius-lg !default; +// scss-docs-end pagination-variables + + // Cards +// scss-docs-start card-variables $card-spacer-y: $spacer !default; $card-spacer-x: $spacer !default; $card-title-spacer-y: $spacer / 2 !default; @@ -1007,19 +1091,21 @@ $card-cap-color: null !default; $card-height: null !default; $card-color: null !default; $card-bg: $white !default; - $card-img-overlay-padding: $spacer !default; - $card-group-margin: $grid-gutter-width / 2 !default; +// scss-docs-end card-variables // Accordion + +// scss-docs-start accordion-variables $accordion-padding-y: 1rem !default; $accordion-padding-x: 1.25rem !default; $accordion-color: $body-color !default; -$accordion-bg: transparent !default; +$accordion-bg: $body-bg !default; $accordion-border-width: $border-width !default; $accordion-border-color: rgba($black, .125) !default; $accordion-border-radius: $border-radius !default; +$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default; $accordion-body-padding-y: $accordion-padding-y !default; $accordion-body-padding-x: $accordion-padding-x !default; @@ -1039,13 +1125,15 @@ $accordion-icon-width: 1.25rem !default; $accordion-icon-color: $accordion-color !default; $accordion-icon-active-color: $accordion-button-active-color !default; $accordion-icon-transition: transform .2s ease-in-out !default; -$accordion-icon-transform: rotate(180deg) !default; +$accordion-icon-transform: rotate(-180deg) !default; $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default; $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default; +// scss-docs-end accordion-variables // Tooltips +// scss-docs-start tooltip-variables $tooltip-font-size: $font-size-sm !default; $tooltip-max-width: 200px !default; $tooltip-color: $white !default; @@ -1059,18 +1147,22 @@ $tooltip-margin: 0 !default; $tooltip-arrow-width: .8rem !default; $tooltip-arrow-height: .4rem !default; $tooltip-arrow-color: $tooltip-bg !default; +// scss-docs-end tooltip-variables // Form tooltips must come after regular tooltips +// scss-docs-start tooltip-feedback-variables $form-feedback-tooltip-padding-y: $tooltip-padding-y !default; $form-feedback-tooltip-padding-x: $tooltip-padding-x !default; $form-feedback-tooltip-font-size: $tooltip-font-size !default; $form-feedback-tooltip-line-height: null !default; $form-feedback-tooltip-opacity: $tooltip-opacity !default; $form-feedback-tooltip-border-radius: $tooltip-border-radius !default; +// scss-docs-start tooltip-feedback-variables // Popovers +// scss-docs-start popover-variables $popover-font-size: $font-size-sm !default; $popover-bg: $white !default; $popover-max-width: 276px !default; @@ -1094,10 +1186,12 @@ $popover-arrow-height: .5rem !default; $popover-arrow-color: $popover-bg !default; $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; +// scss-docs-end popover-variables // Toasts +// scss-docs-start toast-variables $toast-max-width: 350px !default; $toast-padding-x: .75rem !default; $toast-padding-y: .5rem !default; @@ -1108,28 +1202,31 @@ $toast-border-width: 1px !default; $toast-border-color: rgba(0, 0, 0, .1) !default; $toast-border-radius: $border-radius !default; $toast-box-shadow: $box-shadow !default; +$toast-spacing: $container-padding-x !default; $toast-header-color: $gray-600 !default; $toast-header-background-color: rgba($white, .85) !default; $toast-header-border-color: rgba(0, 0, 0, .05) !default; +// scss-docs-end toast-variables // Badges +// scss-docs-start badge-variables $badge-font-size: .75em !default; $badge-font-weight: $font-weight-bold !default; $badge-color: $white !default; $badge-padding-y: .35em !default; $badge-padding-x: .65em !default; $badge-border-radius: $border-radius !default; +// scss-docs-end badge-variables // Modals -// Padding applied to the modal body +// scss-docs-start modal-variables $modal-inner-padding: $spacer !default; -// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding $modal-footer-margin-between: .5rem !default; $modal-dialog-margin: .5rem !default; @@ -1165,28 +1262,30 @@ $modal-fade-transform: translate(0, -50px) !default; $modal-show-transform: none !default; $modal-transition: transform .3s ease-out !default; $modal-scale-transform: scale(1.02) !default; +// scss-docs-end modal-variables // Alerts // // Define alert colors, border radius, and padding. -$alert-padding-y: $spacer !default; -$alert-padding-x: $spacer !default; -$alert-margin-bottom: 1rem !default; -$alert-border-radius: $border-radius !default; -$alert-link-font-weight: $font-weight-bold !default; -$alert-border-width: $border-width !default; - -$alert-bg-scale: -80% !default; -$alert-border-scale: -70% !default; -$alert-color-scale: 40% !default; - -$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side +// scss-docs-start alert-variables +$alert-padding-y: $spacer !default; +$alert-padding-x: $spacer !default; +$alert-margin-bottom: 1rem !default; +$alert-border-radius: $border-radius !default; +$alert-link-font-weight: $font-weight-bold !default; +$alert-border-width: $border-width !default; +$alert-bg-scale: -80% !default; +$alert-border-scale: -70% !default; +$alert-color-scale: 40% !default; +$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side +// scss-docs-end alert-variables // Progress bars +// scss-docs-start progress-variables $progress-height: 1rem !default; $progress-font-size: $font-size-base * .75 !default; $progress-bg: $gray-200 !default; @@ -1196,11 +1295,13 @@ $progress-bar-color: $white !default; $progress-bar-bg: $primary !default; $progress-bar-animation-timing: 1s linear infinite !default; $progress-bar-transition: width .6s ease !default; +// scss-docs-end progress-variables // List group -$list-group-color: null !default; +// scss-docs-start list-group-variables +$list-group-color: $gray-900 !default; $list-group-bg: $white !default; $list-group-border-color: rgba($black, .125) !default; $list-group-border-width: $border-width !default; @@ -1224,26 +1325,32 @@ $list-group-action-hover-color: $list-group-action-color !default; $list-group-action-active-color: $body-color !default; $list-group-action-active-bg: $gray-200 !default; +// scss-docs-end list-group-variables // Image thumbnails +// scss-docs-start thumbnail-variables $thumbnail-padding: .25rem !default; $thumbnail-bg: $body-bg !default; $thumbnail-border-width: $border-width !default; $thumbnail-border-color: $gray-300 !default; $thumbnail-border-radius: $border-radius !default; $thumbnail-box-shadow: $box-shadow-sm !default; +// scss-docs-end thumbnail-variables // Figures +// scss-docs-start figure-variables $figure-caption-font-size: $small-font-size !default; $figure-caption-color: $gray-600 !default; +// scss-docs-end figure-variables // Breadcrumbs +// scss-docs-start breadcrumb-variables $breadcrumb-font-size: null !default; $breadcrumb-padding-y: 0 !default; $breadcrumb-padding-x: 0 !default; @@ -1255,9 +1362,11 @@ $breadcrumb-active-color: $gray-600 !default; $breadcrumb-divider: quote("/") !default; $breadcrumb-divider-flipped: $breadcrumb-divider !default; $breadcrumb-border-radius: null !default; +// scss-docs-end breadcrumb-variables // Carousel +// scss-docs-start carousel-variables $carousel-control-color: $white !default; $carousel-control-width: 15% !default; $carousel-control-opacity: .5 !default; @@ -1289,22 +1398,27 @@ $carousel-transition: transform $carousel-transition-duration eas $carousel-dark-indicator-active-bg: $black !default; $carousel-dark-caption-color: $black !default; $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; +// scss-docs-end carousel-variables // Spinners +// scss-docs-start spinner-variables $spinner-width: 2rem !default; $spinner-height: $spinner-width !default; +$spinner-vertical-align: -.125em !default; $spinner-border-width: .25em !default; $spinner-animation-speed: .75s !default; $spinner-width-sm: 1rem !default; $spinner-height-sm: $spinner-width-sm !default; $spinner-border-width-sm: .2em !default; +// scss-docs-end spinner-variables // Close +// scss-docs-start close-variables $btn-close-width: 1em !default; $btn-close-height: $btn-close-width !default; $btn-close-padding-x: .25em !default; @@ -1317,6 +1431,24 @@ $btn-close-hover-opacity: .75 !default; $btn-close-focus-opacity: 1 !default; $btn-close-disabled-opacity: .25 !default; $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; +// scss-docs-end close-variables + + +// Offcanvas + +// scss-docs-start offcanvas-variables +$offcanvas-padding-y: $modal-inner-padding !default; +$offcanvas-padding-x: $modal-inner-padding !default; +$offcanvas-horizontal-width: 400px !default; +$offcanvas-vertical-height: 30vh !default; +$offcanvas-transition-duration: .3s !default; +$offcanvas-border-color: $modal-content-border-color !default; +$offcanvas-border-width: $modal-content-border-width !default; +$offcanvas-title-line-height: $modal-title-line-height !default; +$offcanvas-bg-color: $modal-content-bg !default; +$offcanvas-color: $modal-content-color !default; +$offcanvas-box-shadow: $modal-content-box-shadow-xs !default; +// scss-docs-end offcanvas-variables // Code diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index 1c836bf2f..8116a0ff7 100644 --- a/scss/bootstrap-grid.scss +++ b/scss/bootstrap-grid.scss @@ -1,7 +1,7 @@ /*! - * Bootstrap Grid v5.0.0-alpha3 (https://getbootstrap.com/) - * Copyright 2011-2020 The Bootstrap Authors - * Copyright 2011-2020 Twitter, Inc. + * Bootstrap Grid v5.0.0-beta3 (https://getbootstrap.com/) + * Copyright 2011-2021 The Bootstrap Authors + * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ diff --git a/scss/bootstrap-reboot.scss b/scss/bootstrap-reboot.scss index c99c02e2e..3eff8820a 100644 --- a/scss/bootstrap-reboot.scss +++ b/scss/bootstrap-reboot.scss @@ -1,7 +1,7 @@ /*! - * Bootstrap Reboot v5.0.0-alpha3 (https://getbootstrap.com/) - * Copyright 2011-2020 The Bootstrap Authors - * Copyright 2011-2020 Twitter, Inc. + * Bootstrap Reboot v5.0.0-beta3 (https://getbootstrap.com/) + * Copyright 2011-2021 The Bootstrap Authors + * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) */ diff --git a/scss/bootstrap-utilities.scss b/scss/bootstrap-utilities.scss index 9ae168427..9331d8097 100644 --- a/scss/bootstrap-utilities.scss +++ b/scss/bootstrap-utilities.scss @@ -1,18 +1,18 @@ /*! - * Bootstrap Utilities v5.0.0-alpha3 (https://getbootstrap.com/) - * Copyright 2011-2020 The Bootstrap Authors - * Copyright 2011-2020 Twitter, Inc. + * Bootstrap Utilities v5.0.0-beta3 (https://getbootstrap.com/) + * Copyright 2011-2021 The Bootstrap Authors + * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ // Configuration - @import "functions"; @import "variables"; @import "mixins"; @import "utilities"; +// Helpers +@import "helpers"; // Utilities - @import "utilities/api"; diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index 24d3ac4d5..1a975a3db 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -1,7 +1,7 @@ /*! - * Bootstrap v5.0.0-alpha3 (https://getbootstrap.com/) - * Copyright 2011-2020 The Bootstrap Authors - * Copyright 2011-2020 Twitter, Inc. + * Bootstrap v5.0.0-beta3 (https://getbootstrap.com/) + * Copyright 2011-2021 The Bootstrap Authors + * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ @@ -42,6 +42,7 @@ @import "popover"; @import "carousel"; @import "spinners"; +@import "offcanvas"; // Helpers @import "helpers"; diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 1d6d87363..b34250a71 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -113,6 +113,7 @@ background-image: escape-svg($form-switch-bg-image); background-position: left center; @include border-radius($form-switch-border-radius); + @include transition($form-switch-transition); &:focus { background-image: escape-svg($form-switch-focus-bg-image); diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index bac416f8c..5e43aea99 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -25,7 +25,7 @@ &[type="file"] { overflow: hidden; // prevent pseudo element button overlap - &:not(:disabled):not([readonly]) { + &:not(:disabled):not(:read-only) { cursor: pointer; } } @@ -65,7 +65,7 @@ // disabled if the fieldset is disabled. Due to implementation difficulty, we // don't honor that edge case; we style them as disabled anyway. &:disabled, - &[readonly] { + &:read-only { background-color: $input-disabled-bg; border-color: $input-disabled-border-color; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. @@ -73,7 +73,6 @@ } // File input buttons theming - // stylelint-disable-next-line selector-pseudo-element-no-unknown &::file-selector-button { padding: $input-padding-y $input-padding-x; margin: (-$input-padding-y) (-$input-padding-x); @@ -89,8 +88,7 @@ @include transition($btn-transition); } - // stylelint-disable-next-line selector-pseudo-element-no-unknown - &:hover:not(:disabled):not([readonly])::file-selector-button { + &:hover:not(:disabled):not(:read-only)::file-selector-button { background-color: $form-file-button-hover-bg; } @@ -109,7 +107,7 @@ @include transition($btn-transition); } - &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { + &:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button { background-color: $form-file-button-hover-bg; } } @@ -150,7 +148,6 @@ @include font-size($input-font-size-sm); @include border-radius($input-border-radius-sm); - // stylelint-disable-next-line selector-pseudo-element-no-unknown &::file-selector-button { padding: $input-padding-y-sm $input-padding-x-sm; margin: (-$input-padding-y-sm) (-$input-padding-x-sm); @@ -170,7 +167,6 @@ @include font-size($input-font-size-lg); @include border-radius($input-border-radius-lg); - // stylelint-disable-next-line selector-pseudo-element-no-unknown &::file-selector-button { padding: $input-padding-y-lg $input-padding-x-lg; margin: (-$input-padding-y-lg) (-$input-padding-x-lg); @@ -207,7 +203,7 @@ textarea { height: auto; // Override fixed browser height padding: $input-padding-y; - &:not(:disabled):not([readonly]) { + &:not(:disabled):not(:read-only) { cursor: pointer; } diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss index b603a7bc3..ae1d841d5 100644 --- a/scss/forms/_form-range.scss +++ b/scss/forms/_form-range.scss @@ -12,7 +12,7 @@ appearance: none; &:focus { - outline: none; + outline: 0; // Pseudo-elements must be split across multiple rulesets to have an effect. // No box-shadow() mixin for focus accessibility. diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss index 1866da964..15d5061ad 100644 --- a/scss/forms/_form-select.scss +++ b/scss/forms/_form-select.scss @@ -6,13 +6,12 @@ .form-select { display: block; width: 100%; - padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x; + padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x; font-family: $form-select-font-family; @include font-size($form-select-font-size); font-weight: $form-select-font-weight; line-height: $form-select-line-height; color: $form-select-color; - vertical-align: middle; background-color: $form-select-bg; background-image: escape-svg($form-select-indicator); background-repeat: no-repeat; diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss index acd68f2ed..c48123a71 100644 --- a/scss/forms/_validation.scss +++ b/scss/forms/_validation.scss @@ -7,6 +7,6 @@ // scss-docs-start form-validation-states-loop @each $state, $data in $form-validation-states { - @include form-validation-state($state, map-get($data, color), map-get($data, icon)); + @include form-validation-state($state, $data...); } // scss-docs-end form-validation-states-loop diff --git a/scss/helpers/_ratio.scss b/scss/helpers/_ratio.scss index 3c0ff330a..2390ee339 100644 --- a/scss/helpers/_ratio.scss +++ b/scss/helpers/_ratio.scss @@ -6,7 +6,7 @@ &::before { display: block; - padding-top: var(--aspect-ratio); + padding-top: var(--#{$variable-prefix}aspect-ratio); content: ""; } @@ -21,6 +21,6 @@ @each $key, $ratio in $aspect-ratios { .ratio-#{$key} { - --aspect-ratio: #{$ratio}; + --#{$variable-prefix}aspect-ratio: #{$ratio}; } } diff --git a/scss/helpers/_visually-hidden.scss b/scss/helpers/_visually-hidden.scss index 0a843d383..4760ff03d 100644 --- a/scss/helpers/_visually-hidden.scss +++ b/scss/helpers/_visually-hidden.scss @@ -3,6 +3,6 @@ // .visually-hidden, -.visually-hidden-focusable:not(:focus) { +.visually-hidden-focusable:not(:focus):not(:focus-within) { @include visually-hidden(); } diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss index 99ebbc305..f3eb59511 100644 --- a/scss/mixins/_alert.scss +++ b/scss/mixins/_alert.scss @@ -1,3 +1,4 @@ +// scss-docs-start alert-variant-mixin @mixin alert-variant($background, $border, $color) { color: $color; @include gradient-bg($background); @@ -7,3 +8,4 @@ color: shade-color($color, 20%); } } +// scss-docs-end alert-variant-mixin diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss index 819b8abd4..616decbce 100644 --- a/scss/mixins/_border-radius.scss +++ b/scss/mixins/_border-radius.scss @@ -14,6 +14,7 @@ @return $return; } +// scss-docs-start border-radius-mixins @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { @if $enable-rounded { border-radius: valid-radius($radius); @@ -74,3 +75,4 @@ border-bottom-left-radius: valid-radius($radius); } } +// scss-docs-end border-radius-mixins diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 3aabd896c..c06fa4a98 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -3,15 +3,16 @@ // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons +// scss-docs-start btn-variant-mixin @mixin button-variant( $background, $border, $color: color-contrast($background), - $hover-background: if($color == $color-contrast-light, shade-color($background, 15%), tint-color($background, 15%)), - $hover-border: if($color == $color-contrast-light, shade-color($border, 20%), tint-color($border, 10%)), + $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)), + $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)), $hover-color: color-contrast($hover-background), - $active-background: if($color == $color-contrast-light, shade-color($background, 20%), tint-color($background, 20%)), - $active-border: if($color == $color-contrast-light, shade-color($border, 25%), tint-color($border, 10%)), + $active-background: if($color == $color-contrast-light, shade-color($background,$btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)), + $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)), $active-color: color-contrast($active-background), $disabled-background: $background, $disabled-border: $border, @@ -71,7 +72,9 @@ border-color: $disabled-border; } } +// scss-docs-end btn-variant-mixin +// scss-docs-start btn-outline-variant-mixin @mixin button-outline-variant( $color, $color-hover: color-contrast($color), @@ -118,11 +121,13 @@ background-color: transparent; } } +// scss-docs-end btn-outline-variant-mixin -// Button sizes +// scss-docs-start btn-size-mixin @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { padding: $padding-y $padding-x; @include font-size($font-size); // Manually declare to provide an override to the browser default @include border-radius($border-radius, 0); } +// scss-docs-end btn-size-mixin diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss index fc1066914..4b0f0360b 100644 --- a/scss/mixins/_caret.scss +++ b/scss/mixins/_caret.scss @@ -1,3 +1,4 @@ +// scss-docs-start caret-mixins @mixin caret-down { border-top: $caret-width solid; border-right: $caret-width solid transparent; @@ -60,3 +61,4 @@ } } } +// scss-docs-end caret-mixins diff --git a/scss/mixins/_color-scheme.scss b/scss/mixins/_color-scheme.scss new file mode 100644 index 000000000..90497aa0a --- /dev/null +++ b/scss/mixins/_color-scheme.scss @@ -0,0 +1,7 @@ +// scss-docs-start mixin-color-scheme +@mixin color-scheme($name) { + @media (prefers-color-scheme: #{$name}) { + @content; + } +} +// scss-docs-end mixin-color-scheme diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 5e4cfd488..283462fd5 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -1,5 +1,7 @@ // This mixin uses an `if()` technique to be compatible with Dart Sass // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details + +// scss-docs-start form-validation-mixins @mixin form-validation-state-selector($state) { @if ($state == "valid" or $state == "invalid") { .was-validated #{if(&, "&", "")}:#{$state}, @@ -13,7 +15,14 @@ } } -@mixin form-validation-state($state, $color, $icon) { +@mixin form-validation-state( + $state, + $color, + $icon, + $tooltip-color: color-contrast($color), + $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity), + $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity) +) { .#{$state}-feedback { display: none; width: 100%; @@ -33,8 +42,8 @@ margin-top: .1rem; @include font-size($form-feedback-tooltip-font-size); line-height: $form-feedback-tooltip-line-height; - color: color-contrast($color); - background-color: rgba($color, $form-feedback-tooltip-opacity); + color: $tooltip-color; + background-color: $tooltip-bg-color; @include border-radius($form-feedback-tooltip-border-radius); } @@ -59,7 +68,7 @@ &:focus { border-color: $color; - box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity); + box-shadow: $focus-box-shadow; } } } @@ -79,15 +88,18 @@ border-color: $color; @if $enable-validation-icons { - padding-right: $form-select-feedback-icon-padding-end; - background-image: escape-svg($form-select-indicator), escape-svg($icon); - background-position: $form-select-bg-position, $form-select-feedback-icon-position; - background-size: $form-select-bg-size, $form-select-feedback-icon-size; + &:not([multiple]):not([size]), + &:not([multiple])[size="1"] { + padding-right: $form-select-feedback-icon-padding-end; + background-image: escape-svg($form-select-indicator), escape-svg($icon); + background-position: $form-select-bg-position, $form-select-feedback-icon-position; + background-size: $form-select-bg-size, $form-select-feedback-icon-size; + } } &:focus { border-color: $color; - box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: $focus-box-shadow; } } } @@ -101,7 +113,7 @@ } &:focus { - box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: $focus-box-shadow; } ~ .form-check-label { @@ -114,4 +126,12 @@ margin-left: .5em; } } + + .input-group .form-control, + .input-group .form-select { + @include form-validation-state-selector($state) { + z-index: 3; + } + } } +// scss-docs-end form-validation-mixins diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss index ec38ca141..44167d1b8 100644 --- a/scss/mixins/_gradients.scss +++ b/scss/mixins/_gradients.scss @@ -1,5 +1,6 @@ // Gradients +// scss-docs-start gradient-bg-mixin @mixin gradient-bg($color: null) { background-color: $color; @@ -7,7 +8,9 @@ background-image: var(--#{$variable-prefix}gradient); } } +// scss-docs-end gradient-bg-mixin +// scss-docs-start gradient-mixins // Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. @@ -41,3 +44,4 @@ @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) { background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); } +// scss-docs-end gradient-mixins diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 92bb88ad4..d757eac74 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -26,9 +26,14 @@ margin-top: var(--#{$variable-prefix}gutter-y); } -@mixin make-col($size, $columns: $grid-columns) { - flex: 0 0 auto; - width: percentage($size / $columns); +@mixin make-col($size: false, $columns: $grid-columns) { + @if $size { + flex: 0 0 auto; + width: percentage($size / $columns); + } @else { + flex: 1 1 0; + max-width: 100%; + } } @mixin make-col-auto() { diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss index 351e9109e..e55415f2b 100644 --- a/scss/mixins/_list-group.scss +++ b/scss/mixins/_list-group.scss @@ -1,5 +1,6 @@ // List Groups +// scss-docs-start list-group-mixin @mixin list-group-item-variant($state, $background, $color) { .list-group-item-#{$state} { color: $color; @@ -20,3 +21,4 @@ } } } +// scss-docs-end list-group-mixin diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss index 9cb7fd8bc..3101b380d 100644 --- a/scss/mixins/_pagination.scss +++ b/scss/mixins/_pagination.scss @@ -1,5 +1,6 @@ // Pagination +// scss-docs-start pagination-mixin @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) { .page-link { padding: $padding-y $padding-x; @@ -27,3 +28,4 @@ } } } +// scss-docs-end pagination-mixin diff --git a/scss/mixins/_visually-hidden.scss b/scss/mixins/_visually-hidden.scss index d980696c8..ed7bc9c13 100644 --- a/scss/mixins/_visually-hidden.scss +++ b/scss/mixins/_visually-hidden.scss @@ -17,12 +17,13 @@ border: 0 !important; } -// Use to only display content when it's focused. +// Use to only display content when it's focused, or one of its child elements is focused +// (i.e. when focus is within the element/container that the class was applied to) // // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 @mixin visually-hidden-focusable() { - &:not(:focus) { + &:not(:focus):not(:focus-within) { @include visually-hidden(); } } diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss index f1545b951..62e1d398e 100644 --- a/scss/utilities/_api.scss +++ b/scss/utilities/_api.scss @@ -26,7 +26,7 @@ @each $key, $utility in $utilities { // The utility can be disabled with `false`, thus check if the utility is a map first // Only proceed if responsive media queries are enabled or if it's the base media query - @if type-of($utility) == "map" and map-get($utility, rfs) { + @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") { @include generate-utility($utility, $infix, true); } } |