diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss')
68 files changed, 1461 insertions, 678 deletions
diff --git a/vendor/twbs/bootstrap/scss/_alert.scss b/vendor/twbs/bootstrap/scss/_alert.scss index dd43e2376..da2a98af9 100644 --- a/vendor/twbs/bootstrap/scss/_alert.scss +++ b/vendor/twbs/bootstrap/scss/_alert.scss @@ -27,7 +27,7 @@ // 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: $close-font-size + $alert-padding-x * 2; // Adjust close link position .close { diff --git a/vendor/twbs/bootstrap/scss/_badge.scss b/vendor/twbs/bootstrap/scss/_badge.scss index b87a1b004..2082f058e 100644 --- a/vendor/twbs/bootstrap/scss/_badge.scss +++ b/vendor/twbs/bootstrap/scss/_badge.scss @@ -6,13 +6,20 @@ .badge { display: inline-block; padding: $badge-padding-y $badge-padding-x; - font-size: $badge-font-size; + @include font-size($badge-font-size); font-weight: $badge-font-weight; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; @include border-radius($badge-border-radius); + @include transition($badge-transition); + + @at-root a#{&} { + @include hover-focus { + text-decoration: none; + } + } // Empty badges collapse automatically &:empty { diff --git a/vendor/twbs/bootstrap/scss/_button-group.scss b/vendor/twbs/bootstrap/scss/_button-group.scss index 549517034..d7220029a 100644 --- a/vendor/twbs/bootstrap/scss/_button-group.scss +++ b/vendor/twbs/bootstrap/scss/_button-group.scss @@ -9,7 +9,7 @@ > .btn { position: relative; - flex: 0 1 auto; + flex: 1 1 auto; // Bring the hover, focused, and "active" buttons to the front to overlay // the borders properly @@ -22,14 +22,6 @@ z-index: 1; } } - - // Prevent double borders when buttons are next to each other - .btn + .btn, - .btn + .btn-group, - .btn-group + .btn, - .btn-group + .btn-group { - margin-left: -$btn-border-width; - } } // Optional: Group multiple button groups together for a toolbar @@ -44,8 +36,10 @@ } .btn-group { - > .btn:first-child { - margin-left: 0; + // Prevent double borders when buttons are next to each other + > .btn:not(:first-child), + > .btn-group:not(:first-child) { + margin-left: -$btn-border-width; } // Reset rounded corners @@ -119,17 +113,14 @@ align-items: flex-start; justify-content: center; - .btn, - .btn-group { + > .btn, + > .btn-group { width: 100%; } - > .btn + .btn, - > .btn + .btn-group, - > .btn-group + .btn, - > .btn-group + .btn-group { + > .btn:not(:first-child), + > .btn-group:not(:first-child) { margin-top: -$btn-border-width; - margin-left: 0; } // Reset rounded corners diff --git a/vendor/twbs/bootstrap/scss/_buttons.scss b/vendor/twbs/bootstrap/scss/_buttons.scss index 0a8eaa9b6..2a7d94ad2 100644 --- a/vendor/twbs/bootstrap/scss/_buttons.scss +++ b/vendor/twbs/bootstrap/scss/_buttons.scss @@ -6,17 +6,19 @@ .btn { display: inline-block; + font-family: $btn-font-family; font-weight: $btn-font-weight; + color: $body-color; text-align: center; - white-space: nowrap; vertical-align: middle; user-select: none; + background-color: transparent; border: $btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius); + @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); @include transition($btn-transition); - // Share hover and focus styles - @include hover-focus { + @include hover { + color: $body-color; text-decoration: none; } @@ -33,11 +35,6 @@ @include box-shadow(none); } - // Opinionated: add "hand" cursor to non-disabled .btn elements - &:not(:disabled):not(.disabled) { - cursor: pointer; - } - &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active { @include box-shadow($btn-active-box-shadow); @@ -80,19 +77,16 @@ fieldset:disabled a.btn { .btn-link { font-weight: $font-weight-normal; color: $link-color; - background-color: transparent; + text-decoration: $link-decoration; @include hover { color: $link-hover-color; text-decoration: $link-hover-decoration; - background-color: transparent; - border-color: transparent; } &:focus, &.focus { text-decoration: $link-hover-decoration; - border-color: transparent; box-shadow: none; } @@ -111,11 +105,11 @@ fieldset:disabled a.btn { // .btn-lg { - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); + @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); } .btn-sm { - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); + @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); } diff --git a/vendor/twbs/bootstrap/scss/_card.scss b/vendor/twbs/bootstrap/scss/_card.scss index 28d7e6244..c6b67ce05 100644 --- a/vendor/twbs/bootstrap/scss/_card.scss +++ b/vendor/twbs/bootstrap/scss/_card.scss @@ -6,7 +6,7 @@ position: relative; display: flex; flex-direction: column; - min-width: 0; + min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 word-wrap: break-word; background-color: $card-bg; background-clip: border-box; @@ -36,6 +36,7 @@ // as much space as possible, ensuring footers are aligned to the bottom. flex: 1 1 auto; padding: $card-spacer-x; + color: $card-color; } .card-title { @@ -43,7 +44,7 @@ } .card-subtitle { - margin-top: -($card-spacer-y / 2); + margin-top: -$card-spacer-y / 2; margin-bottom: 0; } @@ -68,6 +69,7 @@ .card-header { padding: $card-spacer-y $card-spacer-x; margin-bottom: 0; // Removes the default margin-bottom of <hN> + color: $card-cap-color; background-color: $card-cap-bg; border-bottom: $card-border-width solid $card-border-color; @@ -98,15 +100,15 @@ // .card-header-tabs { - margin-right: -($card-spacer-x / 2); + margin-right: -$card-spacer-x / 2; margin-bottom: -$card-spacer-y; - margin-left: -($card-spacer-x / 2); + margin-left: -$card-spacer-x / 2; border-bottom: 0; } .card-header-pills { - margin-right: -($card-spacer-x / 2); - margin-left: -($card-spacer-x / 2); + margin-right: -$card-spacer-x / 2; + margin-left: -$card-spacer-x / 2; } // Card image @@ -194,55 +196,35 @@ // Handle rounded corners @if $enable-rounded { - &:first-child { + &:not(:last-child) { @include border-right-radius(0); .card-img-top, .card-header { + // stylelint-disable-next-line property-blacklist border-top-right-radius: 0; } .card-img-bottom, .card-footer { + // stylelint-disable-next-line property-blacklist border-bottom-right-radius: 0; } } - &:last-child { + &:not(:first-child) { @include border-left-radius(0); .card-img-top, .card-header { + // stylelint-disable-next-line property-blacklist border-top-left-radius: 0; } .card-img-bottom, .card-footer { + // stylelint-disable-next-line property-blacklist border-bottom-left-radius: 0; } } - - &:only-child { - @include border-radius($card-border-radius); - - .card-img-top, - .card-header { - @include border-top-radius($card-border-radius); - } - .card-img-bottom, - .card-footer { - @include border-bottom-radius($card-border-radius); - } - } - - &:not(:first-child):not(:last-child):not(:only-child) { - @include border-radius(0); - - .card-img-top, - .card-img-bottom, - .card-header, - .card-footer { - @include border-radius(0); - } - } } } } @@ -277,25 +259,31 @@ // .accordion { - .card:not(:first-of-type):not(:last-of-type) { - border-bottom: 0; - border-radius: 0; - } + > .card { + overflow: hidden; - .card:not(:first-of-type) { - .card-header:first-child { - border-radius: 0; + &:not(:first-of-type) { + .card-header:first-child { + @include border-radius(0); + } + + &:not(:last-of-type) { + border-bottom: 0; + @include border-radius(0); + } } - } - .card:first-of-type { - border-bottom: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - } + &:first-of-type { + border-bottom: 0; + @include border-bottom-radius(0); + } - .card:last-of-type { - border-top-left-radius: 0; - border-top-right-radius: 0; + &:last-of-type { + @include border-top-radius(0); + } + + .card-header { + margin-bottom: -$card-border-width; + } } } diff --git a/vendor/twbs/bootstrap/scss/_carousel.scss b/vendor/twbs/bootstrap/scss/_carousel.scss index 91c23e5fc..20ea04baf 100644 --- a/vendor/twbs/bootstrap/scss/_carousel.scss +++ b/vendor/twbs/bootstrap/scss/_carousel.scss @@ -1,70 +1,55 @@ // Notes on the classes: // -// 1. The .carousel-item-left and .carousel-item-right is used to indicate where +// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically) +// even when their scroll action started on a carousel, but for compatibility (with Firefox) +// we're preventing all actions instead +// 2. The .carousel-item-left and .carousel-item-right is used to indicate where // the active slide is heading. -// 2. .active.carousel-item is the current slide. -// 3. .active.carousel-item-left and .active.carousel-item-right is the current +// 3. .active.carousel-item is the current slide. +// 4. .active.carousel-item-left and .active.carousel-item-right is the current // slide in its in-transition state. Only one of these occurs at a time. -// 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right +// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right // is the upcoming slide in transition. .carousel { position: relative; } +.carousel.pointer-event { + touch-action: pan-y; +} + .carousel-inner { position: relative; width: 100%; overflow: hidden; + @include clearfix(); } .carousel-item { position: relative; display: none; - align-items: center; + float: left; width: 100%; + margin-right: -100%; backface-visibility: hidden; - perspective: 1000px; + @include transition($carousel-transition); } .carousel-item.active, .carousel-item-next, .carousel-item-prev { display: block; - @include transition($carousel-transition); -} - -.carousel-item-next, -.carousel-item-prev { - position: absolute; - top: 0; -} - -.carousel-item-next.carousel-item-left, -.carousel-item-prev.carousel-item-right { - transform: translateX(0); - - @supports (transform-style: preserve-3d) { - transform: translate3d(0, 0, 0); - } } -.carousel-item-next, +.carousel-item-next:not(.carousel-item-left), .active.carousel-item-right { transform: translateX(100%); - - @supports (transform-style: preserve-3d) { - transform: translate3d(100%, 0, 0); - } } -.carousel-item-prev, +.carousel-item-prev:not(.carousel-item-right), .active.carousel-item-left { transform: translateX(-100%); - - @supports (transform-style: preserve-3d) { - transform: translate3d(-100%, 0, 0); - } } @@ -75,31 +60,22 @@ .carousel-fade { .carousel-item { opacity: 0; - transition-duration: .6s; transition-property: opacity; + transform: none; } .carousel-item.active, .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { + z-index: 1; opacity: 1; } .active.carousel-item-left, .active.carousel-item-right { + z-index: 0; opacity: 0; - } - - .carousel-item-next, - .carousel-item-prev, - .carousel-item.active, - .active.carousel-item-left, - .active.carousel-item-prev { - transform: translateX(0); - - @supports (transform-style: preserve-3d) { - transform: translate3d(0, 0, 0); - } + @include transition(0s $carousel-transition-duration opacity); } } @@ -113,6 +89,7 @@ position: absolute; top: 0; bottom: 0; + z-index: 1; // Use flex for alignment (1-3) display: flex; // 1. allow flex styles align-items: center; // 2. vertically center contents @@ -121,15 +98,14 @@ color: $carousel-control-color; text-align: center; opacity: $carousel-control-opacity; - // We can't have a transition here because WebKit cancels the carousel - // animation if you trip this while in the middle of another animation. + @include transition($carousel-control-transition); // Hover/focus state @include hover-focus { color: $carousel-control-color; text-decoration: none; outline: 0; - opacity: .9; + opacity: $carousel-control-hover-opacity; } } .carousel-control-prev { @@ -151,8 +127,7 @@ display: inline-block; width: $carousel-control-icon-width; height: $carousel-control-icon-width; - background: transparent no-repeat center center; - background-size: 100% 100%; + background: no-repeat 50% / 100% 100%; } .carousel-control-prev-icon { background-image: $carousel-control-prev-icon-bg; @@ -170,7 +145,7 @@ .carousel-indicators { position: absolute; right: 0; - bottom: 10px; + bottom: 0; left: 0; z-index: 15; display: flex; @@ -182,7 +157,7 @@ list-style: none; li { - position: relative; + box-sizing: content-box; flex: 0 1 auto; width: $carousel-indicator-width; height: $carousel-indicator-height; @@ -190,31 +165,17 @@ margin-left: $carousel-indicator-spacer; text-indent: -999px; cursor: pointer; - background-color: rgba($carousel-indicator-active-bg, .5); - - // Use pseudo classes to increase the hit area by 10px on top and bottom. - &::before { - position: absolute; - top: -10px; - left: 0; - display: inline-block; - width: 100%; - height: 10px; - content: ""; - } - &::after { - position: absolute; - bottom: -10px; - left: 0; - display: inline-block; - width: 100%; - height: 10px; - content: ""; - } + background-color: $carousel-indicator-active-bg; + background-clip: padding-box; + // Use transparent borders to increase the hit area by 10px on top and bottom. + border-top: $carousel-indicator-hit-area-height solid transparent; + border-bottom: $carousel-indicator-hit-area-height solid transparent; + opacity: .5; + @include transition($carousel-indicator-transition); } .active { - background-color: $carousel-indicator-active-bg; + opacity: 1; } } @@ -225,9 +186,9 @@ .carousel-caption { position: absolute; - right: ((100% - $carousel-caption-width) / 2); + right: (100% - $carousel-caption-width) / 2; bottom: 20px; - left: ((100% - $carousel-caption-width) / 2); + left: (100% - $carousel-caption-width) / 2; z-index: 10; padding-top: 20px; padding-bottom: 20px; diff --git a/vendor/twbs/bootstrap/scss/_close.scss b/vendor/twbs/bootstrap/scss/_close.scss index a0dd1e2af..5cc96f573 100644 --- a/vendor/twbs/bootstrap/scss/_close.scss +++ b/vendor/twbs/bootstrap/scss/_close.scss @@ -1,22 +1,22 @@ .close { float: right; - font-size: $close-font-size; + @include font-size($close-font-size); font-weight: $close-font-weight; line-height: 1; color: $close-color; text-shadow: $close-text-shadow; opacity: .5; - &:not(:disabled):not(.disabled) { + // Override <a>'s hover style + @include hover { + color: $close-color; + text-decoration: none; + } + &:not(:disabled):not(.disabled) { @include hover-focus { - color: $close-color; - text-decoration: none; opacity: .75; } - - // Opinionated: add "hand" cursor to non-disabled .close elements - cursor: pointer; } } @@ -25,11 +25,17 @@ // If you want the anchor version, it requires `href="#"`. // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile -// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type +// stylelint-disable-next-line selector-no-qualifying-type button.close { padding: 0; background-color: transparent; border: 0; - -webkit-appearance: none; + appearance: none; +} + +// Future-proof disabling of clicks on `<a>` elements + +// stylelint-disable-next-line selector-no-qualifying-type +a.close.disabled { + pointer-events: none; } -// stylelint-enable diff --git a/vendor/twbs/bootstrap/scss/_code.scss b/vendor/twbs/bootstrap/scss/_code.scss index 9b2e027f4..74b6e1c89 100644 --- a/vendor/twbs/bootstrap/scss/_code.scss +++ b/vendor/twbs/bootstrap/scss/_code.scss @@ -1,6 +1,6 @@ // Inline code code { - font-size: $code-font-size; + @include font-size($code-font-size); color: $code-color; word-break: break-word; @@ -13,7 +13,7 @@ code { // User input typically entered via keyboard kbd { padding: $kbd-padding-y $kbd-padding-x; - font-size: $kbd-font-size; + @include font-size($kbd-font-size); color: $kbd-color; background-color: $kbd-bg; @include border-radius($border-radius-sm); @@ -21,7 +21,7 @@ kbd { kbd { padding: 0; - font-size: 100%; + @include font-size(100%); font-weight: $nested-kbd-font-weight; @include box-shadow(none); } @@ -30,12 +30,12 @@ kbd { // Blocks of code pre { display: block; - font-size: $code-font-size; + @include font-size($code-font-size); color: $pre-color; // Account for some code outputs that place code tags in pre tags code { - font-size: inherit; + @include font-size(inherit); color: inherit; word-break: normal; } diff --git a/vendor/twbs/bootstrap/scss/_custom-forms.scss b/vendor/twbs/bootstrap/scss/_custom-forms.scss index 8348e261c..03f3fc5be 100644 --- a/vendor/twbs/bootstrap/scss/_custom-forms.scss +++ b/vendor/twbs/bootstrap/scss/_custom-forms.scss @@ -10,8 +10,8 @@ .custom-control { position: relative; display: block; - min-height: ($font-size-base * $line-height-base); - padding-left: $custom-control-gutter; + min-height: $font-size-base * $line-height-base; + padding-left: $custom-control-gutter + $custom-control-indicator-size; } .custom-control-inline { @@ -26,18 +26,28 @@ &:checked ~ .custom-control-label::before { color: $custom-control-indicator-checked-color; + border-color: $custom-control-indicator-checked-border-color; @include gradient-bg($custom-control-indicator-checked-bg); @include box-shadow($custom-control-indicator-checked-box-shadow); } &:focus ~ .custom-control-label::before { // the mixin is not used here to make sure there is feedback - box-shadow: $custom-control-indicator-focus-box-shadow; + @if $enable-shadows { + box-shadow: $input-box-shadow, $input-focus-box-shadow; + } @else { + box-shadow: $custom-control-indicator-focus-box-shadow; + } } - &:active ~ .custom-control-label::before { + &:focus:not(:checked) ~ .custom-control-label::before { + border-color: $custom-control-indicator-focus-border-color; + } + + &:not(:disabled):active ~ .custom-control-label::before { color: $custom-control-indicator-active-color; background-color: $custom-control-indicator-active-bg; + border-color: $custom-control-indicator-active-border-color; @include box-shadow($custom-control-indicator-active-box-shadow); } @@ -59,34 +69,33 @@ .custom-control-label { position: relative; margin-bottom: 0; + vertical-align: top; // Background-color and (when enabled) gradient &::before { position: absolute; - top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2); - left: -$custom-control-gutter; + top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2; + left: -($custom-control-gutter + $custom-control-indicator-size); display: block; width: $custom-control-indicator-size; height: $custom-control-indicator-size; pointer-events: none; content: ""; - user-select: none; background-color: $custom-control-indicator-bg; + border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width; @include box-shadow($custom-control-indicator-box-shadow); } // Foreground (icon) &::after { position: absolute; - top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2); - left: -$custom-control-gutter; + top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2; + left: -($custom-control-gutter + $custom-control-indicator-size); display: block; width: $custom-control-indicator-size; height: $custom-control-indicator-size; content: ""; - background-repeat: no-repeat; - background-position: center center; - background-size: $custom-control-indicator-bg-size; + background: no-repeat 50% / #{$custom-control-indicator-bg-size}; } } @@ -101,9 +110,6 @@ } .custom-control-input:checked ~ .custom-control-label { - &::before { - @include gradient-bg($custom-control-indicator-checked-bg); - } &::after { background-image: $custom-checkbox-indicator-icon-checked; } @@ -111,6 +117,7 @@ .custom-control-input:indeterminate ~ .custom-control-label { &::before { + border-color: $custom-checkbox-indicator-indeterminate-border-color; @include gradient-bg($custom-checkbox-indicator-indeterminate-bg); @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow); } @@ -135,15 +142,56 @@ .custom-radio { .custom-control-label::before { + // stylelint-disable-next-line property-blacklist border-radius: $custom-radio-indicator-border-radius; } .custom-control-input:checked ~ .custom-control-label { + &::after { + background-image: $custom-radio-indicator-icon-checked; + } + } + + .custom-control-input:disabled { + &:checked ~ .custom-control-label::before { + background-color: $custom-control-indicator-checked-disabled-bg; + } + } +} + + +// switches +// +// Tweak a few things for switches + +.custom-switch { + padding-left: $custom-switch-width + $custom-control-gutter; + + .custom-control-label { &::before { - @include gradient-bg($custom-control-indicator-checked-bg); + left: -($custom-switch-width + $custom-control-gutter); + width: $custom-switch-width; + pointer-events: all; + // stylelint-disable-next-line property-blacklist + border-radius: $custom-switch-indicator-border-radius; + } + + &::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}); + width: $custom-switch-indicator-size; + height: $custom-switch-indicator-size; + background-color: $custom-control-indicator-border-color; + // stylelint-disable-next-line property-blacklist + border-radius: $custom-switch-indicator-border-radius; + @include transition(transform .15s ease-in-out, $custom-forms-transition); } + } + + .custom-control-input:checked ~ .custom-control-label { &::after { - background-image: $custom-radio-indicator-icon-checked; + background-color: $custom-control-indicator-bg; + transform: translateX($custom-switch-width - $custom-control-indicator-size); } } @@ -166,17 +214,16 @@ width: 100%; height: $custom-select-height; padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; + font-family: $custom-select-font-family; + @include font-size($custom-select-font-size); + font-weight: $custom-select-font-weight; line-height: $custom-select-line-height; color: $custom-select-color; vertical-align: middle; - background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; - background-size: $custom-select-bg-size; + background: $custom-select-background; + background-color: $custom-select-bg; border: $custom-select-border-width solid $custom-select-border-color; - @if $enable-rounded { - border-radius: $custom-select-border-radius; - } @else { - border-radius: 0; - } + @include border-radius($custom-select-border-radius, 0); @include box-shadow($custom-select-box-shadow); appearance: none; @@ -214,22 +261,24 @@ // Hides the default caret in IE11 &::-ms-expand { - opacity: 0; + display: none; } } .custom-select-sm { height: $custom-select-height-sm; - padding-top: $custom-select-padding-y; - padding-bottom: $custom-select-padding-y; - font-size: $custom-select-font-size-sm; + padding-top: $custom-select-padding-y-sm; + padding-bottom: $custom-select-padding-y-sm; + padding-left: $custom-select-padding-x-sm; + @include font-size($custom-select-font-size-sm); } .custom-select-lg { height: $custom-select-height-lg; - padding-top: $custom-select-padding-y; - padding-bottom: $custom-select-padding-y; - font-size: $custom-select-font-size-lg; + padding-top: $custom-select-padding-y-lg; + padding-bottom: $custom-select-padding-y-lg; + padding-left: $custom-select-padding-x-lg; + @include font-size($custom-select-font-size-lg); } @@ -256,10 +305,6 @@ &:focus ~ .custom-file-label { border-color: $custom-file-focus-border-color; box-shadow: $custom-file-focus-box-shadow; - - &::after { - border-color: $custom-file-focus-border-color; - } } &:disabled ~ .custom-file-label { @@ -271,6 +316,10 @@ content: $value; } } + + ~ .custom-file-label[data-browse]::after { + content: attr(data-browse); + } } .custom-file-label { @@ -281,6 +330,8 @@ z-index: 1; height: $custom-file-height; padding: $custom-file-padding-y $custom-file-padding-x; + font-family: $custom-file-font-family; + font-weight: $custom-file-font-weight; line-height: $custom-file-line-height; color: $custom-file-color; background-color: $custom-file-bg; @@ -301,7 +352,7 @@ color: $custom-file-button-color; content: "Browse"; @include gradient-bg($custom-file-button-bg); - border-left: $custom-file-border-width solid $custom-file-border-color; + border-left: inherit; @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); } } @@ -314,14 +365,15 @@ .custom-range { width: 100%; - padding-left: 0; // Firefox specific + height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2}); + padding: 0; // Need to reset padding background-color: transparent; appearance: none; &:focus { outline: none; - // Pseudo-elements must be split across multiple rulesets to have an affect. + // Pseudo-elements must be split across multiple rulesets to have an effect. // No box-shadow() mixin for focus accessibility. &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } @@ -335,7 +387,7 @@ &::-webkit-slider-thumb { width: $custom-range-thumb-width; height: $custom-range-thumb-height; - margin-top: (($custom-range-track-height - $custom-range-thumb-height) / 2); // Webkit specific + margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific @include gradient-bg($custom-range-thumb-bg); border: $custom-range-thumb-border; @include border-radius($custom-range-thumb-border-radius); @@ -410,7 +462,7 @@ cursor: $custom-range-track-cursor; background-color: transparent; border-color: transparent; - border-width: ($custom-range-thumb-height * .5); + border-width: $custom-range-thumb-height / 2; @include box-shadow($custom-range-track-box-shadow); } @@ -424,6 +476,28 @@ background-color: $custom-range-track-bg; @include border-radius($custom-range-track-border-radius); } + + &:disabled { + &::-webkit-slider-thumb { + background-color: $custom-range-thumb-disabled-bg; + } + + &::-webkit-slider-runnable-track { + cursor: default; + } + + &::-moz-range-thumb { + background-color: $custom-range-thumb-disabled-bg; + } + + &::-moz-range-track { + cursor: default; + } + + &::-ms-thumb { + background-color: $custom-range-thumb-disabled-bg; + } + } } .custom-control-label::before, diff --git a/vendor/twbs/bootstrap/scss/_dropdown.scss b/vendor/twbs/bootstrap/scss/_dropdown.scss index ee6f65808..ac3c8c8a2 100644 --- a/vendor/twbs/bootstrap/scss/_dropdown.scss +++ b/vendor/twbs/bootstrap/scss/_dropdown.scss @@ -7,6 +7,8 @@ } .dropdown-toggle { + white-space: nowrap; + // Generate the caret automatically @include caret; } @@ -22,8 +24,8 @@ min-width: $dropdown-min-width; padding: $dropdown-padding-y 0; margin: $dropdown-spacer 0 0; // override default ul - font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues - color: $body-color; + @include font-size($dropdown-font-size); + color: $dropdown-color; text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) list-style: none; background-color: $dropdown-bg; @@ -33,9 +35,20 @@ @include box-shadow($dropdown-box-shadow); } -.dropdown-menu-right { - right: 0; - left: auto; +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .dropdown-menu#{$infix}-left { + right: auto; + left: 0; + } + + .dropdown-menu#{$infix}-right { + right: 0; + left: auto; + } + } } // Allow for dropdowns to go bottom up (aka, dropup-menu) @@ -88,7 +101,7 @@ } // When enabled Popper.js, reset basic dropdown position -// stylelint-disable no-duplicate-selectors +// stylelint-disable-next-line no-duplicate-selectors .dropdown-menu { &[x-placement^="top"], &[x-placement^="right"], @@ -98,11 +111,10 @@ bottom: auto; } } -// stylelint-enable no-duplicate-selectors // Dividers (basically an `<hr>`) within the dropdown .dropdown-divider { - @include nav-divider($dropdown-divider-bg); + @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y); } // Links, buttons, and more within the dropdown menu @@ -120,6 +132,18 @@ background-color: transparent; // For `<button>`s border: 0; // For `<button>`s + // Prevent dropdown overflow if there's no padding + // See https://github.com/twbs/bootstrap/pull/27703 + @if $dropdown-padding-y == 0 { + &:first-child { + @include border-top-radius($dropdown-inner-border-radius); + } + + &:last-child { + @include border-bottom-radius($dropdown-inner-border-radius); + } + } + @include hover-focus { color: $dropdown-link-hover-color; text-decoration: none; @@ -136,6 +160,7 @@ &.disabled, &:disabled { color: $dropdown-link-disabled-color; + pointer-events: none; background-color: transparent; // Remove CSS gradients if they're enabled @if $enable-gradients { @@ -153,7 +178,7 @@ display: block; padding: $dropdown-padding-y $dropdown-item-padding-x; margin-bottom: 0; // for use with heading elements - font-size: $font-size-sm; + @include font-size($font-size-sm); color: $dropdown-header-color; white-space: nowrap; // as with > li > a } diff --git a/vendor/twbs/bootstrap/scss/_forms.scss b/vendor/twbs/bootstrap/scss/_forms.scss index 5530630ed..ec9c33559 100644 --- a/vendor/twbs/bootstrap/scss/_forms.scss +++ b/vendor/twbs/bootstrap/scss/_forms.scss @@ -9,7 +9,9 @@ width: 100%; height: $input-height; padding: $input-padding-y $input-padding-x; - font-size: $font-size-base; + font-family: $input-font-family; + @include font-size($input-font-size); + font-weight: $input-font-weight; line-height: $input-line-height; color: $input-color; background-color: $input-bg; @@ -17,13 +19,7 @@ border: $input-border-width solid $input-border-color; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS. - @if $enable-rounded { - // Manually use the if/else instead of the mixin to account for iOS override - border-radius: $input-border-radius; - } @else { - // Otherwise undo the iOS default - border-radius: 0; - } + @include border-radius($input-border-radius, 0); @include box-shadow($input-box-shadow); @include transition($input-transition); @@ -87,21 +83,21 @@ select.form-control { padding-top: calc(#{$input-padding-y} + #{$input-border-width}); padding-bottom: calc(#{$input-padding-y} + #{$input-border-width}); margin-bottom: 0; // Override the `<label>/<legend>` default - font-size: inherit; // Override the `<legend>` default + @include font-size(inherit); // Override the `<legend>` default line-height: $input-line-height; } .col-form-label-lg { padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width}); padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width}); - font-size: $font-size-lg; + @include font-size($input-font-size-lg); line-height: $input-line-height-lg; } .col-form-label-sm { padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width}); padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width}); - font-size: $font-size-sm; + @include font-size($input-font-size-sm); line-height: $input-line-height-sm; } @@ -141,7 +137,7 @@ select.form-control { .form-control-sm { height: $input-height-sm; padding: $input-padding-y-sm $input-padding-x-sm; - font-size: $font-size-sm; + @include font-size($input-font-size-sm); line-height: $input-line-height-sm; @include border-radius($input-border-radius-sm); } @@ -149,12 +145,12 @@ select.form-control { .form-control-lg { height: $input-height-lg; padding: $input-padding-y-lg $input-padding-x-lg; - font-size: $font-size-lg; + @include font-size($input-font-size-lg); line-height: $input-line-height-lg; @include border-radius($input-border-radius-lg); } -// stylelint-disable no-duplicate-selectors +// stylelint-disable-next-line no-duplicate-selectors select.form-control { &[size], &[multiple] { @@ -165,7 +161,6 @@ select.form-control { textarea.form-control { height: auto; } -// stylelint-enable no-duplicate-selectors // Form groups // @@ -189,13 +184,13 @@ textarea.form-control { .form-row { display: flex; flex-wrap: wrap; - margin-right: -5px; - margin-left: -5px; + margin-right: -$form-grid-gutter-width / 2; + margin-left: -$form-grid-gutter-width / 2; > .col, > [class*="col-"] { - padding-right: 5px; - padding-left: 5px; + padding-right: $form-grid-gutter-width / 2; + padding-left: $form-grid-gutter-width / 2; } } @@ -247,8 +242,9 @@ textarea.form-control { // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for // server side validation. -@include form-validation-state("valid", $form-feedback-valid-color); -@include form-validation-state("invalid", $form-feedback-invalid-color); +@each $state, $data in $form-validation-states { + @include form-validation-state($state, map-get($data, color), map-get($data, icon)); +} // Inline forms // @@ -317,6 +313,7 @@ textarea.form-control { } .form-check-input { position: relative; + flex-shrink: 0; margin-top: 0; margin-right: $form-check-input-margin-x; margin-left: 0; diff --git a/vendor/twbs/bootstrap/scss/_functions.scss b/vendor/twbs/bootstrap/scss/_functions.scss index bf8be9aee..d2cc91d57 100644 --- a/vendor/twbs/bootstrap/scss/_functions.scss +++ b/vendor/twbs/bootstrap/scss/_functions.scss @@ -8,7 +8,7 @@ $prev-key: null; $prev-num: null; @each $key, $num in $map { - @if $prev-num == null { + @if $prev-num == null or unit($num) == "%" { // Do nothing } @else if not comparable($prev-num, $num) { @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; @@ -21,12 +21,12 @@ } // Starts at zero -// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0. -@mixin _assert-starts-at-zero($map) { +// Used to ensure the min-width of the lowest breakpoint starts at 0. +@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") { $values: map-values($map); $first-value: nth($values, 1); @if $first-value != 0 { - @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}."; + @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}."; } } @@ -49,7 +49,7 @@ } // Color contrast -@function color-yiq($color) { +@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) { $r: red($color); $g: green($color); $b: blue($color); @@ -57,9 +57,9 @@ $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; @if ($yiq >= $yiq-contrasted-threshold) { - @return $yiq-text-dark; + @return $dark; } @else { - @return $yiq-text-light; + @return $light; } } diff --git a/vendor/twbs/bootstrap/scss/_images.scss b/vendor/twbs/bootstrap/scss/_images.scss index 2bce02f63..cb9795e27 100644 --- a/vendor/twbs/bootstrap/scss/_images.scss +++ b/vendor/twbs/bootstrap/scss/_images.scss @@ -32,11 +32,11 @@ } .figure-img { - margin-bottom: ($spacer / 2); + margin-bottom: $spacer / 2; line-height: 1; } .figure-caption { - font-size: $figure-caption-font-size; + @include font-size($figure-caption-font-size); color: $figure-caption-color; } diff --git a/vendor/twbs/bootstrap/scss/_input-group.scss b/vendor/twbs/bootstrap/scss/_input-group.scss index 2ed5f3304..ac49f696c 100644 --- a/vendor/twbs/bootstrap/scss/_input-group.scss +++ b/vendor/twbs/bootstrap/scss/_input-group.scss @@ -12,6 +12,7 @@ width: 100%; > .form-control, + > .form-control-plaintext, > .custom-select, > .custom-file { position: relative; // For focus state's z-index @@ -75,6 +76,10 @@ .btn { position: relative; z-index: 2; + + &:focus { + z-index: 3; + } } .btn + .btn, @@ -99,7 +104,7 @@ align-items: center; padding: $input-padding-y $input-padding-x; margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom - font-size: $font-size-base; // Match inputs + @include font-size($input-font-size); // Match inputs font-weight: $font-weight-normal; line-height: $input-line-height; color: $input-group-addon-color; @@ -122,30 +127,45 @@ // Remix the default form control sizing classes into new ones for easier // manipulation. +.input-group-lg > .form-control:not(textarea), +.input-group-lg > .custom-select { + height: $input-height-lg; +} + .input-group-lg > .form-control, +.input-group-lg > .custom-select, .input-group-lg > .input-group-prepend > .input-group-text, .input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn, .input-group-lg > .input-group-append > .btn { - height: $input-height-lg; padding: $input-padding-y-lg $input-padding-x-lg; - font-size: $font-size-lg; + @include font-size($input-font-size-lg); line-height: $input-line-height-lg; @include border-radius($input-border-radius-lg); } +.input-group-sm > .form-control:not(textarea), +.input-group-sm > .custom-select { + height: $input-height-sm; +} + .input-group-sm > .form-control, +.input-group-sm > .custom-select, .input-group-sm > .input-group-prepend > .input-group-text, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-append > .btn { - height: $input-height-sm; padding: $input-padding-y-sm $input-padding-x-sm; - font-size: $font-size-sm; + @include font-size($input-font-size-sm); line-height: $input-line-height-sm; @include border-radius($input-border-radius-sm); } +.input-group-lg > .custom-select, +.input-group-sm > .custom-select { + padding-right: $custom-select-padding-x + $custom-select-indicator-padding; +} + // Prepend and append rounded corners // diff --git a/vendor/twbs/bootstrap/scss/_jumbotron.scss b/vendor/twbs/bootstrap/scss/_jumbotron.scss index 7966bba1e..bcd7dcad9 100644 --- a/vendor/twbs/bootstrap/scss/_jumbotron.scss +++ b/vendor/twbs/bootstrap/scss/_jumbotron.scss @@ -1,6 +1,7 @@ .jumbotron { padding: $jumbotron-padding ($jumbotron-padding / 2); margin-bottom: $jumbotron-padding; + color: $jumbotron-color; background-color: $jumbotron-bg; @include border-radius($border-radius-lg); diff --git a/vendor/twbs/bootstrap/scss/_list-group.scss b/vendor/twbs/bootstrap/scss/_list-group.scss index 9f145c1d3..3f80687ab 100644 --- a/vendor/twbs/bootstrap/scss/_list-group.scss +++ b/vendor/twbs/bootstrap/scss/_list-group.scss @@ -24,6 +24,7 @@ // Hover state @include hover-focus { + z-index: 1; // Place hover/focus items above their siblings for proper border styling color: $list-group-action-hover-color; text-decoration: none; background-color: $list-group-hover-bg; @@ -46,6 +47,7 @@ padding: $list-group-item-padding-y $list-group-item-padding-x; // Place the border on the list items and negative margin up for better styling margin-bottom: -$list-group-border-width; + color: $list-group-color; background-color: $list-group-bg; border: $list-group-border-width solid $list-group-border-color; @@ -58,14 +60,10 @@ @include border-bottom-radius($list-group-border-radius); } - @include hover-focus { - z-index: 1; // Place hover/active items above their siblings for proper border styling - text-decoration: none; - } - &.disabled, &:disabled { color: $list-group-disabled-color; + pointer-events: none; background-color: $list-group-disabled-bg; } @@ -79,6 +77,37 @@ } +// Horizontal +// +// Change the layout of list group items from vertical (default) to horizontal. + +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .list-group-horizontal#{$infix} { + flex-direction: row; + + .list-group-item { + margin-right: -$list-group-border-width; + margin-bottom: 0; + + &:first-child { + @include border-left-radius($list-group-border-radius); + @include border-top-right-radius(0); + } + + &:last-child { + margin-right: 0; + @include border-right-radius($list-group-border-radius); + @include border-bottom-left-radius(0); + } + } + } + } +} + + // Flush list items // // Remove borders and border-radius to keep list group items edge-to-edge. Most @@ -89,6 +118,10 @@ border-right: 0; border-left: 0; @include border-radius(0); + + &:last-child { + margin-bottom: -$list-group-border-width; + } } &:first-child { @@ -99,6 +132,7 @@ &:last-child { .list-group-item:last-child { + margin-bottom: 0; border-bottom: 0; } } diff --git a/vendor/twbs/bootstrap/scss/_mixins.scss b/vendor/twbs/bootstrap/scss/_mixins.scss index 871016666..cc957843f 100644 --- a/vendor/twbs/bootstrap/scss/_mixins.scss +++ b/vendor/twbs/bootstrap/scss/_mixins.scss @@ -2,6 +2,12 @@ // // Used in conjunction with global variables to enable certain theme features. +// Vendor +@import "vendor/rfs"; + +// Deprecate +@import "mixins/deprecate"; + // Utilities @import "mixins/breakpoints"; @import "mixins/hover"; diff --git a/vendor/twbs/bootstrap/scss/_modal.scss b/vendor/twbs/bootstrap/scss/_modal.scss index f20bb9d85..6b6770b32 100644 --- a/vendor/twbs/bootstrap/scss/_modal.scss +++ b/vendor/twbs/bootstrap/scss/_modal.scss @@ -18,11 +18,11 @@ .modal { position: fixed; top: 0; - right: 0; - bottom: 0; left: 0; z-index: $zindex-modal; display: none; + width: 100%; + height: 100%; overflow: hidden; // Prevent Chrome on Windows from adding a focus outline. For details, see // https://github.com/twbs/bootstrap/pull/10951. @@ -43,24 +43,58 @@ // When fading in the modal, animate it to slide down .modal.fade & { @include transition($modal-transition); - transform: translate(0, -25%); + transform: $modal-fade-transform; } .modal.show & { - transform: translate(0, 0); + transform: $modal-show-transform; + } +} + +.modal-dialog-scrollable { + display: flex; // IE10/11 + max-height: calc(100% - #{$modal-dialog-margin * 2}); + + .modal-content { + max-height: calc(100vh - #{$modal-dialog-margin * 2}); // IE10/11 + overflow: hidden; + } + + .modal-header, + .modal-footer { + flex-shrink: 0; + } + + .modal-body { + overflow-y: auto; } } .modal-dialog-centered { display: flex; align-items: center; - min-height: calc(100% - (#{$modal-dialog-margin} * 2)); + min-height: calc(100% - #{$modal-dialog-margin * 2}); // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11) &::before { display: block; // IE10 - height: calc(100vh - (#{$modal-dialog-margin} * 2)); + height: calc(100vh - #{$modal-dialog-margin * 2}); content: ""; } + + // Ensure `.modal-body` shows scrollbar (IE10/11) + &.modal-dialog-scrollable { + flex-direction: column; + justify-content: center; + height: 100%; + + .modal-content { + max-height: none; + } + + &::before { + content: none; + } + } } // Actual modal @@ -70,6 +104,7 @@ flex-direction: column; width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` // counteract the pointer-events: none; in the .modal-dialog + color: $modal-content-color; pointer-events: auto; background-color: $modal-content-bg; background-clip: padding-box; @@ -84,10 +119,10 @@ .modal-backdrop { position: fixed; top: 0; - right: 0; - bottom: 0; left: 0; z-index: $zindex-modal-backdrop; + width: 100vw; + height: 100vh; background-color: $modal-backdrop-bg; // Fade for backdrop @@ -108,7 +143,7 @@ .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) (-$modal-header-padding) (-$modal-header-padding) auto; + margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto; } } @@ -135,6 +170,7 @@ justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items padding: $modal-inner-padding; border-top: $modal-footer-border-width solid $modal-footer-border-color; + @include border-bottom-radius($modal-content-border-radius); // Easily place margin between footer elements > :not(:first-child) { margin-left: .25rem; } @@ -158,13 +194,20 @@ margin: $modal-dialog-margin-y-sm-up auto; } + .modal-dialog-scrollable { + max-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2}); + + .modal-content { + max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2}); + } + } + .modal-dialog-centered { - min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2)); + min-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2}); &::before { - height: calc(100vh - (#{$modal-dialog-margin-y-sm-up} * 2)); + height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2}); } - } .modal-content { @@ -172,9 +215,15 @@ } .modal-sm { max-width: $modal-sm; } - } @include media-breakpoint-up(lg) { - .modal-lg { max-width: $modal-lg; } + .modal-lg, + .modal-xl { + max-width: $modal-lg; + } +} + +@include media-breakpoint-up(xl) { + .modal-xl { max-width: $modal-xl; } } diff --git a/vendor/twbs/bootstrap/scss/_nav.scss b/vendor/twbs/bootstrap/scss/_nav.scss index fc82161e3..e5519b3a4 100644 --- a/vendor/twbs/bootstrap/scss/_nav.scss +++ b/vendor/twbs/bootstrap/scss/_nav.scss @@ -22,6 +22,8 @@ // Disabled state lightens text &.disabled { color: $nav-link-disabled-color; + pointer-events: none; + cursor: default; } } diff --git a/vendor/twbs/bootstrap/scss/_navbar.scss b/vendor/twbs/bootstrap/scss/_navbar.scss index 52de5050a..5c6e96399 100644 --- a/vendor/twbs/bootstrap/scss/_navbar.scss +++ b/vendor/twbs/bootstrap/scss/_navbar.scss @@ -44,7 +44,7 @@ padding-top: $navbar-brand-padding-y; padding-bottom: $navbar-brand-padding-y; margin-right: $navbar-padding-x; - font-size: $navbar-brand-font-size; + @include font-size($navbar-brand-font-size); line-height: inherit; white-space: nowrap; @@ -107,7 +107,7 @@ // Button for toggling the navbar when in its collapsed state .navbar-toggler { padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; - font-size: $navbar-toggler-font-size; + @include font-size($navbar-toggler-font-size); line-height: 1; background-color: transparent; // remove default button style border: $border-width solid transparent; // remove default button style @@ -116,11 +116,6 @@ @include hover-focus { text-decoration: none; } - - // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements - &:not(:disabled):not(.disabled) { - cursor: pointer; - } } // Keep as a separate element so folks can easily override it with another icon @@ -175,7 +170,7 @@ } .navbar-collapse { - display: flex !important; // stylelint-disable-line declaration-no-important + display: flex !important; // stylelint-disable-line declaration-no-important // Changes flex-bases to auto because of an IE10 bug flex-basis: auto; @@ -197,10 +192,10 @@ // Dark links against a light background .navbar-light { .navbar-brand { - color: $navbar-light-active-color; + color: $navbar-light-brand-color; @include hover-focus { - color: $navbar-light-active-color; + color: $navbar-light-brand-hover-color; } } @@ -249,10 +244,10 @@ // White links against a dark background .navbar-dark { .navbar-brand { - color: $navbar-dark-active-color; + color: $navbar-dark-brand-color; @include hover-focus { - color: $navbar-dark-active-color; + color: $navbar-dark-brand-hover-color; } } diff --git a/vendor/twbs/bootstrap/scss/_pagination.scss b/vendor/twbs/bootstrap/scss/_pagination.scss index 9349f3f90..b4345311d 100644 --- a/vendor/twbs/bootstrap/scss/_pagination.scss +++ b/vendor/twbs/bootstrap/scss/_pagination.scss @@ -27,11 +27,6 @@ outline: $pagination-focus-outline; box-shadow: $pagination-focus-box-shadow; } - - // Opinionated: add "hand" cursor to non-disabled .page-link elements - &:not(:disabled):not(.disabled) { - cursor: pointer; - } } .page-item { diff --git a/vendor/twbs/bootstrap/scss/_popover.scss b/vendor/twbs/bootstrap/scss/_popover.scss index 3ef5f628b..f205e6681 100644 --- a/vendor/twbs/bootstrap/scss/_popover.scss +++ b/vendor/twbs/bootstrap/scss/_popover.scss @@ -8,7 +8,7 @@ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); - font-size: $popover-font-size; + @include font-size($popover-font-size); // Allow breaking very long words so they don't overflow the popover's bounds word-wrap: break-word; background-color: $popover-bg; @@ -38,72 +38,63 @@ .bs-popover-top { margin-bottom: $popover-arrow-height; - .arrow { + > .arrow { bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); - } - .arrow::before, - .arrow::after { - border-width: $popover-arrow-height ($popover-arrow-width / 2) 0; - } - - .arrow::before { - bottom: 0; - border-top-color: $popover-arrow-outer-color; - } + &::before { + bottom: 0; + border-width: $popover-arrow-height ($popover-arrow-width / 2) 0; + border-top-color: $popover-arrow-outer-color; + } - .arrow::after { - bottom: $popover-border-width; - border-top-color: $popover-arrow-color; + &::after { + bottom: $popover-border-width; + border-width: $popover-arrow-height ($popover-arrow-width / 2) 0; + border-top-color: $popover-arrow-color; + } } } .bs-popover-right { margin-left: $popover-arrow-height; - .arrow { + > .arrow { left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); width: $popover-arrow-height; height: $popover-arrow-width; margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners - } - - .arrow::before, - .arrow::after { - border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0; - } - .arrow::before { - left: 0; - border-right-color: $popover-arrow-outer-color; - } + &::before { + left: 0; + border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0; + border-right-color: $popover-arrow-outer-color; + } - .arrow::after { - left: $popover-border-width; - border-right-color: $popover-arrow-color; + &::after { + left: $popover-border-width; + border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0; + border-right-color: $popover-arrow-color; + } } } .bs-popover-bottom { margin-top: $popover-arrow-height; - .arrow { + > .arrow { top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); - } - - .arrow::before, - .arrow::after { - border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2); - } - .arrow::before { - top: 0; - border-bottom-color: $popover-arrow-outer-color; - } + &::before { + top: 0; + border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2); + border-bottom-color: $popover-arrow-outer-color; + } - .arrow::after { - top: $popover-border-width; - border-bottom-color: $popover-arrow-color; + &::after { + top: $popover-border-width; + border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2); + border-bottom-color: $popover-arrow-color; + } } // This will remove the popover-header's border just below the arrow @@ -113,7 +104,7 @@ left: 50%; display: block; width: $popover-arrow-width; - margin-left: ($popover-arrow-width / -2); + margin-left: -$popover-arrow-width / 2; content: ""; border-bottom: $popover-border-width solid $popover-header-bg; } @@ -122,26 +113,23 @@ .bs-popover-left { margin-right: $popover-arrow-height; - .arrow { + > .arrow { right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1); width: $popover-arrow-height; height: $popover-arrow-width; margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners - } - - .arrow::before, - .arrow::after { - border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height; - } - .arrow::before { - right: 0; - border-left-color: $popover-arrow-outer-color; - } + &::before { + right: 0; + border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height; + border-left-color: $popover-arrow-outer-color; + } - .arrow::after { - right: $popover-border-width; - border-left-color: $popover-arrow-color; + &::after { + right: $popover-border-width; + border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height; + border-left-color: $popover-arrow-color; + } } } @@ -165,7 +153,7 @@ .popover-header { padding: $popover-header-padding-y $popover-header-padding-x; margin-bottom: 0; // Reset the default from Reboot - font-size: $font-size-base; + @include font-size($font-size-base); color: $popover-header-color; background-color: $popover-header-bg; border-bottom: $popover-border-width solid darken($popover-header-bg, 5%); diff --git a/vendor/twbs/bootstrap/scss/_print.scss b/vendor/twbs/bootstrap/scss/_print.scss index 1df948735..61b60b980 100644 --- a/vendor/twbs/bootstrap/scss/_print.scss +++ b/vendor/twbs/bootstrap/scss/_print.scss @@ -51,7 +51,7 @@ } pre, blockquote { - border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px + border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px page-break-inside: avoid; } diff --git a/vendor/twbs/bootstrap/scss/_progress.scss b/vendor/twbs/bootstrap/scss/_progress.scss index 0ac3e0c93..ab9ea0ffb 100644 --- a/vendor/twbs/bootstrap/scss/_progress.scss +++ b/vendor/twbs/bootstrap/scss/_progress.scss @@ -1,13 +1,16 @@ -@keyframes progress-bar-stripes { - from { background-position: $progress-height 0; } - to { background-position: 0 0; } +// Disable animation if transitions are disabled +@if $enable-transitions { + @keyframes progress-bar-stripes { + from { background-position: $progress-height 0; } + to { background-position: 0 0; } + } } .progress { display: flex; height: $progress-height; overflow: hidden; // force rounded corners by cropping it - font-size: $progress-font-size; + @include font-size($progress-font-size); background-color: $progress-bg; @include border-radius($progress-border-radius); @include box-shadow($progress-box-shadow); @@ -29,6 +32,12 @@ background-size: $progress-height $progress-height; } -.progress-bar-animated { - animation: progress-bar-stripes $progress-bar-animation-timing; +@if $enable-transitions { + .progress-bar-animated { + animation: progress-bar-stripes $progress-bar-animation-timing; + + @media (prefers-reduced-motion: reduce) { + animation: none; + } + } } diff --git a/vendor/twbs/bootstrap/scss/_reboot.scss b/vendor/twbs/bootstrap/scss/_reboot.scss index f297d095c..c55d42e44 100644 --- a/vendor/twbs/bootstrap/scss/_reboot.scss +++ b/vendor/twbs/bootstrap/scss/_reboot.scss @@ -14,9 +14,7 @@ // 2. Change the default font family in all browsers. // 3. Correct the line height in all browsers. // 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. -// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so -// we force a non-overlapping, non-auto-hiding scrollbar to counteract. -// 6. Change the default tap highlight to be completely transparent in iOS. +// 5. Change the default tap highlight to be completely transparent in iOS. *, *::before, @@ -28,36 +26,27 @@ html { font-family: sans-serif; // 2 line-height: 1.15; // 3 -webkit-text-size-adjust: 100%; // 4 - -ms-text-size-adjust: 100%; // 4 - -ms-overflow-style: scrollbar; // 5 - -webkit-tap-highlight-color: rgba($black, 0); // 6 + -webkit-tap-highlight-color: rgba($black, 0); // 5 } -// IE10+ doesn't honor `<meta name="viewport">` in some cases. -@at-root { - @-ms-viewport { - width: device-width; - } -} - -// stylelint-disable selector-list-comma-newline-after // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) +// TODO: remove in v5 +// stylelint-disable-next-line selector-list-comma-newline-after article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } -// stylelint-enable selector-list-comma-newline-after // Body // // 1. Remove the margin in all browsers. // 2. As a best practice, apply a default `background-color`. -// 3. Set an explicit initial text-align value so that we can later use the +// 3. Set an explicit initial text-align value so that we can later use // the `inherit` value on things like `<th>` elements. body { margin: 0; // 1 font-family: $font-family-base; - font-size: $font-size-base; + @include font-size($font-size-base); font-weight: $font-weight-base; line-height: $line-height-base; color: $body-color; @@ -95,12 +84,11 @@ hr { // // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top // margin for easier control within type scales as it avoids margin collapsing. -// stylelint-disable selector-list-comma-newline-after +// stylelint-disable-next-line selector-list-comma-newline-after h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: $headings-margin-bottom; } -// stylelint-enable selector-list-comma-newline-after // Reset margins on paragraphs // @@ -113,17 +101,19 @@ p { // Abbreviations // -// 1. Remove the bottom border in Firefox 39-. +// 1. Duplicate behavior to the data-* attribute for our tooltip plugin // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. // 3. Add explicit cursor to indicate changed behavior. -// 4. Duplicate behavior to the data-* attribute for our tooltip plugin +// 4. Remove the bottom border in Firefox 39-. +// 5. Prevent the text-decoration to be skipped. abbr[title], -abbr[data-original-title] { // 4 +abbr[data-original-title] { // 1 text-decoration: underline; // 2 text-decoration: underline dotted; // 2 cursor: help; // 3 - border-bottom: 0; // 1 + border-bottom: 0; // 4 + text-decoration-skip-ink: none; // 5 } address { @@ -159,19 +149,13 @@ blockquote { margin: 0 0 1rem; } -dfn { - font-style: italic; // Add the correct font style in Android 4.3- -} - -// stylelint-disable font-weight-notation b, strong { - font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari + font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari } -// stylelint-enable font-weight-notation small { - font-size: 80%; // Add the correct font size in all browsers + @include font-size(80%); // Add the correct font size in all browsers } // @@ -182,7 +166,7 @@ small { sub, sup { position: relative; - font-size: 75%; + @include font-size(75%); line-height: 0; vertical-align: baseline; } @@ -199,7 +183,6 @@ a { color: $link-color; text-decoration: $link-decoration; background-color: transparent; // Remove the gray background on active links in IE 10. - -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+. @include hover { color: $link-hover-color; @@ -237,7 +220,7 @@ code, kbd, samp { font-family: $font-family-monospace; - font-size: 1em; // Correct the odd `em` font sizing in all browsers. + @include font-size(1em); // Correct the odd `em` font sizing in all browsers. } pre { @@ -247,9 +230,6 @@ pre { margin-bottom: 1rem; // Don't allow content to break outside overflow: auto; - // We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so - // we force a non-overlapping, non-auto-hiding scrollbar to counteract. - -ms-overflow-style: scrollbar; } @@ -317,6 +297,7 @@ label { // // Details at https://github.com/twbs/bootstrap/issues/24093 button { + // stylelint-disable-next-line property-blacklist border-radius: 0; } @@ -336,7 +317,7 @@ optgroup, textarea { margin: 0; // Remove the margin in Firefox and Safari font-family: inherit; - font-size: inherit; + @include font-size(inherit); line-height: inherit; } @@ -350,16 +331,36 @@ select { text-transform: none; // Remove the inheritance of text transform in Firefox } +// Remove the inheritance of word-wrap in Safari. +// +// Details at https://github.com/twbs/bootstrap/issues/24990 +select { + word-wrap: normal; +} + + // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` // controls in Android 4. // 2. Correct the inability to style clickable types in iOS and Safari. button, -html [type="button"], // 1 +[type="button"], // 1 [type="reset"], [type="submit"] { -webkit-appearance: button; // 2 } +// Opinionated: add "hand" cursor to non-disabled button elements. +@if $enable-pointer-cursor-for-buttons { + button, + [type="button"], + [type="reset"], + [type="submit"] { + &:not(:disabled) { + cursor: pointer; + } + } +} + // Remove inner border and padding from Firefox, but don't restore the outline like Normalize. button::-moz-focus-inner, [type="button"]::-moz-focus-inner, @@ -415,7 +416,7 @@ legend { max-width: 100%; // 1 padding: 0; margin-bottom: .5rem; - font-size: 1.5rem; + @include font-size(1.5rem); line-height: inherit; color: inherit; // 2 white-space: normal; // 1 @@ -441,10 +442,9 @@ progress { } // -// Remove the inner padding and cancel buttons in Chrome and Safari on macOS. +// Remove the inner padding in Chrome and Safari on macOS. // -[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } diff --git a/vendor/twbs/bootstrap/scss/_spinners.scss b/vendor/twbs/bootstrap/scss/_spinners.scss new file mode 100644 index 000000000..364a5c1a6 --- /dev/null +++ b/vendor/twbs/bootstrap/scss/_spinners.scss @@ -0,0 +1,55 @@ +// +// Rotating border +// + +@keyframes spinner-border { + to { transform: rotate(360deg); } +} + +.spinner-border { + display: inline-block; + width: $spinner-width; + height: $spinner-height; + vertical-align: text-bottom; + border: $spinner-border-width solid currentColor; + border-right-color: transparent; + // stylelint-disable-next-line property-blacklist + border-radius: 50%; + animation: spinner-border .75s linear infinite; +} + +.spinner-border-sm { + width: $spinner-width-sm; + height: $spinner-height-sm; + border-width: $spinner-border-width-sm; +} + +// +// Growing circle +// + +@keyframes spinner-grow { + 0% { + transform: scale(0); + } + 50% { + opacity: 1; + } +} + +.spinner-grow { + display: inline-block; + width: $spinner-width; + height: $spinner-height; + vertical-align: text-bottom; + background-color: currentColor; + // stylelint-disable-next-line property-blacklist + border-radius: 50%; + opacity: 0; + animation: spinner-grow .75s linear infinite; +} + +.spinner-grow-sm { + width: $spinner-width-sm; + height: $spinner-height-sm; +} diff --git a/vendor/twbs/bootstrap/scss/_tables.scss b/vendor/twbs/bootstrap/scss/_tables.scss index 5fa6a8662..b7ab3d506 100644 --- a/vendor/twbs/bootstrap/scss/_tables.scss +++ b/vendor/twbs/bootstrap/scss/_tables.scss @@ -5,6 +5,7 @@ .table { width: 100%; margin-bottom: $spacer; + color: $table-color; background-color: $table-bg; // Reset for nesting within parents with `background-color`. th, @@ -22,10 +23,6 @@ tbody + tbody { border-top: (2 * $table-border-width) solid $table-border-color; } - - .table { - background-color: $body-bg; - } } @@ -56,7 +53,7 @@ thead { th, td { - border-bottom-width: (2 * $table-border-width); + border-bottom-width: 2 * $table-border-width; } } } @@ -88,6 +85,7 @@ .table-hover { tbody tr { @include hover { + color: $table-hover-color; background-color: $table-hover-bg; } } @@ -100,7 +98,7 @@ // inheritance to nested tables. @each $color, $value in $theme-colors { - @include table-row-variant($color, theme-color-level($color, -9)); + @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level)); } @include table-row-variant(active, $table-active-bg); @@ -152,6 +150,7 @@ &.table-hover { tbody tr { @include hover { + color: $table-dark-hover-color; background-color: $table-dark-hover-bg; } } @@ -175,7 +174,6 @@ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 // Prevent double border on horizontal scroll due to use of `display: block;` > .table-bordered { diff --git a/vendor/twbs/bootstrap/scss/_toasts.scss b/vendor/twbs/bootstrap/scss/_toasts.scss new file mode 100644 index 000000000..6aa5352a3 --- /dev/null +++ b/vendor/twbs/bootstrap/scss/_toasts.scss @@ -0,0 +1,44 @@ +.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); + + &:not(:last-child) { + margin-bottom: $toast-padding-x; + } + + &.showing { + opacity: 1; + } + + &.show { + display: block; + opacity: 1; + } + + &.hide { + display: none; + } +} + +.toast-header { + display: flex; + align-items: center; + padding: $toast-padding-y $toast-padding-x; + color: $toast-header-color; + background-color: $toast-header-background-color; + background-clip: padding-box; + border-bottom: $toast-border-width solid $toast-header-border-color; +} + +.toast-body { + padding: $toast-padding-x; // apply to both vertical and horizontal +} diff --git a/vendor/twbs/bootstrap/scss/_tooltip.scss b/vendor/twbs/bootstrap/scss/_tooltip.scss index 1286ebfcf..6b3aa62dd 100644 --- a/vendor/twbs/bootstrap/scss/_tooltip.scss +++ b/vendor/twbs/bootstrap/scss/_tooltip.scss @@ -7,7 +7,7 @@ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // So reset our font and text properties to avoid inheriting weird values. @include reset-text(); - font-size: $tooltip-font-size; + @include font-size($tooltip-font-size); // Allow breaking very long words so they don't overflow the tooltip's bounds word-wrap: break-word; opacity: 0; diff --git a/vendor/twbs/bootstrap/scss/_transitions.scss b/vendor/twbs/bootstrap/scss/_transitions.scss index c8d91e271..40be4d918 100644 --- a/vendor/twbs/bootstrap/scss/_transitions.scss +++ b/vendor/twbs/bootstrap/scss/_transitions.scss @@ -1,5 +1,3 @@ -// stylelint-disable selector-no-qualifying-type - .fade { @include transition($transition-fade); diff --git a/vendor/twbs/bootstrap/scss/_type.scss b/vendor/twbs/bootstrap/scss/_type.scss index 57d610f0c..f8ed09065 100644 --- a/vendor/twbs/bootstrap/scss/_type.scss +++ b/vendor/twbs/bootstrap/scss/_type.scss @@ -13,36 +13,36 @@ h1, h2, h3, h4, h5, h6, color: $headings-color; } -h1, .h1 { font-size: $h1-font-size; } -h2, .h2 { font-size: $h2-font-size; } -h3, .h3 { font-size: $h3-font-size; } -h4, .h4 { font-size: $h4-font-size; } -h5, .h5 { font-size: $h5-font-size; } -h6, .h6 { font-size: $h6-font-size; } +h1, .h1 { @include font-size($h1-font-size); } +h2, .h2 { @include font-size($h2-font-size); } +h3, .h3 { @include font-size($h3-font-size); } +h4, .h4 { @include font-size($h4-font-size); } +h5, .h5 { @include font-size($h5-font-size); } +h6, .h6 { @include font-size($h6-font-size); } .lead { - font-size: $lead-font-size; + @include font-size($lead-font-size); font-weight: $lead-font-weight; } // Type display classes .display-1 { - font-size: $display1-size; + @include font-size($display1-size); font-weight: $display1-weight; line-height: $display-line-height; } .display-2 { - font-size: $display2-size; + @include font-size($display2-size); font-weight: $display2-weight; line-height: $display-line-height; } .display-3 { - font-size: $display3-size; + @include font-size($display3-size); font-weight: $display3-weight; line-height: $display-line-height; } .display-4 { - font-size: $display4-size; + @include font-size($display4-size); font-weight: $display4-weight; line-height: $display-line-height; } @@ -66,7 +66,7 @@ hr { small, .small { - font-size: $small-font-size; + @include font-size($small-font-size); font-weight: $font-weight-normal; } @@ -104,22 +104,22 @@ mark, // Builds on `abbr` .initialism { - font-size: 90%; + @include font-size(90%); text-transform: uppercase; } // Blockquotes .blockquote { margin-bottom: $spacer; - font-size: $blockquote-font-size; + @include font-size($blockquote-font-size); } .blockquote-footer { display: block; - font-size: 80%; // back to default font-size + @include font-size($blockquote-small-font-size); color: $blockquote-small-color; &::before { - content: "\2014 \00A0"; // em dash, nbsp + content: "\2014\00A0"; // em dash, nbsp } } diff --git a/vendor/twbs/bootstrap/scss/_utilities.scss b/vendor/twbs/bootstrap/scss/_utilities.scss index 6c7a7cdd3..a5de31ba6 100644 --- a/vendor/twbs/bootstrap/scss/_utilities.scss +++ b/vendor/twbs/bootstrap/scss/_utilities.scss @@ -6,10 +6,12 @@ @import "utilities/embed"; @import "utilities/flex"; @import "utilities/float"; +@import "utilities/overflow"; @import "utilities/position"; @import "utilities/screenreaders"; @import "utilities/shadows"; @import "utilities/sizing"; +@import "utilities/stretched-link"; @import "utilities/spacing"; @import "utilities/text"; @import "utilities/visibility"; diff --git a/vendor/twbs/bootstrap/scss/_variables.scss b/vendor/twbs/bootstrap/scss/_variables.scss index 5cf118f03..d9e88df9a 100644 --- a/vendor/twbs/bootstrap/scss/_variables.scss +++ b/vendor/twbs/bootstrap/scss/_variables.scss @@ -3,10 +3,7 @@ // Variables should follow the `$component-state-property-size` formula for // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. - -// // Color system -// $white: #fff !default; $gray-100: #f8f9fa !default; @@ -37,7 +34,6 @@ $grays: map-merge( $grays ); - $blue: #007bff !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; @@ -105,18 +101,24 @@ $yiq-contrasted-threshold: 150 !default; $yiq-text-dark: $gray-900 !default; $yiq-text-light: $white !default; + // Options // // Quickly modify global styling by enabling or disabling optional features. -$enable-caret: true !default; -$enable-rounded: true !default; -$enable-shadows: false !default; -$enable-gradients: false !default; -$enable-transitions: true !default; -$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS -$enable-grid-classes: true !default; -$enable-print-styles: true !default; +$enable-caret: true !default; +$enable-rounded: true !default; +$enable-shadows: false !default; +$enable-gradients: false !default; +$enable-transitions: true !default; +$enable-prefers-reduced-motion-media-query: true !default; +$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS +$enable-grid-classes: true !default; +$enable-pointer-cursor-for-buttons: true !default; +$enable-print-styles: true !default; +$enable-responsive-font-sizes: false !default; +$enable-validation-icons: true !default; +$enable-deprecation-messages: true !default; // Spacing @@ -154,6 +156,7 @@ $sizes: map-merge( $sizes ); + // Body // // Settings for the `<body>` element. @@ -161,14 +164,17 @@ $sizes: map-merge( $body-bg: $white !default; $body-color: $gray-900 !default; + // Links // // Style anchor elements. -$link-color: theme-color("primary") !default; -$link-decoration: none !default; -$link-hover-color: darken($link-color, 15%) !default; -$link-hover-decoration: underline !default; +$link-color: theme-color("primary") !default; +$link-decoration: none !default; +$link-hover-color: darken($link-color, 15%) !default; +$link-hover-decoration: underline !default; +// Darken percentage for links with `.text-*` class (e.g. `.text-success`) +$emphasized-link-hover-darken-percentage: 15% !default; // Paragraphs // @@ -191,7 +197,7 @@ $grid-breakpoints: ( ) !default; @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); -@include _assert-starts-at-zero($grid-breakpoints); +@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints"); // Grid containers @@ -215,6 +221,7 @@ $container-max-widths: ( $grid-columns: 12 !default; $grid-gutter-width: 30px !default; + // Components // // Define common padding and border radius sizes and more. @@ -229,6 +236,8 @@ $border-radius: .25rem !default; $border-radius-lg: .3rem !default; $border-radius-sm: .2rem !default; +$rounded-pill: 50rem !default; + $box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default; $box-shadow: 0 .5rem 1rem rgba($black, .15) !default; $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; @@ -237,29 +246,44 @@ $component-active-color: $white !default; $component-active-bg: theme-color("primary") !default; $caret-width: .3em !default; +$caret-vertical-align: $caret-width * .85 !default; +$caret-spacing: $caret-width * .85 !default; $transition-base: all .2s ease-in-out !default; $transition-fade: opacity .15s linear !default; $transition-collapse: height .35s ease !default; +$embed-responsive-aspect-ratios: () !default; +// stylelint-disable-next-line scss/dollar-variable-default +$embed-responsive-aspect-ratios: join( + ( + (21 9), + (16 9), + (4 3), + (1 1), + ), + $embed-responsive-aspect-ratios +); -// Fonts +// Typography // // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case -$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto 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; $font-family-base: $font-family-sans-serif !default; // stylelint-enable value-keyword-case $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` -$font-size-lg: ($font-size-base * 1.25) !default; -$font-size-sm: ($font-size-base * .875) !default; +$font-size-lg: $font-size-base * 1.25 !default; +$font-size-sm: $font-size-base * .875 !default; +$font-weight-lighter: lighter !default; $font-weight-light: 300 !default; $font-weight-normal: 400 !default; $font-weight-bold: 700 !default; +$font-weight-bolder: bolder !default; $font-weight-base: $font-weight-normal !default; $line-height-base: 1.5 !default; @@ -271,11 +295,11 @@ $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; -$headings-margin-bottom: ($spacer / 2) !default; -$headings-font-family: inherit !default; +$headings-margin-bottom: $spacer / 2 !default; +$headings-font-family: null !default; $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; -$headings-color: inherit !default; +$headings-color: null !default; $display1-size: 6rem !default; $display2-size: 5.5rem !default; @@ -288,7 +312,7 @@ $display3-weight: 300 !default; $display4-weight: 300 !default; $display-line-height: $headings-line-height !default; -$lead-font-size: ($font-size-base * 1.25) !default; +$lead-font-size: $font-size-base * 1.25 !default; $lead-font-weight: 300 !default; $small-font-size: 80% !default; @@ -296,7 +320,8 @@ $small-font-size: 80% !default; $text-muted: $gray-600 !default; $blockquote-small-color: $gray-600 !default; -$blockquote-font-size: ($font-size-base * 1.25) !default; +$blockquote-small-font-size: $small-font-size !default; +$blockquote-font-size: $font-size-base * 1.25 !default; $hr-border-color: rgba($black, .1) !default; $hr-border-width: $border-width !default; @@ -322,33 +347,43 @@ $hr-margin-y: $spacer !default; $table-cell-padding: .75rem !default; $table-cell-padding-sm: .3rem !default; -$table-bg: transparent !default; +$table-color: $body-color !default; +$table-bg: null !default; $table-accent-bg: rgba($black, .05) !default; +$table-hover-color: $table-color !default; $table-hover-bg: rgba($black, .075) !default; $table-active-bg: $table-hover-bg !default; $table-border-width: $border-width !default; -$table-border-color: $gray-300 !default; +$table-border-color: $border-color !default; $table-head-bg: $gray-200 !default; $table-head-color: $gray-700 !default; -$table-dark-bg: $gray-900 !default; +$table-dark-color: $white !default; +$table-dark-bg: $gray-800 !default; $table-dark-accent-bg: rgba($white, .05) !default; +$table-dark-hover-color: $table-dark-color !default; $table-dark-hover-bg: rgba($white, .075) !default; -$table-dark-border-color: lighten($gray-900, 7.5%) !default; -$table-dark-color: $body-bg !default; +$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default; +$table-dark-color: $white !default; $table-striped-order: odd !default; $table-caption-color: $text-muted !default; +$table-bg-level: -9 !default; +$table-border-level: -6 !default; + + // Buttons + Forms // // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. $input-btn-padding-y: .375rem !default; $input-btn-padding-x: .75rem !default; +$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; @@ -357,10 +392,12 @@ $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-colo $input-btn-padding-y-sm: .25rem !default; $input-btn-padding-x-sm: .5rem !default; +$input-btn-font-size-sm: $font-size-sm !default; $input-btn-line-height-sm: $line-height-sm !default; $input-btn-padding-y-lg: .5rem !default; $input-btn-padding-x-lg: 1rem !default; +$input-btn-font-size-lg: $font-size-lg !default; $input-btn-line-height-lg: $line-height-lg !default; $input-btn-border-width: $border-width !default; @@ -372,14 +409,18 @@ $input-btn-border-width: $border-width !default; $btn-padding-y: $input-btn-padding-y !default; $btn-padding-x: $input-btn-padding-x !default; +$btn-font-family: $input-btn-font-family !default; +$btn-font-size: $input-btn-font-size !default; $btn-line-height: $input-btn-line-height !default; $btn-padding-y-sm: $input-btn-padding-y-sm !default; $btn-padding-x-sm: $input-btn-padding-x-sm !default; +$btn-font-size-sm: $input-btn-font-size-sm !default; $btn-line-height-sm: $input-btn-line-height-sm !default; $btn-padding-y-lg: $input-btn-padding-y-lg !default; $btn-padding-x-lg: $input-btn-padding-x-lg !default; +$btn-font-size-lg: $input-btn-font-size-lg !default; $btn-line-height-lg: $input-btn-line-height-lg !default; $btn-border-width: $input-btn-border-width !default; @@ -409,14 +450,19 @@ $label-margin-bottom: .5rem !default; $input-padding-y: $input-btn-padding-y !default; $input-padding-x: $input-btn-padding-x !default; +$input-font-family: $input-btn-font-family !default; +$input-font-size: $input-btn-font-size !default; +$input-font-weight: $font-weight-base !default; $input-line-height: $input-btn-line-height !default; $input-padding-y-sm: $input-btn-padding-y-sm !default; $input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-font-size-sm: $input-btn-font-size-sm !default; $input-line-height-sm: $input-btn-line-height-sm !default; $input-padding-y-lg: $input-btn-padding-y-lg !default; $input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-font-size-lg: $input-btn-font-size-lg !default; $input-line-height-lg: $input-btn-line-height-lg !default; $input-bg: $white !default; @@ -442,14 +488,13 @@ $input-plaintext-color: $body-color !default; $input-height-border: $input-border-width * 2 !default; -$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; -$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; +$input-height-inner: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default; +$input-height-inner-half: calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default; +$input-height-inner-quarter: calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default; -$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; -$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; - -$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; -$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; +$input-height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}) !default; +$input-height-sm: calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default; +$input-height-lg: calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default; $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; @@ -462,6 +507,7 @@ $form-check-input-margin-x: .25rem !default; $form-check-inline-margin-x: .75rem !default; $form-check-inline-input-margin-x: .3125rem !default; +$form-grid-gutter-width: 10px !default; $form-group-margin-bottom: 1rem !default; $input-group-addon-color: $input-color !default; @@ -470,64 +516,88 @@ $input-group-addon-border-color: $input-border-color !default; $custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; -$custom-control-gutter: 1.5rem !default; +$custom-control-gutter: .5rem !default; $custom-control-spacer-x: 1rem !default; $custom-control-indicator-size: 1rem !default; -$custom-control-indicator-bg: $gray-300 !default; +$custom-control-indicator-bg: $input-bg !default; + $custom-control-indicator-bg-size: 50% 50% !default; -$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; +$custom-control-indicator-box-shadow: $input-box-shadow !default; +$custom-control-indicator-border-color: $gray-500 !default; +$custom-control-indicator-border-width: $input-border-width !default; -$custom-control-indicator-disabled-bg: $gray-200 !default; +$custom-control-indicator-disabled-bg: $input-disabled-bg !default; $custom-control-label-disabled-color: $gray-600 !default; $custom-control-indicator-checked-color: $component-active-color !default; $custom-control-indicator-checked-bg: $component-active-bg !default; $custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default; $custom-control-indicator-checked-box-shadow: none !default; +$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default; -$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; +$custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default; +$custom-control-indicator-focus-border-color: $input-focus-border-color !default; $custom-control-indicator-active-color: $component-active-color !default; $custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default; $custom-control-indicator-active-box-shadow: none !default; +$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default; $custom-checkbox-indicator-border-radius: $border-radius !default; -$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; +$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; -$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; -$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-box-shadow: none !default; +$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; +$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; +$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e"), "#", "%23") !default; +$custom-checkbox-indicator-indeterminate-box-shadow: none !default; +$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default; $custom-radio-indicator-border-radius: 50% !default; -$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default; +$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default; -$custom-select-padding-y: .375rem !default; -$custom-select-padding-x: .75rem !default; +$custom-switch-width: $custom-control-indicator-size * 1.75 !default; +$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default; +$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default; + +$custom-select-padding-y: $input-padding-y !default; +$custom-select-padding-x: $input-padding-x !default; +$custom-select-font-family: $input-font-family !default; +$custom-select-font-size: $input-font-size !default; $custom-select-height: $input-height !default; $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator -$custom-select-line-height: $input-btn-line-height !default; +$custom-select-font-weight: $input-font-weight !default; +$custom-select-line-height: $input-line-height !default; $custom-select-color: $input-color !default; $custom-select-disabled-color: $gray-600 !default; $custom-select-bg: $input-bg !default; $custom-select-disabled-bg: $gray-200 !default; $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions $custom-select-indicator-color: $gray-800 !default; -$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-select-border-width: $input-btn-border-width !default; +$custom-select-indicator: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23") !default; +$custom-select-background: $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon) + +$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default; +$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default; +$custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default; + +$custom-select-border-width: $input-border-width !default; $custom-select-border-color: $input-border-color !default; $custom-select-border-radius: $border-radius !default; $custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default; $custom-select-focus-border-color: $input-focus-border-color !default; -$custom-select-focus-width: $input-btn-focus-width !default; -$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, .5) !default; +$custom-select-focus-width: $input-focus-width !default; +$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width $input-btn-focus-color !default; -$custom-select-font-size-sm: 75% !default; +$custom-select-padding-y-sm: $input-padding-y-sm !default; +$custom-select-padding-x-sm: $input-padding-x-sm !default; +$custom-select-font-size-sm: $input-font-size-sm !default; $custom-select-height-sm: $input-height-sm !default; -$custom-select-font-size-lg: 125% !default; +$custom-select-padding-y-lg: $input-padding-y-lg !default; +$custom-select-padding-x-lg: $input-padding-x-lg !default; +$custom-select-font-size-lg: $input-font-size-lg !default; $custom-select-height-lg: $input-height-lg !default; $custom-range-track-width: 100% !default; @@ -543,22 +613,25 @@ $custom-range-thumb-bg: $component-active-bg !default; $custom-range-thumb-border: 0 !default; $custom-range-thumb-border-radius: 1rem !default; $custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; -$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; -$custom-range-thumb-focus-box-shadow-width: $input-btn-focus-width !default; // For focus box shadow issue in IE/Edge +$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default; +$custom-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in IE/Edge $custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; +$custom-range-thumb-disabled-bg: $gray-500 !default; $custom-file-height: $input-height !default; $custom-file-height-inner: $input-height-inner !default; $custom-file-focus-border-color: $input-focus-border-color !default; -$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; +$custom-file-focus-box-shadow: $input-focus-box-shadow !default; $custom-file-disabled-bg: $input-disabled-bg !default; -$custom-file-padding-y: $input-btn-padding-y !default; -$custom-file-padding-x: $input-btn-padding-x !default; -$custom-file-line-height: $input-btn-line-height !default; +$custom-file-padding-y: $input-padding-y !default; +$custom-file-padding-x: $input-padding-x !default; +$custom-file-line-height: $input-line-height !default; +$custom-file-font-family: $input-font-family !default; +$custom-file-font-weight: $input-font-weight !default; $custom-file-color: $input-color !default; $custom-file-bg: $input-bg !default; -$custom-file-border-width: $input-btn-border-width !default; +$custom-file-border-width: $input-border-width !default; $custom-file-border-color: $input-border-color !default; $custom-file-border-radius: $input-border-radius !default; $custom-file-box-shadow: $input-box-shadow !default; @@ -570,40 +643,32 @@ $custom-file-text: ( // Form validation + $form-feedback-margin-top: $form-text-margin-top !default; $form-feedback-font-size: $small-font-size !default; $form-feedback-valid-color: theme-color("success") !default; $form-feedback-invalid-color: theme-color("danger") !default; +$form-feedback-icon-valid-color: $form-feedback-valid-color !default; +$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath 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'/%3e%3c/svg%3e"), "#", "%23") !default; +$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; +$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default; -// Dropdowns -// -// Dropdown menu container and contents. - -$dropdown-min-width: 10rem !default; -$dropdown-padding-y: .5rem !default; -$dropdown-spacer: .125rem !default; -$dropdown-bg: $white !default; -$dropdown-border-color: rgba($black, .15) !default; -$dropdown-border-radius: $border-radius !default; -$dropdown-border-width: $border-width !default; -$dropdown-divider-bg: $gray-200 !default; -$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; - -$dropdown-link-color: $gray-900 !default; -$dropdown-link-hover-color: darken($gray-900, 5%) !default; -$dropdown-link-hover-bg: $gray-100 !default; - -$dropdown-link-active-color: $component-active-color !default; -$dropdown-link-active-bg: $component-active-bg !default; - -$dropdown-link-disabled-color: $gray-600 !default; - -$dropdown-item-padding-y: .25rem !default; -$dropdown-item-padding-x: 1.5rem !default; - -$dropdown-header-color: $gray-600 !default; - +$form-validation-states: () !default; +// stylelint-disable-next-line scss/dollar-variable-default +$form-validation-states: map-merge( + ( + "valid": ( + "color": $form-feedback-valid-color, + "icon": $form-feedback-icon-valid + ), + "invalid": ( + "color": $form-feedback-invalid-color, + "icon": $form-feedback-icon-invalid + ), + ), + $form-validation-states +); // Z-index master list // @@ -618,6 +683,7 @@ $zindex-modal: 1050 !default; $zindex-popover: 1060 !default; $zindex-tooltip: 1070 !default; + // Navs $nav-link-padding-y: .5rem !default; @@ -637,18 +703,19 @@ $nav-pills-link-active-color: $component-active-color !default; $nav-pills-link-active-bg: $component-active-bg !default; $nav-divider-color: $gray-200 !default; -$nav-divider-margin-y: ($spacer / 2) !default; +$nav-divider-margin-y: $spacer / 2 !default; + // Navbar -$navbar-padding-y: ($spacer / 2) !default; +$navbar-padding-y: $spacer / 2 !default; $navbar-padding-x: $spacer !default; $navbar-nav-link-padding-x: .5rem !default; $navbar-brand-font-size: $font-size-lg !default; // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link -$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; +$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default; $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; @@ -661,16 +728,55 @@ $navbar-dark-color: rgba($white, .5) !default; $navbar-dark-hover-color: rgba($white, .75) !default; $navbar-dark-active-color: $white !default; $navbar-dark-disabled-color: rgba($white, .25) !default; -$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; $navbar-dark-toggler-border-color: rgba($white, .1) !default; $navbar-light-color: rgba($black, .5) !default; $navbar-light-hover-color: rgba($black, .7) !default; $navbar-light-active-color: rgba($black, .9) !default; $navbar-light-disabled-color: rgba($black, .3) !default; -$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default; $navbar-light-toggler-border-color: rgba($black, .1) !default; +$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; + + +// Dropdowns +// +// Dropdown menu container and contents. + +$dropdown-min-width: 10rem !default; +$dropdown-padding-y: .5rem !default; +$dropdown-spacer: .125rem !default; +$dropdown-font-size: $font-size-base !default; +$dropdown-color: $body-color !default; +$dropdown-bg: $white !default; +$dropdown-border-color: rgba($black, .15) !default; +$dropdown-border-radius: $border-radius !default; +$dropdown-border-width: $border-width !default; +$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; +$dropdown-divider-bg: $gray-200 !default; +$dropdown-divider-margin-y: $nav-divider-margin-y !default; +$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; + +$dropdown-link-color: $gray-900 !default; +$dropdown-link-hover-color: darken($gray-900, 5%) !default; +$dropdown-link-hover-bg: $gray-100 !default; + +$dropdown-link-active-color: $component-active-color !default; +$dropdown-link-active-bg: $component-active-bg !default; + +$dropdown-link-disabled-color: $gray-600 !default; + +$dropdown-item-padding-y: .25rem !default; +$dropdown-item-padding-x: 1.5rem !default; + +$dropdown-header-color: $gray-600 !default; + + // Pagination $pagination-padding-y: .5rem !default; @@ -705,6 +811,7 @@ $pagination-disabled-border-color: $gray-300 !default; // Jumbotron $jumbotron-padding: 2rem !default; +$jumbotron-color: null !default; $jumbotron-bg: $gray-200 !default; @@ -717,11 +824,13 @@ $card-border-radius: $border-radius !default; $card-border-color: rgba($black, .125) !default; $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; $card-cap-bg: rgba($black, .03) !default; +$card-cap-color: null !default; +$card-color: null !default; $card-bg: $white !default; $card-img-overlay-padding: 1.25rem !default; -$card-group-margin: ($grid-gutter-width / 2) !default; +$card-group-margin: $grid-gutter-width / 2 !default; $card-deck-margin: $card-group-margin !default; $card-columns-count: 3 !default; @@ -745,6 +854,14 @@ $tooltip-arrow-width: .8rem !default; $tooltip-arrow-height: .4rem !default; $tooltip-arrow-color: $tooltip-bg !default; +// Form tooltips must come after regular tooltips +$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: $line-height-base !default; +$form-feedback-tooltip-opacity: $tooltip-opacity !default; +$form-feedback-tooltip-border-radius: $tooltip-border-radius !default; + // Popovers @@ -772,6 +889,24 @@ $popover-arrow-color: $popover-bg !default; $popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; +// Toasts + +$toast-max-width: 350px !default; +$toast-padding-x: .75rem !default; +$toast-padding-y: .25rem !default; +$toast-font-size: .875rem !default; +$toast-color: null !default; +$toast-background-color: rgba($white, .85) !default; +$toast-border-width: 1px !default; +$toast-border-color: rgba(0, 0, 0, .1) !default; +$toast-border-radius: .25rem !default; +$toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !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; + + // Badges $badge-font-size: 75% !default; @@ -780,6 +915,9 @@ $badge-padding-y: .25em !default; $badge-padding-x: .4em !default; $badge-border-radius: $border-radius !default; +$badge-transition: $btn-transition !default; +$badge-focus-width: $input-btn-focus-width !default; + $badge-pill-padding-x: .6em !default; // Use a higher than normal value to ensure completely rounded edges when // customizing padding or font-size on labels. @@ -796,6 +934,7 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default; $modal-title-line-height: $line-height-base !default; +$modal-content-color: null !default; $modal-content-bg: $white !default; $modal-content-border-color: rgba($black, .2) !default; $modal-content-border-width: $border-width !default; @@ -805,16 +944,21 @@ $modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; $modal-backdrop-bg: $black !default; $modal-backdrop-opacity: .5 !default; -$modal-header-border-color: $gray-200 !default; +$modal-header-border-color: $border-color !default; $modal-footer-border-color: $modal-header-border-color !default; $modal-header-border-width: $modal-content-border-width !default; $modal-footer-border-width: $modal-header-border-width !default; -$modal-header-padding: 1rem !default; +$modal-header-padding-y: 1rem !default; +$modal-header-padding-x: 1rem !default; +$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility +$modal-xl: 1140px !default; $modal-lg: 800px !default; $modal-md: 500px !default; $modal-sm: 300px !default; +$modal-fade-transform: translate(0, -50px) !default; +$modal-show-transform: none !default; $modal-transition: transform .3s ease-out !default; @@ -837,7 +981,7 @@ $alert-color-level: 6 !default; // Progress bars $progress-height: 1rem !default; -$progress-font-size: ($font-size-base * .75) !default; +$progress-font-size: $font-size-base * .75 !default; $progress-bg: $gray-200 !default; $progress-border-radius: $border-radius !default; $progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default; @@ -846,8 +990,10 @@ $progress-bar-bg: theme-color("primary") !default; $progress-bar-animation-timing: 1s linear infinite !default; $progress-bar-transition: width .6s ease !default; + // List group +$list-group-color: null !default; $list-group-bg: $white !default; $list-group-border-color: rgba($black, .125) !default; $list-group-border-width: $border-width !default; @@ -905,24 +1051,40 @@ $breadcrumb-border-radius: $border-radius !default; // Carousel -$carousel-control-color: $white !default; -$carousel-control-width: 15% !default; -$carousel-control-opacity: .5 !default; +$carousel-control-color: $white !default; +$carousel-control-width: 15% !default; +$carousel-control-opacity: .5 !default; +$carousel-control-hover-opacity: .9 !default; +$carousel-control-transition: opacity .15s ease !default; + +$carousel-indicator-width: 30px !default; +$carousel-indicator-height: 3px !default; +$carousel-indicator-hit-area-height: 10px !default; +$carousel-indicator-spacer: 3px !default; +$carousel-indicator-active-bg: $white !default; +$carousel-indicator-transition: opacity .6s ease !default; + +$carousel-caption-width: 70% !default; +$carousel-caption-color: $white !default; + +$carousel-control-icon-width: 20px !default; -$carousel-indicator-width: 30px !default; -$carousel-indicator-height: 3px !default; -$carousel-indicator-spacer: 3px !default; -$carousel-indicator-active-bg: $white !default; +$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default; +$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default; -$carousel-caption-width: 70% !default; -$carousel-caption-color: $white !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-control-icon-width: 20px !default; -$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default; -$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default; +// Spinners -$carousel-transition: transform .6s ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) +$spinner-width: 2rem !default; +$spinner-height: $spinner-width !default; +$spinner-border-width: .25em !default; + +$spinner-width-sm: 1rem !default; +$spinner-height-sm: $spinner-width-sm !default; +$spinner-border-width-sm: .2em !default; // Close @@ -932,6 +1094,7 @@ $close-font-weight: $font-weight-bold !default; $close-color: $black !default; $close-text-shadow: 0 1px 0 $white !default; + // Code $code-font-size: 87.5% !default; @@ -947,6 +1110,14 @@ $pre-color: $gray-900 !default; $pre-scrollable-max-height: 340px !default; +// Utilities + +$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default; +$overflows: auto, hidden !default; +$positions: static, relative, absolute, fixed, sticky !default; + + // Printing + $print-page-size: a3 !default; $print-body-min-width: map-get($grid-breakpoints, "lg") !default; diff --git a/vendor/twbs/bootstrap/scss/bootstrap-grid.scss b/vendor/twbs/bootstrap/scss/bootstrap-grid.scss index 509171d4d..d5f92a16a 100644 --- a/vendor/twbs/bootstrap/scss/bootstrap-grid.scss +++ b/vendor/twbs/bootstrap/scss/bootstrap-grid.scss @@ -1,14 +1,10 @@ /*! - * Bootstrap Grid v4.1.3 (https://getbootstrap.com/) - * Copyright 2011-2018 The Bootstrap Authors - * Copyright 2011-2018 Twitter, Inc. + * Bootstrap Grid v4.3.1 (https://getbootstrap.com/) + * Copyright 2011-2019 The Bootstrap Authors + * Copyright 2011-2019 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ -@at-root { - @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix -} - html { box-sizing: border-box; -ms-overflow-style: scrollbar; @@ -30,3 +26,4 @@ html { @import "grid"; @import "utilities/display"; @import "utilities/flex"; +@import "utilities/spacing"; diff --git a/vendor/twbs/bootstrap/scss/bootstrap-reboot.scss b/vendor/twbs/bootstrap/scss/bootstrap-reboot.scss index 75baeb713..2983f3f6d 100644 --- a/vendor/twbs/bootstrap/scss/bootstrap-reboot.scss +++ b/vendor/twbs/bootstrap/scss/bootstrap-reboot.scss @@ -1,7 +1,7 @@ /*! - * Bootstrap Reboot v4.1.3 (https://getbootstrap.com/) - * Copyright 2011-2018 The Bootstrap Authors - * Copyright 2011-2018 Twitter, Inc. + * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/) + * Copyright 2011-2019 The Bootstrap Authors + * Copyright 2011-2019 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) */ diff --git a/vendor/twbs/bootstrap/scss/bootstrap.scss b/vendor/twbs/bootstrap/scss/bootstrap.scss index e3f76546b..9f15c2a8b 100644 --- a/vendor/twbs/bootstrap/scss/bootstrap.scss +++ b/vendor/twbs/bootstrap/scss/bootstrap.scss @@ -1,7 +1,7 @@ /*! - * Bootstrap v4.1.3 (https://getbootstrap.com/) - * Copyright 2011-2018 The Bootstrap Authors - * Copyright 2011-2018 Twitter, Inc. + * Bootstrap v4.3.1 (https://getbootstrap.com/) + * Copyright 2011-2019 The Bootstrap Authors + * Copyright 2011-2019 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ @@ -34,9 +34,11 @@ @import "media"; @import "list-group"; @import "close"; +@import "toasts"; @import "modal"; @import "tooltip"; @import "popover"; @import "carousel"; +@import "spinners"; @import "utilities"; @import "print"; diff --git a/vendor/twbs/bootstrap/scss/mixins/_badge.scss b/vendor/twbs/bootstrap/scss/mixins/_badge.scss index eeca0b40d..64b29cb57 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_badge.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_badge.scss @@ -2,11 +2,16 @@ color: color-yiq($bg); background-color: $bg; - &[href] { + @at-root a#{&} { @include hover-focus { color: color-yiq($bg); - text-decoration: none; background-color: darken($bg, 10%); } + + &:focus, + &.focus { + outline: 0; + box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5); + } } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_border-radius.scss b/vendor/twbs/bootstrap/scss/mixins/_border-radius.scss index 2024febcf..88aeb37d8 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_border-radius.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_border-radius.scss @@ -1,9 +1,13 @@ +// stylelint-disable property-blacklist // Single side border-radius -@mixin border-radius($radius: $border-radius) { +@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { @if $enable-rounded { border-radius: $radius; } + @else if $fallback-border-radius != false { + border-radius: $fallback-border-radius; + } } @mixin border-top-radius($radius) { @@ -33,3 +37,27 @@ border-bottom-left-radius: $radius; } } + +@mixin border-top-left-radius($radius) { + @if $enable-rounded { + border-top-left-radius: $radius; + } +} + +@mixin border-top-right-radius($radius) { + @if $enable-rounded { + border-top-right-radius: $radius; + } +} + +@mixin border-bottom-right-radius($radius) { + @if $enable-rounded { + border-bottom-right-radius: $radius; + } +} + +@mixin border-bottom-left-radius($radius) { + @if $enable-rounded { + border-bottom-left-radius: $radius; + } +} diff --git a/vendor/twbs/bootstrap/scss/mixins/_box-shadow.scss b/vendor/twbs/bootstrap/scss/mixins/_box-shadow.scss index b2410e53a..0726d4359 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_box-shadow.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_box-shadow.scss @@ -1,5 +1,20 @@ @mixin box-shadow($shadow...) { @if $enable-shadows { - box-shadow: $shadow; + $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"); + } + } + } + @if (length($result) > 0) { + box-shadow: $result; + } } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss b/vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss index 59f25a27e..23a5de96b 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_breakpoints.scss @@ -16,7 +16,7 @@ // md @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { $n: index($breakpoint-names, $name); - @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); + @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); } // Minimum breakpoint width. Null for the smallest (first) breakpoint. @@ -39,7 +39,7 @@ // 767.98px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); - @return if($next, breakpoint-min($next, $breakpoints) - .02px, null); + @return if($next, breakpoint-min($next, $breakpoints) - .02, null); } // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. diff --git a/vendor/twbs/bootstrap/scss/mixins/_buttons.scss b/vendor/twbs/bootstrap/scss/mixins/_buttons.scss index 06ad6772f..eee903f83 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_buttons.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_buttons.scss @@ -19,9 +19,9 @@ &.focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { - box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); + box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); } @else { - box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); + box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); } } @@ -31,6 +31,10 @@ color: color-yiq($background); background-color: $background; border-color: $border; + // Remove CSS gradients if they're enabled + @if $enable-gradients { + background-image: none; + } } &:not(:disabled):not(.disabled):active, @@ -45,10 +49,10 @@ &:focus { // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows { - box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); + @if $enable-shadows and $btn-active-box-shadow != none { + box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); } @else { - box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); + box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); } } } @@ -56,11 +60,9 @@ @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { color: $color; - background-color: transparent; - background-image: none; border-color: $color; - &:hover { + @include hover { color: $color-hover; background-color: $active-background; border-color: $active-border; @@ -98,12 +100,8 @@ // Button sizes @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { padding: $padding-y $padding-x; - font-size: $font-size; + @include font-size($font-size); line-height: $line-height; // Manually declare to provide an override to the browser default - @if $enable-rounded { - border-radius: $border-radius; - } @else { - border-radius: 0; - } + @include border-radius($border-radius, 0); } diff --git a/vendor/twbs/bootstrap/scss/mixins/_caret.scss b/vendor/twbs/bootstrap/scss/mixins/_caret.scss index 82aea4210..8ecef65b4 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_caret.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_caret.scss @@ -29,10 +29,8 @@ @if $enable-caret { &::after { display: inline-block; - width: 0; - height: 0; - margin-left: $caret-width * .85; - vertical-align: $caret-width * .85; + margin-left: $caret-spacing; + vertical-align: $caret-vertical-align; content: ""; @if $direction == down { @include caret-down; @@ -50,10 +48,8 @@ &::before { display: inline-block; - width: 0; - height: 0; - margin-right: $caret-width * .85; - vertical-align: $caret-width * .85; + margin-right: $caret-spacing; + vertical-align: $caret-vertical-align; content: ""; @include caret-left; } diff --git a/vendor/twbs/bootstrap/scss/mixins/_deprecate.scss b/vendor/twbs/bootstrap/scss/mixins/_deprecate.scss new file mode 100644 index 000000000..df070bc59 --- /dev/null +++ b/vendor/twbs/bootstrap/scss/mixins/_deprecate.scss @@ -0,0 +1,10 @@ +// Deprecate mixin +// +// This mixin can be used to deprecate mixins or functions. +// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to +// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap) +@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) { + @if ($enable-deprecation-messages != false and $ignore-warning != true) { + @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}."; + } +} diff --git a/vendor/twbs/bootstrap/scss/mixins/_float.scss b/vendor/twbs/bootstrap/scss/mixins/_float.scss index 48fa8b6d5..adff88e79 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_float.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_float.scss @@ -2,10 +2,13 @@ @mixin float-left { float: left !important; + @include deprecate("The `float-left` mixin", "v4.3.0", "v5"); } @mixin float-right { float: right !important; + @include deprecate("The `float-right` mixin", "v4.3.0", "v5"); } @mixin float-none { float: none !important; + @include deprecate("The `float-none` mixin", "v4.3.0", "v5"); } diff --git a/vendor/twbs/bootstrap/scss/mixins/_forms.scss b/vendor/twbs/bootstrap/scss/mixins/_forms.scss index 3a6187869..ea8a91a02 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_forms.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_forms.scss @@ -26,12 +26,12 @@ } -@mixin form-validation-state($state, $color) { +@mixin form-validation-state($state, $color, $icon) { .#{$state}-feedback { display: none; width: 100%; margin-top: $form-feedback-margin-top; - font-size: $form-feedback-font-size; + @include font-size($form-feedback-font-size); color: $color; } @@ -41,21 +41,61 @@ z-index: 5; display: none; max-width: 100%; // Contain to parent when possible - padding: $tooltip-padding-y $tooltip-padding-x; + padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x; margin-top: .1rem; - font-size: $tooltip-font-size; - line-height: $line-height-base; + @include font-size($form-feedback-tooltip-font-size); + line-height: $form-feedback-tooltip-line-height; color: color-yiq($color); - background-color: rgba($color, $tooltip-opacity); - @include border-radius($tooltip-border-radius); + background-color: rgba($color, $form-feedback-tooltip-opacity); + @include border-radius($form-feedback-tooltip-border-radius); + } + + .form-control { + .was-validated &:#{$state}, + &.is-#{$state} { + border-color: $color; + + @if $enable-validation-icons { + padding-right: $input-height-inner; + background-image: $icon; + background-repeat: no-repeat; + background-position: center right $input-height-inner-quarter; + background-size: $input-height-inner-half $input-height-inner-half; + } + + &:focus { + border-color: $color; + box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + } + + ~ .#{$state}-feedback, + ~ .#{$state}-tooltip { + display: block; + } + } + } + + // stylelint-disable-next-line selector-no-qualifying-type + textarea.form-control { + .was-validated &:#{$state}, + &.is-#{$state} { + @if $enable-validation-icons { + padding-right: $input-height-inner; + background-position: top $input-height-inner-quarter right $input-height-inner-quarter; + } + } } - .form-control, .custom-select { .was-validated &:#{$state}, &.is-#{$state} { border-color: $color; + @if $enable-validation-icons { + padding-right: $custom-select-feedback-icon-padding-right; + background: $custom-select-background, $icon $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size; + } + &:focus { border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); @@ -68,6 +108,7 @@ } } + .form-control-file { .was-validated &:#{$state}, &.is-#{$state} { @@ -99,7 +140,7 @@ color: $color; &::before { - background-color: lighten($color, 25%); + border-color: $color; } } @@ -110,13 +151,18 @@ &:checked { ~ .custom-control-label::before { + border-color: lighten($color, 10%); @include gradient-bg(lighten($color, 10%)); } } &:focus { ~ .custom-control-label::before { - box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + } + + &:not(:checked) ~ .custom-control-label::before { + border-color: $color; } } } @@ -128,8 +174,6 @@ &.is-#{$state} { ~ .custom-file-label { border-color: $color; - - &::after { border-color: inherit; } } ~ .#{$state}-feedback, @@ -139,6 +183,7 @@ &:focus { ~ .custom-file-label { + border-color: $color; box-shadow: 0 0 0 $input-focus-width rgba($color, .25); } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss b/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss index 7b37f868f..649c28bf7 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_grid-framework.scss @@ -8,9 +8,8 @@ %grid-column { position: relative; width: 100%; - min-height: 1px; // Prevent columns from collapsing when empty - padding-right: ($gutter / 2); - padding-left: ($gutter / 2); + padding-right: $gutter / 2; + padding-left: $gutter / 2; } @each $breakpoint in map-keys($breakpoints) { @@ -37,7 +36,7 @@ .col#{$infix}-auto { flex: 0 0 auto; width: auto; - max-width: none; // Reset earlier grid tiers + max-width: 100%; // Reset earlier grid tiers } @for $i from 1 through $columns { diff --git a/vendor/twbs/bootstrap/scss/mixins/_grid.scss b/vendor/twbs/bootstrap/scss/mixins/_grid.scss index b75ebcbca..924eb0cfc 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_grid.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_grid.scss @@ -2,10 +2,10 @@ // // Generate semantic grid columns with these mixins. -@mixin make-container() { +@mixin make-container($gutter: $grid-gutter-width) { width: 100%; - padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-right: $gutter / 2; + padding-left: $gutter / 2; margin-right: auto; margin-left: auto; } @@ -20,22 +20,21 @@ } } -@mixin make-row() { +@mixin make-row($gutter: $grid-gutter-width) { display: flex; flex-wrap: wrap; - margin-right: ($grid-gutter-width / -2); - margin-left: ($grid-gutter-width / -2); + margin-right: -$gutter / 2; + margin-left: -$gutter / 2; } -@mixin make-col-ready() { +@mixin make-col-ready($gutter: $grid-gutter-width) { position: relative; // Prevent columns from becoming too narrow when at smaller grid tiers by // always setting `width: 100%;`. This works because we use `flex` values // later on to override this initial width. width: 100%; - min-height: 1px; // Prevent collapsing - padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-right: $gutter / 2; + padding-left: $gutter / 2; } @mixin make-col($size, $columns: $grid-columns) { diff --git a/vendor/twbs/bootstrap/scss/mixins/_image.scss b/vendor/twbs/bootstrap/scss/mixins/_image.scss index 0544f0d2a..a76a6082b 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_image.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_image.scss @@ -20,7 +20,6 @@ // // Short retina mixin for setting background-image and -size. -// stylelint-disable indentation, media-query-list-comma-newline-after @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { background-image: url($file-1x); @@ -29,8 +28,9 @@ // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard. // Compatibility info: https://caniuse.com/#feat=css-media-resolution @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx - only screen and (min-resolution: 2dppx) { // Standardized + only screen and (min-resolution: 2dppx) { // Standardized background-image: url($file-2x); background-size: $width-1x $height-1x; } + @include deprecate("`img-retina()`", "v4.3.0", "v5"); } diff --git a/vendor/twbs/bootstrap/scss/mixins/_pagination.scss b/vendor/twbs/bootstrap/scss/mixins/_pagination.scss index ff36eb6b4..af8e16d6a 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_pagination.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_pagination.scss @@ -3,7 +3,7 @@ @mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { .page-link { padding: $padding-y $padding-x; - font-size: $font-size; + @include font-size($font-size); line-height: $line-height; } diff --git a/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss b/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss index 71edb0061..bfa9f6e9a 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_reset-text.scss @@ -5,7 +5,7 @@ font-weight: $font-weight-normal; line-height: $line-height-base; text-align: left; // Fallback for where `start` is not supported - text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties + text-align: start; text-decoration: none; text-shadow: none; text-transform: none; diff --git a/vendor/twbs/bootstrap/scss/mixins/_size.scss b/vendor/twbs/bootstrap/scss/mixins/_size.scss index b9dd48e8d..69e056d2c 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_size.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_size.scss @@ -3,4 +3,5 @@ @mixin size($width, $height: $width) { width: $width; height: $height; + @include deprecate("`size()`", "v4.3.0", "v5"); } diff --git a/vendor/twbs/bootstrap/scss/mixins/_table-row.scss b/vendor/twbs/bootstrap/scss/mixins/_table-row.scss index 84f1d305a..f8d61869a 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_table-row.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_table-row.scss @@ -1,6 +1,6 @@ // Tables -@mixin table-row-variant($state, $background) { +@mixin table-row-variant($state, $background, $border: null) { // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. .table-#{$state} { @@ -9,6 +9,15 @@ > td { background-color: $background; } + + @if $border != null { + th, + td, + thead th, + tbody + tbody { + border-color: $border; + } + } } // Hover states for `.table-hover` diff --git a/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss b/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss index 58db3e0fc..155d6ca8c 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_text-emphasis.scss @@ -6,9 +6,11 @@ #{$parent} { color: $color !important; } - a#{$parent} { - @include hover-focus { - color: darken($color, 10%) !important; + @if $emphasized-link-hover-darken-percentage != 0 { + a#{$parent} { + @include hover-focus { + color: darken($color, $emphasized-link-hover-darken-percentage) !important; + } } } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_text-hide.scss b/vendor/twbs/bootstrap/scss/mixins/_text-hide.scss index 9ffab169f..3a923011e 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_text-hide.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_text-hide.scss @@ -7,7 +7,5 @@ background-color: transparent; border: 0; - @if ($ignore-warning != true) { - @warn "The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5."; - } + @include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning); } diff --git a/vendor/twbs/bootstrap/scss/mixins/_transition.scss b/vendor/twbs/bootstrap/scss/mixins/_transition.scss index f85382134..8ce35a6b8 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_transition.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_transition.scss @@ -1,3 +1,4 @@ +// stylelint-disable property-blacklist @mixin transition($transition...) { @if $enable-transitions { @if length($transition) == 0 { @@ -7,7 +8,9 @@ } } - @media screen and (prefers-reduced-motion: reduce) { - transition: none; + @if $enable-prefers-reduced-motion-media-query { + @media (prefers-reduced-motion: reduce) { + transition: none; + } } } diff --git a/vendor/twbs/bootstrap/scss/mixins/_visibility.scss b/vendor/twbs/bootstrap/scss/mixins/_visibility.scss index fe523d0ee..f17467311 100644 --- a/vendor/twbs/bootstrap/scss/mixins/_visibility.scss +++ b/vendor/twbs/bootstrap/scss/mixins/_visibility.scss @@ -4,4 +4,5 @@ @mixin invisible($visibility) { visibility: $visibility !important; + @include deprecate("`invisible()`", "v4.3.0", "v5"); } diff --git a/vendor/twbs/bootstrap/scss/utilities/_borders.scss b/vendor/twbs/bootstrap/scss/utilities/_borders.scss index b8832ef72..302f6bf84 100644 --- a/vendor/twbs/bootstrap/scss/utilities/_borders.scss +++ b/vendor/twbs/bootstrap/scss/utilities/_borders.scss @@ -1,4 +1,4 @@ -// stylelint-disable declaration-no-important +// stylelint-disable property-blacklist, declaration-no-important // // Border @@ -30,30 +30,46 @@ // Border-radius // +.rounded-sm { + border-radius: $border-radius-sm !important; +} + .rounded { border-radius: $border-radius !important; } + .rounded-top { border-top-left-radius: $border-radius !important; border-top-right-radius: $border-radius !important; } + .rounded-right { border-top-right-radius: $border-radius !important; border-bottom-right-radius: $border-radius !important; } + .rounded-bottom { border-bottom-right-radius: $border-radius !important; border-bottom-left-radius: $border-radius !important; } + .rounded-left { border-top-left-radius: $border-radius !important; border-bottom-left-radius: $border-radius !important; } +.rounded-lg { + border-radius: $border-radius-lg !important; +} + .rounded-circle { border-radius: 50% !important; } +.rounded-pill { + border-radius: $rounded-pill !important; +} + .rounded-0 { border-radius: 0 !important; } diff --git a/vendor/twbs/bootstrap/scss/utilities/_display.scss b/vendor/twbs/bootstrap/scss/utilities/_display.scss index 20aeeb5f3..130367998 100644 --- a/vendor/twbs/bootstrap/scss/utilities/_display.scss +++ b/vendor/twbs/bootstrap/scss/utilities/_display.scss @@ -8,15 +8,9 @@ @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - .d#{$infix}-none { display: none !important; } - .d#{$infix}-inline { display: inline !important; } - .d#{$infix}-inline-block { display: inline-block !important; } - .d#{$infix}-block { display: block !important; } - .d#{$infix}-table { display: table !important; } - .d#{$infix}-table-row { display: table-row !important; } - .d#{$infix}-table-cell { display: table-cell !important; } - .d#{$infix}-flex { display: flex !important; } - .d#{$infix}-inline-flex { display: inline-flex !important; } + @each $value in $displays { + .d#{$infix}-#{$value} { display: $value !important; } + } } } @@ -26,13 +20,7 @@ // @media print { - .d-print-none { display: none !important; } - .d-print-inline { display: inline !important; } - .d-print-inline-block { display: inline-block !important; } - .d-print-block { display: block !important; } - .d-print-table { display: table !important; } - .d-print-table-row { display: table-row !important; } - .d-print-table-cell { display: table-cell !important; } - .d-print-flex { display: flex !important; } - .d-print-inline-flex { display: inline-flex !important; } + @each $value in $displays { + .d-print-#{$value} { display: $value !important; } + } } diff --git a/vendor/twbs/bootstrap/scss/utilities/_embed.scss b/vendor/twbs/bootstrap/scss/utilities/_embed.scss index d3362b6fd..4497ac040 100644 --- a/vendor/twbs/bootstrap/scss/utilities/_embed.scss +++ b/vendor/twbs/bootstrap/scss/utilities/_embed.scss @@ -27,26 +27,13 @@ } } -.embed-responsive-21by9 { - &::before { - padding-top: percentage(9 / 21); - } -} - -.embed-responsive-16by9 { - &::before { - padding-top: percentage(9 / 16); - } -} - -.embed-responsive-4by3 { - &::before { - padding-top: percentage(3 / 4); - } -} +@each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios { + $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1); + $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2); -.embed-responsive-1by1 { - &::before { - padding-top: percentage(1 / 1); + .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} { + &::before { + padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x); + } } } diff --git a/vendor/twbs/bootstrap/scss/utilities/_float.scss b/vendor/twbs/bootstrap/scss/utilities/_float.scss index 01655e9a5..54250844f 100644 --- a/vendor/twbs/bootstrap/scss/utilities/_float.scss +++ b/vendor/twbs/bootstrap/scss/utilities/_float.scss @@ -1,9 +1,11 @@ +// stylelint-disable declaration-no-important + @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - .float#{$infix}-left { @include float-left; } - .float#{$infix}-right { @include float-right; } - .float#{$infix}-none { @include float-none; } + .float#{$infix}-left { float: left !important; } + .float#{$infix}-right { float: right !important; } + .float#{$infix}-none { float: none !important; } } } diff --git a/vendor/twbs/bootstrap/scss/utilities/_overflow.scss b/vendor/twbs/bootstrap/scss/utilities/_overflow.scss new file mode 100644 index 000000000..8326c3064 --- /dev/null +++ b/vendor/twbs/bootstrap/scss/utilities/_overflow.scss @@ -0,0 +1,5 @@ +// stylelint-disable declaration-no-important + +@each $value in $overflows { + .overflow-#{$value} { overflow: $value !important; } +} diff --git a/vendor/twbs/bootstrap/scss/utilities/_position.scss b/vendor/twbs/bootstrap/scss/utilities/_position.scss index 9ecdeeb9b..cdf6c115f 100644 --- a/vendor/twbs/bootstrap/scss/utilities/_position.scss +++ b/vendor/twbs/bootstrap/scss/utilities/_position.scss @@ -1,11 +1,6 @@ // stylelint-disable declaration-no-important // Common values - -// Sass list not in variables since it's not intended for customization. -// stylelint-disable-next-line scss/dollar-variable-default -$positions: static, relative, absolute, fixed, sticky; - @each $position in $positions { .position-#{$position} { position: $position !important; } } diff --git a/vendor/twbs/bootstrap/scss/utilities/_sizing.scss b/vendor/twbs/bootstrap/scss/utilities/_sizing.scss index e95a4db36..f37648802 100644 --- a/vendor/twbs/bootstrap/scss/utilities/_sizing.scss +++ b/vendor/twbs/bootstrap/scss/utilities/_sizing.scss @@ -10,3 +10,11 @@ .mw-100 { max-width: 100% !important; } .mh-100 { max-height: 100% !important; } + +// Viewport additional helpers + +.min-vw-100 { min-width: 100vw !important; } +.min-vh-100 { min-height: 100vh !important; } + +.vw-100 { width: 100vw !important; } +.vh-100 { height: 100vh !important; } diff --git a/vendor/twbs/bootstrap/scss/utilities/_spacing.scss b/vendor/twbs/bootstrap/scss/utilities/_spacing.scss index b2e2354b1..351136790 100644 --- a/vendor/twbs/bootstrap/scss/utilities/_spacing.scss +++ b/vendor/twbs/bootstrap/scss/utilities/_spacing.scss @@ -8,7 +8,6 @@ @each $prop, $abbrev in (margin: m, padding: p) { @each $size, $length in $spacers { - .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; } .#{$abbrev}t#{$infix}-#{$size}, .#{$abbrev}y#{$infix}-#{$size} { @@ -29,6 +28,29 @@ } } + // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`) + @each $size, $length in $spacers { + @if $size != 0 { + .m#{$infix}-n#{$size} { margin: -$length !important; } + .mt#{$infix}-n#{$size}, + .my#{$infix}-n#{$size} { + margin-top: -$length !important; + } + .mr#{$infix}-n#{$size}, + .mx#{$infix}-n#{$size} { + margin-right: -$length !important; + } + .mb#{$infix}-n#{$size}, + .my#{$infix}-n#{$size} { + margin-bottom: -$length !important; + } + .ml#{$infix}-n#{$size}, + .mx#{$infix}-n#{$size} { + margin-left: -$length !important; + } + } + } + // Some special margin utils .m#{$infix}-auto { margin: auto !important; } .mt#{$infix}-auto, diff --git a/vendor/twbs/bootstrap/scss/utilities/_stretched-link.scss b/vendor/twbs/bootstrap/scss/utilities/_stretched-link.scss new file mode 100644 index 000000000..fb5066bf5 --- /dev/null +++ b/vendor/twbs/bootstrap/scss/utilities/_stretched-link.scss @@ -0,0 +1,19 @@ +// +// Stretched link +// + +.stretched-link { + &::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + // Just in case `pointer-events: none` is set on a parent + pointer-events: auto; + content: ""; + // IE10 bugfix, see https://stackoverflow.com/questions/16947967/ie10-hover-pseudo-class-doesnt-work-without-background-color + background-color: rgba(0, 0, 0, 0); + } +} diff --git a/vendor/twbs/bootstrap/scss/utilities/_text.scss b/vendor/twbs/bootstrap/scss/utilities/_text.scss index 9d96c4656..589e5687a 100644 --- a/vendor/twbs/bootstrap/scss/utilities/_text.scss +++ b/vendor/twbs/bootstrap/scss/utilities/_text.scss @@ -4,11 +4,12 @@ // Text // -.text-monospace { font-family: $font-family-monospace; } +.text-monospace { font-family: $font-family-monospace !important; } // Alignment .text-justify { text-align: justify !important; } +.text-wrap { white-space: normal !important; } .text-nowrap { white-space: nowrap !important; } .text-truncate { @include text-truncate; } @@ -32,10 +33,12 @@ // Weight and italics -.font-weight-light { font-weight: $font-weight-light !important; } -.font-weight-normal { font-weight: $font-weight-normal !important; } -.font-weight-bold { font-weight: $font-weight-bold !important; } -.font-italic { font-style: italic !important; } +.font-weight-light { font-weight: $font-weight-light !important; } +.font-weight-lighter { font-weight: $font-weight-lighter !important; } +.font-weight-normal { font-weight: $font-weight-normal !important; } +.font-weight-bold { font-weight: $font-weight-bold !important; } +.font-weight-bolder { font-weight: $font-weight-bolder !important; } +.font-italic { font-style: italic !important; } // Contextual colors @@ -56,3 +59,14 @@ .text-hide { @include text-hide($ignore-warning: true); } + +.text-decoration-none { text-decoration: none !important; } + +.text-break { + word-break: break-word !important; // IE & < Edge 18 + overflow-wrap: break-word !important; +} + +// Reset + +.text-reset { color: inherit !important; } diff --git a/vendor/twbs/bootstrap/scss/utilities/_visibility.scss b/vendor/twbs/bootstrap/scss/utilities/_visibility.scss index 823406dc3..7756c3bfa 100644 --- a/vendor/twbs/bootstrap/scss/utilities/_visibility.scss +++ b/vendor/twbs/bootstrap/scss/utilities/_visibility.scss @@ -1,11 +1,13 @@ +// stylelint-disable declaration-no-important + // // Visibility utilities // .visible { - @include invisible(visible); + visibility: visible !important; } .invisible { - @include invisible(hidden); + visibility: hidden !important; } diff --git a/vendor/twbs/bootstrap/scss/vendor/_rfs.scss b/vendor/twbs/bootstrap/scss/vendor/_rfs.scss new file mode 100644 index 000000000..497e07eda --- /dev/null +++ b/vendor/twbs/bootstrap/scss/vendor/_rfs.scss @@ -0,0 +1,204 @@ +// stylelint-disable property-blacklist, scss/dollar-variable-default + +// SCSS RFS mixin +// +// Automated font-resizing +// +// See https://github.com/twbs/rfs + +// Configuration + +// Base font size +$rfs-base-font-size: 1.25rem !default; +$rfs-font-size-unit: rem !default; + +// Breakpoint at where font-size starts decreasing if screen width is smaller +$rfs-breakpoint: 1200px !default; +$rfs-breakpoint-unit: px !default; + +// Resize font-size based on screen height and width +$rfs-two-dimensional: false !default; + +// Factor of decrease +$rfs-factor: 10 !default; + +@if type-of($rfs-factor) != "number" or $rfs-factor <= 1 { + @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1."; +} + +// Generate enable or disable classes. Possibilities: false, "enable" or "disable" +$rfs-class: false !default; + +// 1 rem = $rfs-rem-value px +$rfs-rem-value: 16 !default; + +// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14 +$rfs-safari-iframe-resize-bug-fix: false !default; + +// Disable RFS by setting $enable-responsive-font-sizes to false +$enable-responsive-font-sizes: true !default; + +// Cache $rfs-base-font-size unit +$rfs-base-font-size-unit: unit($rfs-base-font-size); + +// Remove px-unit from $rfs-base-font-size for calculations +@if $rfs-base-font-size-unit == "px" { + $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1); +} +@else if $rfs-base-font-size-unit == "rem" { + $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value); +} + +// Cache $rfs-breakpoint unit to prevent multiple calls +$rfs-breakpoint-unit-cache: unit($rfs-breakpoint); + +// Remove unit from $rfs-breakpoint for calculations +@if $rfs-breakpoint-unit-cache == "px" { + $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1); +} +@else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" { + $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value); +} + +// Responsive font-size mixin +@mixin rfs($fs, $important: false) { + // Cache $fs unit + $fs-unit: if(type-of($fs) == "number", unit($fs), false); + + // Add !important suffix if needed + $rfs-suffix: if($important, " !important", ""); + + // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value + @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 { + font-size: #{$fs}#{$rfs-suffix}; + } + @else { + // Variables for storing static and fluid rescaling + $rfs-static: null; + $rfs-fluid: null; + + // Remove px-unit from $fs for calculations + @if $fs-unit == "px" { + $fs: $fs / ($fs * 0 + 1); + } + @else if $fs-unit == "rem" { + $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value); + } + + // Set default font-size + @if $rfs-font-size-unit == rem { + $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix}; + } + @else if $rfs-font-size-unit == px { + $rfs-static: #{$fs}px#{$rfs-suffix}; + } + @else { + @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`."; + } + + // Only add media query if font-size is bigger as the minimum font-size + // If $rfs-factor == 1, no rescaling will take place + @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes { + $min-width: null; + $variable-unit: null; + + // Calculate minimum font-size for given font-size + $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor; + + // Calculate difference between given font-size and minimum font-size for given font-size + $fs-diff: $fs - $fs-min; + + // Base font-size formatting + // No need to check if the unit is valid, because we did that before + $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px); + + // If two-dimensional, use smallest of screen width and height + $variable-unit: if($rfs-two-dimensional, vmin, vw); + + // Calculate the variable width between 0 and $rfs-breakpoint + $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit}; + + // Set the calculated font-size. + $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix}; + } + + // Rendering + @if $rfs-fluid == null { + // Only render static font-size if no fluid font-size is available + font-size: $rfs-static; + } + @else { + $mq-value: null; + + // RFS breakpoint formatting + @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem { + $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit}; + } + @else if $rfs-breakpoint-unit == px { + $mq-value: #{$rfs-breakpoint}px; + } + @else { + @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`."; + } + + @if $rfs-class == "disable" { + // Adding an extra class increases specificity, + // which prevents the media query to override the font size + &, + .disable-responsive-font-size &, + &.disable-responsive-font-size { + font-size: $rfs-static; + } + } + @else { + font-size: $rfs-static; + } + + @if $rfs-two-dimensional { + @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) { + @if $rfs-class == "enable" { + .enable-responsive-font-size &, + &.enable-responsive-font-size { + font-size: $rfs-fluid; + } + } + @else { + font-size: $rfs-fluid; + } + + @if $rfs-safari-iframe-resize-bug-fix { + // stylelint-disable-next-line length-zero-no-unit + min-width: 0vw; + } + } + } + @else { + @media (max-width: #{$mq-value}) { + @if $rfs-class == "enable" { + .enable-responsive-font-size &, + &.enable-responsive-font-size { + font-size: $rfs-fluid; + } + } + @else { + font-size: $rfs-fluid; + } + + @if $rfs-safari-iframe-resize-bug-fix { + // stylelint-disable-next-line length-zero-no-unit + min-width: 0vw; + } + } + } + } + } +} + +// The font-size & responsive-font-size mixin uses RFS to rescale font sizes +@mixin font-size($fs, $important: false) { + @include rfs($fs, $important); +} + +@mixin responsive-font-size($fs, $important: false) { + @include rfs($fs, $important); +} |