diff options
Diffstat (limited to 'sass/vendor/bootstrap/scss/_dropdown.scss')
| -rw-r--r--[-rwxr-xr-x] | sass/vendor/bootstrap/scss/_dropdown.scss | 257 |
1 files changed, 168 insertions, 89 deletions
diff --git a/sass/vendor/bootstrap/scss/_dropdown.scss b/sass/vendor/bootstrap/scss/_dropdown.scss index 1c2741a..adc1143 100755..100644 --- a/sass/vendor/bootstrap/scss/_dropdown.scss +++ b/sass/vendor/bootstrap/scss/_dropdown.scss @@ -1,63 +1,128 @@ // The dropdown wrapper (`<div>`) .dropup, -.dropdown { +.dropend, +.dropdown, +.dropstart { position: relative; } .dropdown-toggle { - // Generate the caret automatically - &::after { - display: inline-block; - width: 0; - height: 0; - margin-left: $caret-width; - vertical-align: middle; - content: ""; - border-top: $caret-width solid; - border-right: $caret-width solid transparent; - border-left: $caret-width solid transparent; - } - - // Prevent the focus on the dropdown toggle when closing dropdowns - &:focus { - outline: 0; - } -} + white-space: nowrap; -.dropup { - .dropdown-toggle { - &::after { - border-top: 0; - border-bottom: $caret-width solid; - } - } + // Generate the caret automatically + @include caret(); } // The dropdown menu .dropdown-menu { position: absolute; - top: 100%; - left: 0; z-index: $zindex-dropdown; display: none; // none by default, but block on "open" of the menu - float: left; min-width: $dropdown-min-width; - padding: $dropdown-padding-y 0; - margin: $dropdown-margin-top 0 0; // override default ul - font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues - color: $body-color; + padding: $dropdown-padding-y $dropdown-padding-x; + margin: 0; // Override default margin of ul + @include font-size($dropdown-font-size); + color: $dropdown-color; text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) list-style: none; background-color: $dropdown-bg; background-clip: padding-box; border: $dropdown-border-width solid $dropdown-border-color; - @include border-radius($border-radius); + @include border-radius($dropdown-border-radius); @include box-shadow($dropdown-box-shadow); + + &[data-bs-popper] { + top: 100%; + left: 0; + margin-top: $dropdown-spacer; + } +} + +// scss-docs-start responsive-breakpoints +// We deliberately hardcode the `bs-` prefix because we check +// this custom property in JS to determine Popper's positioning + +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .dropdown-menu#{$infix}-start { + --bs-position: start; + + &[data-bs-popper] { + right: auto; + left: 0; + } + } + + .dropdown-menu#{$infix}-end { + --bs-position: end; + + &[data-bs-popper] { + right: 0; + left: auto; + } + } + } +} +// scss-docs-end responsive-breakpoints + +// Allow for dropdowns to go bottom up (aka, dropup-menu) +// Just add .dropup after the standard .dropdown class and you're set. +.dropup { + .dropdown-menu[data-bs-popper] { + top: auto; + bottom: 100%; + margin-top: 0; + margin-bottom: $dropdown-spacer; + } + + .dropdown-toggle { + @include caret(up); + } +} + +.dropend { + .dropdown-menu[data-bs-popper] { + top: 0; + right: auto; + left: 100%; + margin-top: 0; + margin-left: $dropdown-spacer; + } + + .dropdown-toggle { + @include caret(end); + &::after { + vertical-align: 0; + } + } +} + +.dropstart { + .dropdown-menu[data-bs-popper] { + top: 0; + right: 100%; + left: auto; + margin-top: 0; + margin-right: $dropdown-spacer; + } + + .dropdown-toggle { + @include caret(start); + &::before { + vertical-align: 0; + } + } } + // Dividers (basically an `<hr>`) within the dropdown .dropdown-divider { - @include nav-divider($dropdown-divider-bg); + height: 0; + margin: $dropdown-divider-margin-y 0; + overflow: hidden; + border-top: 1px solid $dropdown-divider-bg; } // Links, buttons, and more within the dropdown menu @@ -66,96 +131,110 @@ .dropdown-item { display: block; width: 100%; // For `<button>`s - padding: 3px $dropdown-item-padding-x; + padding: $dropdown-item-padding-y $dropdown-item-padding-x; clear: both; font-weight: $font-weight-normal; color: $dropdown-link-color; text-align: inherit; // For `<button>`s + text-decoration: if($link-decoration == none, null, none); white-space: nowrap; // prevent links from randomly breaking onto new lines - background: none; // For `<button>`s + background-color: transparent; // For `<button>`s border: 0; // For `<button>`s - @include hover-focus { + // Prevent dropdown overflow if there's no padding + // See https://github.com/twbs/bootstrap/pull/27703 + @if $dropdown-padding-y == 0 { + &:first-child { + @include border-top-radius($dropdown-inner-border-radius); + } + + &:last-child { + @include border-bottom-radius($dropdown-inner-border-radius); + } + } + + &:hover, + &:focus { color: $dropdown-link-hover-color; - text-decoration: none; - background-color: $dropdown-link-hover-bg; + text-decoration: if($link-hover-decoration == underline, none, null); + @include gradient-bg($dropdown-link-hover-bg); } &.active, &:active { color: $dropdown-link-active-color; text-decoration: none; - background-color: $dropdown-link-active-bg; + @include gradient-bg($dropdown-link-active-bg); } &.disabled, &:disabled { color: $dropdown-link-disabled-color; - cursor: $cursor-disabled; + pointer-events: none; background-color: transparent; // Remove CSS gradients if they're enabled - @if $enable-gradients { - background-image: none; - } - } -} - -// Open state for the dropdown -.show { - // Show the menu - > .dropdown-menu { - display: block; + background-image: if($enable-gradients, none, null); } - - // Remove the outline when :focus is triggered - > a { - outline: 0; - } -} - -// Menu positioning -// -// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown -// menu with the parent. -.dropdown-menu-right { - right: 0; - left: auto; // Reset the default from `.dropdown-menu` } -.dropdown-menu-left { - right: auto; - left: 0; +.dropdown-menu.show { + display: block; } // Dropdown section headers .dropdown-header { display: block; - padding: $dropdown-padding-y $dropdown-item-padding-x; + padding: $dropdown-header-padding; margin-bottom: 0; // for use with heading elements - font-size: $font-size-sm; + @include font-size($font-size-sm); color: $dropdown-header-color; white-space: nowrap; // as with > li > a } -// Backdrop to catch body clicks on mobile, etc. -.dropdown-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: $zindex-dropdown-backdrop; +// Dropdown text +.dropdown-item-text { + display: block; + padding: $dropdown-item-padding-y $dropdown-item-padding-x; + color: $dropdown-link-color; } -// Allow for dropdowns to go bottom up (aka, dropup-menu) -// -// Just add .dropup after the standard .dropdown class and you're set. +// Dark dropdowns +.dropdown-menu-dark { + color: $dropdown-dark-color; + background-color: $dropdown-dark-bg; + border-color: $dropdown-dark-border-color; + @include box-shadow($dropdown-dark-box-shadow); -.dropup { - // Different positioning for bottom up menu - .dropdown-menu { - top: auto; - bottom: 100%; - margin-bottom: $dropdown-margin-top; + .dropdown-item { + color: $dropdown-dark-link-color; + + &:hover, + &:focus { + color: $dropdown-dark-link-hover-color; + @include gradient-bg($dropdown-dark-link-hover-bg); + } + + &.active, + &:active { + color: $dropdown-dark-link-active-color; + @include gradient-bg($dropdown-dark-link-active-bg); + } + + &.disabled, + &:disabled { + color: $dropdown-dark-link-disabled-color; + } + } + + .dropdown-divider { + border-color: $dropdown-dark-divider-bg; + } + + .dropdown-item-text { + color: $dropdown-dark-link-color; + } + + .dropdown-header { + color: $dropdown-dark-header-color; } } |