From 9d8a2c427dfb6ada60b1b918be497a6082e26947 Mon Sep 17 00:00:00 2001 From: Paul van Tilburg Date: Thu, 16 Jul 2020 17:14:40 +0200 Subject: [PATCH] Update Bootstrap to version 4.5.0 --- ui/scss/bootstrap/_badge.scss | 2 +- ui/scss/bootstrap/_breadcrumb.scss | 5 +- ui/scss/bootstrap/_button-group.scss | 2 +- ui/scss/bootstrap/_buttons.scss | 21 +++-- ui/scss/bootstrap/_card.scss | 65 +++++++-------- ui/scss/bootstrap/_carousel.scss | 12 +-- ui/scss/bootstrap/_close.scss | 5 +- ui/scss/bootstrap/_code.scss | 2 +- ui/scss/bootstrap/_custom-forms.scss | 33 ++++++-- ui/scss/bootstrap/_dropdown.scss | 9 +- ui/scss/bootstrap/_forms.scss | 35 ++++++-- ui/scss/bootstrap/_functions.scss | 65 +++++++++++++-- ui/scss/bootstrap/_grid.scss | 41 +++++++-- ui/scss/bootstrap/_images.scss | 4 +- ui/scss/bootstrap/_input-group.scss | 3 +- ui/scss/bootstrap/_list-group.scss | 67 ++++++++------- ui/scss/bootstrap/_mixins.scss | 6 +- ui/scss/bootstrap/_modal.scss | 42 ++++++---- ui/scss/bootstrap/_nav.scss | 7 +- ui/scss/bootstrap/_navbar.scss | 60 ++++++++++---- ui/scss/bootstrap/_pagination.scss | 5 +- ui/scss/bootstrap/_popover.scss | 17 ++-- ui/scss/bootstrap/_print.scss | 4 +- ui/scss/bootstrap/_progress.scss | 8 +- ui/scss/bootstrap/_reboot.scss | 49 +++++------ ui/scss/bootstrap/_root.scss | 1 + ui/scss/bootstrap/_spinners.scss | 1 + ui/scss/bootstrap/_tables.scss | 6 +- ui/scss/bootstrap/_type.scss | 4 +- ui/scss/bootstrap/_utilities.scss | 3 +- ui/scss/bootstrap/_variables.scss | 68 ++++++++++----- ui/scss/bootstrap/bootstrap-grid.scss | 6 +- ui/scss/bootstrap/bootstrap-reboot.scss | 6 +- ui/scss/bootstrap/bootstrap.scss | 6 +- .../bootstrap/mixins/_background-variant.scss | 8 +- ui/scss/bootstrap/mixins/_badge.scss | 2 +- ui/scss/bootstrap/mixins/_border-radius.scss | 39 ++++++--- ui/scss/bootstrap/mixins/_buttons.scss | 19 +++-- ui/scss/bootstrap/mixins/_caret.scss | 16 ++-- ui/scss/bootstrap/mixins/_float.scss | 6 +- ui/scss/bootstrap/mixins/_forms.scss | 83 ++++++++----------- ui/scss/bootstrap/mixins/_grid-framework.scss | 47 +++++++---- ui/scss/bootstrap/mixins/_grid.scss | 18 ++++ ui/scss/bootstrap/mixins/_hover.scss | 8 +- ui/scss/bootstrap/mixins/_image.scss | 2 +- ui/scss/bootstrap/mixins/_list-group.scss | 2 +- ui/scss/bootstrap/mixins/_lists.scss | 2 +- ui/scss/bootstrap/mixins/_nav-divider.scss | 3 +- ui/scss/bootstrap/mixins/_reset-text.scss | 2 +- ui/scss/bootstrap/mixins/_screen-reader.scss | 5 +- ui/scss/bootstrap/mixins/_table-row.scss | 2 +- ui/scss/bootstrap/mixins/_text-emphasis.scss | 5 +- ui/scss/bootstrap/mixins/_transition.scss | 26 ++++-- ui/scss/bootstrap/utilities/_background.scss | 4 +- .../bootstrap/utilities/_interactions.scss | 5 ++ ui/scss/bootstrap/utilities/_text.scss | 7 +- 56 files changed, 611 insertions(+), 370 deletions(-) create mode 100644 ui/scss/bootstrap/utilities/_interactions.scss diff --git a/ui/scss/bootstrap/_badge.scss b/ui/scss/bootstrap/_badge.scss index 2082f05..42c5d08 100644 --- a/ui/scss/bootstrap/_badge.scss +++ b/ui/scss/bootstrap/_badge.scss @@ -16,7 +16,7 @@ @include transition($badge-transition); @at-root a#{&} { - @include hover-focus { + @include hover-focus() { text-decoration: none; } } diff --git a/ui/scss/bootstrap/_breadcrumb.scss b/ui/scss/bootstrap/_breadcrumb.scss index be30950..a0cf7e2 100644 --- a/ui/scss/bootstrap/_breadcrumb.scss +++ b/ui/scss/bootstrap/_breadcrumb.scss @@ -3,12 +3,15 @@ flex-wrap: wrap; padding: $breadcrumb-padding-y $breadcrumb-padding-x; margin-bottom: $breadcrumb-margin-bottom; + @include font-size($breadcrumb-font-size); list-style: none; background-color: $breadcrumb-bg; @include border-radius($breadcrumb-border-radius); } .breadcrumb-item { + display: flex; + // The separator between breadcrumbs (by default, a forward-slash: "/") + .breadcrumb-item { padding-left: $breadcrumb-item-padding; @@ -17,7 +20,7 @@ display: inline-block; // Suppress underlining of the separator in modern browsers padding-right: $breadcrumb-item-padding; color: $breadcrumb-divider-color; - content: $breadcrumb-divider; + content: escape-svg($breadcrumb-divider); } } diff --git a/ui/scss/bootstrap/_button-group.scss b/ui/scss/bootstrap/_button-group.scss index d722002..da02d79 100644 --- a/ui/scss/bootstrap/_button-group.scss +++ b/ui/scss/bootstrap/_button-group.scss @@ -13,7 +13,7 @@ // Bring the hover, focused, and "active" buttons to the front to overlay // the borders properly - @include hover { + @include hover() { z-index: 1; } &:focus, diff --git a/ui/scss/bootstrap/_buttons.scss b/ui/scss/bootstrap/_buttons.scss index 2a7d94a..6ee24ba 100644 --- a/ui/scss/bootstrap/_buttons.scss +++ b/ui/scss/bootstrap/_buttons.scss @@ -10,6 +10,8 @@ font-weight: $btn-font-weight; color: $body-color; text-align: center; + text-decoration: if($link-decoration == none, null, none); + white-space: $btn-white-space; vertical-align: middle; user-select: none; background-color: transparent; @@ -17,7 +19,7 @@ @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); @include transition($btn-transition); - @include hover { + @include hover() { color: $body-color; text-decoration: none; } @@ -35,12 +37,16 @@ @include box-shadow(none); } - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active { - @include box-shadow($btn-active-box-shadow); + &:not(:disabled):not(.disabled) { + cursor: if($enable-pointer-cursor-for-buttons, pointer, null); - &:focus { - @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); + &:active, + &.active { + @include box-shadow($btn-active-box-shadow); + + &:focus { + @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); + } } } } @@ -79,7 +85,7 @@ fieldset:disabled a.btn { color: $link-color; text-decoration: $link-decoration; - @include hover { + @include hover() { color: $link-hover-color; text-decoration: $link-hover-decoration; } @@ -87,7 +93,6 @@ fieldset:disabled a.btn { &:focus, &.focus { text-decoration: $link-hover-decoration; - box-shadow: none; } &:disabled, diff --git a/ui/scss/bootstrap/_card.scss b/ui/scss/bootstrap/_card.scss index c6b67ce..fabe9f3 100644 --- a/ui/scss/bootstrap/_card.scss +++ b/ui/scss/bootstrap/_card.scss @@ -7,6 +7,7 @@ display: flex; flex-direction: column; min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 + height: $card-height; word-wrap: break-word; background-color: $card-bg; background-clip: border-box; @@ -18,15 +19,18 @@ margin-left: 0; } - > .list-group:first-child { - .list-group-item:first-child { - @include border-top-radius($card-border-radius); - } - } + > .list-group { + border-top: inherit; + border-bottom: inherit; - > .list-group:last-child { - .list-group-item:last-child { - @include border-bottom-radius($card-border-radius); + &:first-child { + border-top-width: 0; + @include border-top-radius($card-inner-border-radius); + } + + &:last-child { + border-bottom-width: 0; + @include border-bottom-radius($card-inner-border-radius); } } } @@ -35,6 +39,9 @@ // Enable `flex-grow: 1` for decks and groups so that card blocks take up // as much space as possible, ensuring footers are aligned to the bottom. flex: 1 1 auto; + // Workaround for the image size bug in IE + // See: https://github.com/twbs/bootstrap/pull/28855 + min-height: 1px; padding: $card-spacer-x; color: $card-color; } @@ -53,7 +60,7 @@ } .card-link { - @include hover { + @include hover() { text-decoration: none; } @@ -86,6 +93,7 @@ .card-footer { padding: $card-spacer-y $card-spacer-x; + color: $card-cap-color; background-color: $card-cap-bg; border-top: $card-border-width solid $card-border-color; @@ -121,19 +129,20 @@ padding: $card-img-overlay-padding; } -.card-img { +.card-img, +.card-img-top, +.card-img-bottom { + flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396 width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch - @include border-radius($card-inner-border-radius); } -// Card image caps +.card-img, .card-img-top { - width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch @include border-top-radius($card-inner-border-radius); } +.card-img, .card-img-bottom { - width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch @include border-bottom-radius($card-inner-border-radius); } @@ -141,23 +150,19 @@ // Card deck .card-deck { - display: flex; - flex-direction: column; - .card { margin-bottom: $card-deck-margin; } @include media-breakpoint-up(sm) { + display: flex; flex-flow: row wrap; margin-right: -$card-deck-margin; margin-left: -$card-deck-margin; .card { - display: flex; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 flex: 1 0 0%; - flex-direction: column; margin-right: $card-deck-margin; margin-bottom: 0; // Override the default margin-left: $card-deck-margin; @@ -171,9 +176,6 @@ // .card-group { - display: flex; - flex-direction: column; - // The child selector allows nested `.card` within `.card-group` // to display properly. > .card { @@ -181,6 +183,7 @@ } @include media-breakpoint-up(sm) { + display: flex; flex-flow: row wrap; // The child selector allows nested `.card` within `.card-group` // to display properly. @@ -262,27 +265,17 @@ > .card { overflow: hidden; - &:not(:first-of-type) { - .card-header:first-child { - @include border-radius(0); - } - - &:not(:last-of-type) { - border-bottom: 0; - @include border-radius(0); - } - } - - &:first-of-type { + &:not(:last-of-type) { border-bottom: 0; @include border-bottom-radius(0); } - &:last-of-type { + &:not(:first-of-type) { @include border-top-radius(0); } - .card-header { + > .card-header { + @include border-radius(0); margin-bottom: -$card-border-width; } } diff --git a/ui/scss/bootstrap/_carousel.scss b/ui/scss/bootstrap/_carousel.scss index 20ea04b..fb5e9f8 100644 --- a/ui/scss/bootstrap/_carousel.scss +++ b/ui/scss/bootstrap/_carousel.scss @@ -75,7 +75,7 @@ .active.carousel-item-right { z-index: 0; opacity: 0; - @include transition(0s $carousel-transition-duration opacity); + @include transition(opacity 0s $carousel-transition-duration); } } @@ -101,7 +101,7 @@ @include transition($carousel-control-transition); // Hover/focus state - @include hover-focus { + @include hover-focus() { color: $carousel-control-color; text-decoration: none; outline: 0; @@ -111,13 +111,13 @@ .carousel-control-prev { left: 0; @if $enable-gradients { - background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); + background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); } } .carousel-control-next { right: 0; @if $enable-gradients { - background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); + background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); } } @@ -130,10 +130,10 @@ background: no-repeat 50% / 100% 100%; } .carousel-control-prev-icon { - background-image: $carousel-control-prev-icon-bg; + background-image: escape-svg($carousel-control-prev-icon-bg); } .carousel-control-next-icon { - background-image: $carousel-control-next-icon-bg; + background-image: escape-svg($carousel-control-next-icon-bg); } diff --git a/ui/scss/bootstrap/_close.scss b/ui/scss/bootstrap/_close.scss index 5cc96f5..82e9593 100644 --- a/ui/scss/bootstrap/_close.scss +++ b/ui/scss/bootstrap/_close.scss @@ -8,13 +8,13 @@ opacity: .5; // Override 's hover style - @include hover { + @include hover() { color: $close-color; text-decoration: none; } &:not(:disabled):not(.disabled) { - @include hover-focus { + @include hover-focus() { opacity: .75; } } @@ -30,7 +30,6 @@ button.close { padding: 0; background-color: transparent; border: 0; - appearance: none; } // Future-proof disabling of clicks on `` elements diff --git a/ui/scss/bootstrap/_code.scss b/ui/scss/bootstrap/_code.scss index 74b6e1c..4bc117a 100644 --- a/ui/scss/bootstrap/_code.scss +++ b/ui/scss/bootstrap/_code.scss @@ -2,7 +2,7 @@ code { @include font-size($code-font-size); color: $code-color; - word-break: break-word; + word-wrap: break-word; // Streamline the style when inside anchors to avoid broken underline and more a > & { diff --git a/ui/scss/bootstrap/_custom-forms.scss b/ui/scss/bootstrap/_custom-forms.scss index 03f3fc5..0804c63 100644 --- a/ui/scss/bootstrap/_custom-forms.scss +++ b/ui/scss/bootstrap/_custom-forms.scss @@ -21,7 +21,10 @@ .custom-control-input { position: absolute; + left: 0; z-index: -1; // Put the input behind the label so it doesn't overlay text + width: $custom-control-indicator-size; + height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2; opacity: 0; &:checked ~ .custom-control-label::before { @@ -51,6 +54,8 @@ @include box-shadow($custom-control-indicator-active-box-shadow); } + // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247 + &[disabled], &:disabled { ~ .custom-control-label { color: $custom-control-label-disabled-color; @@ -69,7 +74,9 @@ .custom-control-label { position: relative; margin-bottom: 0; + color: $custom-control-label-color; vertical-align: top; + cursor: $custom-control-cursor; // Background-color and (when enabled) gradient &::before { @@ -111,7 +118,7 @@ .custom-control-input:checked ~ .custom-control-label { &::after { - background-image: $custom-checkbox-indicator-icon-checked; + background-image: escape-svg($custom-checkbox-indicator-icon-checked); } } @@ -122,7 +129,7 @@ @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow); } &::after { - background-image: $custom-checkbox-indicator-icon-indeterminate; + background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate); } } @@ -148,7 +155,7 @@ .custom-control-input:checked ~ .custom-control-label { &::after { - background-image: $custom-radio-indicator-icon-checked; + background-image: escape-svg($custom-radio-indicator-icon-checked); } } @@ -177,8 +184,8 @@ } &::after { - top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2}); - left: calc(#{-($custom-switch-width + $custom-control-gutter)} + #{$custom-control-indicator-border-width * 2}); + top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2); + left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2); width: $custom-switch-indicator-size; height: $custom-switch-indicator-size; background-color: $custom-control-indicator-border-color; @@ -220,8 +227,7 @@ line-height: $custom-select-line-height; color: $custom-select-color; vertical-align: middle; - background: $custom-select-background; - background-color: $custom-select-bg; + background: $custom-select-bg $custom-select-background; border: $custom-select-border-width solid $custom-select-border-color; @include border-radius($custom-select-border-radius, 0); @include box-shadow($custom-select-box-shadow); @@ -231,8 +237,9 @@ border-color: $custom-select-focus-border-color; outline: 0; @if $enable-shadows { - box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow; + @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow); } @else { + // Avoid using mixin so we can pass custom focus shadow properly box-shadow: $custom-select-focus-box-shadow; } @@ -263,6 +270,12 @@ &::-ms-expand { display: none; } + + // Remove outline from select box in FF + &:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 $custom-select-color; + } } .custom-select-sm { @@ -307,6 +320,8 @@ box-shadow: $custom-file-focus-box-shadow; } + // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247 + &[disabled] ~ .custom-file-label, &:disabled ~ .custom-file-label { background-color: $custom-file-disabled-bg; } @@ -365,7 +380,7 @@ .custom-range { width: 100%; - height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2}); + height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2); padding: 0; // Need to reset padding background-color: transparent; appearance: none; diff --git a/ui/scss/bootstrap/_dropdown.scss b/ui/scss/bootstrap/_dropdown.scss index ac3c8c8..2ab7536 100644 --- a/ui/scss/bootstrap/_dropdown.scss +++ b/ui/scss/bootstrap/_dropdown.scss @@ -10,7 +10,7 @@ white-space: nowrap; // Generate the caret automatically - @include caret; + @include caret(); } // The dropdown menu @@ -114,7 +114,7 @@ // Dividers (basically an `
`) within the dropdown .dropdown-divider { - @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y); + @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true); } // Links, buttons, and more within the dropdown menu @@ -128,6 +128,7 @@ font-weight: $font-weight-normal; color: $dropdown-link-color; text-align: inherit; // For `