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

Jump to bottom

Dark mode: Dropdowns #2292

Merged
merged 1 commit into from
Oct 10, 2023
Merged

Dark mode: Dropdowns #2292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
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 @@ -1563,17 +1563,17 @@ $dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;

$dropdown-link-color: var(--#{$prefix}body-color) !default;
$dropdown-link-hover-color: $dropdown-link-color !default;
$dropdown-link-hover-bg: $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`
$dropdown-link-hover-bg: var(--#{$prefix}border-color-translucent) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-bg)`

$dropdown-link-active-color: color-contrast($component-active-color) !default; // Boosted mod: instead of `$component-active-color`
$dropdown-link-active-bg: $component-active-color !default; // Boosted mod: instead of `$component-active-bg`
$dropdown-link-active-color: var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `$component-active-color`
$dropdown-link-active-bg: var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `$component-active-bg`

$dropdown-link-disabled-color: $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-color)`
$dropdown-link-disabled-color: var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}tertiary-color)`

$dropdown-item-padding-y: $spacer * .5 !default; // Boosted mod: instead of `$spacer * .25`
$dropdown-item-padding-x: $spacer * .5 !default; // Boosted mod: instead of `$spacer`

$dropdown-header-color: $black !default; // Boosted mod: instead of `$gray-600`
$dropdown-header-color: var(--#{$prefix}body-color) !default; // Boosted mod: instead of `$gray-600`
$dropdown-header-padding-x: $dropdown-item-padding-x !default;
$dropdown-header-padding-y: $spacer !default; // Boosted mod: instead of `$dropdown-padding-y`
// fusv-disable
Expand Down
195 changes: 195 additions & 0 deletions site/content/docs/5.3/dark-mode.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,11 @@ sitemap_exclude: true
<div style="width: 50px; height: 50px; background-color:var(--bs-secondary-bg)" data-bs-theme="light"></div>
<div style="width: 50px; height: 50px; background-color:var(--bs-secondary-bg)" data-bs-theme="dark"></div>
</div>
<div class="d-flex flex-row gap-2 align-items-center">
<div style="width: 200px">--bs-tertiary-bg</div>
<div style="width: 50px; height: 50px; background-color:var(--bs-tertiary-bg)" data-bs-theme="light"></div>
<div style="width: 50px; height: 50px; background-color:var(--bs-tertiary-bg)" data-bs-theme="dark"></div>
</div>
<div class="d-flex flex-row gap-2 align-items-center">
<div style="width: 200px">--bs-border-color-translucent</div>
<div style="width: 50px; height: 50px; background-color:var(--bs-border-color-translucent)" data-bs-theme="light"></div>
Expand Down Expand Up @@ -571,6 +576,196 @@ sitemap_exclude: true
<div class="btn-group"><button class="btn btn-secondary" type="button" disabled data-bs-theme="light">Large split button</button><button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" disabled data-bs-theme="light"><span class="visually-hidden">Toggle Dropdown</span></button></div>
</div>

### Dropdowns

<h4 class="mt-3">No theme</h4>

<div class="border border-tertiary p-3">
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
</ul>
</div>
</div>

<div class="btn-group">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>

<h4 class="mt-3">Dark theme on container</h4>

<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
</ul>
</div>
</div>

<div class="btn-group">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>

<h4 class="mt-3">Light theme on container</h4>

<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
</ul>
</div>
</div>

<div class="btn-group">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>

<h4 class="mt-3">Dark theme on component</h4>

<div class="border border-tertiary p-3" style="background-color: #282d55">
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">
Dropdown button
</button>
<ul class="dropdown-menu" data-bs-theme="dark">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
</ul>
</div>
</div>

<div class="btn-group">
<button type="button" class="btn btn-secondary" data-bs-theme="dark">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" data-bs-theme="dark">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>

<h4 class="mt-3">Light theme on component</h4>

<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="light">
Dropdown button
</button>
<ul class="dropdown-menu" data-bs-theme="light">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
</ul>
</div>
</div>

<div class="btn-group">
<button type="button" class="btn btn-secondary" data-bs-theme="light">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="light">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" data-bs-theme="light">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>

<h4 class="mt-3">Dark dropdown variant for retro-compatibility</h4>

<div class="border border-tertiary p-3 bg-dark">
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary btn-inverse dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>

<div class="btn-group">
<button type="button" class="btn btn-secondary btn-inverse">Action</button>
<button type="button" class="btn btn-secondary btn-inverse dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>


### Local navigation

Expand Down