From d39f310357f1f1322f7244ed03d6acc520e37958 Mon Sep 17 00:00:00 2001 From: Robert Austin Date: Tue, 23 Jul 2019 11:03:11 +1000 Subject: update to bootstrap 4.3.1 --- assets/scss/bootstrap/_alert.scss | 2 +- assets/scss/bootstrap/_badge.scss | 9 +- assets/scss/bootstrap/_breadcrumb.scss | 15 +- assets/scss/bootstrap/_button-group.scss | 35 +- assets/scss/bootstrap/_buttons.scss | 56 +- assets/scss/bootstrap/_card.scss | 87 +- assets/scss/bootstrap/_carousel.scss | 126 +- assets/scss/bootstrap/_close.scss | 23 +- assets/scss/bootstrap/_code.scss | 18 +- assets/scss/bootstrap/_custom-forms.scss | 290 +++- assets/scss/bootstrap/_dropdown.scss | 72 +- assets/scss/bootstrap/_forms.scss | 67 +- assets/scss/bootstrap/_functions.scss | 18 +- assets/scss/bootstrap/_images.scss | 4 +- assets/scss/bootstrap/_input-group.scss | 99 +- assets/scss/bootstrap/_jumbotron.scss | 1 + assets/scss/bootstrap/_list-group.scss | 44 +- assets/scss/bootstrap/_mixins.scss | 7 +- assets/scss/bootstrap/_modal.scss | 99 +- assets/scss/bootstrap/_nav.scss | 2 + assets/scss/bootstrap/_navbar.scss | 35 +- assets/scss/bootstrap/_pagination.scss | 8 +- assets/scss/bootstrap/_popover.scss | 106 +- assets/scss/bootstrap/_print.scss | 29 +- assets/scss/bootstrap/_progress.scss | 22 +- assets/scss/bootstrap/_reboot.scss | 101 +- assets/scss/bootstrap/_spinners.scss | 55 + assets/scss/bootstrap/_tables.scss | 27 +- assets/scss/bootstrap/_toasts.scss | 44 + assets/scss/bootstrap/_tooltip.scss | 2 +- assets/scss/bootstrap/_transitions.scss | 24 +- assets/scss/bootstrap/_type.scss | 70 +- assets/scss/bootstrap/_utilities.scss | 3 + assets/scss/bootstrap/_variables.scss | 1430 +++++++++------- assets/scss/bootstrap/bootstrap-grid.scss | 11 +- assets/scss/bootstrap/bootstrap-reboot.scss | 6 +- assets/scss/bootstrap/bootstrap.scss | 8 +- assets/scss/bootstrap/mixins/_badge.scss | 9 +- assets/scss/bootstrap/mixins/_border-radius.scss | 30 +- assets/scss/bootstrap/mixins/_box-shadow.scss | 17 +- assets/scss/bootstrap/mixins/_breakpoints.scss | 6 +- assets/scss/bootstrap/mixins/_buttons.scss | 26 +- assets/scss/bootstrap/mixins/_caret.scss | 13 +- assets/scss/bootstrap/mixins/_deprecate.scss | 10 + assets/scss/bootstrap/mixins/_float.scss | 3 + assets/scss/bootstrap/mixins/_forms.scss | 81 +- assets/scss/bootstrap/mixins/_gradients.scss | 14 +- assets/scss/bootstrap/mixins/_grid-framework.scss | 7 +- assets/scss/bootstrap/mixins/_grid.scss | 19 +- assets/scss/bootstrap/mixins/_hover.scss | 8 +- assets/scss/bootstrap/mixins/_image.scss | 4 +- assets/scss/bootstrap/mixins/_list-group.scss | 2 +- assets/scss/bootstrap/mixins/_nav-divider.scss | 4 +- assets/scss/bootstrap/mixins/_navbar-align.scss | 10 - assets/scss/bootstrap/mixins/_pagination.scss | 2 +- assets/scss/bootstrap/mixins/_reset-text.scss | 4 +- assets/scss/bootstrap/mixins/_screen-reader.scss | 4 +- assets/scss/bootstrap/mixins/_size.scss | 1 + assets/scss/bootstrap/mixins/_table-row.scss | 11 +- assets/scss/bootstrap/mixins/_text-emphasis.scss | 8 +- assets/scss/bootstrap/mixins/_text-hide.scss | 4 +- assets/scss/bootstrap/mixins/_transition.scss | 7 + assets/scss/bootstrap/mixins/_visibility.scss | 1 + assets/scss/bootstrap/utilities/_borders.scss | 18 +- assets/scss/bootstrap/utilities/_display.scss | 24 +- assets/scss/bootstrap/utilities/_embed.scss | 27 +- assets/scss/bootstrap/utilities/_flex.scss | 5 + assets/scss/bootstrap/utilities/_float.scss | 8 +- assets/scss/bootstrap/utilities/_overflow.scss | 5 + assets/scss/bootstrap/utilities/_position.scss | 4 - assets/scss/bootstrap/utilities/_shadows.scss | 6 + assets/scss/bootstrap/utilities/_sizing.scss | 8 + assets/scss/bootstrap/utilities/_spacing.scss | 24 +- .../scss/bootstrap/utilities/_stretched-link.scss | 19 + assets/scss/bootstrap/utilities/_text.scss | 84 +- assets/scss/bootstrap/utilities/_visibility.scss | 6 +- assets/scss/bootstrap/vendor/_rfs.scss | 204 +++ assets/scss/style.scss | 29 - ...e.scss_5ad6f408b0e3e473c748aac88af0ea18.content | 1801 +++++++++++++++++++- ...e.scss_fbbbc62c786286473d9c728ad0108593.content | 2 +- ...tyle.scss_fbbbc62c786286473d9c728ad0108593.json | 2 +- 81 files changed, 4151 insertions(+), 1485 deletions(-) create mode 100755 assets/scss/bootstrap/_spinners.scss create mode 100755 assets/scss/bootstrap/_toasts.scss create mode 100755 assets/scss/bootstrap/mixins/_deprecate.scss delete mode 100755 assets/scss/bootstrap/mixins/_navbar-align.scss create mode 100755 assets/scss/bootstrap/utilities/_overflow.scss create mode 100755 assets/scss/bootstrap/utilities/_shadows.scss create mode 100755 assets/scss/bootstrap/utilities/_stretched-link.scss create mode 100755 assets/scss/bootstrap/vendor/_rfs.scss diff --git a/assets/scss/bootstrap/_alert.scss b/assets/scss/bootstrap/_alert.scss index dd43e23..da2a98a 100755 --- a/assets/scss/bootstrap/_alert.scss +++ b/assets/scss/bootstrap/_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/assets/scss/bootstrap/_badge.scss b/assets/scss/bootstrap/_badge.scss index b87a1b0..2082f05 100755 --- a/assets/scss/bootstrap/_badge.scss +++ b/assets/scss/bootstrap/_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/assets/scss/bootstrap/_breadcrumb.scss b/assets/scss/bootstrap/_breadcrumb.scss index 25b9d85..be30950 100755 --- a/assets/scss/bootstrap/_breadcrumb.scss +++ b/assets/scss/bootstrap/_breadcrumb.scss @@ -5,17 +5,20 @@ margin-bottom: $breadcrumb-margin-bottom; list-style: none; background-color: $breadcrumb-bg; - @include border-radius($border-radius); + @include border-radius($breadcrumb-border-radius); } .breadcrumb-item { // The separator between breadcrumbs (by default, a forward-slash: "/") - + .breadcrumb-item::before { - display: inline-block; // Suppress underlining of the separator in modern browsers - padding-right: $breadcrumb-item-padding; + + .breadcrumb-item { padding-left: $breadcrumb-item-padding; - color: $breadcrumb-divider-color; - content: "#{$breadcrumb-divider}"; + + &::before { + display: inline-block; // Suppress underlining of the separator in modern browsers + padding-right: $breadcrumb-item-padding; + color: $breadcrumb-divider-color; + content: $breadcrumb-divider; + } } // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built diff --git a/assets/scss/bootstrap/_button-group.scss b/assets/scss/bootstrap/_button-group.scss index c1b8265..d722002 100755 --- a/assets/scss/bootstrap/_button-group.scss +++ b/assets/scss/bootstrap/_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 @@ -76,9 +70,15 @@ padding-right: $btn-padding-x * .75; padding-left: $btn-padding-x * .75; - &::after { + &::after, + .dropup &::after, + .dropright &::after { margin-left: 0; } + + .dropleft &::before { + margin-right: 0; + } } .btn-sm + .dropdown-toggle-split { @@ -113,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/assets/scss/bootstrap/_buttons.scss b/assets/scss/bootstrap/_buttons.scss index bae2d66..2a7d94a 100755 --- a/assets/scss/bootstrap/_buttons.scss +++ b/assets/scss/bootstrap/_buttons.scss @@ -6,23 +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; } @@ -39,14 +35,8 @@ @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 { - background-image: none; @include box-shadow($btn-active-box-shadow); &:focus { @@ -61,6 +51,7 @@ fieldset:disabled a.btn { pointer-events: none; } + // // Alternate buttons // @@ -77,62 +68,51 @@ fieldset:disabled a.btn { } } + // // Link buttons // // Make a button look and behave like a link .btn-link { - font-weight: 400; + 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; } &:disabled, &.disabled { color: $btn-link-disabled-color; + pointer-events: none; } // No need for an active state here } + // // Button Sizes // .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); } + // // Block button // @@ -148,9 +128,9 @@ fieldset:disabled a.btn { } // Specificity overrides -input[type='submit'], -input[type='reset'], -input[type='button'] { +input[type="submit"], +input[type="reset"], +input[type="button"] { &.btn-block { width: 100%; } diff --git a/assets/scss/bootstrap/_card.scss b/assets/scss/bootstrap/_card.scss index 4c4845c..c6b67ce 100755 --- a/assets/scss/bootstrap/_card.scss +++ b/assets/scss/bootstrap/_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 + 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 @@ -153,7 +155,7 @@ .card { display: flex; - // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored + // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 flex: 1 0 0%; flex-direction: column; margin-right: $card-deck-margin; @@ -183,7 +185,7 @@ // The child selector allows nested `.card` within `.card-group` // to display properly. > .card { - // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored + // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 flex: 1 0 0%; margin-bottom: 0; @@ -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); - } - } } } } @@ -261,6 +243,8 @@ @include media-breakpoint-up(sm) { column-count: $card-columns-count; column-gap: $card-columns-gap; + orphans: 1; + widows: 1; .card { display: inline-block; // Don't let them vertically span multiple columns @@ -268,3 +252,38 @@ } } } + + +// +// Accordion +// + +.accordion { + > .card { + overflow: hidden; + + &:not(:first-of-type) { + .card-header:first-child { + @include border-radius(0); + } + + &:not(:last-of-type) { + border-bottom: 0; + @include border-radius(0); + } + } + + &:first-of-type { + border-bottom: 0; + @include border-bottom-radius(0); + } + + &:last-of-type { + @include border-top-radius(0); + } + + .card-header { + margin-bottom: -$card-border-width; + } + } +} diff --git a/assets/scss/bootstrap/_carousel.scss b/assets/scss/bootstrap/_carousel.scss index 72a5034..20ea04b 100755 --- a/assets/scss/bootstrap/_carousel.scss +++ b/assets/scss/bootstrap/_carousel.scss @@ -1,22 +1,39 @@ -// Wrapper for the slide container and indicators +// Notes on the classes: +// +// 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. +// 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. +// 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%; - @include transition($carousel-transition); + margin-right: -100%; backface-visibility: hidden; - perspective: 1000px; + @include transition($carousel-transition); } .carousel-item.active, @@ -25,37 +42,40 @@ display: block; } -.carousel-item-next, -.carousel-item-prev { - position: absolute; - top: 0; +.carousel-item-next:not(.carousel-item-left), +.active.carousel-item-right { + transform: translateX(100%); } -// CSS3 transforms when supported by the browser -.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-prev:not(.carousel-item-right), +.active.carousel-item-left { + transform: translateX(-100%); } -.carousel-item-next, -.active.carousel-item-right { - transform: translateX(100%); - @supports (transform-style: preserve-3d) { - transform: translate3d(100%, 0, 0); +// +// Alternate transitions +// + +.carousel-fade { + .carousel-item { + opacity: 0; + transition-property: opacity; + transform: none; } -} -.carousel-item-prev, -.active.carousel-item-left { - transform: translateX(-100%); + .carousel-item.active, + .carousel-item-next.carousel-item-left, + .carousel-item-prev.carousel-item-right { + z-index: 1; + opacity: 1; + } - @supports (transform-style: preserve-3d) { - transform: translate3d(-100%, 0, 0); + .active.carousel-item-left, + .active.carousel-item-right { + z-index: 0; + opacity: 0; + @include transition(0s $carousel-transition-duration opacity); } } @@ -69,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 @@ -77,27 +98,26 @@ 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 { left: 0; @if $enable-gradients { - background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001)); + background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); } } .carousel-control-next { right: 0; @if $enable-gradients { - background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001)); + background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); } } @@ -107,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; @@ -126,7 +145,7 @@ .carousel-indicators { position: absolute; right: 0; - bottom: 10px; + bottom: 0; left: 0; z-index: 15; display: flex; @@ -138,38 +157,25 @@ list-style: none; li { - position: relative; + box-sizing: content-box; flex: 0 1 auto; width: $carousel-indicator-width; height: $carousel-indicator-height; margin-right: $carousel-indicator-spacer; margin-left: $carousel-indicator-spacer; text-indent: -999px; - 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: ""; - } + cursor: pointer; + 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; } } @@ -180,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/assets/scss/bootstrap/_close.scss b/assets/scss/bootstrap/_close.scss index 871cb08..5cc96f5 100755 --- a/assets/scss/bootstrap/_close.scss +++ b/assets/scss/bootstrap/_close.scss @@ -1,21 +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; - @include hover-focus { + // Override 's hover style + @include hover { color: $close-color; text-decoration: none; - opacity: .75; } - // Opinionated: add "hand" cursor to non-disabled .close elements &:not(:disabled):not(.disabled) { - cursor: pointer; + @include hover-focus { + opacity: .75; + } } } @@ -24,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 `` elements + +// stylelint-disable-next-line selector-no-qualifying-type +a.close.disabled { + pointer-events: none; } -// stylelint-enable diff --git a/assets/scss/bootstrap/_code.scss b/assets/scss/bootstrap/_code.scss index 9de20fa..74b6e1c 100755 --- a/assets/scss/bootstrap/_code.scss +++ b/assets/scss/bootstrap/_code.scss @@ -1,14 +1,6 @@ -// Inline and block code styles -code, -kbd, -pre, -samp { - font-family: $font-family-monospace; -} - // Inline code code { - font-size: $code-font-size; + @include font-size($code-font-size); color: $code-color; word-break: break-word; @@ -21,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); @@ -29,7 +21,7 @@ kbd { kbd { padding: 0; - font-size: 100%; + @include font-size(100%); font-weight: $nested-kbd-font-weight; @include box-shadow(none); } @@ -38,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/assets/scss/bootstrap/_custom-forms.scss b/assets/scss/bootstrap/_custom-forms.scss index 2d83f7e..03f3fc5 100755 --- a/assets/scss/bootstrap/_custom-forms.scss +++ b/assets/scss/bootstrap/_custom-forms.scss @@ -10,8 +10,8 @@ .custom-control { position: relative; display: block; - min-height: (1rem * $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; + } + } + + &:focus:not(:checked) ~ .custom-control-label::before { + border-color: $custom-control-indicator-focus-border-color; } - &:active ~ .custom-control-label::before { + &: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); } @@ -54,38 +64,38 @@ // Custom control indicators // -// Build the custom controls out of psuedo-elements. +// Build the custom controls out of pseudo-elements. .custom-control-label { + position: relative; margin-bottom: 0; + vertical-align: top; // Background-color and (when enabled) gradient &::before { position: absolute; - top: (($line-height-base - $custom-control-indicator-size) / 2); - left: 0; + 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: (($line-height-base - $custom-control-indicator-size) / 2); - left: 0; + 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}; } } @@ -100,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; } @@ -110,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); } @@ -134,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 { - background-image: $custom-radio-indicator-icon-checked; + 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-color: $custom-control-indicator-bg; + transform: translateX($custom-switch-width - $custom-control-indicator-size); } } @@ -157,7 +206,7 @@ // Select // // Replaces the browser default select with a custom one, mostly pulled from -// http://primercss.io. +// https://primer.github.io/. // .custom-select { @@ -165,23 +214,27 @@ 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; &:focus { border-color: $custom-select-focus-border-color; outline: 0; - box-shadow: $custom-select-focus-box-shadow; + @if $enable-shadows { + box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow; + } @else { + box-shadow: $custom-select-focus-box-shadow; + } &::-ms-value { // For visual consistency with other platforms/browsers, @@ -208,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); } @@ -247,13 +302,13 @@ margin: 0; opacity: 0; - &:focus ~ .custom-file-control { + &:focus ~ .custom-file-label { border-color: $custom-file-focus-border-color; box-shadow: $custom-file-focus-box-shadow; + } - &::before { - border-color: $custom-file-focus-border-color; - } + &:disabled ~ .custom-file-label { + background-color: $custom-file-disabled-bg; } @each $lang, $value in $custom-file-text { @@ -261,6 +316,10 @@ content: $value; } } + + ~ .custom-file-label[data-browse]::after { + content: attr(data-browse); + } } .custom-file-label { @@ -271,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; @@ -285,13 +346,162 @@ bottom: 0; z-index: 3; display: block; - height: calc(#{$custom-file-height} - #{$custom-file-border-width} * 2); + height: $custom-file-height-inner; padding: $custom-file-padding-y $custom-file-padding-x; line-height: $custom-file-line-height; 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); } } + +// Range +// +// Style range inputs the same across browsers. Vendor-specific rules for pseudo +// elements cannot be mixed. As such, there are no shared styles for focus or +// active states on prefixed selectors. + +.custom-range { + width: 100%; + 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 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; } + &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } + } + + &::-moz-focus-outer { + border: 0; + } + + &::-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 + @include gradient-bg($custom-range-thumb-bg); + border: $custom-range-thumb-border; + @include border-radius($custom-range-thumb-border-radius); + @include box-shadow($custom-range-thumb-box-shadow); + @include transition($custom-forms-transition); + appearance: none; + + &:active { + @include gradient-bg($custom-range-thumb-active-bg); + } + } + + &::-webkit-slider-runnable-track { + width: $custom-range-track-width; + height: $custom-range-track-height; + color: transparent; // Why? + cursor: $custom-range-track-cursor; + background-color: $custom-range-track-bg; + border-color: transparent; + @include border-radius($custom-range-track-border-radius); + @include box-shadow($custom-range-track-box-shadow); + } + + &::-moz-range-thumb { + width: $custom-range-thumb-width; + height: $custom-range-thumb-height; + @include gradient-bg($custom-range-thumb-bg); + border: $custom-range-thumb-border; + @include border-radius($custom-range-thumb-border-radius); + @include box-shadow($custom-range-thumb-box-shadow); + @include transition($custom-forms-transition); + appearance: none; + + &:active { + @include gradient-bg($custom-range-thumb-active-bg); + } + } + + &::-moz-range-track { + width: $custom-range-track-width; + height: $custom-range-track-height; + color: transparent; + cursor: $custom-range-track-cursor; + background-color: $custom-range-track-bg; + border-color: transparent; // Firefox specific? + @include border-radius($custom-range-track-border-radius); + @include box-shadow($custom-range-track-box-shadow); + } + + &::-ms-thumb { + width: $custom-range-thumb-width; + height: $custom-range-thumb-height; + margin-top: 0; // Edge specific + margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. + margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. + @include gradient-bg($custom-range-thumb-bg); + border: $custom-range-thumb-border; + @include border-radius($custom-range-thumb-border-radius); + @include box-shadow($custom-range-thumb-box-shadow); + @include transition($custom-forms-transition); + appearance: none; + + &:active { + @include gradient-bg($custom-range-thumb-active-bg); + } + } + + &::-ms-track { + width: $custom-range-track-width; + height: $custom-range-track-height; + color: transparent; + cursor: $custom-range-track-cursor; + background-color: transparent; + border-color: transparent; + border-width: $custom-range-thumb-height / 2; + @include box-shadow($custom-range-track-box-shadow); + } + + &::-ms-fill-lower { + background-color: $custom-range-track-bg; + @include border-radius($custom-range-track-border-radius); + } + + &::-ms-fill-upper { + margin-right: 15px; // arbitrary? + 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, +.custom-file-label, +.custom-select { + @include transition($custom-forms-transition); +} diff --git a/assets/scss/bootstrap/_dropdown.scss b/assets/scss/bootstrap/_dropdown.scss index 204ba08..ac3c8c8 100755 --- a/assets/scss/bootstrap/_dropdown.scss +++ b/assets/scss/bootstrap/_dropdown.scss @@ -1,10 +1,14 @@ // The dropdown wrapper (`
`) .dropup, -.dropdown { +.dropright, +.dropdown, +.dropleft { position: relative; } .dropdown-toggle { + white-space: nowrap; + // Generate the caret automatically @include caret; } @@ -20,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; @@ -31,10 +35,28 @@ @include box-shadow($dropdown-box-shadow); } +@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) // Just add .dropup after the standard .dropdown class and you're set. .dropup { .dropdown-menu { + top: auto; + bottom: 100%; margin-top: 0; margin-bottom: $dropdown-spacer; } @@ -46,6 +68,9 @@ .dropright { .dropdown-menu { + top: 0; + right: auto; + left: 100%; margin-top: 0; margin-left: $dropdown-spacer; } @@ -60,6 +85,9 @@ .dropleft { .dropdown-menu { + top: 0; + right: 100%; + left: auto; margin-top: 0; margin-right: $dropdown-spacer; } @@ -72,9 +100,21 @@ } } +// When enabled Popper.js, reset basic dropdown position +// stylelint-disable-next-line no-duplicate-selectors +.dropdown-menu { + &[x-placement^="top"], + &[x-placement^="right"], + &[x-placement^="bottom"], + &[x-placement^="left"] { + right: auto; + bottom: auto; + } +} + // Dividers (basically an `
`) 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 @@ -85,13 +125,25 @@ width: 100%; // For `