diff --git a/assets/styles/bootstrap/_badge.scss b/assets/styles/bootstrap/_badge.scss index 2082f058..42c5d08d 100644 --- a/assets/styles/bootstrap/_badge.scss +++ b/assets/styles/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/assets/styles/bootstrap/_breadcrumb.scss b/assets/styles/bootstrap/_breadcrumb.scss index be309506..d748894f 100644 --- a/assets/styles/bootstrap/_breadcrumb.scss +++ b/assets/styles/bootstrap/_breadcrumb.scss @@ -3,6 +3,7 @@ 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); @@ -17,7 +18,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/assets/styles/bootstrap/_button-group.scss b/assets/styles/bootstrap/_button-group.scss index d7220029..da02d793 100644 --- a/assets/styles/bootstrap/_button-group.scss +++ b/assets/styles/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/assets/styles/bootstrap/_buttons.scss b/assets/styles/bootstrap/_buttons.scss index 2a7d94ad..e87d3393 100644 --- a/assets/styles/bootstrap/_buttons.scss +++ b/assets/styles/bootstrap/_buttons.scss @@ -10,14 +10,16 @@ font-weight: $btn-font-weight; color: $body-color; text-align: center; + white-space: $btn-white-space; vertical-align: middle; + cursor: if($enable-pointer-cursor-for-buttons, pointer, null); user-select: none; background-color: transparent; border: $btn-border-width solid transparent; @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; } @@ -79,7 +81,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; } diff --git a/assets/styles/bootstrap/_card.scss b/assets/styles/bootstrap/_card.scss index c6b67ce0..d6759fde 100644 --- a/assets/styles/bootstrap/_card.scss +++ b/assets/styles/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; @@ -35,6 +36,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 +57,7 @@ } .card-link { - @include hover { + @include hover() { text-decoration: none; } @@ -121,19 +125,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 +146,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 +172,6 @@ // .card-group { - display: flex; - flex-direction: column; - // The child selector allows nested `.card` within `.card-group` // to display properly. > .card { @@ -181,6 +179,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 +261,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/assets/styles/bootstrap/_carousel.scss b/assets/styles/bootstrap/_carousel.scss index 20ea04ba..fb5e9f85 100644 --- a/assets/styles/bootstrap/_carousel.scss +++ b/assets/styles/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/assets/styles/bootstrap/_close.scss b/assets/styles/bootstrap/_close.scss index 5cc96f57..071aebe8 100644 --- a/assets/styles/bootstrap/_close.scss +++ b/assets/styles/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; } } diff --git a/assets/styles/bootstrap/_code.scss b/assets/styles/bootstrap/_code.scss index 74b6e1c8..4bc117a9 100644 --- a/assets/styles/bootstrap/_code.scss +++ b/assets/styles/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/assets/styles/bootstrap/_custom-forms.scss b/assets/styles/bootstrap/_custom-forms.scss index 03f3fc5b..21e72da7 100644 --- a/assets/styles/bootstrap/_custom-forms.scss +++ b/assets/styles/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); @@ -263,6 +269,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 +319,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 +379,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/assets/styles/bootstrap/_dropdown.scss b/assets/styles/bootstrap/_dropdown.scss index ac3c8c8a..76f33a4f 100644 --- a/assets/styles/bootstrap/_dropdown.scss +++ b/assets/styles/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 @@ -144,7 +144,7 @@ } } - @include hover-focus { + @include hover-focus() { color: $dropdown-link-hover-color; text-decoration: none; @include gradient-bg($dropdown-link-hover-bg); diff --git a/assets/styles/bootstrap/_forms.scss b/assets/styles/bootstrap/_forms.scss index ec9c3355..b2edb7b2 100644 --- a/assets/styles/bootstrap/_forms.scss +++ b/assets/styles/bootstrap/_forms.scss @@ -30,8 +30,14 @@ border: 0; } + // Remove select outline from select box in FF + &:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 $input-color; + } + // Customize the `:focus` state to imitate native WebKit styles. - @include form-control-focus(); + @include form-control-focus($ignore-warning: true); // Placeholder &::placeholder { @@ -80,23 +86,23 @@ select.form-control { // For use with horizontal and inline forms, when you need the label (or legend) // text to align with the form controls. .col-form-label { - padding-top: calc(#{$input-padding-y} + #{$input-border-width}); - padding-bottom: calc(#{$input-padding-y} + #{$input-border-width}); + padding-top: add($input-padding-y, $input-border-width); + padding-bottom: add($input-padding-y, $input-border-width); margin-bottom: 0; // Override the `