Reajusting dark dropdowns

Signed-off-by: louismaximepiton <louismaxime.piton@orange.com>
Orange-OpenSource · Feb 14, 2022 · 2d45683 · 2d45683
1 parent 8302566
commit 2d45683
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -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;
-$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;
+$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

diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md
@@ -203,7 +203,7 @@ Opt into darker dropdowns to match a dark navbar or custom style by adding `.dro
       <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>
-      <li><a class="dropdown-item" href="#">Separated link</a></li>
+      <li><a class="dropdown-item disabled" href="#">Separated link</a></li>
     </ul>
   </div>
 </div>
@@ -213,12 +213,12 @@ 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>
-    <li><a class="dropdown-item" href="#">Separated link</a></li>
+    <li><a class="dropdown-item disabled" href="#">Separated link</a></li>
   </ul>
 </div>
 {{< /example >}}