diff options
| author | Mark Otto <markdotto@gmail.com> | 2022-02-24 01:04:38 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2022-02-24 01:04:38 +0300 |
| commit | e12dddc50e5cd75df225c9e3221861e1edc08066 (patch) | |
| tree | c81e8df123282da81ba06b1b1f8ba33383be4b1d | |
| parent | 88437bd46472b4e7e5114b3e565b072ee9b3dbb9 (diff) | |
Add rudimentary nested dropdownsnested-dropdowns
| -rw-r--r-- | scss/_dropdown.scss | 19 | ||||
| -rw-r--r-- | scss/_variables.scss | 5 | ||||
| -rw-r--r-- | site/content/docs/5.1/components/dropdowns.md | 24 |
3 files changed, 48 insertions, 0 deletions
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 9a1ab1dba8..accb3e4fec 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -63,6 +63,25 @@ left: 0; margin-top: var(--#{$variable-prefix}dropdown-spacer); } + + .dropdown > .dropdown-item { + background-image: escape-svg($dropdown-nested-bg); + background-repeat: no-repeat; + background-position: $dropdown-nested-bg-position; + background-size: $dropdown-nested-bg-size; + + &:active { + background-image: escape-svg($dropdown-nested-active-bg); + } + } + + .dropdown .dropdown-menu:hover, + .dropdown > .dropdown-item:hover ~ .dropdown-menu { + position: absolute; + top: 0; + left: calc(100% - .25rem); // stylelint-disable-line function-disallowed-list + display: block; + } // scss-docs-start responsive-breakpoints diff --git a/scss/_variables.scss b/scss/_variables.scss index fd6166b26c..ab580f4562 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1149,6 +1149,11 @@ $dropdown-item-padding-x: $spacer !default; $dropdown-header-color: $gray-600 !default; $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default; + +$dropdown-nested-bg: url("data:image/svg+xml,<svg viewBox='0 0 7 12' xmlns='http://www.w3.org/2000/svg'><path d='m1 1 5 5-5 5' stroke='#{$dropdown-link-color}' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>") !default; +$dropdown-nested-active-bg: url("data:image/svg+xml,<svg viewBox='0 0 7 12' xmlns='http://www.w3.org/2000/svg'><path d='m1 1 5 5-5 5' stroke='#{$dropdown-link-active-color}' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>") !default; +$dropdown-nested-bg-position: right $dropdown-item-padding-x center !default; +$dropdown-nested-bg-size: 7px 12px !default; // scss-docs-end dropdown-variables // scss-docs-start dropdown-dark-variables diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md index c98dd778e0..59221b4aa1 100644 --- a/site/content/docs/5.1/components/dropdowns.md +++ b/site/content/docs/5.1/components/dropdowns.md @@ -393,6 +393,30 @@ And putting it to use in a navbar: </nav> {{< /example >}} +## Nesting + +{{< example >}} +<div class="dropdown"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownNestedBtn" data-bs-toggle="dropdown" aria-expanded="false"> + Nested dropdown + </button> + <ul class="dropdown-menu" aria-labelledby="dropdownNestedBtn"> + <li><a class="dropdown-item" 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 class="dropdown"> + <a class="dropdown-item" href="#" aria-labelledby="dropdownNested1">Nested dropdown</a> + <ul class="dropdown-menu" aria-labelledby="dropdownNested1"> + <li><a class="dropdown-item" href="#">Nested item</a></li> + <li><a class="dropdown-item" href="#">Nested item 2</a></li> + <li><a class="dropdown-item" href="#">Nested item 3</a></li> + </ul> + </li> + </ul> +</div> +{{< /example >}} + ## Directions {{< callout info >}} |