Explicitly add missing opacity-0 helper class example for clarity.

Add a missing opacity-0 helper class example. From existing examples, it wasn't obvious to me that this class exists. This commit makes it a bit more explicit.
Update bottom border on dark navbar example (#38707 )
2025-07-17 00:01:43 -04:00 · 2023-06-25 14:47:15 -07:00 · 2023-06-25 14:46:29 -07:00 · 2023-06-25 14:45:38 -07:00 · 2023-06-25 14:44:38 -07:00 · 2023-06-25 14:43:50 -07:00
7 changed files with 11 additions and 21 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -70,7 +70,7 @@
        "vnu-jar": "23.4.11"
      },
      "peerDependencies": {
-        "@popperjs/core": "^2.11.7"
+        "@popperjs/core": "^2.11.8"
      }
    },
    "node_modules/@ampproject/remapping": {
--- a/package.json
+++ b/package.json
@ -100,7 +100,7 @@
    "watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\""
  },
  "peerDependencies": {
-    "@popperjs/core": "^2.11.7"
+    "@popperjs/core": "^2.11.8"
  },
  "devDependencies": {
    "@babel/cli": "^7.22.5",
@ -178,7 +178,7 @@
    },
    "dependencies": {},
    "peerDependencies": {
-      "@popperjs/core": "^2.11.7"
+      "@popperjs/core": "^2.11.8"
    }
  }
 }
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@ -44,7 +44,8 @@
  }

  // Disabled state lightens text
-  &.disabled {
+  &.disabled,
+  &:disabled {
    color: var(--#{$prefix}nav-link-disabled-color);
    pointer-events: none;
    cursor: default;
@ -79,13 +80,6 @@
      isolation: isolate;
      border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
    }
-
-    &.disabled,
-    &:disabled {
-      color: var(--#{$prefix}nav-link-disabled-color);
-      background-color: transparent;
-      border-color: transparent;
-    }
  }

  .nav-link.active,
@ -117,12 +111,6 @@

  .nav-link {
    @include border-radius(var(--#{$prefix}nav-pills-border-radius));
-
-    &:disabled {
-      color: var(--#{$prefix}nav-link-disabled-color);
-      background-color: transparent;
-      border-color: transparent;
-    }
  }

  .nav-link.active,
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@ -40,7 +40,7 @@ $light-border-subtle-dark:          $gray-700 !default;
 $dark-border-subtle-dark:           $gray-800 !default;
 // scss-docs-end theme-border-subtle-dark-variables

-$body-color-dark:                   $gray-500 !default;
+$body-color-dark:                   $gray-300 !default;
 $body-bg-dark:                      $gray-900 !default;
 $body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
 $body-secondary-bg-dark:            $gray-800 !default;
--- a/site/content/docs/5.3/components/navbar.md
+++ b/site/content/docs/5.3/components/navbar.md
@ -331,7 +331,7 @@ Mix and match with other components and utilities as needed.
 Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.

 <div class="bd-example">
-  <nav class="navbar navbar-expand-lg bg-dark border-bottom border-bottom-dark" data-bs-theme="dark">
+  <nav class="navbar navbar-expand-lg bg-dark border-bottom border-body" data-bs-theme="dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
@ -420,7 +420,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
 </div>

 ```html
-<nav class="navbar bg-dark border-bottom border-bottom-dark" data-bs-theme="dark">
+<nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
  <!-- Navbar content -->
 </nav>

--- a/site/content/docs/5.3/components/navs-tabs.md
+++ b/site/content/docs/5.3/components/navs-tabs.md
@ -53,7 +53,7 @@ Change the style of `.nav`s component with modifiers and utilities. Mix and matc

 ### Horizontal alignment

-Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/layout/grid#horizontal-alignment" >}}). By default, navs are left-aligned, but you can easily change them to center or right aligned.
+Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/utilities/flex#justify-content" >}}). By default, navs are left-aligned, but you can easily change them to center or right-aligned.

 Centered with `.justify-content-center`:

--- a/site/content/docs/5.3/utilities/opacity.md
+++ b/site/content/docs/5.3/utilities/opacity.md
@ -15,6 +15,7 @@ Set the `opacity` of an element using `.opacity-{value}` utilities.
  <div class="opacity-75 p-3 m-2 bg-primary text-light fw-bold rounded">75%</div>
  <div class="opacity-50 p-3 m-2 bg-primary text-light fw-bold rounded">50%</div>
  <div class="opacity-25 p-3 m-2 bg-primary text-light fw-bold rounded">25%</div>
+  <div class="opacity-0 p-3 m-2 bg-primary text-light fw-bold rounded">0%</div>
 </div>

 ```html
@ -22,6 +23,7 @@ Set the `opacity` of an element using `.opacity-{value}` utilities.
 <div class="opacity-75">...</div>
 <div class="opacity-50">...</div>
 <div class="opacity-25">...</div>
+<div class="opacity-0">...</div>
 ```

 ## CSS
Author	SHA1	Message	Date
Benedikt Willi	787dfea8a2	Explicitly add missing opacity-0 helper class example for clarity. Add a missing opacity-0 helper class example. From existing examples, it wasn't obvious to me that this class exists. This commit makes it a bit more explicit.	2023-06-25 14:47:15 -07:00
Julien Déramond	6dc18c6adc	Update bottom border on dark navbar example (#38707 ) * Docs: drop bottom border from dark navbar example * Use `.border-body`	2023-06-25 14:46:29 -07:00
kyletsang	213888e17e	Update flex utilities link in navs docs	2023-06-25 14:45:38 -07:00
Erik Faye-Lund	14292b4a22	Increase contrast in dark-mode (#38525 ) This increases the default brightness for the body text-color in dark mode, which inceases readability a bit. It was also suggested to darken the background a bit, but we unfortunately don't have a darker gray in our color palette. So for now, let's increase the text-color by two notches, and leave the background color as-is instead.	2023-06-25 14:44:38 -07:00
Julien Déramond	9369cd93fb	Generalize disabled nav links CSS rules (#38774 ) Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>	2023-06-25 14:43:50 -07:00
Julien Déramond	8321397656	Fix missing `@popperjs/core` 2.11.8 refs (#38783 )	2023-06-25 21:36:55 +03:00