diff options
author | Gleb Mazovetskiy <glex.spb@gmail.com> | 2020-11-09 01:14:20 +0300 |
---|---|---|
committer | Gleb Mazovetskiy <glex.spb@gmail.com> | 2020-11-09 01:14:20 +0300 |
commit | 29f3987b16093a50fc4859e0a1b05af702528f23 (patch) | |
tree | 1bd4b61a15fbb682267ae00b1f3585de997105c7 /assets/stylesheets/bootstrap | |
parent | 953fc5083026e5c1b7756d122956db65344ddcb3 (diff) |
rake update[v5.0.0-alpha2]
Diffstat (limited to 'assets/stylesheets/bootstrap')
35 files changed, 340 insertions, 186 deletions
diff --git a/assets/stylesheets/bootstrap/_alert.scss b/assets/stylesheets/bootstrap/_alert.scss index 19157b2..d0536f3 100644 --- a/assets/stylesheets/bootstrap/_alert.scss +++ b/assets/stylesheets/bootstrap/_alert.scss @@ -27,15 +27,14 @@ // Expand the right padding and account for the close button's positioning. .alert-dismissible { - padding-right: $close-font-size + $alert-padding-x * 2; + padding-right: $alert-dismissible-padding-r; // Adjust close link position - .close { + .btn-close { position: absolute; top: 0; right: 0; - padding: $alert-padding-y $alert-padding-x; - color: inherit; + padding: $alert-padding-y * 1.25 $alert-padding-x; } } diff --git a/assets/stylesheets/bootstrap/_card.scss b/assets/stylesheets/bootstrap/_card.scss index 697fe51..a526ec1 100644 --- a/assets/stylesheets/bootstrap/_card.scss +++ b/assets/stylesheets/bootstrap/_card.scss @@ -185,12 +185,12 @@ .card-img-top, .card-header { - // stylelint-disable-next-line property-blacklist + // stylelint-disable-next-line property-disallowed-list border-top-right-radius: 0; } .card-img-bottom, .card-footer { - // stylelint-disable-next-line property-blacklist + // stylelint-disable-next-line property-disallowed-list border-bottom-right-radius: 0; } } @@ -200,12 +200,12 @@ .card-img-top, .card-header { - // stylelint-disable-next-line property-blacklist + // stylelint-disable-next-line property-disallowed-list border-top-left-radius: 0; } .card-img-bottom, .card-footer { - // stylelint-disable-next-line property-blacklist + // stylelint-disable-next-line property-disallowed-list border-bottom-left-radius: 0; } } @@ -220,6 +220,8 @@ // .accordion { + overflow-anchor: none; + > .card { overflow: hidden; diff --git a/assets/stylesheets/bootstrap/_carousel.scss b/assets/stylesheets/bootstrap/_carousel.scss index 84ffd6c..ef77cbb 100644 --- a/assets/stylesheets/bootstrap/_carousel.scss +++ b/assets/stylesheets/bootstrap/_carousel.scss @@ -193,3 +193,20 @@ color: $carousel-caption-color; text-align: center; } + +// Dark mode carousel + +.carousel-dark { + .carousel-control-prev-icon, + .carousel-control-next-icon { + filter: $carousel-dark-control-icon-filter; + } + + .carousel-indicators li { + background-color: $carousel-dark-indicator-active-bg; + } + + .carousel-caption { + color: $carousel-dark-caption-color; + } +} diff --git a/assets/stylesheets/bootstrap/_close.scss b/assets/stylesheets/bootstrap/_close.scss index dd6541e..fd1971d 100644 --- a/assets/stylesheets/bootstrap/_close.scss +++ b/assets/stylesheets/bootstrap/_close.scss @@ -1,36 +1,41 @@ -.close { - @include font-size($close-font-size); - font-weight: $close-font-weight; - line-height: 1; - color: $close-color; - text-shadow: $close-text-shadow; - opacity: .5; +// transparent background and border properties included for button version. +// iOS requires the button element instead of an anchor tag. +// If you want the anchor version, it requires `href="#"`. +// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + +.btn-close { + box-sizing: content-box; + width: $btn-close-width; + height: $btn-close-height; + padding: $btn-close-padding-y $btn-close-padding-x; + color: $btn-close-color; + background: transparent escape-svg($btn-close-bg) no-repeat center center / $btn-close-width auto; // include transparent for button elements + background-clip: content-box; + border: 0; // for button elements + @include border-radius(); + opacity: $btn-close-opacity; // Override <a>'s hover style &:hover { - color: $close-color; + color: $btn-close-color; text-decoration: none; + opacity: $btn-close-hover-opacity; } - &:hover, &:focus { - opacity: .75; + outline: none; + box-shadow: $btn-close-focus-shadow; + opacity: $btn-close-focus-opacity; } &:disabled, &.disabled { pointer-events: none; + user-select: none; + opacity: $btn-close-disabled-opacity; } } -// Additional properties for button version -// iOS requires the button element instead of an anchor tag. -// If you want the anchor version, it requires `href="#"`. -// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile - -// stylelint-disable-next-line selector-no-qualifying-type -button.close { - padding: 0; - background-color: transparent; - border: 0; +.btn-close-white { + filter: $btn-close-white-filter; } diff --git a/assets/stylesheets/bootstrap/_dropdown.scss b/assets/stylesheets/bootstrap/_dropdown.scss index b30f2ba..fef1c9b 100644 --- a/assets/stylesheets/bootstrap/_dropdown.scss +++ b/assets/stylesheets/bootstrap/_dropdown.scss @@ -21,7 +21,7 @@ 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 0; + padding: $dropdown-padding-y $dropdown-padding-x; margin: $dropdown-spacer 0 0; // override default ul @include font-size($dropdown-font-size); color: $dropdown-color; @@ -193,3 +193,44 @@ padding: $dropdown-item-padding-y $dropdown-item-padding-x; color: $dropdown-link-color; } + +// Dark dropdowns +.dropdown-menu-dark { + color: $dropdown-dark-color; + background-color: $dropdown-dark-bg; + border-color: $dropdown-dark-border-color; + @include box-shadow($dropdown-dark-box-shadow); + + .dropdown-item { + color: $dropdown-dark-link-color; + + &:hover, + &:focus { + color: $dropdown-dark-link-hover-color; + @include gradient-bg($dropdown-dark-link-hover-bg); + } + + &.active, + &:active { + color: $dropdown-dark-link-active-color; + @include gradient-bg($dropdown-dark-link-active-bg); + } + + &.disabled, + &:disabled { + color: $dropdown-dark-link-disabled-color; + } + } + + .dropdown-divider { + border-color: $dropdown-dark-divider-bg; + } + + .dropdown-item-text { + color: $dropdown-dark-link-color; + } + + .dropdown-header { + color: $dropdown-dark-header-color; + } +} diff --git a/assets/stylesheets/bootstrap/_functions.scss b/assets/stylesheets/bootstrap/_functions.scss index 980efb0..fd72c98 100644 --- a/assets/stylesheets/bootstrap/_functions.scss +++ b/assets/stylesheets/bootstrap/_functions.scss @@ -74,6 +74,9 @@ } // See https://codepen.io/kevinweber/pen/dXWoRw +// +// Requires the use of quotes around data URIs. + @function escape-svg($string) { @if str-index($string, "data:image/svg+xml") { @each $char, $encoded in $escaped-characters { @@ -111,7 +114,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 } } - @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}…"; + @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}..."; @return $max-ratio-color; } diff --git a/assets/stylesheets/bootstrap/_helpers.scss b/assets/stylesheets/bootstrap/_helpers.scss index 1fdbc29..8f566d1 100644 --- a/assets/stylesheets/bootstrap/_helpers.scss +++ b/assets/stylesheets/bootstrap/_helpers.scss @@ -1,7 +1,7 @@ @import "helpers/clearfix"; @import "helpers/colored-links"; -@import "helpers/embed"; +@import "helpers/ratio"; @import "helpers/position"; -@import "helpers/screenreaders"; +@import "helpers/visually-hidden"; @import "helpers/stretched-link"; @import "helpers/text-truncation"; diff --git a/assets/stylesheets/bootstrap/_list-group.scss b/assets/stylesheets/bootstrap/_list-group.scss index 9fb11bf..b193790 100644 --- a/assets/stylesheets/bootstrap/_list-group.scss +++ b/assets/stylesheets/bootstrap/_list-group.scss @@ -112,7 +112,7 @@ margin-top: 0; } - & + .list-group-item { + + .list-group-item { border-top-width: $list-group-border-width; border-left-width: 0; diff --git a/assets/stylesheets/bootstrap/_mixins.scss b/assets/stylesheets/bootstrap/_mixins.scss index 8c00f31..7b06cd8 100644 --- a/assets/stylesheets/bootstrap/_mixins.scss +++ b/assets/stylesheets/bootstrap/_mixins.scss @@ -12,7 +12,7 @@ @import "mixins/breakpoints"; @import "mixins/image"; @import "mixins/resize"; -@import "mixins/screen-reader"; +@import "mixins/visually-hidden"; @import "mixins/reset-text"; @import "mixins/text-truncate"; diff --git a/assets/stylesheets/bootstrap/_modal.scss b/assets/stylesheets/bootstrap/_modal.scss index 4451972..06ab564 100644 --- a/assets/stylesheets/bootstrap/_modal.scss +++ b/assets/stylesheets/bootstrap/_modal.scss @@ -56,9 +56,10 @@ } .modal-dialog-scrollable { - max-height: subtract(100%, $modal-dialog-margin * 2); + height: subtract(100%, $modal-dialog-margin * 2); .modal-content { + max-height: 100%; overflow: hidden; } @@ -111,16 +112,15 @@ .modal-header { display: flex; flex-shrink: 0; - align-items: flex-start; // so the close btn always stays on the upper right corner + align-items: center; justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends padding: $modal-header-padding; border-bottom: $modal-header-border-width solid $modal-header-border-color; @include border-top-radius($modal-content-inner-border-radius); - .close { - padding: $modal-header-padding; - // auto on the left force icon to the right even when there is no .modal-title - margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto; + .btn-close { + padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2); + margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto; } } @@ -177,7 +177,7 @@ } .modal-dialog-scrollable { - max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2); + height: subtract(100%, $modal-dialog-margin-y-sm-up * 2); } .modal-dialog-centered { diff --git a/assets/stylesheets/bootstrap/_nav.scss b/assets/stylesheets/bootstrap/_nav.scss index 84d5224..30c2c81 100644 --- a/assets/stylesheets/bootstrap/_nav.scss +++ b/assets/stylesheets/bootstrap/_nav.scss @@ -14,11 +14,15 @@ .nav-link { display: block; padding: $nav-link-padding-y $nav-link-padding-x; + @include font-size($nav-link-font-size); + font-weight: $nav-link-font-weight; + color: $nav-link-color; text-decoration: if($link-decoration == none, null, none); @include transition($nav-link-transition); &:hover, &:focus { + color: $nav-link-hover-color; text-decoration: if($link-hover-decoration == underline, none, null); } diff --git a/assets/stylesheets/bootstrap/_navbar.scss b/assets/stylesheets/bootstrap/_navbar.scss index 01d827f..607c317 100644 --- a/assets/stylesheets/bootstrap/_navbar.scss +++ b/assets/stylesheets/bootstrap/_navbar.scss @@ -155,6 +155,7 @@ $next: breakpoint-next($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($next, $grid-breakpoints); + // stylelint-disable-next-line scss/selector-no-union-class-name &#{$infix} { @include media-breakpoint-up($next) { flex-wrap: nowrap; diff --git a/assets/stylesheets/bootstrap/_pagination.scss b/assets/stylesheets/bootstrap/_pagination.scss index 40b100b..819f6d1 100644 --- a/assets/stylesheets/bootstrap/_pagination.scss +++ b/assets/stylesheets/bootstrap/_pagination.scss @@ -10,6 +10,7 @@ text-decoration: if($link-decoration == none, null, none); background-color: $pagination-bg; border: $pagination-border-width solid $pagination-border-color; + @include transition($pagination-transition); &:hover { z-index: 2; @@ -21,6 +22,8 @@ &:focus { z-index: 3; + color: $pagination-focus-color; + background-color: $pagination-focus-bg; outline: $pagination-focus-outline; box-shadow: $pagination-focus-box-shadow; } diff --git a/assets/stylesheets/bootstrap/_reboot.scss b/assets/stylesheets/bootstrap/_reboot.scss index b3763d0..223adfd 100644 --- a/assets/stylesheets/bootstrap/_reboot.scss +++ b/assets/stylesheets/bootstrap/_reboot.scss @@ -69,7 +69,6 @@ body { // // 1. Reset Firefox's gray color // 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field -// See https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_size hr { margin: $hr-margin-y 0; @@ -369,12 +368,14 @@ caption { text-align: left; } -// 1. Matches default `<td>` alignment by inheriting `text-align`. -// 2. Fix alignment for Safari +// 1. Removes font-weight bold by inheriting +// 2. Matches default `<td>` alignment by inheriting `text-align`. +// 3. Fix alignment for Safari th { - text-align: inherit; // 1 - text-align: -webkit-match-parent; // 2 + font-weight: $table-th-font-weight; // 1 + text-align: inherit; // 2 + text-align: -webkit-match-parent; // 3 } thead, @@ -401,7 +402,7 @@ label { // See https://github.com/twbs/bootstrap/issues/24093 button { - // stylelint-disable-next-line property-blacklist + // stylelint-disable-next-line property-disallowed-list border-radius: 0; } diff --git a/assets/stylesheets/bootstrap/_spinners.scss b/assets/stylesheets/bootstrap/_spinners.scss index e8e4c04..9e083ea 100644 --- a/assets/stylesheets/bootstrap/_spinners.scss +++ b/assets/stylesheets/bootstrap/_spinners.scss @@ -13,7 +13,7 @@ vertical-align: text-bottom; border: $spinner-border-width solid currentColor; border-right-color: transparent; - // stylelint-disable-next-line property-blacklist + // stylelint-disable-next-line property-disallowed-list border-radius: 50%; animation: spinner-border $spinner-animation-speed linear infinite; } @@ -44,7 +44,7 @@ height: $spinner-height; vertical-align: text-bottom; background-color: currentColor; - // stylelint-disable-next-line property-blacklist + // stylelint-disable-next-line property-disallowed-list border-radius: 50%; opacity: 0; animation: spinner-grow $spinner-animation-speed linear infinite; diff --git a/assets/stylesheets/bootstrap/_tables.scss b/assets/stylesheets/bootstrap/_tables.scss index 5ae45ff..47ffde1 100644 --- a/assets/stylesheets/bootstrap/_tables.scss +++ b/assets/stylesheets/bootstrap/_tables.scss @@ -40,7 +40,7 @@ // Highlight border color between thead, tbody and tfoot. > :not(:last-child) > :last-child > * { - border-bottom-color: $table-group-seperator-color; + border-bottom-color: $table-group-separator-color; } } diff --git a/assets/stylesheets/bootstrap/_toasts.scss b/assets/stylesheets/bootstrap/_toasts.scss index 6aa5352..e2b98e6 100644 --- a/assets/stylesheets/bootstrap/_toasts.scss +++ b/assets/stylesheets/bootstrap/_toasts.scss @@ -1,13 +1,11 @@ .toast { max-width: $toast-max-width; - overflow: hidden; // cheap rounded corners on nested items @include font-size($toast-font-size); color: $toast-color; background-color: $toast-background-color; background-clip: padding-box; border: $toast-border-width solid $toast-border-color; box-shadow: $toast-box-shadow; - backdrop-filter: blur(10px); opacity: 0; @include border-radius($toast-border-radius); @@ -37,6 +35,12 @@ background-color: $toast-header-background-color; background-clip: padding-box; border-bottom: $toast-border-width solid $toast-header-border-color; + @include border-top-radius(subtract($toast-border-radius, $toast-border-width)); + + .btn-close { + margin-right: $toast-padding-x / -2; + margin-left: $toast-padding-x; + } } .toast-body { diff --git a/assets/stylesheets/bootstrap/_utilities.scss b/assets/stylesheets/bootstrap/_utilities.scss index 79e52fd..e9a9b1e 100644 --- a/assets/stylesheets/bootstrap/_utilities.scss +++ b/assets/stylesheets/bootstrap/_utilities.scss @@ -23,7 +23,7 @@ $utilities: map-merge( print: true, property: display, class: d, - values: none inline inline-block block table table-row table-cell flex inline-flex + values: inline inline-block block table table-row table-cell flex inline-flex none ), "shadow": ( property: box-shadow, @@ -39,6 +39,29 @@ $utilities: map-merge( property: position, values: static relative absolute fixed sticky ), + "top": ( + property: top, + values: $position-values + ), + "bottom": ( + property: bottom, + values: $position-values + ), + "left": ( + property: left, + values: $position-values + ), + "right": ( + property: right, + values: $position-values + ), + "translate-middle": ( + property: transform, + class: translate-middle, + values: ( + null: (translateX(-50%) translateY(-50%)) + ) + ), "border": ( property: border, values: ( @@ -79,6 +102,11 @@ $utilities: map-merge( class: border, values: map-merge($theme-colors, ("white": $white)) ), + "border-width": ( + property: border-width, + class: border, + values: $border-widths + ), // Sizing utilities "width": ( property: width, diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss index 2e0d0ce..e4d844f 100644 --- a/assets/stylesheets/bootstrap/_variables.scss +++ b/assets/stylesheets/bootstrap/_variables.scss @@ -38,9 +38,9 @@ $pink: #d63384 !default; $red: #dc3545 !default; $orange: #fd7e14 !default; $yellow: #ffc107 !default; -$green: #28a745 !default; +$green: #198754 !default; $teal: #20c997 !default; -$cyan: #17a2b8 !default; +$cyan: #0dcaf0 !default; // scss-docs-start colors-map $colors: ( @@ -87,10 +87,10 @@ $theme-color-interval: 8% !default; // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast -$min-contrast-ratio: 3 !default; +$min-contrast-ratio: 4.5 !default; // Customize the light and dark text colors for use in our color contrast function. -$color-contrast-dark: $gray-900 !default; +$color-contrast-dark: $black !default; $color-contrast-light: $white !default; // fusv-disable @@ -197,11 +197,11 @@ $cyan-900: shade-color($cyan, 8) !default; // Characters which are escaped by the escape-svg function $escaped-characters: ( - ("<","%3c"), - (">","%3e"), - ("#","%23"), - ("(","%28"), - (")","%29"), + ("<", "%3c"), + (">", "%3e"), + ("#", "%23"), + ("(", "%28"), + (")", "%29"), ) !default; // Options @@ -246,6 +246,17 @@ $spacers: ( $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; +// Position +// +// Define the edge positioning anchors of the position utilities. + +$position-values: ( + 0: 0, + 50: 50%, + 100: 100% +) !default; + + // Body // // Settings for the `<body>` element. @@ -325,7 +336,7 @@ $gutters: $spacers !default; // Container padding -$container-padding-x: 1rem !default; +$container-padding-x: $grid-gutter-width !default; // Components @@ -338,6 +349,14 @@ $border-color: $gray-300 !default; $border-radius: .25rem !default; $border-radius-sm: .2rem !default; $border-radius-lg: .3rem !default; +$border-widths: ( + 0: 0, + 1: 1px, + 2: 2px, + 3: 3px, + 4: 4px, + 5: 5px +) !default; $rounded-pill: 50rem !default; @@ -357,26 +376,16 @@ $transition-base: all .2s ease-in-out !default; $transition-fade: opacity .15s linear !default; $transition-collapse: height .35s ease !default; -// scss-docs-start embed-responsive-aspect-ratios -$embed-responsive-aspect-ratios: ( - "21by9": ( - x: 21, - y: 9 - ), - "16by9": ( - x: 16, - y: 9 - ), - "4by3": ( - x: 4, - y: 3 - ), - "1by1": ( - x: 1, - y: 1 - ) +// stylelint-disable function-disallowed-list +// scss-docs-start aspect-ratios +$aspect-ratios: ( + "1x1": 100%, + "4x3": calc(3 / 4 * 100%), + "16x9": calc(9 / 16 * 100%), + "21x9": calc(9 / 21 * 100%) ) !default; -// scss-docs-end embed-responsive-aspect-ratios +// scss-docs-end aspect-ratios +// stylelint-enable function-disallowed-list // Typography // @@ -487,6 +496,8 @@ $table-cell-vertical-align: top !default; $table-color: $body-color !default; $table-bg: transparent !default; +$table-th-font-weight: null !default; + $table-striped-color: $table-color !default; $table-striped-bg-factor: .05 !default; $table-striped-bg: rgba($black, $table-striped-bg-factor) !default; @@ -505,7 +516,7 @@ $table-border-color: $border-color !default; $table-striped-order: odd !default; -$table-group-seperator-color: currentColor !default; +$table-group-separator-color: currentColor !default; $table-caption-color: $text-muted !default; @@ -534,7 +545,7 @@ $input-btn-font-family: null !default; $input-btn-font-size: $font-size-base !default; $input-btn-line-height: $line-height-base !default; -$input-btn-focus-width: .2rem !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; @@ -656,7 +667,7 @@ $input-height-lg: add($input-line-height * 1em, add($input $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; -$form-check-input-width: 1.25em !default; +$form-check-input-width: 1em !default; $form-check-min-height: $font-size-base * $line-height-base !default; $form-check-padding-left: $form-check-input-width + .5em !default; $form-check-margin-bottom: .125rem !default; @@ -699,6 +710,9 @@ $form-switch-checked-bg-position: right center !default; $form-check-inline-margin-right: 1rem !default; +$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; @@ -841,6 +855,10 @@ $zindex-tooltip: 1070 !default; $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-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; @@ -903,6 +921,7 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default; // Dropdown menu container and contents. $dropdown-min-width: 10rem !default; +$dropdown-padding-x: 0 !default; $dropdown-padding-y: .5rem !default; $dropdown-spacer: .125rem !default; $dropdown-font-size: $font-size-base !default; @@ -912,7 +931,7 @@ $dropdown-border-color: rgba($black, .15) !default; $dropdown-border-radius: $border-radius !default; $dropdown-border-width: $border-width !default; $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default; -$dropdown-divider-bg: $gray-200 !default; +$dropdown-divider-bg: $dropdown-border-color !default; $dropdown-divider-margin-y: $spacer / 2 !default; $dropdown-box-shadow: $box-shadow !default; @@ -931,6 +950,19 @@ $dropdown-item-padding-x: $spacer !default; $dropdown-header-color: $gray-600 !default; $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default; +$dropdown-dark-color: $gray-300 !default; +$dropdown-dark-bg: $gray-800 !default; +$dropdown-dark-border-color: $dropdown-border-color !default; +$dropdown-dark-divider-bg: $dropdown-divider-bg !default; +$dropdown-dark-box-shadow: null !default; +$dropdown-dark-link-color: $dropdown-dark-color !default; +$dropdown-dark-link-hover-color: $white !default; +$dropdown-dark-link-hover-bg: rgba($white, .15) !default; +$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; + // Pagination @@ -948,6 +980,8 @@ $pagination-border-radius: $border-radius !default; $pagination-margin-left: -$pagination-border-width !default; $pagination-border-color: $gray-300 !default; +$pagination-focus-color: $link-hover-color !default; +$pagination-focus-bg: $gray-200 !default; $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; $pagination-focus-outline: 0 !default; @@ -963,6 +997,7 @@ $pagination-disabled-color: $gray-600 !default; $pagination-disabled-bg: $white !default; $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; // Cards @@ -1042,7 +1077,7 @@ $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default $toast-max-width: 350px !default; $toast-padding-x: .75rem !default; -$toast-padding-y: .25rem !default; +$toast-padding-y: .5rem !default; $toast-font-size: .875rem !default; $toast-color: null !default; $toast-background-color: rgba($white, .85) !default; @@ -1061,8 +1096,8 @@ $toast-header-border-color: rgba(0, 0, 0, .05) !default; $badge-font-size: .75em !default; $badge-font-weight: $font-weight-bold !default; $badge-color: $white !default; -$badge-padding-y: .25em !default; -$badge-padding-x: .5em !default; +$badge-padding-y: .35em !default; +$badge-padding-x: .65em !default; $badge-border-radius: $border-radius !default; @@ -1124,6 +1159,8 @@ $alert-bg-level: -10 !default; $alert-border-level: -9 !default; $alert-color-level: 6 !default; +$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side + // Progress bars @@ -1217,14 +1254,18 @@ $carousel-caption-color: $white !default; $carousel-caption-padding-y: 1.25rem !default; $carousel-caption-spacer: 1.25rem !default; -$carousel-control-icon-width: 20px !default; +$carousel-control-icon-width: 2rem !default; -$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default; -$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default; +$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 16 16'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default; +$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default; $carousel-transition-duration: .6s !default; $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) +$carousel-dark-indicator-active-bg: $black !default; +$carousel-dark-caption-color: $black !default; +$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; + // Spinners @@ -1240,11 +1281,18 @@ $spinner-border-width-sm: .2em !default; // Close -$close-font-size: $font-size-base * 1.5 !default; -$close-font-weight: $font-weight-bold !default; -$close-color: $black !default; -$close-text-shadow: 0 1px 0 $white !default; - +$btn-close-width: 1em !default; +$btn-close-height: $btn-close-width !default; +$btn-close-padding-x: .25em !default; +$btn-close-padding-y: $btn-close-padding-x !default; +$btn-close-color: $black !default; +$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$btn-close-color}' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default; +$btn-close-focus-shadow: $input-btn-focus-box-shadow !default; +$btn-close-opacity: .5 !default; +$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; // Code diff --git a/assets/stylesheets/bootstrap/bootstrap-utilities.scss b/assets/stylesheets/bootstrap/bootstrap-utilities.scss index e4790cf..3edb9fd 100644 --- a/assets/stylesheets/bootstrap/bootstrap-utilities.scss +++ b/assets/stylesheets/bootstrap/bootstrap-utilities.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap Utilities v5.0.0-alpha1 (https://getbootstrap.com/) + * Bootstrap Utilities v5.0.0-alpha2 (https://getbootstrap.com/) * Copyright 2011-2020 The Bootstrap Authors * Copyright 2011-2020 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) diff --git a/assets/stylesheets/bootstrap/forms/_form-check.scss b/assets/stylesheets/bootstrap/forms/_form-check.scss index f163578..84e3e57 100644 --- a/assets/stylesheets/bootstrap/forms/_form-check.scss +++ b/assets/stylesheets/bootstrap/forms/_form-check.scss @@ -33,7 +33,7 @@ } &[type="radio"] { - // stylelint-disable-next-line property-blacklist + // stylelint-disable-next-line property-disallowed-list border-radius: $form-check-radio-border-radius; } diff --git a/assets/stylesheets/bootstrap/forms/_input-group.scss b/assets/stylesheets/bootstrap/forms/_input-group.scss index c8e86ce..7a9a14d 100644 --- a/assets/stylesheets/bootstrap/forms/_input-group.scss +++ b/assets/stylesheets/bootstrap/forms/_input-group.scss @@ -62,9 +62,9 @@ .input-group-text { display: flex; align-items: center; - padding: $input-padding-y $input-padding-x; + padding: $input-group-addon-padding-y $input-group-addon-padding-x; @include font-size($input-font-size); // Match inputs - font-weight: $font-weight-normal; + font-weight: $input-group-addon-font-weight; line-height: $input-line-height; color: $input-group-addon-color; text-align: center; diff --git a/assets/stylesheets/bootstrap/helpers/_colored-links.scss b/assets/stylesheets/bootstrap/helpers/_colored-links.scss index 4eea8d3..d135194 100644 --- a/assets/stylesheets/bootstrap/helpers/_colored-links.scss +++ b/assets/stylesheets/bootstrap/helpers/_colored-links.scss @@ -5,7 +5,7 @@ @if $emphasized-link-hover-darken-percentage != 0 { &:hover, &:focus { - color: darken($value, $emphasized-link-hover-darken-percentage); + color: if(color-contrast($value) == $color-contrast-light, darken($value, $emphasized-link-hover-darken-percentage), lighten($value, $emphasized-link-hover-darken-percentage)); } } } diff --git a/assets/stylesheets/bootstrap/helpers/_embed.scss b/assets/stylesheets/bootstrap/helpers/_embed.scss deleted file mode 100644 index 924fc0e..0000000 --- a/assets/stylesheets/bootstrap/helpers/_embed.scss +++ /dev/null @@ -1,31 +0,0 @@ -// Credit: Nicolas Gallagher and SUIT CSS. - -.embed-responsive { - position: relative; - width: 100%; - - &::before { - display: block; - content: ""; - } - - .embed-responsive-item, - iframe, - embed, - object, - video { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } -} - -@each $key, $ratio in $embed-responsive-aspect-ratios { - .embed-responsive-#{$key} { - &::before { - padding-top: percentage(map-get($ratio, y) / map-get($ratio, x)); - } - } -} diff --git a/assets/stylesheets/bootstrap/helpers/_ratio.scss b/assets/stylesheets/bootstrap/helpers/_ratio.scss new file mode 100644 index 0000000..3c0ff33 --- /dev/null +++ b/assets/stylesheets/bootstrap/helpers/_ratio.scss @@ -0,0 +1,26 @@ +// Credit: Nicolas Gallagher and SUIT CSS. + +.ratio { + position: relative; + width: 100%; + + &::before { + display: block; + padding-top: var(--aspect-ratio); + content: ""; + } + + > * { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +@each $key, $ratio in $aspect-ratios { + .ratio-#{$key} { + --aspect-ratio: #{$ratio}; + } +} diff --git a/assets/stylesheets/bootstrap/helpers/_screenreaders.scss b/assets/stylesheets/bootstrap/helpers/_screenreaders.scss deleted file mode 100644 index c8034d1..0000000 --- a/assets/stylesheets/bootstrap/helpers/_screenreaders.scss +++ /dev/null @@ -1,8 +0,0 @@ -// -// Screenreaders -// - -.sr-only, -.sr-only-focusable:not(:focus) { - @include sr-only(); -} diff --git a/assets/stylesheets/bootstrap/helpers/_visually-hidden.scss b/assets/stylesheets/bootstrap/helpers/_visually-hidden.scss new file mode 100644 index 0000000..0a843d3 --- /dev/null +++ b/assets/stylesheets/bootstrap/helpers/_visually-hidden.scss @@ -0,0 +1,8 @@ +// +// Visually hidden +// + +.visually-hidden, +.visually-hidden-focusable:not(:focus) { + @include visually-hidden(); +} diff --git a/assets/stylesheets/bootstrap/mixins/_border-radius.scss b/assets/stylesheets/bootstrap/mixins/_border-radius.scss index aee9bf3..70f5720 100644 --- a/assets/stylesheets/bootstrap/mixins/_border-radius.scss +++ b/assets/stylesheets/bootstrap/mixins/_border-radius.scss @@ -1,4 +1,4 @@ -// stylelint-disable property-blacklist +// stylelint-disable property-disallowed-list // Single side border-radius // Helper function to replace negative values with 0 @@ -23,53 +23,53 @@ } } -@mixin border-top-radius($radius) { +@mixin border-top-radius($radius: $border-radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); border-top-right-radius: valid-radius($radius); } } -@mixin border-right-radius($radius) { +@mixin border-right-radius($radius: $border-radius) { @if $enable-rounded { border-top-right-radius: valid-radius($radius); border-bottom-right-radius: valid-radius($radius); } } -@mixin border-bottom-radius($radius) { +@mixin border-bottom-radius($radius: $border-radius) { @if $enable-rounded { border-bottom-right-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius); } } -@mixin border-left-radius($radius) { +@mixin border-left-radius($radius: $border-radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); border-bottom-left-radius: valid-radius($radius); } } -@mixin border-top-left-radius($radius) { +@mixin border-top-left-radius($radius: $border-radius) { @if $enable-rounded { border-top-left-radius: valid-radius($radius); } } -@mixin border-top-right-radius($radius) { +@mixin border-top-right-radius($radius: $border-radius) { @if $enable-rounded { border-top-right-radius: valid-radius($radius); } } -@mixin border-bottom-right-radius($radius) { +@mixin border-bottom-right-radius($radius: $border-radius) { @if $enable-rounded { border-bottom-right-radius: valid-radius($radius); } } -@mixin border-bottom-left-radius($radius) { +@mixin border-bottom-left-radius($radius: $border-radius) { @if $enable-rounded { border-bottom-left-radius: valid-radius($radius); } diff --git a/assets/stylesheets/bootstrap/mixins/_box-shadow.scss b/assets/stylesheets/bootstrap/mixins/_box-shadow.scss index 0726d43..4172541 100644 --- a/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +++ b/assets/stylesheets/bootstrap/mixins/_box-shadow.scss @@ -2,17 +2,15 @@ @if $enable-shadows { $result: (); - @if (length($shadow) == 1) { - // We can pass `@include box-shadow(none);` - $result: $shadow; - } @else { - // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;` - @for $i from 1 through length($shadow) { - @if nth($shadow, $i) != "none" { - $result: append($result, nth($shadow, $i), "comma"); - } + @each $value in $shadow { + @if $value != null { + $result: append($result, $value, "comma"); + } + @if $value == none and length($shadow) > 1 { + @warn "The keyword 'none' must be used as a single argument."; } } + @if (length($result) > 0) { box-shadow: $result; } diff --git a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss index 66a0050..cdc8034 100644 --- a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +++ b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss @@ -107,8 +107,9 @@ // No minimum for the smallest breakpoint, and no maximum for the largest one. // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { - $min: breakpoint-min($name, $breakpoints); - $max: breakpoint-max(breakpoint-next($name, $breakpoints)); + $min: breakpoint-min($name, $breakpoints); + $next: breakpoint-next($name, $breakpoints); + $max: breakpoint-max($next); @if $min != null and $max != null { @media (min-width: $min) and (max-width: $max) { @@ -119,7 +120,7 @@ @content; } } @else if $min == null { - @include media-breakpoint-down($name, $breakpoints) { + @include media-breakpoint-down($next, $breakpoints) { @content; } } diff --git a/assets/stylesheets/bootstrap/mixins/_buttons.scss b/assets/stylesheets/bootstrap/mixins/_buttons.scss index 09ef0cb..eeade6a 100644 --- a/assets/stylesheets/bootstrap/mixins/_buttons.scss +++ b/assets/stylesheets/bootstrap/mixins/_buttons.scss @@ -7,12 +7,15 @@ $background, $border, $color: color-contrast($background), - $hover-background: darken($background, 7.5%), - $hover-border: darken($border, 10%), + $hover-background: if($color == $color-contrast-light, darken($background, 7.5%), lighten($background, 7.5%)), + $hover-border: if($color == $color-contrast-light, darken($border, 10%), lighten($border, 5%)), $hover-color: color-contrast($hover-background), - $active-background: darken($background, 10%), - $active-border: darken($border, 12.5%), - $active-color: color-contrast($active-background) + $active-background: if($color == $color-contrast-light, darken($background, 10%), lighten($background, 10%)), + $active-border: if($color == $color-contrast-light, darken($border, 12.5%), lighten($border, 5%)), + $active-color: color-contrast($active-background), + $disabled-background: $background, + $disabled-border: $border, + $disabled-color: color-contrast($disabled-background) ) { color: $color; @include gradient-bg($background); @@ -61,11 +64,11 @@ &:disabled, &.disabled { - color: $color; - background-color: $background; + color: $disabled-color; + background-color: $disabled-background; // Remove CSS gradients if they're enabled background-image: if($enable-gradients, none, null); - border-color: $border; + border-color: $disabled-border; } } diff --git a/assets/stylesheets/bootstrap/mixins/_container.scss b/assets/stylesheets/bootstrap/mixins/_container.scss index 435d003..f391c22 100644 --- a/assets/stylesheets/bootstrap/mixins/_container.scss +++ b/assets/stylesheets/bootstrap/mixins/_container.scss @@ -1,9 +1,11 @@ // Container mixins -@mixin make-container($padding-x: $container-padding-x) { +@mixin make-container($gutter: $container-padding-x) { + --bs-gutter-x: #{$gutter}; + width: 100%; - padding-right: $padding-x; - padding-left: $padding-x; + padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list + padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list margin-right: auto; margin-left: auto; } diff --git a/assets/stylesheets/bootstrap/mixins/_grid.scss b/assets/stylesheets/bootstrap/mixins/_grid.scss index 0ef9d1f..a229199 100644 --- a/assets/stylesheets/bootstrap/mixins/_grid.scss +++ b/assets/stylesheets/bootstrap/mixins/_grid.scss @@ -6,11 +6,10 @@ --bs-gutter-x: #{$gutter}; --bs-gutter-y: 0; display: flex; - flex: 1 0 100%; flex-wrap: wrap; - margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-blacklist - margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist - margin-left: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist + margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-disallowed-list + margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-disallowed-list + margin-left: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-disallowed-list } @mixin make-col-ready($gutter: $grid-gutter-width) { @@ -22,8 +21,8 @@ flex-shrink: 0; width: 100%; max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid - padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-blacklist - padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-blacklist + padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list + padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list margin-top: var(--bs-gutter-y); } @@ -48,7 +47,7 @@ // numberof columns. Supports wrapping to new lines, but does not do a Masonry // style grid. @mixin row-cols($count) { - & > * { + > * { flex: 0 0 auto; width: 100% / $count; } diff --git a/assets/stylesheets/bootstrap/mixins/_transition.scss b/assets/stylesheets/bootstrap/mixins/_transition.scss index bf4c00a..d437f6d 100644 --- a/assets/stylesheets/bootstrap/mixins/_transition.scss +++ b/assets/stylesheets/bootstrap/mixins/_transition.scss @@ -1,4 +1,4 @@ -// stylelint-disable property-blacklist +// stylelint-disable property-disallowed-list @mixin transition($transition...) { @if length($transition) == 0 { $transition: $transition-base; diff --git a/assets/stylesheets/bootstrap/mixins/_screen-reader.scss b/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss index b25fe73..d980696 100644 --- a/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +++ b/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss @@ -1,11 +1,11 @@ // stylelint-disable declaration-no-important -// Only display content to screen readers +// Hide content visually while keeping it accessible to assistive technologies // -// See: https://a11yproject.com/posts/how-to-hide-content/ +// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ -@mixin sr-only { +@mixin visually-hidden() { position: absolute !important; width: 1px !important; height: 1px !important; @@ -21,8 +21,8 @@ // // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 -@mixin sr-only-focusable { +@mixin visually-hidden-focusable() { &:not(:focus) { - @include sr-only(); + @include visually-hidden(); } } |