root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Set css-var `--bs-current-plane-bg` for elements with background-color that might contain buttons

This commit is contained in:
Ayke Halder 2024-06-15 17:54:00 +02:00
parent c806aaa323
commit 6a48cf008e
5 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_modal.scss
View File

@ -101,6 +101,7 @@
color: var(--#{$prefix}modal-color);
pointer-events: auto;
background-color: var(--#{$prefix}modal-bg);
--#{$prefix}current-plane-bg: var(--#{$prefix}modal-bg);
background-clip: padding-box;
border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);
@include border-radius(var(--#{$prefix}modal-border-radius));
@ -161,6 +162,7 @@
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
background-color: var(--#{$prefix}modal-footer-bg);
--#{$prefix}current-plane-bg: var(--#{$prefix}modal-footer-bg);
border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
@include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));

2
scss/_popover.scss
View File

@ -32,6 +32,7 @@
// Allow breaking very long words so they don't overflow the popover's bounds
word-wrap: break-word;
background-color: var(--#{$prefix}popover-bg);
--#{$prefix}current-plane-bg: var(--#{$prefix}popover-bg);
background-clip: padding-box;
border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
@include border-radius(var(--#{$prefix}popover-border-radius));
@ -182,6 +183,7 @@
@include font-size(var(--#{$prefix}popover-header-font-size));
color: var(--#{$prefix}popover-header-color);
background-color: var(--#{$prefix}popover-header-bg);
--#{$prefix}current-plane-bg: var(--#{$prefix}popover-header-bg);
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
@include border-top-radius(var(--#{$prefix}popover-inner-border-radius));

1
scss/_tables.scss
View File

@ -35,6 +35,7 @@
// Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
background-color: var(--#{$prefix}table-bg);
--#{$prefix}current-plane-bg: var(--#{$prefix}table-bg);
border-bottom-width: $table-border-width;
box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
}

2
scss/_toasts.scss
View File

@ -23,6 +23,7 @@
color: var(--#{$prefix}toast-color);
pointer-events: auto;
background-color: var(--#{$prefix}toast-bg);
--#{$prefix}current-plane-bg: var(--#{$prefix}toast-bg);
background-clip: padding-box;
border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
box-shadow: var(--#{$prefix}toast-box-shadow);
@ -57,6 +58,7 @@
padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
color: var(--#{$prefix}toast-header-color);
background-color: var(--#{$prefix}toast-header-bg);
--#{$prefix}current-plane-bg: var(--#{$prefix}toast-header-bg);
background-clip: padding-box;
border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
@include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));

1
scss/_tooltip.scss
View File

@ -115,5 +115,6 @@
color: var(--#{$prefix}tooltip-color);
text-align: center;
background-color: var(--#{$prefix}tooltip-bg);
--#{$prefix}current-plane-bg: var(--#{$prefix}tooltip-bg);
@include border-radius(var(--#{$prefix}tooltip-border-radius));
}