summaryrefslogtreecommitdiffstats
path: root/scss
diff options
context:
space:
mode:
Diffstat (limited to 'scss')
-rw-r--r--scss/_accordion.scss22
-rw-r--r--scss/_buttons.scss11
-rw-r--r--scss/_carousel.scss12
-rw-r--r--scss/_modal.scss1
-rw-r--r--scss/_offcanvas.scss5
-rw-r--r--scss/_reboot.scss1
-rw-r--r--scss/_root.scss3
-rw-r--r--scss/_tables.scss2
-rw-r--r--scss/_utilities.scss6
-rw-r--r--scss/_variables-dark.scss2
-rw-r--r--scss/_variables.scss38
-rw-r--r--scss/forms/_form-check.scss3
-rw-r--r--scss/mixins/_banner.scss4
-rw-r--r--scss/mixins/_forms.scss14
-rw-r--r--scss/mixins/_grid.scss4
-rw-r--r--scss/tests/mixins/_auto-import-of-variables-dark.test.scss7
-rw-r--r--scss/tests/mixins/_utilities.test.scss2
17 files changed, 82 insertions, 55 deletions
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index 75588a5..17e5436 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -20,7 +20,6 @@
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
- --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
@@ -74,7 +73,6 @@
&:focus {
z-index: 3;
- border-color: var(--#{$prefix}accordion-btn-focus-border-color);
outline: 0;
box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
}
@@ -92,7 +90,7 @@
&:first-of-type {
@include border-top-radius(var(--#{$prefix}accordion-border-radius));
- .accordion-button {
+ > .accordion-header .accordion-button {
@include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
}
}
@@ -105,13 +103,13 @@
&:last-of-type {
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
- .accordion-button {
+ > .accordion-header .accordion-button {
&.collapsed {
@include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
}
}
- .accordion-collapse {
+ > .accordion-collapse {
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
}
}
@@ -127,11 +125,7 @@
// Remove borders and border-radius to keep accordion items edge-to-edge.
.accordion-flush {
- .accordion-collapse {
- border-width: 0;
- }
-
- .accordion-item {
+ > .accordion-item {
border-right: 0;
border-left: 0;
@include border-radius(0);
@@ -139,12 +133,18 @@
&:first-child { border-top: 0; }
&:last-child { border-bottom: 0; }
- .accordion-button {
+ // stylelint-disable selector-max-class
+ > .accordion-header .accordion-button {
&,
&.collapsed {
@include border-radius(0);
}
}
+ // stylelint-enable selector-max-class
+
+ > .accordion-collapse {
+ @include border-radius(0);
+ }
}
}
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index cbc0784..caa4518 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -100,6 +100,15 @@
}
}
+ .btn-check:checked:focus-visible + & {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows {
+ box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
+ } @else {
+ box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+ }
+ }
+
&:disabled,
&.disabled,
fieldset:disabled & {
@@ -170,7 +179,7 @@
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
--#{$prefix}btn-disabled-border-color: transparent;
--#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
- --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($link-color), $link-color, 15%))};
+ --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
text-decoration: $link-decoration;
@if $enable-gradients {
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 0ac8f87..3a13522 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -132,19 +132,11 @@
background-size: 100% 100%;
}
-/* rtl:options: {
- "autoRename": true,
- "stringMap":[ {
- "name" : "prev-next",
- "search" : "prev",
- "replace" : "next"
- } ]
-} */
.carousel-control-prev-icon {
- background-image: escape-svg($carousel-control-prev-icon-bg);
+ background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
}
.carousel-control-next-icon {
- background-image: escape-svg($carousel-control-next-icon-bg);
+ background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
}
// Optional indicator pips/controls
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 5f1429f..494db94 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -126,7 +126,6 @@
display: flex;
flex-shrink: 0;
align-items: center;
- justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
padding: var(--#{$prefix}modal-header-padding);
border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
@include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 04e3ce6..eb2c97a 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -123,14 +123,11 @@
.offcanvas-header {
display: flex;
align-items: center;
- justify-content: space-between;
padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
.btn-close {
padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
- margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
- margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
- margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
+ margin: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) calc(-.5 * var(--#{$prefix}offcanvas-padding-x)) calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) auto;
}
}
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 81ea216..1879175 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -217,6 +217,7 @@ small {
mark {
padding: $mark-padding;
+ color: var(--#{$prefix}highlight-color);
background-color: var(--#{$prefix}highlight-bg);
}
diff --git a/scss/_root.scss b/scss/_root.scss
index ab720a3..becddf1 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -91,6 +91,7 @@
}
--#{$prefix}code-color: #{$code-color};
+ --#{$prefix}highlight-color: #{$mark-color};
--#{$prefix}highlight-bg: #{$mark-bg};
// scss-docs-start root-border-var
@@ -171,6 +172,8 @@
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
--#{$prefix}code-color: #{$code-color-dark};
+ --#{$prefix}highlight-color: #{$mark-color-dark};
+ --#{$prefix}highlight-bg: #{$mark-bg-dark};
--#{$prefix}border-color: #{$border-color-dark};
--#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
diff --git a/scss/_tables.scss b/scss/_tables.scss
index ebfc00a..276521a 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -79,7 +79,7 @@
//
// When borders are added on all sides of the cells, the corners can render odd when
// these borders do not have the same color or if they are semi-transparent.
-// Therefor we add top and border bottoms to the `tr`s and left and right borders
+// Therefore we add top and border bottoms to the `tr`s and left and right borders
// to the `td`s or `th`s
.table-bordered {
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index e6069c9..696f906 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -77,9 +77,9 @@ $utilities: map-merge(
property: box-shadow,
class: shadow,
values: (
- null: $box-shadow,
- sm: $box-shadow-sm,
- lg: $box-shadow-lg,
+ null: var(--#{$prefix}box-shadow),
+ sm: var(--#{$prefix}box-shadow-sm),
+ lg: var(--#{$prefix}box-shadow-lg),
none: none,
)
),
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 79f29a3..6422b38 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -53,6 +53,8 @@ $headings-color-dark: inherit !default;
$link-color-dark: tint-color($primary, 40%) !default;
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
$code-color-dark: tint-color($code-color, 40%) !default;
+$mark-color-dark: $body-color-dark !default;
+$mark-bg-dark: $yellow-800 !default;
//
diff --git a/scss/_variables.scss b/scss/_variables.scss
index eb066c6..0653139 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -718,6 +718,7 @@ $dt-font-weight: $font-weight-bold !default;
$list-inline-padding: .5rem !default;
$mark-padding: .1875em !default;
+$mark-color: $body-color !default;
$mark-bg: $yellow-100 !default;
// scss-docs-end type-variables
@@ -734,7 +735,7 @@ $table-cell-padding-x-sm: .25rem !default;
$table-cell-vertical-align: top !default;
-$table-color: var(--#{$prefix}body-color) !default;
+$table-color: var(--#{$prefix}emphasis-color) !default;
$table-bg: var(--#{$prefix}body-bg) !default;
$table-accent-bg: transparent !default;
@@ -742,17 +743,17 @@ $table-th-font-weight: null !default;
$table-striped-color: $table-color !default;
$table-striped-bg-factor: .05 !default;
-$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
+$table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
$table-active-color: $table-color !default;
$table-active-bg-factor: .1 !default;
-$table-active-bg: rgba($black, $table-active-bg-factor) !default;
+$table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
$table-hover-color: $table-color !default;
$table-hover-bg-factor: .075 !default;
-$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
+$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
-$table-border-factor: .1 !default;
+$table-border-factor: .2 !default;
$table-border-width: var(--#{$prefix}border-width) !default;
$table-border-color: var(--#{$prefix}border-color) !default;
@@ -842,6 +843,7 @@ $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
$btn-link-color: var(--#{$prefix}link-color) !default;
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
$btn-link-disabled-color: $gray-600 !default;
+$btn-link-focus-shadow-rgb: to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: var(--#{$prefix}border-radius) !default;
@@ -903,7 +905,7 @@ $input-disabled-border-color: null !default;
$input-color: var(--#{$prefix}body-color) !default;
$input-border-color: var(--#{$prefix}border-color) !default;
$input-border-width: $input-btn-border-width !default;
-$input-box-shadow: $box-shadow-inset !default;
+$input-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$input-border-radius: var(--#{$prefix}border-radius) !default;
$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
@@ -1019,7 +1021,7 @@ $form-select-feedback-icon-size: $input-height-inner-half $input-height-i
$form-select-border-width: $input-border-width !default;
$form-select-border-color: $input-border-color !default;
$form-select-border-radius: $input-border-radius !default;
-$form-select-box-shadow: $box-shadow-inset !default;
+$form-select-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$form-select-focus-border-color: $input-focus-border-color !default;
$form-select-focus-width: $input-focus-width !default;
@@ -1042,9 +1044,9 @@ $form-select-transition: $input-transition !default;
$form-range-track-width: 100% !default;
$form-range-track-height: .5rem !default;
$form-range-track-cursor: pointer !default;
-$form-range-track-bg: var(--#{$prefix}tertiary-bg) !default;
+$form-range-track-bg: var(--#{$prefix}secondary-bg) !default;
$form-range-track-border-radius: 1rem !default;
-$form-range-track-box-shadow: $box-shadow-inset !default;
+$form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$form-range-thumb-width: 1rem !default;
$form-range-thumb-height: $form-range-thumb-width !default;
@@ -1246,7 +1248,7 @@ $dropdown-border-width: var(--#{$prefix}border-width) !default;
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: $spacer * .5 !default;
-$dropdown-box-shadow: $box-shadow !default;
+$dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
$dropdown-link-color: var(--#{$prefix}body-color) !default;
$dropdown-link-hover-color: $dropdown-link-color !default;
@@ -1381,7 +1383,9 @@ $accordion-transition: $btn-transition, border-radius .15s ea
$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default;
-$accordion-button-focus-border-color: $input-focus-border-color !default;
+// fusv-disable
+$accordion-button-focus-border-color: $input-focus-border-color !default; // Deprecated in v5.3.3
+// fusv-enable
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default;
@@ -1390,8 +1394,8 @@ $accordion-icon-active-color: $primary-text-emphasis !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(-180deg) !default;
-$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>") !default;
+$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>") !default;
// scss-docs-end accordion-variables
// Tooltips
@@ -1435,7 +1439,7 @@ $popover-border-width: var(--#{$prefix}border-width) !default;
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
-$popover-box-shadow: $box-shadow !default;
+$popover-box-shadow: var(--#{$prefix}box-shadow) !default;
$popover-header-font-size: $font-size-base !default;
$popover-header-bg: var(--#{$prefix}secondary-bg) !default;
@@ -1509,8 +1513,8 @@ $modal-content-border-color: var(--#{$prefix}border-color-translucent) !d
$modal-content-border-width: var(--#{$prefix}border-width) !default;
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-$modal-content-box-shadow-xs: $box-shadow-sm !default;
-$modal-content-box-shadow-sm-up: $box-shadow !default;
+$modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
+$modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
@@ -1743,3 +1747,5 @@ $kbd-bg: var(--#{$prefix}body-color) !default;
$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
$pre-color: null !default;
+
+@import "variables-dark"; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index f8d9b08..8a1b639 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -29,6 +29,7 @@
.form-check-input {
--#{$prefix}form-check-bg: #{$form-check-input-bg};
+ flex-shrink: 0;
width: $form-check-input-width;
height: $form-check-input-width;
margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
@@ -130,7 +131,7 @@
margin-left: $form-switch-padding-start * -1;
background-image: var(--#{$prefix}form-switch-bg);
background-position: left center;
- @include border-radius($form-switch-border-radius);
+ @include border-radius($form-switch-border-radius, 0);
@include transition($form-switch-transition);
&:focus {
diff --git a/scss/mixins/_banner.scss b/scss/mixins/_banner.scss
index aa83dcc..20c2fd1 100644
--- a/scss/mixins/_banner.scss
+++ b/scss/mixins/_banner.scss
@@ -1,7 +1,7 @@
@mixin bsBanner($file) {
/*!
- * Bootstrap #{$file} v5.3.1 (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Bootstrap #{$file} v5.3.3 (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
}
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index d47b1e4..00b4764 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -69,7 +69,12 @@
&:focus {
border-color: $border-color;
- box-shadow: $focus-box-shadow;
+ @if $enable-shadows {
+ @include box-shadow($input-box-shadow, $focus-box-shadow);
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: $focus-box-shadow;
+ }
}
}
}
@@ -100,7 +105,12 @@
&:focus {
border-color: $border-color;
- box-shadow: $focus-box-shadow;
+ @if $enable-shadows {
+ @include box-shadow($form-select-box-shadow, $focus-box-shadow);
+ } @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ box-shadow: $focus-box-shadow;
+ }
}
}
}
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 38e2239..ea30739 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -56,7 +56,7 @@
@mixin row-cols($count) {
> * {
flex: 0 0 auto;
- width: divide(100%, $count);
+ width: percentage(divide(1, $count));
}
}
@@ -138,7 +138,7 @@
}
}
- // Start with `1` because `0` is and invalid value.
+ // Start with `1` because `0` is an invalid value.
// Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
@for $i from 1 through ($columns - 1) {
.g-start#{$infix}-#{$i} {
diff --git a/scss/tests/mixins/_auto-import-of-variables-dark.test.scss b/scss/tests/mixins/_auto-import-of-variables-dark.test.scss
new file mode 100644
index 0000000..f08ae58
--- /dev/null
+++ b/scss/tests/mixins/_auto-import-of-variables-dark.test.scss
@@ -0,0 +1,7 @@
+// TODO: this file can be removed safely in v6 when `@import "variables-dark"` will be removed at the end of _variables.scss
+
+@import "../../functions";
+@import "../../variables";
+// Voluntarily not importing _variables-dark.scss
+@import "../../maps";
+@import "../../mixins";
diff --git a/scss/tests/mixins/_utilities.test.scss b/scss/tests/mixins/_utilities.test.scss
index 63fcae3..8140ac4 100644
--- a/scss/tests/mixins/_utilities.test.scss
+++ b/scss/tests/mixins/_utilities.test.scss
@@ -258,7 +258,7 @@ $enable-important-utilities: false;
.desaturated-color-blue {
--bs-color-opacity: 1;
// Sass compilation will put a leading zero so we want to keep that one
- // stylelint-disable-next-line stylistic/number-leading-zero
+ // stylelint-disable-next-line @stylistic/number-leading-zero
--bs-color-saturation: 0.25;
color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-10 23:26:22 +0000