sync with updated bs
authorAlan Knowles <alan@roojs.com>
Wed, 25 Nov 2020 10:10:06 +0000 (18:10 +0800)
committerAlan Knowles <alan@roojs.com>
Wed, 25 Nov 2020 10:10:06 +0000 (18:10 +0800)
18 files changed:
scss/bootstrap/_badge.scss
scss/bootstrap/_breadcrumb.scss
scss/bootstrap/_carousel.scss
scss/bootstrap/_custom-forms.scss
scss/bootstrap/_dropdown.scss
scss/bootstrap/_input-group.scss
scss/bootstrap/_navbar.scss
scss/bootstrap/_progress.scss
scss/bootstrap/_reboot.scss
scss/bootstrap/_root.scss
scss/bootstrap/_spinners.scss
scss/bootstrap/_type.scss
scss/bootstrap/_variables.scss
scss/bootstrap/bootstrap-grid.scss
scss/bootstrap/bootstrap.scss
scss/bootstrap/mixins/_badge.scss
scss/bootstrap/mixins/_forms.scss
scss/bootstrap/mixins/_image.scss

index 343c38e..42c5d08 100644 (file)
   vertical-align: baseline;
   @include border-radius($badge-border-radius);
   @include transition($badge-transition);
   vertical-align: baseline;
   @include border-radius($badge-border-radius);
   @include transition($badge-transition);
-/*
+
   @at-root a#{&} {
     @include hover-focus() {
       text-decoration: none;
     }
   }
   @at-root a#{&} {
     @include hover-focus() {
       text-decoration: none;
     }
   }
-*/
+
   // Empty badges collapse automatically
   &:empty {
     display: none;
   // Empty badges collapse automatically
   &:empty {
     display: none;
index a0cf7e2..9c204c7 100644 (file)
 }
 
 .breadcrumb-item {
 }
 
 .breadcrumb-item {
-  display: flex;
-
   // The separator between breadcrumbs (by default, a forward-slash: "/")
   + .breadcrumb-item {
     padding-left: $breadcrumb-item-padding;
 
     &::before {
   // 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);
       padding-right: $breadcrumb-item-padding;
       color: $breadcrumb-divider-color;
       content: escape-svg($breadcrumb-divider);
index fb5e9f8..db30bed 100644 (file)
   display: inline-block;
   width: $carousel-control-icon-width;
   height: $carousel-control-icon-width;
   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);
 }
 .carousel-control-prev-icon {
   background-image: escape-svg($carousel-control-prev-icon-bg);
index 0057b33..4afc080 100644 (file)
     width: $custom-control-indicator-size;
     height: $custom-control-indicator-size;
     content: "";
     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;
   }
 }
 
   }
 }
 
   width: 100%;
   height: $custom-file-height;
   margin: 0;
   width: 100%;
   height: $custom-file-height;
   margin: 0;
+  overflow: hidden;
   opacity: 0;
 
   &:focus ~ .custom-file-label {
   opacity: 0;
 
   &:focus ~ .custom-file-label {
   z-index: 1;
   height: $custom-file-height;
   padding: $custom-file-padding-y $custom-file-padding-x;
   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;
   font-family: $custom-file-font-family;
   font-weight: $custom-file-font-weight;
   line-height: $custom-file-line-height;
index a8aaa58..f39de11 100644 (file)
   }
 }
 
   }
 }
 
-// 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"],
 // stylelint-disable-next-line no-duplicate-selectors
 .dropdown-menu {
   &[x-placement^="top"],
index cad8ea3..d72ebea 100644 (file)
@@ -42,7 +42,6 @@
 
   > .form-control,
   > .custom-select {
 
   > .form-control,
   > .custom-select {
-    &:not(:last-child) { @include border-right-radius(0); }
     &:not(:first-child) { @include border-left-radius(0); }
   }
 
     &:not(:first-child) { @include border-left-radius(0); }
   }
 
     align-items: center;
 
     &:not(:last-child) .custom-file-label,
     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(: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);
+    }
+  }
 }
 
 
 }
 
 
 
 .input-group > .input-group-prepend > .btn,
 .input-group > .input-group-prepend > .input-group-text,
 
 .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);
 .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);
index 5f10a62..5d4b6cd 100644 (file)
   height: 1.5em;
   vertical-align: middle;
   content: "";
   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
 }
 
 // Generate series of `.navbar-expand-*` responsive classes for configuring
index 1a03704..e206474 100644 (file)
@@ -36,7 +36,7 @@
 
 @if $enable-transitions {
   .progress-bar-animated {
 
 @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) {
 
     @if $enable-prefers-reduced-motion-media-query {
       @media (prefers-reduced-motion: reduce) {
index 6f73466..373b18c 100644 (file)
@@ -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
 //
 
 // Reboot
 //
@@ -312,8 +312,8 @@ button {
 //
 // Credit: https://github.com/suitcss/base/
 button:focus {
 //
 // 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,
 }
 
 input,
index 8110030..ad550df 100644 (file)
@@ -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 {
 :root {
   // Custom variable values only support SassScript inside `#{}`.
   @each $color, $value in $colors {
index 146c820..7d8fba7 100644 (file)
@@ -15,7 +15,7 @@
   border-right-color: transparent;
   // stylelint-disable-next-line property-disallowed-list
   border-radius: 50%;
   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 {
 }
 
 .spinner-border-sm {
   // stylelint-disable-next-line property-disallowed-list
   border-radius: 50%;
   opacity: 0;
   // 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;
 }
 }
 
 .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;
+    }
+  }
+}
index 43dde7d..3112a73 100644 (file)
@@ -1,4 +1,4 @@
-// stylelint-disable declaration-no-important, selector-list-comma-newline-after
+// stylelint-disable selector-list-comma-newline-after
 
 //
 // Headings
 
 //
 // Headings
index 7bbbe6f..5345792 100644 (file)
@@ -4,8 +4,6 @@
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
 // Color system
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
 // Color system
-@import "functions";
-
 
 $white:    #fff !default;
 $gray-100: #f8f9fa !default;
 
 $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, 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
 $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,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !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;
 
 $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;
index a5cf3b7..d88b9c8 100644 (file)
@@ -19,6 +19,7 @@ html {
 @import "functions";
 @import "variables";
 
 @import "functions";
 @import "variables";
 
+@import "mixins/deprecate";
 @import "mixins/breakpoints";
 @import "mixins/grid-framework";
 @import "mixins/grid";
 @import "mixins/breakpoints";
 @import "mixins/grid-framework";
 @import "mixins/grid";
index b490db5..0a20655 100644 (file)
@@ -4,11 +4,9 @@
  * Copyright 2011-2020 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
  * 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 "functions";
 @import "variables";
-*/
 @import "mixins";
 @import "root";
 @import "reboot";
 @import "mixins";
 @import "root";
 @import "reboot";
index 5c03ff1..f1c4991 100644 (file)
@@ -2,8 +2,7 @@
   color: color-yiq($bg);
   background-color: $bg;
 
   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%);
     @include hover-focus() {
       color: color-yiq($bg);
       background-color: darken($bg, 10%);
index 39b52f3..a321630 100644 (file)
     color: color-yiq($color);
     background-color: rgba($color, $form-feedback-tooltip-opacity);
     @include border-radius($form-feedback-tooltip-border-radius);
     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) {
   }
 
   @include form-validation-state-selector($state) {
 
       @if $enable-validation-icons {
         padding-right: $custom-select-feedback-icon-padding-right;
 
       @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 {
       }
 
       &:focus {
index c971e03..3aaa0d7 100644 (file)
@@ -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.
   // 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);
   @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);