From: Alan Knowles Date: Wed, 25 Nov 2020 10:10:06 +0000 (+0800) Subject: sync with updated bs X-Git-Url: http://git.roojs.org/?p=roojs1;a=commitdiff_plain;h=b1da0768aed0ffc12b300174eff724a412fad487 sync with updated bs --- diff --git a/scss/bootstrap/_badge.scss b/scss/bootstrap/_badge.scss index 343c38ec3b..42c5d08d74 100644 --- a/scss/bootstrap/_badge.scss +++ b/scss/bootstrap/_badge.scss @@ -14,13 +14,13 @@ 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 { display: none; diff --git a/scss/bootstrap/_breadcrumb.scss b/scss/bootstrap/_breadcrumb.scss index a0cf7e29b5..9c204c7d55 100644 --- a/scss/bootstrap/_breadcrumb.scss +++ b/scss/bootstrap/_breadcrumb.scss @@ -10,14 +10,12 @@ } .breadcrumb-item { - display: flex; - // The separator between breadcrumbs (by default, a forward-slash: "/") + .breadcrumb-item { padding-left: $breadcrumb-item-padding; &::before { - display: inline-block; // Suppress underlining of the separator in modern browsers + float: left; // Suppress inline spacings and underlining of the separator padding-right: $breadcrumb-item-padding; color: $breadcrumb-divider-color; content: escape-svg($breadcrumb-divider); diff --git a/scss/bootstrap/_carousel.scss b/scss/bootstrap/_carousel.scss index fb5e9f856a..db30bed8b9 100644 --- a/scss/bootstrap/_carousel.scss +++ b/scss/bootstrap/_carousel.scss @@ -127,7 +127,7 @@ display: inline-block; width: $carousel-control-icon-width; height: $carousel-control-icon-width; - background: no-repeat 50% / 100% 100%; + background: 50% / 100% 100% no-repeat; } .carousel-control-prev-icon { background-image: escape-svg($carousel-control-prev-icon-bg); diff --git a/scss/bootstrap/_custom-forms.scss b/scss/bootstrap/_custom-forms.scss index 0057b330f1..4afc080876 100644 --- a/scss/bootstrap/_custom-forms.scss +++ b/scss/bootstrap/_custom-forms.scss @@ -104,7 +104,7 @@ width: $custom-control-indicator-size; height: $custom-control-indicator-size; content: ""; - background: no-repeat 50% / #{$custom-control-indicator-bg-size}; + background: 50% / #{$custom-control-indicator-bg-size} no-repeat; } } @@ -315,6 +315,7 @@ width: 100%; height: $custom-file-height; margin: 0; + overflow: hidden; opacity: 0; &:focus ~ .custom-file-label { @@ -347,6 +348,7 @@ z-index: 1; height: $custom-file-height; padding: $custom-file-padding-y $custom-file-padding-x; + overflow: hidden; font-family: $custom-file-font-family; font-weight: $custom-file-font-weight; line-height: $custom-file-line-height; diff --git a/scss/bootstrap/_dropdown.scss b/scss/bootstrap/_dropdown.scss index a8aaa585c1..f39de11857 100644 --- a/scss/bootstrap/_dropdown.scss +++ b/scss/bootstrap/_dropdown.scss @@ -100,7 +100,7 @@ } } -// When enabled Popper.js, reset basic dropdown position +// When Popper is enabled, reset the basic dropdown position // stylelint-disable-next-line no-duplicate-selectors .dropdown-menu { &[x-placement^="top"], diff --git a/scss/bootstrap/_input-group.scss b/scss/bootstrap/_input-group.scss index cad8ea367a..d72ebeaba7 100644 --- a/scss/bootstrap/_input-group.scss +++ b/scss/bootstrap/_input-group.scss @@ -42,7 +42,6 @@ > .form-control, > .custom-select { - &:not(:last-child) { @include border-right-radius(0); } &:not(:first-child) { @include border-left-radius(0); } } @@ -53,9 +52,24 @@ align-items: center; &:not(:last-child) .custom-file-label, - &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); } &:not(:first-child) .custom-file-label { @include border-left-radius(0); } } + + &:not(.has-validation) { + > .form-control:not(:last-child), + > .custom-select:not(:last-child), + > .custom-file:not(:last-child) .custom-file-label::after { + @include border-right-radius(0); + } + } + + &.has-validation { + > .form-control:nth-last-child(n + 3), + > .custom-select:nth-last-child(n + 3), + > .custom-file:nth-last-child(n + 3) .custom-file-label::after { + @include border-right-radius(0); + } + } } @@ -175,8 +189,10 @@ .input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text, -.input-group > .input-group-append:not(:last-child) > .btn, -.input-group > .input-group-append:not(:last-child) > .input-group-text, +.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn, +.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text, +.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn, +.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text, .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { @include border-right-radius(0); diff --git a/scss/bootstrap/_navbar.scss b/scss/bootstrap/_navbar.scss index 5f10a62f14..5d4b6cd6b8 100644 --- a/scss/bootstrap/_navbar.scss +++ b/scss/bootstrap/_navbar.scss @@ -136,8 +136,7 @@ height: 1.5em; vertical-align: middle; content: ""; - background: no-repeat center center; - background-size: 100% 100%; + background: 50% / 100% 100% no-repeat; } // Generate series of `.navbar-expand-*` responsive classes for configuring diff --git a/scss/bootstrap/_progress.scss b/scss/bootstrap/_progress.scss index 1a037045a9..e206474a83 100644 --- a/scss/bootstrap/_progress.scss +++ b/scss/bootstrap/_progress.scss @@ -36,7 +36,7 @@ @if $enable-transitions { .progress-bar-animated { - animation: progress-bar-stripes $progress-bar-animation-timing; + animation: $progress-bar-animation-timing progress-bar-stripes; @if $enable-prefers-reduced-motion-media-query { @media (prefers-reduced-motion: reduce) { diff --git a/scss/bootstrap/_reboot.scss b/scss/bootstrap/_reboot.scss index 6f73466d3b..373b18c814 100644 --- a/scss/bootstrap/_reboot.scss +++ b/scss/bootstrap/_reboot.scss @@ -1,4 +1,4 @@ -// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix +// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix // Reboot // @@ -312,8 +312,8 @@ button { // // Credit: https://github.com/suitcss/base/ button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; + outline: dotted 1px; + outline: -webkit-focus-ring-color auto 5px; } input, diff --git a/scss/bootstrap/_root.scss b/scss/bootstrap/_root.scss index 8110030c64..ad550df3b4 100644 --- a/scss/bootstrap/_root.scss +++ b/scss/bootstrap/_root.scss @@ -1,4 +1,3 @@ -// Do not forget to update getting-started/theming.md! :root { // Custom variable values only support SassScript inside `#{}`. @each $color, $value in $colors { diff --git a/scss/bootstrap/_spinners.scss b/scss/bootstrap/_spinners.scss index 146c820675..7d8fba7a11 100644 --- a/scss/bootstrap/_spinners.scss +++ b/scss/bootstrap/_spinners.scss @@ -15,7 +15,7 @@ border-right-color: transparent; // stylelint-disable-next-line property-disallowed-list border-radius: 50%; - animation: spinner-border .75s linear infinite; + animation: .75s linear infinite spinner-border; } .spinner-border-sm { @@ -47,10 +47,19 @@ // stylelint-disable-next-line property-disallowed-list border-radius: 50%; opacity: 0; - animation: spinner-grow .75s linear infinite; + animation: .75s linear infinite spinner-grow; } .spinner-grow-sm { width: $spinner-width-sm; height: $spinner-height-sm; } + +@if $enable-prefers-reduced-motion-media-query { + @media (prefers-reduced-motion: reduce) { + .spinner-border, + .spinner-grow { + animation-duration: 1.5s; + } + } +} diff --git a/scss/bootstrap/_type.scss b/scss/bootstrap/_type.scss index 43dde7d0fe..3112a734bb 100644 --- a/scss/bootstrap/_type.scss +++ b/scss/bootstrap/_type.scss @@ -1,4 +1,4 @@ -// stylelint-disable declaration-no-important, selector-list-comma-newline-after +// stylelint-disable selector-list-comma-newline-after // // Headings diff --git a/scss/bootstrap/_variables.scss b/scss/bootstrap/_variables.scss index 7bbbe6fb13..53457928ea 100644 --- a/scss/bootstrap/_variables.scss +++ b/scss/bootstrap/_variables.scss @@ -4,8 +4,6 @@ // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. // Color system -@import "functions"; - $white: #fff !default; $gray-100: #f8f9fa !default; @@ -276,7 +274,7 @@ $embed-responsive-aspect-ratios: join( // 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, "Noto Sans", 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", "Liberation 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 @@ -585,7 +583,7 @@ $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: url("data:image/svg+xml,") !default; -$custom-select-background: escape-svg($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-background: escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon) $custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $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; diff --git a/scss/bootstrap/bootstrap-grid.scss b/scss/bootstrap/bootstrap-grid.scss index a5cf3b7896..d88b9c8fb8 100644 --- a/scss/bootstrap/bootstrap-grid.scss +++ b/scss/bootstrap/bootstrap-grid.scss @@ -19,6 +19,7 @@ html { @import "functions"; @import "variables"; +@import "mixins/deprecate"; @import "mixins/breakpoints"; @import "mixins/grid-framework"; @import "mixins/grid"; diff --git a/scss/bootstrap/bootstrap.scss b/scss/bootstrap/bootstrap.scss index b490db554c..0a206557be 100644 --- a/scss/bootstrap/bootstrap.scss +++ b/scss/bootstrap/bootstrap.scss @@ -4,11 +4,9 @@ * Copyright 2011-2020 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ -/* -Caller should import variables (which in turn includes functions..) + @import "functions"; @import "variables"; -*/ @import "mixins"; @import "root"; @import "reboot"; diff --git a/scss/bootstrap/mixins/_badge.scss b/scss/bootstrap/mixins/_badge.scss index 5c03ff1380..f1c499141a 100644 --- a/scss/bootstrap/mixins/_badge.scss +++ b/scss/bootstrap/mixins/_badge.scss @@ -2,8 +2,7 @@ color: color-yiq($bg); background-color: $bg; - /* @at-root a#{&} { */ - &[href] { + @at-root a#{&} { @include hover-focus() { color: color-yiq($bg); background-color: darken($bg, 10%); diff --git a/scss/bootstrap/mixins/_forms.scss b/scss/bootstrap/mixins/_forms.scss index 39b52f3cae..a32163049c 100644 --- a/scss/bootstrap/mixins/_forms.scss +++ b/scss/bootstrap/mixins/_forms.scss @@ -64,6 +64,13 @@ color: color-yiq($color); background-color: rgba($color, $form-feedback-tooltip-opacity); @include border-radius($form-feedback-tooltip-border-radius); + + // See https://github.com/twbs/bootstrap/pull/31557 + // Align tooltip to form elements + .form-row > .col > &, + .form-row > [class*="col-"] > & { + left: $form-grid-gutter-width / 2; + } } @include form-validation-state-selector($state) { @@ -108,7 +115,7 @@ @if $enable-validation-icons { padding-right: $custom-select-feedback-icon-padding-right; - background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size; + background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat; } &:focus { diff --git a/scss/bootstrap/mixins/_image.scss b/scss/bootstrap/mixins/_image.scss index c971e038be..3aaa0d7046 100644 --- a/scss/bootstrap/mixins/_image.scss +++ b/scss/bootstrap/mixins/_image.scss @@ -26,7 +26,7 @@ // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio, // but doesn't convert dppx=>dpi. // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard. - // Compatibility info: https://caniuse.com/#feat=css-media-resolution + // Compatibility info: https://caniuse.com/css-media-resolution @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx only screen and (min-resolution: 2dppx) { // Standardized background-image: url($file-2x);