From a278c52cabf7cbc21171385a53f89c1584093647 Mon Sep 17 00:00:00 2001 From: Alan Knowles Date: Thu, 15 Oct 2020 13:09:17 +0800 Subject: [PATCH] Upgrade to bootstrap 4.5 --- scss/bootstrap/_alert.scss | 3 +- scss/bootstrap/_badge.scss | 9 +- scss/bootstrap/_breadcrumb.scss | 5 +- scss/bootstrap/_button-group.scss | 2 +- scss/bootstrap/_buttons.scss | 24 +- scss/bootstrap/_card.scss | 132 +++----- scss/bootstrap/_carousel.scss | 19 +- scss/bootstrap/_close.scss | 10 +- scss/bootstrap/_code.scss | 12 +- scss/bootstrap/_custom-forms.scss | 118 +++++-- scss/bootstrap/_dropdown.scss | 49 +-- scss/bootstrap/_forms.scss | 71 ++-- scss/bootstrap/_functions.scss | 72 +++- scss/bootstrap/_grid.scss | 43 ++- scss/bootstrap/_images.scss | 8 +- scss/bootstrap/_input-group.scss | 11 +- scss/bootstrap/_jumbotron.scss | 1 + scss/bootstrap/_list-group.scss | 91 +++-- scss/bootstrap/_mixins.scss | 12 +- scss/bootstrap/_modal.scss | 76 ++++- scss/bootstrap/_nav.scss | 9 +- scss/bootstrap/_navbar.scss | 71 ++-- scss/bootstrap/_pagination.scss | 10 +- scss/bootstrap/_popover.scss | 123 +++---- scss/bootstrap/_print.scss | 6 +- scss/bootstrap/_progress.scss | 25 +- scss/bootstrap/_reboot.scss | 113 ++++--- scss/bootstrap/_root.scss | 1 + scss/bootstrap/_spinners.scss | 7 +- scss/bootstrap/_tables.scss | 16 +- scss/bootstrap/_toasts.scss | 26 +- scss/bootstrap/_tooltip.scss | 2 +- scss/bootstrap/_transitions.scss | 2 - scss/bootstrap/_type.scss | 34 +- scss/bootstrap/_utilities.scss | 2 + scss/bootstrap/_variables.scss | 320 ++++++++++-------- scss/bootstrap/bootstrap-grid.scss | 12 +- scss/bootstrap/bootstrap-reboot.scss | 8 +- scss/bootstrap/bootstrap.scss | 9 +- .../bootstrap/mixins/_background-variant.scss | 8 +- scss/bootstrap/mixins/_badge.scss | 13 +- scss/bootstrap/mixins/_border-radius.scss | 61 +++- scss/bootstrap/mixins/_box-shadow.scss | 17 +- scss/bootstrap/mixins/_buttons.scss | 29 +- scss/bootstrap/mixins/_caret.scss | 24 +- scss/bootstrap/mixins/_deprecate.scss | 10 + scss/bootstrap/mixins/_float.scss | 9 +- scss/bootstrap/mixins/_forms.scss | 100 +++--- scss/bootstrap/mixins/_grid-framework.scss | 48 ++- scss/bootstrap/mixins/_grid.scss | 44 ++- scss/bootstrap/mixins/_hover.scss | 8 +- scss/bootstrap/mixins/_image.scss | 6 +- scss/bootstrap/mixins/_list-group.scss | 2 +- scss/bootstrap/mixins/_lists.scss | 2 +- scss/bootstrap/mixins/_nav-divider.scss | 3 +- scss/bootstrap/mixins/_pagination.scss | 2 +- scss/bootstrap/mixins/_reset-text.scss | 4 +- scss/bootstrap/mixins/_screen-reader.scss | 7 +- scss/bootstrap/mixins/_size.scss | 1 + scss/bootstrap/mixins/_table-row.scss | 2 +- scss/bootstrap/mixins/_text-emphasis.scss | 11 +- scss/bootstrap/mixins/_text-hide.scss | 4 +- scss/bootstrap/mixins/_transition.scss | 26 +- scss/bootstrap/mixins/_visibility.scss | 1 + scss/bootstrap/utilities/_background.scss | 4 +- scss/bootstrap/utilities/_borders.scss | 14 +- scss/bootstrap/utilities/_display.scss | 24 +- scss/bootstrap/utilities/_float.scss | 8 +- scss/bootstrap/utilities/_interactions.scss | 5 + scss/bootstrap/utilities/_stretched-link.scss | 19 ++ scss/bootstrap/utilities/_text.scss | 11 +- scss/bootstrap/utilities/_visibility.scss | 6 +- scss/bootstrap/vendor/_rfs.scss | 204 +++++++++++ 73 files changed, 1477 insertions(+), 824 deletions(-) create mode 100644 scss/bootstrap/mixins/_deprecate.scss create mode 100644 scss/bootstrap/utilities/_interactions.scss create mode 100644 scss/bootstrap/utilities/_stretched-link.scss create mode 100644 scss/bootstrap/vendor/_rfs.scss diff --git a/scss/bootstrap/_alert.scss b/scss/bootstrap/_alert.scss index dd43e2376a..4aa1fc2039 100644 --- a/scss/bootstrap/_alert.scss +++ b/scss/bootstrap/_alert.scss @@ -27,13 +27,14 @@ // 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 { position: absolute; top: 0; right: 0; + z-index: 2; padding: $alert-padding-y $alert-padding-x; color: inherit; } diff --git a/scss/bootstrap/_badge.scss b/scss/bootstrap/_badge.scss index 3e144f24c6..42c5d08d74 100644 --- a/scss/bootstrap/_badge.scss +++ b/scss/bootstrap/_badge.scss @@ -6,20 +6,21 @@ .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 { + @include hover-focus() { text-decoration: none; } } -*/ + // Empty badges collapse automatically &:empty { display: none; diff --git a/scss/bootstrap/_breadcrumb.scss b/scss/bootstrap/_breadcrumb.scss index be30950690..a0cf7e29b5 100644 --- a/scss/bootstrap/_breadcrumb.scss +++ b/scss/bootstrap/_breadcrumb.scss @@ -3,12 +3,15 @@ flex-wrap: wrap; padding: $breadcrumb-padding-y $breadcrumb-padding-x; margin-bottom: $breadcrumb-margin-bottom; + @include font-size($breadcrumb-font-size); list-style: none; background-color: $breadcrumb-bg; @include border-radius($breadcrumb-border-radius); } .breadcrumb-item { + display: flex; + // The separator between breadcrumbs (by default, a forward-slash: "/") + .breadcrumb-item { padding-left: $breadcrumb-item-padding; @@ -17,7 +20,7 @@ display: inline-block; // Suppress underlining of the separator in modern browsers padding-right: $breadcrumb-item-padding; color: $breadcrumb-divider-color; - content: $breadcrumb-divider; + content: escape-svg($breadcrumb-divider); } } diff --git a/scss/bootstrap/_button-group.scss b/scss/bootstrap/_button-group.scss index d7220029ad..da02d7931b 100644 --- a/scss/bootstrap/_button-group.scss +++ b/scss/bootstrap/_button-group.scss @@ -13,7 +13,7 @@ // Bring the hover, focused, and "active" buttons to the front to overlay // the borders properly - @include hover { + @include hover() { z-index: 1; } &:focus, diff --git a/scss/bootstrap/_buttons.scss b/scss/bootstrap/_buttons.scss index 7c45534e00..6ee24ba1fc 100644 --- a/scss/bootstrap/_buttons.scss +++ b/scss/bootstrap/_buttons.scss @@ -6,9 +6,12 @@ .btn { display: inline-block; + font-family: $btn-font-family; font-weight: $btn-font-weight; color: $body-color; text-align: center; + text-decoration: if($link-decoration == none, null, none); + white-space: $btn-white-space; vertical-align: middle; user-select: none; background-color: transparent; @@ -16,7 +19,7 @@ @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); @include transition($btn-transition); - @include hover { + @include hover() { color: $body-color; text-decoration: none; } @@ -34,17 +37,16 @@ @include box-shadow(none); } - // Opinionated: add "hand" cursor to non-disabled .btn elements &:not(:disabled):not(.disabled) { - cursor: pointer; - } + cursor: if($enable-pointer-cursor-for-buttons, pointer, null); - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active { - @include box-shadow($btn-active-box-shadow); + &:active, + &.active { + @include box-shadow($btn-active-box-shadow); - &:focus { - @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); + &:focus { + @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); + } } } } @@ -81,8 +83,9 @@ fieldset:disabled a.btn { .btn-link { font-weight: $font-weight-normal; color: $link-color; + text-decoration: $link-decoration; - @include hover { + @include hover() { color: $link-hover-color; text-decoration: $link-hover-decoration; } @@ -90,7 +93,6 @@ fieldset:disabled a.btn { &:focus, &.focus { text-decoration: $link-hover-decoration; - box-shadow: none; } &:disabled, diff --git a/scss/bootstrap/_card.scss b/scss/bootstrap/_card.scss index f3de02708b..faaa75ef7f 100644 --- a/scss/bootstrap/_card.scss +++ b/scss/bootstrap/_card.scss @@ -6,7 +6,8 @@ position: relative; display: flex; flex-direction: column; - min-width: 0; + min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 + height: $card-height; word-wrap: break-word; background-color: $card-bg; background-clip: border-box; @@ -18,24 +19,38 @@ margin-left: 0; } - > .list-group:first-child { - .list-group-item:first-child { - @include border-top-radius($card-border-radius); + > .list-group { + border-top: inherit; + border-bottom: inherit; + + &:first-child { + border-top-width: 0; + @include border-top-radius($card-inner-border-radius); } - } - > .list-group:last-child { - .list-group-item:last-child { - @include border-bottom-radius($card-border-radius); + &:last-child { + border-bottom-width: 0; + @include border-bottom-radius($card-inner-border-radius); } } + + // Due to specificity of the above selector (`.card > .list-group`), we must + // use a child selector here to prevent double borders. + > .card-header + .list-group, + > .list-group + .card-footer { + border-top: 0; + } } .card-body { // Enable `flex-grow: 1` for decks and groups so that card blocks take up // as much space as possible, ensuring footers are aligned to the bottom. flex: 1 1 auto; + // Workaround for the image size bug in IE + // See: https://github.com/twbs/bootstrap/pull/28855 + min-height: 1px; padding: $card-spacer-x; + color: $card-color; } .card-title { @@ -43,7 +58,7 @@ } .card-subtitle { - margin-top: -($card-spacer-y / 2); + margin-top: -$card-spacer-y / 2; margin-bottom: 0; } @@ -52,7 +67,7 @@ } .card-link { - @include hover { + @include hover() { text-decoration: none; } @@ -75,16 +90,11 @@ &:first-child { @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); } - - + .list-group { - .list-group-item:first-child { - border-top: 0; - } - } } .card-footer { padding: $card-spacer-y $card-spacer-x; + color: $card-cap-color; background-color: $card-cap-bg; border-top: $card-border-width solid $card-border-color; @@ -99,15 +109,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 @@ -118,21 +128,23 @@ bottom: 0; left: 0; padding: $card-img-overlay-padding; + @include border-radius($card-inner-border-radius); } -.card-img { +.card-img, +.card-img-top, +.card-img-bottom { + flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396 width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch - @include border-radius($card-inner-border-radius); } -// Card image caps +.card-img, .card-img-top { - width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch @include border-top-radius($card-inner-border-radius); } +.card-img, .card-img-bottom { - width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch @include border-bottom-radius($card-inner-border-radius); } @@ -140,23 +152,19 @@ // Card deck .card-deck { - display: flex; - flex-direction: column; - .card { margin-bottom: $card-deck-margin; } @include media-breakpoint-up(sm) { + display: flex; flex-flow: row wrap; margin-right: -$card-deck-margin; margin-left: -$card-deck-margin; .card { - display: flex; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 flex: 1 0 0%; - flex-direction: column; margin-right: $card-deck-margin; margin-bottom: 0; // Override the default margin-left: $card-deck-margin; @@ -170,9 +178,6 @@ // .card-group { - display: flex; - flex-direction: column; - // The child selector allows nested `.card` within `.card-group` // to display properly. > .card { @@ -180,6 +185,7 @@ } @include media-breakpoint-up(sm) { + display: flex; flex-flow: row wrap; // The child selector allows nested `.card` within `.card-group` // to display properly. @@ -195,55 +201,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-disallowed-list border-top-right-radius: 0; } .card-img-bottom, .card-footer { + // stylelint-disable-next-line property-disallowed-list 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-disallowed-list border-top-left-radius: 0; } .card-img-bottom, .card-footer { + // stylelint-disable-next-line property-disallowed-list 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); - } - } } } } @@ -278,32 +264,22 @@ // .accordion { - .card { - overflow: hidden; - - &:not(:first-of-type) { - .card-header:first-child { - border-radius: 0; - } + overflow-anchor: none; - &:not(:last-of-type) { - border-bottom: 0; - border-radius: 0; - } - } + > .card { + overflow: hidden; - &:first-of-type { + &:not(:last-of-type) { border-bottom: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; + @include border-bottom-radius(0); } - &:last-of-type { - border-top-left-radius: 0; - border-top-right-radius: 0; + &:not(:first-of-type) { + @include border-top-radius(0); } - .card-header { + > .card-header { + @include border-radius(0); margin-bottom: -$card-border-width; } } diff --git a/scss/bootstrap/_carousel.scss b/scss/bootstrap/_carousel.scss index 3ba447e300..fb5e9f856a 100644 --- a/scss/bootstrap/_carousel.scss +++ b/scss/bootstrap/_carousel.scss @@ -75,7 +75,7 @@ .active.carousel-item-right { z-index: 0; opacity: 0; - @include transition(0s $carousel-transition-duration opacity); + @include transition(opacity 0s $carousel-transition-duration); } } @@ -101,7 +101,7 @@ @include transition($carousel-control-transition); // Hover/focus state - @include hover-focus { + @include hover-focus() { color: $carousel-control-color; text-decoration: none; outline: 0; @@ -111,13 +111,13 @@ .carousel-control-prev { left: 0; @if $enable-gradients { - background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); + background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); } } .carousel-control-next { right: 0; @if $enable-gradients { - background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); + background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); } } @@ -127,14 +127,13 @@ 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; + background-image: escape-svg($carousel-control-prev-icon-bg); } .carousel-control-next-icon { - background-image: $carousel-control-next-icon-bg; + background-image: escape-svg($carousel-control-next-icon-bg); } @@ -187,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/scss/bootstrap/_close.scss b/scss/bootstrap/_close.scss index 821922f4c4..82e9593ef1 100644 --- a/scss/bootstrap/_close.scss +++ b/scss/bootstrap/_close.scss @@ -1,6 +1,6 @@ .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; @@ -8,18 +8,15 @@ opacity: .5; // Override 's hover style - @include hover { + @include hover() { color: $close-color; text-decoration: none; } &:not(:disabled):not(.disabled) { - @include hover-focus { + @include hover-focus() { opacity: .75; } - - // Opinionated: add "hand" cursor to non-disabled .close elements - cursor: pointer; } } @@ -33,7 +30,6 @@ button.close { padding: 0; background-color: transparent; border: 0; - appearance: none; } // Future-proof disabling of clicks on `` elements diff --git a/scss/bootstrap/_code.scss b/scss/bootstrap/_code.scss index 9b2e027f40..4bc117a96d 100644 --- a/scss/bootstrap/_code.scss +++ b/scss/bootstrap/_code.scss @@ -1,8 +1,8 @@ // Inline code code { - font-size: $code-font-size; + @include font-size($code-font-size); color: $code-color; - word-break: break-word; + word-wrap: break-word; // Streamline the style when inside anchors to avoid broken underline and more a > & { @@ -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/scss/bootstrap/_custom-forms.scss b/scss/bootstrap/_custom-forms.scss index e999daf0ca..0057b330f1 100644 --- a/scss/bootstrap/_custom-forms.scss +++ b/scss/bootstrap/_custom-forms.scss @@ -9,9 +9,11 @@ .custom-control { position: relative; + z-index: 1; 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; + color-adjust: exact; // Keep themed appearance for print } .custom-control-inline { @@ -21,7 +23,10 @@ .custom-control-input { position: absolute; + left: 0; z-index: -1; // Put the input behind the label so it doesn't overlay text + width: $custom-control-indicator-size; + height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2; opacity: 0; &:checked ~ .custom-control-label::before { @@ -34,7 +39,7 @@ &:focus ~ .custom-control-label::before { // the mixin is not used here to make sure there is feedback @if $enable-shadows { - box-shadow: $input-box-shadow, $input-focus-box-shadow; + box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow; } @else { box-shadow: $custom-control-indicator-focus-box-shadow; } @@ -51,6 +56,8 @@ @include box-shadow($custom-control-indicator-active-box-shadow); } + // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247 + &[disabled], &:disabled { ~ .custom-control-label { color: $custom-control-label-disabled-color; @@ -69,13 +76,15 @@ .custom-control-label { position: relative; margin-bottom: 0; + color: $custom-control-label-color; vertical-align: top; + cursor: $custom-control-cursor; // Background-color and (when enabled) gradient &::before { 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; @@ -89,15 +98,13 @@ // 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}; } } @@ -113,7 +120,7 @@ .custom-control-input:checked ~ .custom-control-label { &::after { - background-image: $custom-checkbox-indicator-icon-checked; + background-image: escape-svg($custom-checkbox-indicator-icon-checked); } } @@ -124,16 +131,16 @@ @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow); } &::after { - background-image: $custom-checkbox-indicator-icon-indeterminate; + background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate); } } .custom-control-input:disabled { &:checked ~ .custom-control-label::before { - background-color: $custom-control-indicator-checked-disabled-bg; + @include gradient-bg($custom-control-indicator-checked-disabled-bg); } &:indeterminate ~ .custom-control-label::before { - background-color: $custom-control-indicator-checked-disabled-bg; + @include gradient-bg($custom-control-indicator-checked-disabled-bg); } } } @@ -144,18 +151,62 @@ .custom-radio { .custom-control-label::before { + // stylelint-disable-next-line property-disallowed-list border-radius: $custom-radio-indicator-border-radius; } .custom-control-input:checked ~ .custom-control-label { &::after { - background-image: $custom-radio-indicator-icon-checked; + background-image: escape-svg($custom-radio-indicator-icon-checked); + } + } + + .custom-control-input:disabled { + &:checked ~ .custom-control-label::before { + @include gradient-bg($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 { + left: -($custom-switch-width + $custom-control-gutter); + width: $custom-switch-width; + pointer-events: all; + // stylelint-disable-next-line property-disallowed-list + border-radius: $custom-switch-indicator-border-radius; + } + + &::after { + top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2); + left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2); + width: $custom-switch-indicator-size; + height: $custom-switch-indicator-size; + background-color: $custom-control-indicator-border-color; + // stylelint-disable-next-line property-disallowed-list + 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); } } .custom-control-input:disabled { &:checked ~ .custom-control-label::before { - background-color: $custom-control-indicator-checked-disabled-bg; + @include gradient-bg($custom-control-indicator-checked-disabled-bg); } } } @@ -172,18 +223,15 @@ 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-background; - background-color: $custom-select-bg; + background: $custom-select-bg $custom-select-background; 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; @@ -191,8 +239,9 @@ border-color: $custom-select-focus-border-color; outline: 0; @if $enable-shadows { - box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow; + @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow); } @else { + // Avoid using mixin so we can pass custom focus shadow properly box-shadow: $custom-select-focus-box-shadow; } @@ -221,7 +270,13 @@ // Hides the default caret in IE11 &::-ms-expand { - opacity: 0; + display: none; + } + + // Remove outline from select box in FF + &:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 $custom-select-color; } } @@ -230,7 +285,7 @@ padding-top: $custom-select-padding-y-sm; padding-bottom: $custom-select-padding-y-sm; padding-left: $custom-select-padding-x-sm; - font-size: $custom-select-font-size-sm; + @include font-size($custom-select-font-size-sm); } .custom-select-lg { @@ -238,7 +293,7 @@ padding-top: $custom-select-padding-y-lg; padding-bottom: $custom-select-padding-y-lg; padding-left: $custom-select-padding-x-lg; - font-size: $custom-select-font-size-lg; + @include font-size($custom-select-font-size-lg); } @@ -267,6 +322,8 @@ box-shadow: $custom-file-focus-box-shadow; } + // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247 + &[disabled] ~ .custom-file-label, &:disabled ~ .custom-file-label { background-color: $custom-file-disabled-bg; } @@ -290,6 +347,7 @@ 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; @@ -324,7 +382,7 @@ .custom-range { width: 100%; - height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2}); + height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2); padding: 0; // Need to reset padding background-color: transparent; appearance: none; @@ -346,7 +404,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); @@ -421,7 +479,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); } diff --git a/scss/bootstrap/_dropdown.scss b/scss/bootstrap/_dropdown.scss index 93c1d78e95..a8aaa585c1 100644 --- a/scss/bootstrap/_dropdown.scss +++ b/scss/bootstrap/_dropdown.scss @@ -7,8 +7,10 @@ } .dropdown-toggle { + white-space: nowrap; + // Generate the caret automatically - @include caret; + @include caret(); } // The dropdown menu @@ -20,10 +22,10 @@ display: none; // none by default, but block on "open" of the menu float: left; min-width: $dropdown-min-width; - padding: $dropdown-padding-y 0; + padding: $dropdown-padding-y $dropdown-padding-x; 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,17 +35,6 @@ @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}-right { - right: 0; - left: auto; - } - } -} - @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); @@ -52,6 +43,11 @@ right: auto; left: 0; } + + .dropdown-menu#{$infix}-right { + right: 0; + left: auto; + } } } @@ -118,7 +114,7 @@ // Dividers (basically an `
`) within the dropdown .dropdown-divider { - @include nav-divider($dropdown-divider-bg); + @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true); } // Links, buttons, and more within the dropdown menu @@ -132,19 +128,24 @@ font-weight: $font-weight-normal; color: $dropdown-link-color; text-align: inherit; // For `