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 `