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

Adjusting dark dropdowns #1021

Merged
merged 6 commits into from
Feb 23, 2022
Merged

Adjusting dark dropdowns #1021

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2a5e321
Reajusting dark dropdowns
louismaximepiton Jan 5, 2022
5d5653b
Minor fix for color
louismaximepiton Jan 5, 2022
ea29a1e
Fix(review): change disabled element and make it not accessible
louismaximepiton Feb 14, 2022
1db138a
fix(customize): change supporting yellow hexa value
julien-deramond Feb 23, 2022
367b6f1
review: rollback disabled to keep coherent examples in the page
julien-deramond Feb 23, 2022
8374d43
review
julien-deramond Feb 23, 2022
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
20 changes: 10 additions & 10 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1312,18 +1312,18 @@ $dropdown-header-padding: $spacer $spacer * .5 !default;
// scss-docs-end dropdown-variables

// scss-docs-start dropdown-dark-variables
$dropdown-dark-color: $gray-300 !default;
$dropdown-dark-bg: $gray-800 !default;
$dropdown-dark-border-color: $dropdown-border-color !default;
$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
$dropdown-dark-color: $white !default;
$dropdown-dark-bg: $black !default;
$dropdown-dark-border-color: $gray-700 !default;
$dropdown-dark-divider-bg: $dropdown-dark-border-color !default;
$dropdown-dark-box-shadow: null !default;
$dropdown-dark-link-color: $dropdown-dark-color !default;
$dropdown-dark-link-hover-color: $white !default;
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
$dropdown-dark-link-disabled-color: $gray-500 !default;
$dropdown-dark-header-color: $gray-500 !default;
$dropdown-dark-link-hover-color: $black !default;
$dropdown-dark-link-hover-bg: rgba($white, 1) !default;
julien-deramond marked this conversation as resolved.
Show resolved Hide resolved
$dropdown-dark-link-active-color: $black !default;
$dropdown-dark-link-active-bg: $white !default;
$dropdown-dark-link-disabled-color: $gray-700 !default;
$dropdown-dark-header-color: $white !default;
// scss-docs-end dropdown-dark-variables

// Pagination
Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.1/components/dropdowns.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,8 +213,8 @@ Opt into darker dropdowns to match a dark navbar or custom style by adding `.dro
<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">
<li><a class="dropdown-item" href="#">Action</a></li>
<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" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.1/customize/color.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Be sure to monitor contrast ratios as you customize colors. As shown below, we'v
<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-gray-500">
<strong class="d-block">$gray-500</strong>
#adb5bd
#ccc
</div>
{{- range $.Site.Data.grays }}
<div class="p-3 bd-gray-{{ .name }}">$gray-{{ .name }}</div>
Expand All @@ -66,7 +66,7 @@ Be sure to monitor contrast ratios as you customize colors. As shown below, we'v
</div>
<div class="p-3 mb-2 bd-supporting-yellow">
<strong class="d-block">$supporting-yellow</strong>
#fc0
#ffd200
</div>
<div class="p-3 mb-2 bd-black text-white">
<strong class="d-block">$black</strong>
Expand Down