Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix the color on toast, form-label, modal and card when set the data-bs-theme="dark" on the element itself #38212

Open
wants to merge 15 commits into
base: main
Choose a base branch
from
Open

Fix the color on toast, form-label, modal and card when set the data-bs-theme="dark" on the element itself #38212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
efbd559
Update _variables.scss
jonnysp Mar 11, 2023
9539cbc
labelcolor
jonnysp Mar 13, 2023
37943b6
Update _floating-labels.scss
jonnysp Mar 13, 2023
81728bb
Update _floating-labels.scss
jonnysp Mar 13, 2023
d499037
Update _variables.scss
jonnysp Mar 13, 2023
0c83524
Update _variables.scss
jonnysp Mar 14, 2023
9dc1d59
make the dark variants same as the lights
jonnysp Mar 14, 2023
676abb9
make theme switcher in some examples works
jonnysp Mar 14, 2023
42b8520
Update _card.scss
jonnysp Mar 15, 2023
61471d0
table theme dark
jonnysp Mar 15, 2023
8662028
Revert "table theme dark"
jonnysp Apr 26, 2023
c3c7348
Revert "make the dark variants same as the lights"
jonnysp Apr 26, 2023
f09a5a0
Revert "make theme switcher in some examples works"
jonnysp Apr 26, 2023
9631345
fix dropdown example
jonnysp May 2, 2023
c4ed01f
Merge branch 'main' into theme-dark-on-card-and-modal-fix
mdo Jun 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions scss/_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
flex-direction: column;
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
height: var(--#{$prefix}card-height);
color: var(--#{$prefix}body-color);
color: var(--#{$prefix}card-color);
word-wrap: break-word;
background-color: var(--#{$prefix}card-bg);
background-clip: border-box;
Expand Down Expand Up @@ -71,7 +71,6 @@
// as much space as possible, ensuring footers are aligned to the bottom.
flex: 1 1 auto;
padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
color: var(--#{$prefix}card-color);
}

.card-title {
Expand Down
10 changes: 5 additions & 5 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -872,7 +872,7 @@ $form-label-margin-bottom: .5rem !default;
$form-label-font-size: null !default;
$form-label-font-style: null !default;
$form-label-font-weight: null !default;
$form-label-color: null !default;
$form-label-color: var(--#{$prefix}body-color) !default;
// scss-docs-end form-label-variables

// scss-docs-start form-input-variables
Expand Down Expand Up @@ -1348,7 +1348,7 @@ $card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
$card-cap-color: null !default;
$card-height: null !default;
$card-color: null !default;
$card-color: var(--#{$prefix}body-color) !default;
$card-bg: var(--#{$prefix}body-bg) !default;
$card-img-overlay-padding: $spacer !default;
$card-group-margin: $grid-gutter-width * .5 !default;
Expand Down Expand Up @@ -1435,7 +1435,7 @@ $popover-box-shadow: $box-shadow !default;

$popover-header-font-size: $font-size-base !default;
$popover-header-bg: var(--#{$prefix}secondary-bg) !default;
$popover-header-color: $headings-color !default;
$popover-header-color: var(--#{$prefix}body-color) !default;
$popover-header-padding-y: .5rem !default;
$popover-header-padding-x: $spacer !default;

Expand All @@ -1461,7 +1461,7 @@ $toast-max-width: 350px !default;
$toast-padding-x: .75rem !default;
$toast-padding-y: .5rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !default;
$toast-color: var(--#{$prefix}body-color) !default;
$toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
$toast-border-width: var(--#{$prefix}border-width) !default;
$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
Expand Down Expand Up @@ -1499,7 +1499,7 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;

$modal-title-line-height: $line-height-base !default;

$modal-content-color: null !default;
$modal-content-color: var(--#{$prefix}body-color) !default;
$modal-content-bg: var(--#{$prefix}body-bg) !default;
$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
$modal-content-border-width: var(--#{$prefix}border-width) !default;
Expand Down
1 change: 1 addition & 0 deletions scss/forms/_floating-labels.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
height: 100%; // allow textareas
padding: $form-floating-padding-y $form-floating-padding-x;
overflow: hidden;
color: $input-color;
text-align: start;
text-overflow: ellipsis;
white-space: nowrap;
Expand Down
12 changes: 6 additions & 6 deletions site/content/docs/5.3/examples/dropdowns/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
</ul>
<ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 border-0 shadow w-220px" data-bs-theme="dark">
<ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 shadow w-220px" data-bs-theme="dark">
<li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
<li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
<li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
Expand Down Expand Up @@ -93,9 +93,9 @@
</ul>
</div>

<div class="dropdown-menu d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px" data-bs-theme="dark">
<form class="p-2 mb-2 bg-dark border-bottom border-dark">
<input type="search" class="form-control bg-dark" autocomplete="false" placeholder="Type to filter...">
<div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px" data-bs-theme="dark">
<form class="p-2 mb-2 bg-body-tertiary border-bottom">
<input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
</form>
<ul class="list-unstyled mb-0">
<li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
Expand Down Expand Up @@ -160,7 +160,7 @@
</a>
</li>
</ul>
<ul class="dropdown-menu d-block position-static mx-0 border-0 shadow w-220px" data-bs-theme="dark">
<ul class="dropdown-menu d-block position-static mx-0 shadow w-220px" data-bs-theme="dark">
<li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
Expand Down Expand Up @@ -193,7 +193,7 @@
</li>
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
Trash
</a>
Expand Down