diff options
author | Gleb Mazovetskiy <glex.spb@gmail.com> | 2021-04-25 12:29:36 +0300 |
---|---|---|
committer | Gleb Mazovetskiy <glex.spb@gmail.com> | 2021-04-25 12:29:36 +0300 |
commit | a949bd815df77e48fda2da77b1ecf861a9f71487 (patch) | |
tree | f82476281af2782040fdb9851961368dfbd5a934 /assets/stylesheets | |
parent | 07bc4774a9725caf12d276ddd3aafbbd393cf576 (diff) |
Update to v5.0.0-beta3
* `rake 'update[v5.0.0-beta3]'`
* Update version in README.md and version.rb
Diffstat (limited to 'assets/stylesheets')
27 files changed, 378 insertions, 137 deletions
diff --git a/assets/stylesheets/_bootstrap-grid.scss b/assets/stylesheets/_bootstrap-grid.scss index d21c149..4c664af 100644 --- a/assets/stylesheets/_bootstrap-grid.scss +++ b/assets/stylesheets/_bootstrap-grid.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap Grid v5.0.0-beta2 (https://getbootstrap.com/) + * 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/assets/stylesheets/_bootstrap-reboot.scss b/assets/stylesheets/_bootstrap-reboot.scss index a57e6e4..1a0b421 100644 --- a/assets/stylesheets/_bootstrap-reboot.scss +++ b/assets/stylesheets/_bootstrap-reboot.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap Reboot v5.0.0-beta2 (https://getbootstrap.com/) + * 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) diff --git a/assets/stylesheets/_bootstrap.scss b/assets/stylesheets/_bootstrap.scss index 2b21774..e6154d9 100644 --- a/assets/stylesheets/_bootstrap.scss +++ b/assets/stylesheets/_bootstrap.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap v5.0.0-beta2 (https://getbootstrap.com/) + * 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 "bootstrap/popover"; @import "bootstrap/carousel"; @import "bootstrap/spinners"; +@import "bootstrap/offcanvas"; // Helpers @import "bootstrap/helpers"; diff --git a/assets/stylesheets/bootstrap/_accordion.scss b/assets/stylesheets/bootstrap/_accordion.scss index 298a553..ae1ca0f 100644 --- a/assets/stylesheets/bootstrap/_accordion.scss +++ b/assets/stylesheets/bootstrap/_accordion.scss @@ -12,18 +12,15 @@ 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); @@ -61,33 +58,35 @@ } .accordion-item { + margin-bottom: -$accordion-border-width; + 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); } } + // Only set a border-radius on the last item if the accordion is collapsed &:last-of-type { + margin-bottom: 0; + @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; } @@ -98,29 +97,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/assets/stylesheets/bootstrap/_buttons.scss b/assets/stylesheets/bootstrap/_buttons.scss index 8f28d02..ee4287c 100644 --- a/assets/stylesheets/bootstrap/_buttons.scss +++ b/assets/stylesheets/bootstrap/_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/assets/stylesheets/bootstrap/_card.scss b/assets/stylesheets/bootstrap/_card.scss index 4b2eebf..e331421 100644 --- a/assets/stylesheets/bootstrap/_card.scss +++ b/assets/stylesheets/bootstrap/_card.scss @@ -69,7 +69,7 @@ } + .card-link { - margin-left: $card-spacer-x #{"/* rtl:ignore */"}; + margin-left: $card-spacer-x; } } diff --git a/assets/stylesheets/bootstrap/_dropdown.scss b/assets/stylesheets/bootstrap/_dropdown.scss index b71058c..209843f 100644 --- a/assets/stylesheets/bootstrap/_dropdown.scss +++ b/assets/stylesheets/bootstrap/_dropdown.scss @@ -70,14 +70,11 @@ // 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%; - - &[data-bs-popper] { - margin-top: 0; - margin-bottom: $dropdown-spacer; - } + margin-top: 0; + margin-bottom: $dropdown-spacer; } .dropdown-toggle { diff --git a/assets/stylesheets/bootstrap/_list-group.scss b/assets/stylesheets/bootstrap/_list-group.scss index 7e23b8e..2193168 100644 --- a/assets/stylesheets/bootstrap/_list-group.scss +++ b/assets/stylesheets/bootstrap/_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 // diff --git a/assets/stylesheets/bootstrap/_modal.scss b/assets/stylesheets/bootstrap/_modal.scss index 06ab564..6dd4dd3 100644 --- a/assets/stylesheets/bootstrap/_modal.scss +++ b/assets/stylesheets/bootstrap/_modal.scss @@ -202,6 +202,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 +234,4 @@ } } } +// scss-docs-end modal-fullscreen-loop diff --git a/assets/stylesheets/bootstrap/_nav.scss b/assets/stylesheets/bootstrap/_nav.scss index 2534f7f..ffb27d8 100644 --- a/assets/stylesheets/bootstrap/_nav.scss +++ b/assets/stylesheets/bootstrap/_nav.scss @@ -117,6 +117,13 @@ } } +.nav-fill, +.nav-justified { + .nav-item .nav-link { + width: 100%; // Make sure button will grow + } +} + // Tabbable tabs // diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss index 21126b4..2ccef11 100644 --- a/assets/stylesheets/bootstrap/_navbar.scss +++ b/assets/stylesheets/bootstrap/_navbar.scss @@ -154,6 +154,7 @@ overflow-y: auto; } +// scss-docs-start navbar-expand-loop // Generate series of `.navbar-expand-*` responsive classes for configuring // where your navbar collapses. .navbar-expand { @@ -196,6 +197,7 @@ } } } +// scss-docs-end navbar-expand-loop // Navbar themes diff --git a/assets/stylesheets/bootstrap/_offcanvas.scss b/assets/stylesheets/bootstrap/_offcanvas.scss new file mode 100644 index 0000000..1eeb989 --- /dev/null +++ b/assets/stylesheets/bootstrap/_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; + 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-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; +} + +.offcanvas-backdrop::before { + position: fixed; + top: 0; + left: 0; + z-index: $zindex-offcanvas - 1; + width: 100vw; + height: 100vh; + content: ""; + background-color: $offcanvas-body-backdrop-color; +} diff --git a/assets/stylesheets/bootstrap/_progress.scss b/assets/stylesheets/bootstrap/_progress.scss index b48ffc4..5715ab0 100644 --- a/assets/stylesheets/bootstrap/_progress.scss +++ b/assets/stylesheets/bootstrap/_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/assets/stylesheets/bootstrap/_reboot.scss b/assets/stylesheets/bootstrap/_reboot.scss index 973b5d1..3520469 100644 --- a/assets/stylesheets/bootstrap/_reboot.scss +++ b/assets/stylesheets/bootstrap/_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 @@ -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/assets/stylesheets/bootstrap/_spinners.scss b/assets/stylesheets/bootstrap/_spinners.scss index 7444ed1..8e19bae 100644 --- a/assets/stylesheets/bootstrap/_spinners.scss +++ b/assets/stylesheets/bootstrap/_spinners.scss @@ -2,9 +2,11 @@ // 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; @@ -28,6 +30,7 @@ // Growing circle // +// scss-docs-start spinner-grow-keyframes @keyframes spinner-grow { 0% { transform: scale(0); @@ -37,6 +40,7 @@ transform: none; } } +// scss-docs-end spinner-grow-keyframes .spinner-grow { display: inline-block; diff --git a/assets/stylesheets/bootstrap/_transitions.scss b/assets/stylesheets/bootstrap/_transitions.scss index 3d1db3e..2905df4 100644 --- a/assets/stylesheets/bootstrap/_transitions.scss +++ b/assets/stylesheets/bootstrap/_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/assets/stylesheets/bootstrap/_utilities.scss b/assets/stylesheets/bootstrap/_utilities.scss index 82f3db1..3c927cf 100644 --- a/assets/stylesheets/bootstrap/_utilities.scss +++ b/assets/stylesheets/bootstrap/_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,13 @@ $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, @@ -31,6 +39,7 @@ $utilities: map-merge( 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, @@ -41,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 @@ -72,6 +83,8 @@ $utilities: map-merge( y: translateY(-50%), ) ), + // scss-docs-end utils-position + // scss-docs-start utils-borders "border": ( property: border, values: ( @@ -119,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, @@ -172,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, @@ -275,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, @@ -404,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, @@ -427,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, @@ -442,6 +473,30 @@ $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, @@ -459,16 +514,6 @@ $utilities: map-merge( ) ), // scss-docs-end utils-color - "line-height": ( - property: line-height, - class: lh, - values: ( - 1: 1, - sm: $line-height-sm, - base: $line-height-base, - lg: $line-height-lg, - ) - ), // scss-docs-start utils-bg-color "background-color": ( property: background-color, @@ -488,29 +533,7 @@ $utilities: map-merge( 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 @@ -520,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, @@ -553,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, @@ -561,6 +588,7 @@ $utilities: map-merge( invisible: hidden, ) ) + // scss-docs-end utils-visibility ), $utilities ); diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss index 3f80144..7558224 100644 --- a/assets/stylesheets/bootstrap/_variables.scss +++ b/assets/stylesheets/bootstrap/_variables.scss @@ -246,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, @@ -257,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 // @@ -354,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, @@ -365,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 @@ -402,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; @@ -434,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: ( @@ -446,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: ( @@ -467,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; @@ -501,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 @@ -543,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), @@ -554,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; @@ -570,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; @@ -581,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; @@ -630,22 +654,28 @@ $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; @@ -694,8 +724,9 @@ $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; @@ -728,6 +759,10 @@ $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; @@ -741,16 +776,18 @@ $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; @@ -759,8 +796,8 @@ $form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extr $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; @@ -788,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; @@ -807,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; @@ -820,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; @@ -833,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: ( @@ -856,15 +902,17 @@ $form-validation-states: ( $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: 1040 !default; +$zindex-modal-backdrop: 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; @@ -885,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; @@ -907,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; @@ -926,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; @@ -961,7 +1015,9 @@ $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; @@ -974,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; @@ -1013,9 +1071,12 @@ $pagination-transition: color .15s ease-in-out, background-color .1 $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; @@ -1030,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; @@ -1066,9 +1129,11 @@ $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; @@ -1082,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; @@ -1117,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; @@ -1136,24 +1207,26 @@ $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; @@ -1189,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; @@ -1220,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; @@ -1248,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; @@ -1279,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; @@ -1313,10 +1398,12 @@ $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-border-width: .25em !default; @@ -1325,10 +1412,12 @@ $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; @@ -1341,6 +1430,25 @@ $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-body-backdrop-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !default; +$offcanvas-box-shadow: $modal-content-box-shadow-xs !default; +// scss-docs-end offcanvas-variables // Code diff --git a/assets/stylesheets/bootstrap/bootstrap-utilities.scss b/assets/stylesheets/bootstrap/bootstrap-utilities.scss index 6c818b6..9331d80 100644 --- a/assets/stylesheets/bootstrap/bootstrap-utilities.scss +++ b/assets/stylesheets/bootstrap/bootstrap-utilities.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap Utilities v5.0.0-beta2 (https://getbootstrap.com/) + * 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) diff --git a/assets/stylesheets/bootstrap/forms/_form-control.scss b/assets/stylesheets/bootstrap/forms/_form-control.scss index bac416f..9728b91 100644 --- a/assets/stylesheets/bootstrap/forms/_form-control.scss +++ b/assets/stylesheets/bootstrap/forms/_form-control.scss @@ -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,7 +88,6 @@ @include transition($btn-transition); } - // stylelint-disable-next-line selector-pseudo-element-no-unknown &:hover:not(:disabled):not([readonly])::file-selector-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); diff --git a/assets/stylesheets/bootstrap/mixins/_alert.scss b/assets/stylesheets/bootstrap/mixins/_alert.scss index 99ebbc3..f3eb595 100644 --- a/assets/stylesheets/bootstrap/mixins/_alert.scss +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/mixins/_border-radius.scss b/assets/stylesheets/bootstrap/mixins/_border-radius.scss index 819b8ab..616decb 100644 --- a/assets/stylesheets/bootstrap/mixins/_border-radius.scss +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/mixins/_buttons.scss b/assets/stylesheets/bootstrap/mixins/_buttons.scss index 3fbd708..c06fa4a 100644 --- a/assets/stylesheets/bootstrap/mixins/_buttons.scss +++ b/assets/stylesheets/bootstrap/mixins/_buttons.scss @@ -3,6 +3,7 @@ // 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, @@ -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/assets/stylesheets/bootstrap/mixins/_caret.scss b/assets/stylesheets/bootstrap/mixins/_caret.scss index fc10669..4b0f036 100644 --- a/assets/stylesheets/bootstrap/mixins/_caret.scss +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/mixins/_forms.scss b/assets/stylesheets/bootstrap/mixins/_forms.scss index 8be4d2e..a1e0849 100644 --- a/assets/stylesheets/bootstrap/mixins/_forms.scss +++ b/assets/stylesheets/bootstrap/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}, @@ -19,7 +21,7 @@ $icon, $tooltip-color: color-contrast($color), $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity), - $focus-box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity) + $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity) ) { .#{$state}-feedback { display: none; @@ -121,4 +123,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/assets/stylesheets/bootstrap/mixins/_list-group.scss b/assets/stylesheets/bootstrap/mixins/_list-group.scss index 351e910..e55415f 100644 --- a/assets/stylesheets/bootstrap/mixins/_list-group.scss +++ b/assets/stylesheets/bootstrap/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/assets/stylesheets/bootstrap/mixins/_pagination.scss b/assets/stylesheets/bootstrap/mixins/_pagination.scss index 9cb7fd8..3101b38 100644 --- a/assets/stylesheets/bootstrap/mixins/_pagination.scss +++ b/assets/stylesheets/bootstrap/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 |