`)
.dropup,
-.dropright,
+.dropend,
.dropdown,
-.dropleft {
+.dropstart {
position: relative;
}
@@ -32,21 +32,31 @@
border: $dropdown-border-width solid $dropdown-border-color;
@include border-radius($dropdown-border-radius);
@include box-shadow($dropdown-box-shadow);
+
+ // Reset positioning when positioned with Popper
+ &[style] {
+ right: auto !important; // stylelint-disable-line declaration-no-important
+ }
}
// scss-docs-start responsive-breakpoints
+// We deliberately hardcode the `bs-` prefix because we check
+// this custom property in JS to determine Popper's positioning
+
@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}-start {
+ --bs-position: start;
+ right: auto #{'/* rtl:ignore */'};
+ left: 0 #{'/* rtl:ignore */'};
}
- .dropdown-menu#{$infix}-right {
- right: 0;
- left: auto;
+ .dropdown-menu#{$infix}-end {
+ --bs-position: end;
+ right: 0 #{'/* rtl:ignore */'};
+ left: auto #{'/* rtl:ignore */'};
}
}
}
@@ -67,7 +77,7 @@
}
}
-.dropright {
+.dropend {
.dropdown-menu {
top: 0;
right: auto;
@@ -77,14 +87,14 @@
}
.dropdown-toggle {
- @include caret(right);
+ @include caret(end);
&::after {
vertical-align: 0;
}
}
}
-.dropleft {
+.dropstart {
.dropdown-menu {
top: 0;
right: 100%;
@@ -94,25 +104,13 @@
}
.dropdown-toggle {
- @include caret(left);
+ @include caret(start);
&::before {
vertical-align: 0;
}
}
}
-// 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 {
height: 0;
diff --git a/src/scss/bootstrap/_forms.scss b/src/scss/bootstrap/_forms.scss
index 39ba90d6..01c560b7 100644
--- a/src/scss/bootstrap/_forms.scss
+++ b/src/scss/bootstrap/_forms.scss
@@ -1,9 +1,9 @@
-@import "forms/labels";
-@import "forms/form-text";
-@import "forms/form-control";
-@import "forms/form-select";
-@import "forms/form-check";
-@import "forms/form-file";
-@import "forms/form-range";
-@import "forms/input-group";
-@import "forms/validation";
+@import 'forms/labels';
+@import 'forms/form-text';
+@import 'forms/form-control';
+@import 'forms/form-select';
+@import 'forms/form-check';
+@import 'forms/form-range';
+@import 'forms/floating-labels';
+@import 'forms/input-group';
+@import 'forms/validation';
diff --git a/src/scss/bootstrap/_functions.scss b/src/scss/bootstrap/_functions.scss
index 2c563a46..6db94644 100644
--- a/src/scss/bootstrap/_functions.scss
+++ b/src/scss/bootstrap/_functions.scss
@@ -185,24 +185,23 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
}
-// Request a color level
-// scss-docs-start color-level
-@function color-level($color: $primary, $level: 0) {
- $color-base: if($level > 0, $black, $white);
- $level: abs($level);
-
- @return mix($color-base, $color, $level * $theme-color-interval);
-}
-// scss-docs-end color-level
-
-@function tint-color($color, $level) {
- @return mix(white, $color, $level * $theme-color-interval);
+// scss-docs-start color-functions
+// Tint a color: mix a color with white
+@function tint-color($color, $weight) {
+ @return mix(white, $color, $weight);
}
-@function shade-color($color, $level) {
- @return mix(black, $color, $level * $theme-color-interval);
+// Shade a color: mix a color with black
+@function shade-color($color, $weight) {
+ @return mix(black, $color, $weight);
}
+// Shade the color if the weight is positive, else tint it
+@function shift-color($color, $weight) {
+ @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+}
+// scss-docs-end color-functions
+
// Return valid calc
@function add($value1, $value2, $return-calc: true) {
@if $value1 == null {
diff --git a/src/scss/bootstrap/_list-group.scss b/src/scss/bootstrap/_list-group.scss
index 1a3b1c85..0b19bc4f 100644
--- a/src/scss/bootstrap/_list-group.scss
+++ b/src/scss/bootstrap/_list-group.scss
@@ -96,13 +96,13 @@
> .list-group-item {
&:first-child {
- @include border-bottom-left-radius($list-group-border-radius);
- @include border-top-right-radius(0);
+ @include border-bottom-start-radius($list-group-border-radius);
+ @include border-top-end-radius(0);
}
&:last-child {
- @include border-top-right-radius($list-group-border-radius);
- @include border-bottom-left-radius(0);
+ @include border-top-end-radius($list-group-border-radius);
+ @include border-bottom-start-radius(0);
}
&.active {
@@ -146,11 +146,13 @@
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
-@each $color, $value in $theme-colors {
- @include list-group-item-variant(
- $color,
- color-level($value, $list-group-item-bg-level),
- color-level($value, $list-group-item-color-level)
- );
+@each $state, $value in $theme-colors {
+ $background: shift-color($value, $list-group-item-bg-scale);
+ $color: shift-color($value, $list-group-item-color-scale);
+ @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
+ $color: mix($value, color-contrast($background), abs($alert-color-scale));
+ }
+
+ @include list-group-item-variant($state, $background, $color);
}
// scss-docs-end list-group-modifiers
diff --git a/src/scss/bootstrap/_navbar.scss b/src/scss/bootstrap/_navbar.scss
index b76eb0a5..bd3c9a7e 100644
--- a/src/scss/bootstrap/_navbar.scss
+++ b/src/scss/bootstrap/_navbar.scss
@@ -54,7 +54,7 @@
.navbar-brand {
padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y;
- margin-right: $navbar-brand-margin-right;
+ margin-right: $navbar-brand-margin-end;
@include font-size($navbar-brand-font-size);
text-decoration: if($link-decoration == none, null, none);
white-space: nowrap;
diff --git a/src/scss/bootstrap/_pagination.scss b/src/scss/bootstrap/_pagination.scss
index 2d878b9e..95c729bb 100644
--- a/src/scss/bootstrap/_pagination.scss
+++ b/src/scss/bootstrap/_pagination.scss
@@ -31,7 +31,7 @@
.page-item {
&:not(:first-child) .page-link {
- margin-left: $pagination-margin-left;
+ margin-left: $pagination-margin-start;
}
&.active .page-link {
diff --git a/src/scss/bootstrap/_popover.scss b/src/scss/bootstrap/_popover.scss
index 6ebb2c3d..a8083149 100644
--- a/src/scss/bootstrap/_popover.scss
+++ b/src/scss/bootstrap/_popover.scss
@@ -1,7 +1,7 @@
.popover {
position: absolute;
top: 0;
- left: 0;
+ left: 0 #{'/* rtl:ignore */'};
z-index: $zindex-popover;
display: block;
max-width: $popover-max-width;
@@ -28,7 +28,7 @@
&::after {
position: absolute;
display: block;
- content: "";
+ content: '';
border-color: transparent;
border-style: solid;
}
@@ -36,7 +36,8 @@
}
.bs-popover-top {
- margin-bottom: $popover-arrow-height;
+ // Overrule margin set by popper.js
+ margin-bottom: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
> .popover-arrow {
bottom: subtract(-$popover-arrow-height, $popover-border-width);
@@ -55,8 +56,9 @@
}
}
-.bs-popover-right {
- margin-left: $popover-arrow-height;
+.bs-popover-end {
+ // Overrule margin set by popper.js
+ margin-left: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
> .popover-arrow {
left: subtract(-$popover-arrow-height, $popover-border-width);
@@ -79,7 +81,8 @@
}
.bs-popover-bottom {
- margin-top: $popover-arrow-height;
+ // Overrule margin set by popper.js
+ margin-top: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
> .popover-arrow {
top: subtract(-$popover-arrow-height, $popover-border-width);
@@ -105,13 +108,14 @@
display: block;
width: $popover-arrow-width;
margin-left: -$popover-arrow-width / 2;
- content: "";
+ content: '';
border-bottom: $popover-border-width solid $popover-header-bg;
}
}
-.bs-popover-left {
- margin-right: $popover-arrow-height;
+.bs-popover-start {
+ // Overrule margin set by popper.js
+ margin-right: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
> .popover-arrow {
right: subtract(-$popover-arrow-height, $popover-border-width);
@@ -134,21 +138,20 @@
}
.bs-popover-auto {
- &[x-placement^="top"] {
+ &[data-popper-placement^='top'] {
@extend .bs-popover-top;
}
- &[x-placement^="right"] {
- @extend .bs-popover-right;
+ &[data-popper-placement^='right'] {
+ @extend .bs-popover-end;
}
- &[x-placement^="bottom"] {
+ &[data-popper-placement^='bottom'] {
@extend .bs-popover-bottom;
}
- &[x-placement^="left"] {
- @extend .bs-popover-left;
+ &[data-popper-placement^='left'] {
+ @extend .bs-popover-start;
}
}
-
// Offset the popover to account for the popover arrow
.popover-header {
padding: $popover-header-padding-y $popover-header-padding-x;
@@ -156,7 +159,7 @@
@include font-size($font-size-base);
color: $popover-header-color;
background-color: $popover-header-bg;
- border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
+ border-bottom: $popover-border-width solid shade-color($popover-header-bg, 10%);
@include border-top-radius($popover-inner-border-radius);
&:empty {
diff --git a/src/scss/bootstrap/_progress.scss b/src/scss/bootstrap/_progress.scss
index a3fbecf2..ffc9ba89 100644
--- a/src/scss/bootstrap/_progress.scss
+++ b/src/scss/bootstrap/_progress.scss
@@ -1,7 +1,9 @@
// Disable animation if transitions are disabled
@if $enable-transitions {
@keyframes progress-bar-stripes {
- 0% { background-position-x: $progress-height; }
+ 0% {
+ background-position-x: $progress-height;
+ }
}
}
@@ -34,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-reduced-motion {
@media (prefers-reduced-motion: reduce) {
diff --git a/src/scss/bootstrap/_reboot.scss b/src/scss/bootstrap/_reboot.scss
index fe097aaa..a5679a40 100644
--- a/src/scss/bootstrap/_reboot.scss
+++ b/src/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
//
@@ -24,6 +24,12 @@
:root {
font-size: $font-size-root;
+
+ @if $enable-smooth-scroll {
+ @media (prefers-reduced-motion: no-preference) {
+ scroll-behavior: smooth;
+ }
+ }
}
// Body
@@ -134,13 +140,13 @@ p {
// Abbreviations
//
-// 1. Duplicate behavior to the data-* attribute for our tooltip plugin
+// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
// 3. Add explicit cursor to indicate changed behavior.
// 4. Prevent the text-decoration to be skipped.
abbr[title],
-abbr[data-original-title] {
+abbr[data-bs-original-title] {
// 1
text-decoration: underline; // 2
text-decoration: underline dotted; // 2
@@ -271,13 +277,13 @@ kbd,
samp {
font-family: $font-family-code;
@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
+ direction: ltr #{'/* rtl:ignore */'};
+ unicode-bidi: bidi-override;
}
// 1. Remove browser default top margin
// 2. Reset browser default of `1em` to use `rem`s
// 3. Don't allow content to break outside
-// 4. Disable auto-hiding scrollbar in legacy Edge to avoid overlap,
-// making it impossible to interact with the content
pre {
display: block;
@@ -286,7 +292,6 @@ pre {
overflow: auto; // 3
@include font-size($code-font-size);
color: $pre-color;
- -ms-overflow-style: scrollbar; // 4
// Account for some code outputs that place code tags in pre tags
code {
@@ -394,8 +399,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;
}
// 1. Remove the margin in Firefox and Safari
@@ -411,13 +416,6 @@ textarea {
line-height: inherit;
}
-// Show the overflow in Edge
-
-button,
-input {
- overflow: visible;
-}
-
// Remove the inheritance of text transform in Firefox
button,
@@ -493,8 +491,7 @@ fieldset {
// 1. By using `float: left`, the legend will behave like a block element.
// This way the border of a fieldset wraps around the legend if present.
-// 2. Correct the text wrapping in Edge.
-// 3. Fix wrapping bug.
+// 2. Fix wrapping bug.
// See https://github.com/twbs/bootstrap/issues/29712
legend {
@@ -505,10 +502,9 @@ legend {
@include font-size($legend-font-size);
font-weight: $legend-font-weight;
line-height: inherit;
- white-space: normal; // 2
+ * {
- clear: left; // 3
+ clear: left; // 2
}
}
@@ -540,6 +536,20 @@ legend {
-webkit-appearance: textfield; // 2
}
+// 1. A few input types should stay LTR
+// See https://rtlstyling.com/posts/rtl-styling#form-inputs
+// 2. RTL only output
+// See https://rtlcss.com/learn/usage-guide/control-directives/#raw
+
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+ direction: ltr;
+}
+*/
+
// Remove the inner padding in Chrome and Safari on macOS.
::-webkit-search-decoration {
@@ -552,7 +562,14 @@ legend {
padding: 0;
}
-// 1. Change font properties to `inherit` in Safari.
+// Inherit font family and line height for file input buttons
+
+// stylelint-disable-next-line selector-pseudo-element-no-unknown
+::file-selector-button {
+ font: inherit;
+}
+
+// 1. Change font properties to `inherit`
// 2. Correct the inability to style clickable types in iOS and Safari.
::-webkit-file-upload-button {
diff --git a/src/scss/bootstrap/_root.scss b/src/scss/bootstrap/_root.scss
index 44eff170..768d6343 100644
--- a/src/scss/bootstrap/_root.scss
+++ b/src/scss/bootstrap/_root.scss
@@ -1,16 +1,16 @@
:root {
// Custom variable values only support SassScript inside `#{}`.
@each $color, $value in $colors {
- --bs-#{$color}: #{$value};
+ --#{$variable-prefix}#{$color}: #{$value};
}
@each $color, $value in $theme-colors {
- --bs-#{$color}: #{$value};
+ --#{$variable-prefix}#{$color}: #{$value};
}
// Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
- --bs-font-sans-serif: #{inspect($font-family-sans-serif)};
- --bs-font-monospace: #{inspect($font-family-monospace)};
- --bs-gradient: #{$gradient};
+ --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+ --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
+ --#{$variable-prefix}gradient: #{$gradient};
}
diff --git a/src/scss/bootstrap/_spinners.scss b/src/scss/bootstrap/_spinners.scss
index 841d1113..638272f2 100644
--- a/src/scss/bootstrap/_spinners.scss
+++ b/src/scss/bootstrap/_spinners.scss
@@ -4,7 +4,7 @@
@keyframes spinner-border {
to {
- transform: rotate(360deg);
+ transform: rotate(360deg) #{'/* rtl:ignore */'};
}
}
@@ -17,7 +17,7 @@
border-right-color: transparent;
// stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
- animation: spinner-border $spinner-animation-speed linear infinite;
+ animation: $spinner-animation-speed linear infinite spinner-border;
}
.spinner-border-sm {
@@ -49,10 +49,19 @@
// stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
opacity: 0;
- animation: spinner-grow $spinner-animation-speed linear infinite;
+ animation: $spinner-animation-speed linear infinite spinner-grow;
}
.spinner-grow-sm {
width: $spinner-width-sm;
height: $spinner-height-sm;
}
+
+@if $enable-reduced-motion {
+ @media (prefers-reduced-motion: reduce) {
+ .spinner-border,
+ .spinner-grow {
+ animation-duration: $spinner-animation-speed * 2;
+ }
+ }
+}
diff --git a/src/scss/bootstrap/_tables.scss b/src/scss/bootstrap/_tables.scss
index 100ccd15..68eabe11 100644
--- a/src/scss/bootstrap/_tables.scss
+++ b/src/scss/bootstrap/_tables.scss
@@ -3,14 +3,13 @@
//
.table {
- --bs-table-bg: #{$table-bg};
- --bs-table-accent-bg: transparent;
- --bs-table-striped-color: #{$table-striped-color};
- --bs-table-striped-bg: #{$table-striped-bg};
- --bs-table-active-color: #{$table-active-color};
- --bs-table-active-bg: #{$table-active-bg};
- --bs-table-hover-color: #{$table-hover-color};
- --bs-table-hover-bg: #{$table-hover-bg};
+ --#{$variable-prefix}table-bg: #{$table-bg};
+ --#{$variable-prefix}table-striped-color: #{$table-striped-color};
+ --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
+ --#{$variable-prefix}table-active-color: #{$table-active-color};
+ --#{$variable-prefix}table-active-bg: #{$table-active-bg};
+ --#{$variable-prefix}table-hover-color: #{$table-hover-color};
+ --#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
width: 100%;
margin-bottom: $spacer;
@@ -25,8 +24,11 @@
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
padding: $table-cell-padding-y $table-cell-padding-x;
- background-color: var(--bs-table-bg);
- background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
+ background-color: var(--#{$variable-prefix}table-bg);
+ background-image: linear-gradient(
+ var(--#{$variable-prefix}table-accent-bg),
+ var(--#{$variable-prefix}table-accent-bg)
+ );
border-bottom-width: $table-border-width;
}
@@ -96,8 +98,8 @@
.table-striped {
> tbody > tr:nth-of-type(#{$table-striped-order}) {
- --bs-table-accent-bg: var(--bs-table-striped-bg);
- color: var(--bs-table-striped-color);
+ --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
+ color: var(--#{$variable-prefix}table-striped-color);
}
}
@@ -106,8 +108,8 @@
// The `.table-active` class can be added to highlight rows or cells
.table-active {
- --bs-table-accent-bg: var(--bs-table-active-bg);
- color: var(--bs-table-active-color);
+ --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
+ color: var(--#{$variable-prefix}table-active-color);
}
// Hover effect
@@ -116,8 +118,8 @@
.table-hover {
> tbody > tr:hover {
- --bs-table-accent-bg: var(--bs-table-hover-bg);
- color: var(--bs-table-hover-color);
+ --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
+ color: var(--#{$variable-prefix}table-hover-color);
}
}
diff --git a/src/scss/bootstrap/_toasts.scss b/src/scss/bootstrap/_toasts.scss
index e2b98e60..7a1cf735 100644
--- a/src/scss/bootstrap/_toasts.scss
+++ b/src/scss/bootstrap/_toasts.scss
@@ -1,25 +1,17 @@
.toast {
- max-width: $toast-max-width;
+ width: $toast-max-width;
+ max-width: 100%;
@include font-size($toast-font-size);
color: $toast-color;
+ pointer-events: auto;
background-color: $toast-background-color;
background-clip: padding-box;
border: $toast-border-width solid $toast-border-color;
box-shadow: $toast-box-shadow;
- opacity: 0;
@include border-radius($toast-border-radius);
- &:not(:last-child) {
- margin-bottom: $toast-padding-x;
- }
-
- &.showing {
- opacity: 1;
- }
-
- &.show {
- display: block;
- opacity: 1;
+ &:not(.showing):not(.show) {
+ opacity: 0;
}
&.hide {
@@ -27,6 +19,16 @@
}
}
+.toast-container {
+ width: max-content;
+ max-width: 100%;
+ pointer-events: none;
+
+ > :not(:last-child) {
+ margin-bottom: $toast-spacing;
+ }
+}
+
.toast-header {
display: flex;
align-items: center;
diff --git a/src/scss/bootstrap/_tooltip.scss b/src/scss/bootstrap/_tooltip.scss
index 4d405e03..a8fac839 100644
--- a/src/scss/bootstrap/_tooltip.scss
+++ b/src/scss/bootstrap/_tooltip.scss
@@ -12,7 +12,9 @@
word-wrap: break-word;
opacity: 0;
- &.show { opacity: $tooltip-opacity; }
+ &.show {
+ opacity: $tooltip-opacity;
+ }
.tooltip-arrow {
position: absolute;
@@ -22,7 +24,7 @@
&::before {
position: absolute;
- content: "";
+ content: '';
border-color: transparent;
border-style: solid;
}
@@ -36,14 +38,14 @@
bottom: 0;
&::before {
- top: 0;
+ top: -1px;
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
border-top-color: $tooltip-arrow-color;
}
}
}
-.bs-tooltip-right {
+.bs-tooltip-end {
padding: 0 $tooltip-arrow-height;
.tooltip-arrow {
@@ -52,7 +54,7 @@
height: $tooltip-arrow-width;
&::before {
- right: 0;
+ right: -1px;
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
border-right-color: $tooltip-arrow-color;
}
@@ -66,14 +68,14 @@
top: 0;
&::before {
- bottom: 0;
+ bottom: -1px;
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
border-bottom-color: $tooltip-arrow-color;
}
}
}
-.bs-tooltip-left {
+.bs-tooltip-start {
padding: 0 $tooltip-arrow-height;
.tooltip-arrow {
@@ -82,7 +84,7 @@
height: $tooltip-arrow-width;
&::before {
- left: 0;
+ left: -1px;
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
border-left-color: $tooltip-arrow-color;
}
@@ -90,17 +92,17 @@
}
.bs-tooltip-auto {
- &[x-placement^="top"] {
+ &[data-popper-placement^='top'] {
@extend .bs-tooltip-top;
}
- &[x-placement^="right"] {
- @extend .bs-tooltip-right;
+ &[data-popper-placement^='right'] {
+ @extend .bs-tooltip-end;
}
- &[x-placement^="bottom"] {
+ &[data-popper-placement^='bottom'] {
@extend .bs-tooltip-bottom;
}
- &[x-placement^="left"] {
- @extend .bs-tooltip-left;
+ &[data-popper-placement^='left'] {
+ @extend .bs-tooltip-start;
}
}
diff --git a/src/scss/bootstrap/_utilities.scss b/src/scss/bootstrap/_utilities.scss
index 9d29e1ee..601d60de 100644
--- a/src/scss/bootstrap/_utilities.scss
+++ b/src/scss/bootstrap/_utilities.scss
@@ -12,18 +12,22 @@ $utilities: map-merge(
'float': (
responsive: true,
property: float,
- values: left right none,
+ values: (
+ start: left,
+ end: right,
+ none: none,
+ ),
),
'overflow': (
property: overflow,
- values: auto hidden,
+ values: auto hidden visible scroll,
),
'display': (
responsive: true,
print: true,
property: display,
class: d,
- values: inline inline-block block table table-row table-cell flex inline-flex none,
+ values: inline inline-block block grid table table-row table-cell flex inline-flex none,
),
'shadow': (
property: box-shadow,
@@ -47,21 +51,23 @@ $utilities: map-merge(
property: bottom,
values: $position-values,
),
- 'left': (
+ 'start': (
property: left,
+ class: start,
values: $position-values,
),
- 'right': (
+ 'end': (
property: right,
+ class: end,
values: $position-values,
),
'translate-middle': (
property: transform,
class: translate-middle,
values: (
- null: (
- translateX(-50%) translateY(-50%),
- ),
+ null: translate(-50%, -50%),
+ x: translateX(-50%),
+ y: translateY(-50%),
),
),
'border': (
@@ -78,8 +84,9 @@ $utilities: map-merge(
0: 0,
),
),
- 'border-right': (
+ 'border-end': (
property: border-right,
+ class: border-end,
values: (
null: $border-width solid $border-color,
0: 0,
@@ -92,8 +99,9 @@ $utilities: map-merge(
0: 0,
),
),
- 'border-left': (
+ 'border-start': (
property: border-left,
+ class: border-start,
values: (
null: $border-width solid $border-color,
0: 0,
@@ -220,6 +228,12 @@ $utilities: map-merge(
class: flex,
values: wrap nowrap wrap-reverse,
),
+ 'gap': (
+ responsive: true,
+ property: gap,
+ class: gap,
+ values: $spacers,
+ ),
'justify-content': (
responsive: true,
property: justify-content,
@@ -331,10 +345,10 @@ $utilities: map-merge(
)
),
),
- 'margin-right': (
+ 'margin-end': (
responsive: true,
property: margin-right,
- class: mr,
+ class: me,
values:
map-merge(
$spacers,
@@ -355,10 +369,10 @@ $utilities: map-merge(
)
),
),
- 'margin-left': (
+ 'margin-start': (
responsive: true,
property: margin-left,
- class: ml,
+ class: ms,
values:
map-merge(
$spacers,
@@ -393,10 +407,10 @@ $utilities: map-merge(
class: mt,
values: $negative-spacers,
),
- 'negative-margin-right': (
+ 'negative-margin-end': (
responsive: true,
property: margin-right,
- class: mr,
+ class: me,
values: $negative-spacers,
),
'negative-margin-bottom': (
@@ -405,10 +419,10 @@ $utilities: map-merge(
class: mb,
values: $negative-spacers,
),
- 'negative-margin-left': (
+ 'negative-margin-start': (
responsive: true,
property: margin-left,
- class: ml,
+ class: ms,
values: $negative-spacers,
),
// Padding utilities
@@ -437,10 +451,10 @@ $utilities: map-merge(
class: pt,
values: $spacers,
),
- 'padding-right': (
+ 'padding-end': (
responsive: true,
property: padding-right,
- class: pr,
+ class: pe,
values: $spacers,
),
'padding-bottom': (
@@ -449,24 +463,36 @@ $utilities: map-merge(
class: pb,
values: $spacers,
),
- 'padding-left': (
+ 'padding-start': (
responsive: true,
property: padding-left,
- class: pl,
+ class: ps,
values: $spacers,
),
// Text
- 'font-weight':
+ 'font-size':
(
- property: font-weight,
- values: (
- light: $font-weight-light,
- lighter: $font-weight-lighter,
- normal: $font-weight-normal,
- bold: $font-weight-bold,
- bolder: $font-weight-bolder,
- ),
+ rfs: true,
+ property: font-size,
+ class: fs,
+ values: $font-sizes,
),
+ 'font-style': (
+ property: font-style,
+ class: fst,
+ values: italic normal,
+ ),
+ 'font-weight': (
+ property: font-weight,
+ class: fw,
+ values: (
+ light: $font-weight-light,
+ lighter: $font-weight-lighter,
+ normal: $font-weight-normal,
+ bold: $font-weight-bold,
+ bolder: $font-weight-bolder,
+ ),
+ ),
'text-transform': (
property: text-transform,
class: text,
@@ -476,7 +502,11 @@ $utilities: map-merge(
responsive: true,
property: text-align,
class: text,
- values: left right center,
+ values: (
+ start: left,
+ end: right,
+ center: center,
+ ),
),
'color': (
property: color,
@@ -521,7 +551,7 @@ $utilities: map-merge(
property: background-image,
class: bg,
values: (
- gradient: var(--bs-gradient),
+ gradient: var(--#{$variable-prefix}gradient),
),
),
'white-space': (
@@ -536,23 +566,19 @@ $utilities: map-merge(
property: text-decoration,
values: none underline line-through,
),
- 'font-style': (
- property: font-style,
- class: font,
- values: italic normal,
- ),
'word-wrap': (
property: word-wrap word-break,
class: text,
values: (
break: break-word,
),
+ rtl: false,
),
'font-family': (
property: font-family,
class: font,
values: (
- monospace: var(--bs-font-monospace),
+ monospace: var(--#{$variable-prefix}font-monospace),
),
),
'user-select': (
@@ -569,11 +595,12 @@ $utilities: map-merge(
class: rounded,
values: (
null: $border-radius,
- sm: $border-radius-sm,
- lg: $border-radius-lg,
- circle: 50%,
- pill: $rounded-pill,
0: 0,
+ 1: $border-radius-sm,
+ 2: $border-radius,
+ 3: $border-radius-lg,
+ circle: 50%,
+ pill: $border-radius-pill,
),
),
'rounded-top': (
@@ -583,9 +610,9 @@ $utilities: map-merge(
null: $border-radius,
),
),
- 'rounded-right': (
+ 'rounded-end': (
property: border-top-right-radius border-bottom-right-radius,
- class: rounded-right,
+ class: rounded-end,
values: (
null: $border-radius,
),
@@ -597,9 +624,9 @@ $utilities: map-merge(
null: $border-radius,
),
),
- 'rounded-left': (
+ 'rounded-start': (
property: border-bottom-left-radius border-top-left-radius,
- class: rounded-left,
+ class: rounded-start,
values: (
null: $border-radius,
),
diff --git a/src/scss/bootstrap/_variables.scss b/src/scss/bootstrap/_variables.scss
index 69708748..7a691504 100644
--- a/src/scss/bootstrap/_variables.scss
+++ b/src/scss/bootstrap/_variables.scss
@@ -67,7 +67,7 @@ $info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
-$dark: $gray-800 !default;
+$dark: $gray-900 !default;
// scss-docs-start theme-colors-map
$theme-colors: (
@@ -82,9 +82,6 @@ $theme-colors: (
) !default;
// scss-docs-end theme-colors-map
-// Set a specific jump point for requesting color jumps
-$theme-color-interval: 8% !default;
-
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio: 4.5 !default;
@@ -94,105 +91,105 @@ $color-contrast-dark: $black !default;
$color-contrast-light: $white !default;
// fusv-disable
-$blue-100: tint-color($blue, 8) !default;
-$blue-200: tint-color($blue, 6) !default;
-$blue-300: tint-color($blue, 4) !default;
-$blue-400: tint-color($blue, 2) !default;
+$blue-100: tint-color($blue, 80%) !default;
+$blue-200: tint-color($blue, 60%) !default;
+$blue-300: tint-color($blue, 40%) !default;
+$blue-400: tint-color($blue, 20%) !default;
$blue-500: $blue !default;
-$blue-600: shade-color($blue, 2) !default;
-$blue-700: shade-color($blue, 4) !default;
-$blue-800: shade-color($blue, 6) !default;
-$blue-900: shade-color($blue, 8) !default;
+$blue-600: shade-color($blue, 20%) !default;
+$blue-700: shade-color($blue, 40%) !default;
+$blue-800: shade-color($blue, 60%) !default;
+$blue-900: shade-color($blue, 80%) !default;
-$indigo-100: tint-color($indigo, 8) !default;
-$indigo-200: tint-color($indigo, 6) !default;
-$indigo-300: tint-color($indigo, 4) !default;
-$indigo-400: tint-color($indigo, 2) !default;
+$indigo-100: tint-color($indigo, 80%) !default;
+$indigo-200: tint-color($indigo, 60%) !default;
+$indigo-300: tint-color($indigo, 40%) !default;
+$indigo-400: tint-color($indigo, 20%) !default;
$indigo-500: $indigo !default;
-$indigo-600: shade-color($indigo, 2) !default;
-$indigo-700: shade-color($indigo, 4) !default;
-$indigo-800: shade-color($indigo, 6) !default;
-$indigo-900: shade-color($indigo, 8) !default;
+$indigo-600: shade-color($indigo, 20%) !default;
+$indigo-700: shade-color($indigo, 40%) !default;
+$indigo-800: shade-color($indigo, 60%) !default;
+$indigo-900: shade-color($indigo, 80%) !default;
-$purple-100: tint-color($purple, 8) !default;
-$purple-200: tint-color($purple, 6) !default;
-$purple-300: tint-color($purple, 4) !default;
-$purple-400: tint-color($purple, 2) !default;
+$purple-100: tint-color($purple, 80%) !default;
+$purple-200: tint-color($purple, 60%) !default;
+$purple-300: tint-color($purple, 40%) !default;
+$purple-400: tint-color($purple, 20%) !default;
$purple-500: $purple !default;
-$purple-600: shade-color($purple, 2) !default;
-$purple-700: shade-color($purple, 4) !default;
-$purple-800: shade-color($purple, 6) !default;
-$purple-900: shade-color($purple, 8) !default;
+$purple-600: shade-color($purple, 20%) !default;
+$purple-700: shade-color($purple, 40%) !default;
+$purple-800: shade-color($purple, 60%) !default;
+$purple-900: shade-color($purple, 80%) !default;
-$pink-100: tint-color($pink, 8) !default;
-$pink-200: tint-color($pink, 6) !default;
-$pink-300: tint-color($pink, 4) !default;
-$pink-400: tint-color($pink, 2) !default;
+$pink-100: tint-color($pink, 80%) !default;
+$pink-200: tint-color($pink, 60%) !default;
+$pink-300: tint-color($pink, 40%) !default;
+$pink-400: tint-color($pink, 20%) !default;
$pink-500: $pink !default;
-$pink-600: shade-color($pink, 2) !default;
-$pink-700: shade-color($pink, 4) !default;
-$pink-800: shade-color($pink, 6) !default;
-$pink-900: shade-color($pink, 8) !default;
+$pink-600: shade-color($pink, 20%) !default;
+$pink-700: shade-color($pink, 40%) !default;
+$pink-800: shade-color($pink, 60%) !default;
+$pink-900: shade-color($pink, 80%) !default;
-$red-100: tint-color($red, 8) !default;
-$red-200: tint-color($red, 6) !default;
-$red-300: tint-color($red, 4) !default;
-$red-400: tint-color($red, 2) !default;
+$red-100: tint-color($red, 80%) !default;
+$red-200: tint-color($red, 60%) !default;
+$red-300: tint-color($red, 40%) !default;
+$red-400: tint-color($red, 20%) !default;
$red-500: $red !default;
-$red-600: shade-color($red, 2) !default;
-$red-700: shade-color($red, 4) !default;
-$red-800: shade-color($red, 6) !default;
-$red-900: shade-color($red, 8) !default;
+$red-600: shade-color($red, 20%) !default;
+$red-700: shade-color($red, 40%) !default;
+$red-800: shade-color($red, 60%) !default;
+$red-900: shade-color($red, 80%) !default;
-$orange-100: tint-color($orange, 8) !default;
-$orange-200: tint-color($orange, 6) !default;
-$orange-300: tint-color($orange, 4) !default;
-$orange-400: tint-color($orange, 2) !default;
+$orange-100: tint-color($orange, 80%) !default;
+$orange-200: tint-color($orange, 60%) !default;
+$orange-300: tint-color($orange, 40%) !default;
+$orange-400: tint-color($orange, 20%) !default;
$orange-500: $orange !default;
-$orange-600: shade-color($orange, 2) !default;
-$orange-700: shade-color($orange, 4) !default;
-$orange-800: shade-color($orange, 6) !default;
-$orange-900: shade-color($orange, 8) !default;
+$orange-600: shade-color($orange, 20%) !default;
+$orange-700: shade-color($orange, 40%) !default;
+$orange-800: shade-color($orange, 60%) !default;
+$orange-900: shade-color($orange, 80%) !default;
-$yellow-100: tint-color($yellow, 8) !default;
-$yellow-200: tint-color($yellow, 6) !default;
-$yellow-300: tint-color($yellow, 4) !default;
-$yellow-400: tint-color($yellow, 2) !default;
+$yellow-100: tint-color($yellow, 80%) !default;
+$yellow-200: tint-color($yellow, 60%) !default;
+$yellow-300: tint-color($yellow, 40%) !default;
+$yellow-400: tint-color($yellow, 20%) !default;
$yellow-500: $yellow !default;
-$yellow-600: shade-color($yellow, 2) !default;
-$yellow-700: shade-color($yellow, 4) !default;
-$yellow-800: shade-color($yellow, 6) !default;
-$yellow-900: shade-color($yellow, 8) !default;
+$yellow-600: shade-color($yellow, 20%) !default;
+$yellow-700: shade-color($yellow, 40%) !default;
+$yellow-800: shade-color($yellow, 60%) !default;
+$yellow-900: shade-color($yellow, 80%) !default;
-$green-100: tint-color($green, 8) !default;
-$green-200: tint-color($green, 6) !default;
-$green-300: tint-color($green, 4) !default;
-$green-400: tint-color($green, 2) !default;
+$green-100: tint-color($green, 80%) !default;
+$green-200: tint-color($green, 60%) !default;
+$green-300: tint-color($green, 40%) !default;
+$green-400: tint-color($green, 20%) !default;
$green-500: $green !default;
-$green-600: shade-color($green, 2) !default;
-$green-700: shade-color($green, 4) !default;
-$green-800: shade-color($green, 6) !default;
-$green-900: shade-color($green, 8) !default;
+$green-600: shade-color($green, 20%) !default;
+$green-700: shade-color($green, 40%) !default;
+$green-800: shade-color($green, 60%) !default;
+$green-900: shade-color($green, 80%) !default;
-$teal-100: tint-color($teal, 8) !default;
-$teal-200: tint-color($teal, 6) !default;
-$teal-300: tint-color($teal, 4) !default;
-$teal-400: tint-color($teal, 2) !default;
+$teal-100: tint-color($teal, 80%) !default;
+$teal-200: tint-color($teal, 60%) !default;
+$teal-300: tint-color($teal, 40%) !default;
+$teal-400: tint-color($teal, 20%) !default;
$teal-500: $teal !default;
-$teal-600: shade-color($teal, 2) !default;
-$teal-700: shade-color($teal, 4) !default;
-$teal-800: shade-color($teal, 6) !default;
-$teal-900: shade-color($teal, 8) !default;
+$teal-600: shade-color($teal, 20%) !default;
+$teal-700: shade-color($teal, 40%) !default;
+$teal-800: shade-color($teal, 60%) !default;
+$teal-900: shade-color($teal, 80%) !default;
-$cyan-100: tint-color($cyan, 8) !default;
-$cyan-200: tint-color($cyan, 6) !default;
-$cyan-300: tint-color($cyan, 4) !default;
-$cyan-400: tint-color($cyan, 2) !default;
+$cyan-100: tint-color($cyan, 80%) !default;
+$cyan-200: tint-color($cyan, 60%) !default;
+$cyan-300: tint-color($cyan, 40%) !default;
+$cyan-400: tint-color($cyan, 20%) !default;
$cyan-500: $cyan !default;
-$cyan-600: shade-color($cyan, 2) !default;
-$cyan-700: shade-color($cyan, 4) !default;
-$cyan-800: shade-color($cyan, 6) !default;
-$cyan-900: shade-color($cyan, 8) !default;
+$cyan-600: shade-color($cyan, 20%) !default;
+$cyan-700: shade-color($cyan, 40%) !default;
+$cyan-800: shade-color($cyan, 60%) !default;
+$cyan-900: shade-color($cyan, 80%) !default;
// fusv-enable
// Characters which are escaped by the escape-svg function
@@ -214,6 +211,7 @@ $enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-reduced-motion: true !default;
+$enable-smooth-scroll: true !default;
$enable-grid-classes: true !default;
$enable-button-pointers: true !default;
$enable-rfs: true !default;
@@ -222,6 +220,10 @@ $enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
+// Prefix for :root CSS variables
+
+$variable-prefix: bs- !default;
+
// Gradient
//
// The gradient which is added to components if `$enable-gradients` is `true`
@@ -270,10 +272,9 @@ $body-text-align: null !default;
$link-color: $primary !default;
$link-decoration: underline !default;
-$link-hover-color: darken($link-color, 15%) !default;
+$link-shade-percentage: 20% !default;
+$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
$link-hover-decoration: null !default;
-// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
-$emphasized-link-hover-darken-percentage: 15% !default;
$stretched-link-pseudo-element: after !default;
$stretched-link-z-index: 1 !default;
@@ -331,18 +332,13 @@ $gutters: $spacers !default;
// Container padding
-$container-padding-x: $grid-gutter-width !default;
+$container-padding-x: $grid-gutter-width / 2 !default;
// Components
//
// Define common padding and border radius sizes and more.
$border-width: 1px !default;
-$border-color: $gray-300 !default;
-
-$border-radius: 0.25rem !default;
-$border-radius-sm: 0.2rem !default;
-$border-radius-lg: 0.3rem !default;
$border-widths: (
0: 0,
1: 1px,
@@ -352,7 +348,12 @@ $border-widths: (
5: 5px,
) !default;
-$rounded-pill: 50rem !default;
+$border-color: $gray-300 !default;
+
+$border-radius: 0.25rem !default;
+$border-radius-sm: 0.2rem !default;
+$border-radius-lg: 0.3rem !default;
+$border-radius-pill: 50rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
@@ -387,13 +388,13 @@ $aspect-ratios: (
// stylelint-disable value-keyword-case
$font-family-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
- 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
- 'Noto Color Emoji' !default;
+ '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;
// stylelint-enable value-keyword-case
-$font-family-base: var(--bs-font-sans-serif) !default;
-$font-family-code: var(--bs-font-monospace) !default;
+$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
+$font-family-code: var(--#{$variable-prefix}font-monospace) !default;
// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
// $font-size-base effects the font size of the body text
@@ -421,6 +422,17 @@ $h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
+// scss-docs-start font-sizes
+$font-sizes: (
+ 1: $h1-font-size,
+ 2: $h2-font-size,
+ 3: $h3-font-size,
+ 4: $h4-font-size,
+ 5: $h5-font-size,
+ 6: $h6-font-size,
+) !default;
+// scss-docs-end font-sizes
+
$headings-margin-bottom: $spacer / 2 !default;
$headings-font-family: null !default;
$headings-font-style: null !default;
@@ -516,15 +528,15 @@ $table-group-separator-color: currentColor !default;
$table-caption-color: $text-muted !default;
-$table-bg-level: -9 !default;
+$table-bg-scale: -80% !default;
$table-variants: (
- 'primary': color-level($primary, $table-bg-level),
- 'secondary': color-level($secondary, $table-bg-level),
- 'success': color-level($success, $table-bg-level),
- 'info': color-level($info, $table-bg-level),
- 'warning': color-level($warning, $table-bg-level),
- 'danger': color-level($danger, $table-bg-level),
+ 'primary': shift-color($primary, $table-bg-scale),
+ 'secondary': shift-color($secondary, $table-bg-scale),
+ 'success': shift-color($success, $table-bg-scale),
+ 'info': shift-color($info, $table-bg-scale),
+ 'warning': shift-color($warning, $table-bg-scale),
+ 'danger': shift-color($danger, $table-bg-scale),
'light': $light,
'dark': $dark,
) !default;
@@ -587,8 +599,6 @@ $btn-link-color: $link-color !default;
$btn-link-hover-color: $link-hover-color !default;
$btn-link-disabled-color: $gray-600 !default;
-$btn-block-spacing-y: 0.5rem !default;
-
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
$btn-border-radius-sm: $border-radius-sm !default;
@@ -630,7 +640,7 @@ $input-bg: $white !default;
$input-disabled-bg: $gray-200 !default;
$input-disabled-border-color: null !default;
-$input-color: $gray-700 !default;
+$input-color: $body-color !default;
$input-border-color: $gray-400 !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: $box-shadow-inset !default;
@@ -640,7 +650,7 @@ $input-border-radius-sm: $border-radius-sm !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-focus-bg: $input-bg !default;
-$input-focus-border-color: lighten($component-active-bg, 25%) !default;
+$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
$input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
@@ -671,7 +681,7 @@ $input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
$form-check-input-width: 1em !default;
$form-check-min-height: $font-size-base * $line-height-base !default;
-$form-check-padding-left: $form-check-input-width + 0.5em !default;
+$form-check-padding-start: $form-check-input-width + 0.5em !default;
$form-check-margin-bottom: 0.125rem !default;
$form-check-label-color: null !default;
$form-check-label-cursor: null !default;
@@ -698,9 +708,13 @@ $form-check-input-indeterminate-bg-color: $component-active-bg !default;
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,
") !default;
+$form-check-input-disabled-opacity: 0.5 !default;
+$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
+$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
+
$form-switch-color: rgba(0, 0, 0, 0.25) !default;
$form-switch-width: 2em !default;
-$form-switch-padding-left: $form-switch-width + 0.5em !default;
+$form-switch-padding-start: $form-switch-width + 0.5em !default;
$form-switch-bg-image: url("data:image/svg+xml,
") !default;
$form-switch-border-radius: $form-switch-width !default;
@@ -711,7 +725,7 @@ $form-switch-checked-color: $component-active-color !default;
$form-switch-checked-bg-image: url("data:image/svg+xml,
") !default;
$form-switch-checked-bg-position: right center !default;
-$form-check-inline-margin-right: 1rem !default;
+$form-check-inline-margin-end: 1rem !default;
$input-group-addon-padding-y: $input-padding-y !default;
$input-group-addon-padding-x: $input-padding-x !default;
@@ -724,7 +738,6 @@ $form-select-padding-y: $input-padding-y !default;
$form-select-padding-x: $input-padding-x !default;
$form-select-font-family: $input-font-family !default;
$form-select-font-size: $input-font-size !default;
-$form-select-height: $input-height !default;
$form-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
$form-select-font-weight: $input-font-weight !default;
$form-select-line-height: $input-line-height !default;
@@ -738,7 +751,7 @@ $form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
$form-select-indicator-color: $gray-800 !default;
$form-select-indicator: url("data:image/svg+xml,
") !default;
-$form-select-feedback-icon-padding-right: add(
+$form-select-feedback-icon-padding-end: add(
1em * 0.75,
(2 * $form-select-padding-y * 0.75) + $form-select-padding-x + $form-select-indicator-padding
) !default;
@@ -758,12 +771,10 @@ $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-c
$form-select-padding-y-sm: $input-padding-y-sm !default;
$form-select-padding-x-sm: $input-padding-x-sm !default;
$form-select-font-size-sm: $input-font-size-sm !default;
-$form-select-height-sm: $input-height-sm !default;
$form-select-padding-y-lg: $input-padding-y-lg !default;
$form-select-padding-x-lg: $input-padding-x-lg !default;
$form-select-font-size-lg: $input-font-size-lg !default;
-$form-select-height-lg: $input-height-lg !default;
$form-range-track-width: 100% !default;
$form-range-track-height: 0.5rem !default;
@@ -780,40 +791,23 @@ $form-range-thumb-border-radius: 1rem !default;
$form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default;
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
-$form-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;
+$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
$form-range-thumb-disabled-bg: $gray-500 !default;
$form-range-thumb-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out !default;
-$form-file-height: $input-height !default;
-$form-file-focus-border-color: $input-focus-border-color !default;
-$form-file-focus-box-shadow: $input-focus-box-shadow !default;
-$form-file-disabled-bg: $input-disabled-bg !default;
-$form-file-disabled-border-color: $input-disabled-border-color !default;
-
-$form-file-padding-y: $input-padding-y !default;
-$form-file-padding-x: $input-padding-x !default;
-$form-file-line-height: $input-line-height !default;
-$form-file-font-family: $input-font-family !default;
-$form-file-font-weight: $input-font-weight !default;
-$form-file-color: $input-color !default;
-$form-file-bg: $input-bg !default;
-$form-file-border-width: $input-border-width !default;
-$form-file-border-color: $input-border-color !default;
-$form-file-border-radius: $input-border-radius !default;
-$form-file-box-shadow: $input-box-shadow !default;
-$form-file-button-color: $form-file-color !default;
+$form-file-button-color: $input-color !default;
$form-file-button-bg: $input-group-addon-bg !default;
+$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
-$form-file-padding-y-sm: $input-padding-y-sm !default;
-$form-file-padding-x-sm: $input-padding-x-sm !default;
-$form-file-font-size-sm: $input-font-size-sm !default;
-$form-file-height-sm: $input-height-sm !default;
-
-$form-file-padding-y-lg: $input-padding-y-lg !default;
-$form-file-padding-x-lg: $input-padding-x-lg !default;
-$form-file-font-size-lg: $input-font-size-lg !default;
-$form-file-height-lg: $input-height-lg !default;
+$form-floating-height: add(3.5rem, $input-height-border) !default;
+$form-floating-padding-x: $input-padding-x !default;
+$form-floating-padding-y: 1rem !default;
+$form-floating-input-padding-t: 1.625rem !default;
+$form-floating-input-padding-b: 0.625rem !default;
+$form-floating-label-opacity: 0.65 !default;
+$form-floating-label-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !default;
+$form-floating-transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !default;
// Form validation
@@ -826,7 +820,7 @@ $form-feedback-invalid-color: $danger !default;
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
$form-feedback-icon-valid: url("data:image/svg+xml,
") !default;
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
-$form-feedback-icon-invalid: url("data:image/svg+xml,
") !default;
+$form-feedback-icon-invalid: url("data:image/svg+xml,
") !default;
// scss-docs-start form-validation-states
$form-validation-states: (
@@ -892,7 +886,7 @@ $navbar-brand-font-size: $font-size-lg !default;
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
-$navbar-brand-margin-right: 1rem !default;
+$navbar-brand-margin-end: 1rem !default;
$navbar-toggler-padding-y: 0.25rem !default;
$navbar-toggler-padding-x: 0.75rem !default;
@@ -940,7 +934,7 @@ $dropdown-divider-margin-y: $spacer / 2 !default;
$dropdown-box-shadow: $box-shadow !default;
$dropdown-link-color: $gray-900 !default;
-$dropdown-link-hover-color: darken($gray-900, 5%) !default;
+$dropdown-link-hover-color: shade-color($gray-900, 10%) !default;
$dropdown-link-hover-bg: $gray-100 !default;
$dropdown-link-active-color: $component-active-color !default;
@@ -980,7 +974,7 @@ $pagination-color: $link-color !default;
$pagination-bg: $white !default;
$pagination-border-width: $border-width !default;
$pagination-border-radius: $border-radius !default;
-$pagination-margin-left: -$pagination-border-width !default;
+$pagination-margin-start: -$pagination-border-width !default;
$pagination-border-color: $gray-300 !default;
$pagination-focus-color: $link-hover-color !default;
@@ -1024,6 +1018,38 @@ $card-img-overlay-padding: $spacer !default;
$card-group-margin: $grid-gutter-width / 2 !default;
+// Accordion
+$accordion-padding-y: 1rem !default;
+$accordion-padding-x: 1.25rem !default;
+$accordion-color: $body-color !default;
+$accordion-bg: transparent !default;
+$accordion-border-width: $border-width !default;
+$accordion-border-color: rgba($black, 0.125) !default;
+$accordion-border-radius: $border-radius !default;
+
+$accordion-body-padding-y: $accordion-padding-y !default;
+$accordion-body-padding-x: $accordion-padding-x !default;
+
+$accordion-button-padding-y: $accordion-padding-y !default;
+$accordion-button-padding-x: $accordion-padding-x !default;
+$accordion-button-color: $accordion-color !default;
+$accordion-button-bg: $accordion-bg !default;
+$accordion-transition: $btn-transition, border-radius 0.15s ease !default;
+$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
+$accordion-button-active-color: shade-color($primary, 10%) !default;
+
+$accordion-button-focus-border-color: $input-focus-border-color !default;
+$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
+
+$accordion-icon-width: 1.25rem !default;
+$accordion-icon-color: $accordion-color !default;
+$accordion-icon-active-color: $accordion-button-active-color !default;
+$accordion-icon-transition: transform 0.2s ease-in-out !default;
+$accordion-icon-transform: rotate(180deg) !default;
+
+$accordion-button-icon: url("data:image/svg+xml,
") !default;
+$accordion-button-active-icon: url("data:image/svg+xml,
") !default;
+
// Tooltips
$tooltip-font-size: $font-size-sm !default;
@@ -1059,7 +1085,7 @@ $popover-border-radius: $border-radius-lg !default;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
$popover-box-shadow: $box-shadow !default;
-$popover-header-bg: darken($popover-bg, 3%) !default;
+$popover-header-bg: shade-color($popover-bg, 6%) !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: 0.5rem !default;
$popover-header-padding-x: $spacer !default;
@@ -1086,6 +1112,7 @@ $toast-border-width: 1px !default;
$toast-border-color: rgba(0, 0, 0, 0.1) !default;
$toast-border-radius: $border-radius !default;
$toast-box-shadow: $box-shadow !default;
+$toast-spacing: $container-padding-x !default;
$toast-header-color: $gray-600 !default;
$toast-header-background-color: rgba($white, 0.85) !default;
@@ -1156,9 +1183,9 @@ $alert-border-radius: $border-radius !default;
$alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: $border-width !default;
-$alert-bg-level: -10 !default;
-$alert-border-level: -9 !default;
-$alert-color-level: 6 !default;
+$alert-bg-scale: -80% !default;
+$alert-border-scale: -70% !default;
+$alert-color-scale: 40% !default;
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
@@ -1184,8 +1211,8 @@ $list-group-border-radius: $border-radius !default;
$list-group-item-padding-y: $spacer / 2 !default;
$list-group-item-padding-x: $spacer !default;
-$list-group-item-bg-level: -9 !default;
-$list-group-item-color-level: 6 !default;
+$list-group-item-bg-scale: -80% !default;
+$list-group-item-color-scale: 40% !default;
$list-group-hover-bg: $gray-100 !default;
$list-group-active-color: $component-active-color !default;
@@ -1218,15 +1245,16 @@ $figure-caption-color: $gray-600 !default;
// Breadcrumbs
$breadcrumb-font-size: null !default;
-$breadcrumb-padding-y: $spacer / 2 !default;
-$breadcrumb-padding-x: $spacer !default;
+$breadcrumb-padding-y: 0 !default;
+$breadcrumb-padding-x: 0 !default;
$breadcrumb-item-padding-x: 0.5rem !default;
$breadcrumb-margin-bottom: 1rem !default;
-$breadcrumb-bg: $gray-200 !default;
+$breadcrumb-bg: null !default;
$breadcrumb-divider-color: $gray-600 !default;
$breadcrumb-active-color: $gray-600 !default;
$breadcrumb-divider: quote('/') !default;
-$breadcrumb-border-radius: $border-radius !default;
+$breadcrumb-divider-flipped: $breadcrumb-divider !default;
+$breadcrumb-border-radius: null !default;
// Carousel
@@ -1252,8 +1280,8 @@ $carousel-caption-spacer: 1.25rem !default;
$carousel-control-icon-width: 2rem !default;
-$carousel-control-prev-icon-bg: url("data:image/svg+xml,
") !default;
-$carousel-control-next-icon-bg: url("data:image/svg+xml,
") !default;
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,
") !default;
+$carousel-control-next-icon-bg: url("data:image/svg+xml,
") !default;
$carousel-transition-duration: 0.6s !default;
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
@@ -1280,7 +1308,7 @@ $btn-close-height: $btn-close-width !default;
$btn-close-padding-x: 0.25em !default;
$btn-close-padding-y: $btn-close-padding-x !default;
$btn-close-color: $black !default;
-$btn-close-bg: url("data:image/svg+xml,
") !default;
+$btn-close-bg: url("data:image/svg+xml,
") !default;
$btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
$btn-close-opacity: 0.5 !default;
$btn-close-hover-opacity: 0.75 !default;
diff --git a/src/scss/bootstrap/bootstrap-grid.scss b/src/scss/bootstrap/bootstrap-grid.scss
index c1467664..4012a519 100644
--- a/src/scss/bootstrap/bootstrap-grid.scss
+++ b/src/scss/bootstrap/bootstrap-grid.scss
@@ -1,5 +1,5 @@
/*!
- * Bootstrap Grid v5.0.0-alpha2 (https://getbootstrap.com/)
+ * Bootstrap Grid v5.0.0-beta1 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -42,23 +42,23 @@ $utilities: map-get-multiple(
'margin-x',
'margin-y',
'margin-top',
- 'margin-right',
+ 'margin-end',
'margin-bottom',
- 'margin-left',
+ 'margin-start',
'negative-margin',
'negative-margin-x',
'negative-margin-y',
'negative-margin-top',
- 'negative-margin-right',
+ 'negative-margin-end',
'negative-margin-bottom',
- 'negative-margin-left',
+ 'negative-margin-start',
'padding',
'padding-x',
'padding-y',
'padding-top',
- 'padding-right',
+ 'padding-end',
'padding-bottom',
- 'padding-left'
+ 'padding-start'
)
);
diff --git a/src/scss/bootstrap/bootstrap-reboot.scss b/src/scss/bootstrap/bootstrap-reboot.scss
index 30663b26..250ea816 100644
--- a/src/scss/bootstrap/bootstrap-reboot.scss
+++ b/src/scss/bootstrap/bootstrap-reboot.scss
@@ -1,5 +1,5 @@
/*!
- * Bootstrap Reboot v5.0.0-alpha2 (https://getbootstrap.com/)
+ * Bootstrap Reboot v5.0.0-beta1 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
diff --git a/src/scss/bootstrap/bootstrap-utilities.scss b/src/scss/bootstrap/bootstrap-utilities.scss
index bf6c0be2..b9d999ec 100644
--- a/src/scss/bootstrap/bootstrap-utilities.scss
+++ b/src/scss/bootstrap/bootstrap-utilities.scss
@@ -1,5 +1,5 @@
/*!
- * Bootstrap Utilities v5.0.0-alpha2 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.0.0-beta1 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
diff --git a/src/scss/bootstrap/bootstrap.scss b/src/scss/bootstrap/bootstrap.scss
index 2e4bae0c..80e8d498 100644
--- a/src/scss/bootstrap/bootstrap.scss
+++ b/src/scss/bootstrap/bootstrap.scss
@@ -1,5 +1,5 @@
/*!
- * Bootstrap v5.0.0-alpha2 (https://getbootstrap.com/)
+ * Bootstrap v5.0.0-beta1 (https://getbootstrap.com/)
* Copyright 2011-2020 The Bootstrap Authors
* Copyright 2011-2020 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -28,6 +28,7 @@
@import 'nav';
@import 'navbar';
@import 'card';
+@import 'accordion';
@import 'breadcrumb';
@import 'pagination';
@import 'badge';
diff --git a/src/scss/bootstrap/forms/_floating-labels.scss b/src/scss/bootstrap/forms/_floating-labels.scss
new file mode 100644
index 00000000..8b2e2b8e
--- /dev/null
+++ b/src/scss/bootstrap/forms/_floating-labels.scss
@@ -0,0 +1,61 @@
+.form-floating {
+ position: relative;
+
+ > .form-control,
+ > .form-select {
+ height: $form-floating-height;
+ padding: $form-floating-padding-y $form-floating-padding-x;
+ }
+
+ > label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%; // allow textareas
+ padding: $form-floating-padding-y $form-floating-padding-x;
+ pointer-events: none;
+ border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
+ transform-origin: 0 0;
+ @include transition($form-floating-transition);
+ }
+
+ // stylelint-disable no-duplicate-selectors
+ > .form-control {
+ &::placeholder {
+ color: transparent;
+ }
+
+ &:focus,
+ &:not(:placeholder-shown) {
+ padding-top: $form-floating-input-padding-t;
+ padding-bottom: $form-floating-input-padding-b;
+ }
+ // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+ &:-webkit-autofill {
+ padding-top: $form-floating-input-padding-t;
+ padding-bottom: $form-floating-input-padding-b;
+ }
+ }
+
+ > .form-select {
+ padding-top: $form-floating-input-padding-t;
+ padding-bottom: $form-floating-input-padding-b;
+ }
+
+ > .form-control:focus,
+ > .form-control:not(:placeholder-shown),
+ > .form-select {
+ ~ label {
+ opacity: $form-floating-label-opacity;
+ transform: $form-floating-label-transform;
+ }
+ }
+ // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+ > .form-control:-webkit-autofill {
+ ~ label {
+ opacity: $form-floating-label-opacity;
+ transform: $form-floating-label-transform;
+ }
+ }
+ // stylelint-enable no-duplicate-selectors
+}
diff --git a/src/scss/bootstrap/forms/_form-check.scss b/src/scss/bootstrap/forms/_form-check.scss
index dcc93703..6bce56a5 100644
--- a/src/scss/bootstrap/forms/_form-check.scss
+++ b/src/scss/bootstrap/forms/_form-check.scss
@@ -5,12 +5,12 @@
.form-check {
display: block;
min-height: $form-check-min-height;
- padding-left: $form-check-padding-left;
+ padding-left: $form-check-padding-start;
margin-bottom: $form-check-margin-bottom;
.form-check-input {
float: left;
- margin-left: $form-check-padding-left * -1;
+ margin-left: $form-check-padding-start * -1;
}
}
@@ -53,7 +53,8 @@
&[type='checkbox'] {
@if $enable-gradients {
- background-image: escape-svg($form-check-input-checked-bg-image), var(--bs-gradient);
+ background-image: escape-svg($form-check-input-checked-bg-image),
+ var(--#{$variable-prefix}gradient);
} @else {
background-image: escape-svg($form-check-input-checked-bg-image);
}
@@ -61,7 +62,8 @@
&[type='radio'] {
@if $enable-gradients {
- background-image: escape-svg($form-check-radio-checked-bg-image), var(--bs-gradient);
+ background-image: escape-svg($form-check-radio-checked-bg-image),
+ var(--#{$variable-prefix}gradient);
} @else {
background-image: escape-svg($form-check-radio-checked-bg-image);
}
@@ -73,7 +75,8 @@
border-color: $form-check-input-indeterminate-border-color;
@if $enable-gradients {
- background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--bs-gradient);
+ background-image: escape-svg($form-check-input-indeterminate-bg-image),
+ var(--#{$variable-prefix}gradient);
} @else {
background-image: escape-svg($form-check-input-indeterminate-bg-image);
}
@@ -82,7 +85,7 @@
&:disabled {
pointer-events: none;
filter: none;
- opacity: 0.5;
+ opacity: $form-check-input-disabled-opacity;
}
// Use disabled attribute in addition of :disabled pseudo-class
@@ -90,7 +93,7 @@
&[disabled],
&:disabled {
~ .form-check-label {
- opacity: 0.5;
+ opacity: $form-check-label-disabled-opacity;
}
}
}
@@ -105,11 +108,11 @@
//
.form-switch {
- padding-left: $form-switch-padding-left;
+ padding-left: $form-switch-padding-start;
.form-check-input {
width: $form-switch-width;
- margin-left: $form-switch-padding-left * -1;
+ margin-left: $form-switch-padding-start * -1;
background-image: escape-svg($form-switch-bg-image);
background-position: left center;
@include border-radius($form-switch-border-radius);
@@ -122,7 +125,8 @@
background-position: $form-switch-checked-bg-position;
@if $enable-gradients {
- background-image: escape-svg($form-switch-checked-bg-image), var(--bs-gradient);
+ background-image: escape-svg($form-switch-checked-bg-image),
+ var(--#{$variable-prefix}gradient);
} @else {
background-image: escape-svg($form-switch-checked-bg-image);
}
@@ -132,11 +136,20 @@
.form-check-inline {
display: inline-block;
- margin-right: $form-check-inline-margin-right;
+ margin-right: $form-check-inline-margin-end;
}
.btn-check {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
+
+ &[disabled],
+ &:disabled {
+ + .btn {
+ pointer-events: none;
+ filter: none;
+ opacity: $form-check-btn-check-disabled-opacity;
+ }
+ }
}
diff --git a/src/scss/bootstrap/forms/_form-control.scss b/src/scss/bootstrap/forms/_form-control.scss
index 6686ecfb..fd613e3b 100644
--- a/src/scss/bootstrap/forms/_form-control.scss
+++ b/src/scss/bootstrap/forms/_form-control.scss
@@ -1,11 +1,10 @@
//
-// Textual form controls
+// General form controls (plus a few specific high-level interventions)
//
.form-control {
display: block;
width: 100%;
- min-height: $input-height;
padding: $input-padding-y $input-padding-x;
font-family: $input-font-family;
@include font-size($input-font-size);
@@ -23,6 +22,14 @@
@include box-shadow($input-box-shadow);
@include transition($input-transition);
+ &[type='file'] {
+ overflow: hidden; // prevent pseudo element button overlap
+
+ &:not(:disabled):not([readonly]) {
+ cursor: pointer;
+ }
+ }
+
// Customize the `:focus` state to imitate native WebKit styles.
&:focus {
color: $input-focus-color;
@@ -37,6 +44,14 @@
}
}
+ // Add some height to date inputs on iOS
+ // https://github.com/twbs/bootstrap/issues/23307
+ // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
+ &::-webkit-date-and-time-value {
+ // Multiply line-height by 1em if it has no unit
+ height: if(unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
+ }
+
// Placeholder
&::placeholder {
color: $input-placeholder-color;
@@ -56,6 +71,47 @@
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
opacity: 1;
}
+
+ // File input buttons theming
+ // stylelint-disable-next-line selector-pseudo-element-no-unknown
+ &::file-selector-button {
+ padding: $input-padding-y $input-padding-x;
+ margin: (-$input-padding-y) (-$input-padding-x);
+ margin-inline-end: $input-padding-x;
+ color: $form-file-button-color;
+ @include gradient-bg($form-file-button-bg);
+ pointer-events: none;
+ border-color: inherit;
+ border-style: solid;
+ border-width: 0;
+ border-inline-end-width: $input-border-width;
+ border-radius: 0; // stylelint-disable-line property-disallowed-list
+ @include transition($btn-transition);
+ }
+
+ // stylelint-disable-next-line selector-pseudo-element-no-unknown
+ &:hover:not(:disabled):not([readonly])::file-selector-button {
+ background-color: $form-file-button-hover-bg;
+ }
+
+ &::-webkit-file-upload-button {
+ padding: $input-padding-y $input-padding-x;
+ margin: (-$input-padding-y) (-$input-padding-x);
+ margin-inline-end: $input-padding-x;
+ color: $form-file-button-color;
+ @include gradient-bg($form-file-button-bg);
+ pointer-events: none;
+ border-color: inherit;
+ border-style: solid;
+ border-width: 0;
+ border-inline-end-width: $input-border-width;
+ border-radius: 0; // stylelint-disable-line property-disallowed-list
+ @include transition($btn-transition);
+ }
+
+ &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
+ background-color: $form-file-button-hover-bg;
+ }
}
// Readonly controls as plain text
@@ -93,6 +149,19 @@
padding: $input-padding-y-sm $input-padding-x-sm;
@include font-size($input-font-size-sm);
@include border-radius($input-border-radius-sm);
+
+ // stylelint-disable-next-line selector-pseudo-element-no-unknown
+ &::file-selector-button {
+ padding: $input-padding-y-sm $input-padding-x-sm;
+ margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
+ margin-inline-end: $input-padding-x-sm;
+ }
+
+ &::-webkit-file-upload-button {
+ padding: $input-padding-y-sm $input-padding-x-sm;
+ margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
+ margin-inline-end: $input-padding-x-sm;
+ }
}
.form-control-lg {
@@ -100,17 +169,55 @@
padding: $input-padding-y-lg $input-padding-x-lg;
@include font-size($input-font-size-lg);
@include border-radius($input-border-radius-lg);
+
+ // stylelint-disable-next-line selector-pseudo-element-no-unknown
+ &::file-selector-button {
+ padding: $input-padding-y-lg $input-padding-x-lg;
+ margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
+ margin-inline-end: $input-padding-x-lg;
+ }
+
+ &::-webkit-file-upload-button {
+ padding: $input-padding-y-lg $input-padding-x-lg;
+ margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
+ margin-inline-end: $input-padding-x-lg;
+ }
}
+// Make sure textareas don't shrink too much when resized
+// https://github.com/twbs/bootstrap/pull/29124
+// stylelint-disable selector-no-qualifying-type
+textarea {
+ &.form-control {
+ min-height: $input-height;
+ }
+
+ &.form-control-sm {
+ min-height: $input-height-sm;
+ }
+
+ &.form-control-lg {
+ min-height: $input-height-lg;
+ }
+}
+// stylelint-enable selector-no-qualifying-type
+
.form-control-color {
max-width: 3rem;
+ height: auto; // Override fixed browser height
padding: $input-padding-y;
-}
-.form-control-color::-moz-color-swatch {
- @include border-radius($input-border-radius);
-}
+ &:not(:disabled):not([readonly]) {
+ cursor: pointer;
+ }
-.form-control-color::-webkit-color-swatch {
- @include border-radius($input-border-radius);
+ &::-moz-color-swatch {
+ height: if(unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
+ @include border-radius($input-border-radius);
+ }
+
+ &::-webkit-color-swatch {
+ height: if(unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
+ @include border-radius($input-border-radius);
+ }
}
diff --git a/src/scss/bootstrap/forms/_form-file.scss b/src/scss/bootstrap/forms/_form-file.scss
deleted file mode 100644
index 5bc4afc6..00000000
--- a/src/scss/bootstrap/forms/_form-file.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-.form-file {
- --bs-form-file-height: #{$form-file-height};
- position: relative;
-}
-
-.form-file-input {
- position: relative;
- z-index: 2;
- width: 100%;
- height: var(--bs-form-file-height);
- margin: 0;
- opacity: 0;
-
- &:focus-within ~ .form-file-label {
- border-color: $form-file-focus-border-color;
- box-shadow: $form-file-focus-box-shadow;
- }
-
- // Use disabled attribute in addition of :disabled pseudo-class
- // See: https://github.com/twbs/bootstrap/issues/28247
- &[disabled] ~ .form-file-label .form-file-text,
- &:disabled ~ .form-file-label .form-file-text {
- background-color: $form-file-disabled-bg;
- border-color: $form-file-disabled-border-color;
- }
-}
-
-.form-file-label {
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- z-index: 1;
- display: flex;
- height: var(--bs-form-file-height);
- border-color: $form-file-border-color;
- @include border-radius($form-file-border-radius);
- @include box-shadow($form-file-box-shadow);
-}
-
-.form-file-text {
- display: block;
- flex-grow: 1;
- padding: $form-file-padding-y $form-file-padding-x;
- overflow: hidden;
- font-family: $form-file-font-family;
- font-weight: $form-file-font-weight;
- line-height: $form-file-line-height;
- color: $form-file-color;
- text-overflow: ellipsis;
- white-space: nowrap;
- background-color: $form-file-bg;
- border-color: inherit;
- border-style: solid;
- border-width: $form-file-border-width;
- @include border-left-radius(inherit);
-}
-
-.form-file-button {
- display: block;
- flex-shrink: 0;
- padding: $form-file-padding-y $form-file-padding-x;
- margin-left: -$form-file-border-width;
- line-height: $form-file-line-height;
- color: $form-file-button-color;
- @include gradient-bg($form-file-button-bg);
- border-color: inherit;
- border-style: solid;
- border-width: $form-file-border-width;
- @include border-right-radius(inherit);
-}
-
-.form-file-sm {
- --bs-form-file-height: #{$form-file-height-sm};
- @include font-size($form-file-font-size-sm);
-
- .form-file-text,
- .form-file-button {
- padding: $form-file-padding-y-sm $form-file-padding-x-sm;
- }
-}
-
-.form-file-lg {
- --bs-form-file-height: #{$form-file-height-lg};
- @include font-size($form-file-font-size-lg);
-
- .form-file-text,
- .form-file-button {
- padding: $form-file-padding-y-lg $form-file-padding-x-lg;
- }
-}
diff --git a/src/scss/bootstrap/forms/_form-range.scss b/src/scss/bootstrap/forms/_form-range.scss
index 6cf90138..575ef862 100644
--- a/src/scss/bootstrap/forms/_form-range.scss
+++ b/src/scss/bootstrap/forms/_form-range.scss
@@ -16,9 +16,12 @@
// Pseudo-elements must be split across multiple rulesets to have an effect.
// No box-shadow() mixin for focus accessibility.
- &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
- &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
- &::-ms-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
+ &::-webkit-slider-thumb {
+ box-shadow: $form-range-thumb-focus-box-shadow;
+ }
+ &::-moz-range-thumb {
+ box-shadow: $form-range-thumb-focus-box-shadow;
+ }
}
&::-moz-focus-outer {
@@ -78,46 +81,6 @@
@include box-shadow($form-range-track-box-shadow);
}
- &::-ms-thumb {
- width: $form-range-thumb-width;
- height: $form-range-thumb-height;
- margin-top: 0; // Edge specific
- margin-right: $form-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
- margin-left: $form-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
- @include gradient-bg($form-range-thumb-bg);
- border: $form-range-thumb-border;
- @include border-radius($form-range-thumb-border-radius);
- @include box-shadow($form-range-thumb-box-shadow);
- @include transition($form-range-thumb-transition);
- appearance: none;
-
- &:active {
- @include gradient-bg($form-range-thumb-active-bg);
- }
- }
-
- &::-ms-track {
- width: $form-range-track-width;
- height: $form-range-track-height;
- color: transparent;
- cursor: $form-range-track-cursor;
- background-color: transparent;
- border-color: transparent;
- border-width: $form-range-thumb-height / 2;
- @include box-shadow($form-range-track-box-shadow);
- }
-
- &::-ms-fill-lower {
- background-color: $form-range-track-bg;
- @include border-radius($form-range-track-border-radius);
- }
-
- &::-ms-fill-upper {
- margin-right: 15px; // arbitrary?
- background-color: $form-range-track-bg;
- @include border-radius($form-range-track-border-radius);
- }
-
&:disabled {
pointer-events: none;
@@ -128,9 +91,5 @@
&::-moz-range-thumb {
background-color: $form-range-thumb-disabled-bg;
}
-
- &::-ms-thumb {
- background-color: $form-range-thumb-disabled-bg;
- }
}
}
diff --git a/src/scss/bootstrap/forms/_form-select.scss b/src/scss/bootstrap/forms/_form-select.scss
index e4cab087..23ca28f4 100644
--- a/src/scss/bootstrap/forms/_form-select.scss
+++ b/src/scss/bootstrap/forms/_form-select.scss
@@ -6,8 +6,8 @@
.form-select {
display: block;
width: 100%;
- height: $form-select-height;
- padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
+ padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding)
+ $form-select-padding-y $form-select-padding-x;
font-family: $form-select-font-family;
@include font-size($form-select-font-size);
font-weight: $form-select-font-weight;
@@ -33,21 +33,10 @@
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $form-select-focus-box-shadow;
}
-
- &::-ms-value {
- // For visual consistency with other platforms/browsers,
- // suppress the default white text on blue background highlight given to
- // the selected option text when the (still closed)