kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Fix conflict with Bootstrap CSS

Browse source
This commit is contained in:
Martijn Cuppens 2020-11-25 22:12:32 +02:00 committed by XhmikosR
parent 4447157446
commit d8f247392d
2 changed files with 24 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
js/src/dropdown.js
View file

@ -57,7 +57,6 @@ const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_DROPUP = 'dropup' const CLASS_NAME_DROPUP = 'dropup'
const CLASS_NAME_DROPEND = 'dropend' const CLASS_NAME_DROPEND = 'dropend'
const CLASS_NAME_DROPSTART = 'dropstart' const CLASS_NAME_DROPSTART = 'dropstart'
const CLASS_NAME_MENUEND = 'dropdown-menu-end'
const CLASS_NAME_NAVBAR = 'navbar' const CLASS_NAME_NAVBAR = 'navbar'
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]' const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]'
@ -268,22 +267,23 @@ class Dropdown extends BaseComponent {
_getPlacement() { _getPlacement() {
const parentDropdown = this._element.parentNode const parentDropdown = this._element.parentNode
let placement = PLACEMENT_BOTTOM
// Handle dropup if (parentDropdown.classList.contains(CLASS_NAME_DROPEND)) {
if (parentDropdown.classList.contains(CLASS_NAME_DROPUP)) { return PLACEMENT_RIGHT
placement = this._menu.classList.contains(CLASS_NAME_MENUEND) ?
PLACEMENT_TOPEND :
PLACEMENT_TOP
} else if (parentDropdown.classList.contains(CLASS_NAME_DROPEND)) {
placement = PLACEMENT_RIGHT
} else if (parentDropdown.classList.contains(CLASS_NAME_DROPSTART)) {
placement = PLACEMENT_LEFT
} else if (this._menu.classList.contains(CLASS_NAME_MENUEND)) {
placement = PLACEMENT_BOTTOMEND
} }
return placement if (parentDropdown.classList.contains(CLASS_NAME_DROPSTART)) {
return PLACEMENT_LEFT
}
// We need to trim the value because custom properties can also include spaces
const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end'
if (parentDropdown.classList.contains(CLASS_NAME_DROPUP)) {
return isEnd ? PLACEMENT_TOPEND : PLACEMENT_TOP
}
return isEnd ? PLACEMENT_BOTTOMEND : PLACEMENT_BOTTOM
} }
_detectNavbar() { _detectNavbar() {

23
scss/_dropdown.scss
View file

@ -32,19 +32,29 @@
border: $dropdown-border-width solid $dropdown-border-color; border: $dropdown-border-width solid $dropdown-border-color;
@include border-radius($dropdown-border-radius); @include border-radius($dropdown-border-radius);
@include box-shadow($dropdown-box-shadow); @include box-shadow($dropdown-box-shadow);
// Reset positioning when positioned with Popper
&[style] {
right: auto;
}
} }
// scss-docs-start responsive-breakpoints // 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) { @each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.dropdown-menu#{$infix}-start { .dropdown-menu#{$infix}-start {
--bs-position: start;
right: auto #{"/* rtl:ignore */"}; right: auto #{"/* rtl:ignore */"};
left: 0 #{"/* rtl:ignore */"}; left: 0 #{"/* rtl:ignore */"};
} }
.dropdown-menu#{$infix}-end { .dropdown-menu#{$infix}-end {
--bs-position: end;
right: 0 #{"/* rtl:ignore */"}; right: 0 #{"/* rtl:ignore */"};
left: auto #{"/* rtl:ignore */"}; left: auto #{"/* rtl:ignore */"};
} }
@ -101,19 +111,6 @@
} }
} }
// When Popper is enabled, reset the basic dropdown position
// stylelint-disable-next-line no-duplicate-selectors
.dropdown-menu {
&[data-popper-placement^="top"],
&[data-popper-placement^="right"],
&[data-popper-placement^="bottom"],
&[data-popper-placement^="left"] {
right: auto;
bottom: auto;
left: auto;
}
}
// Dividers (basically an `<hr>`) within the dropdown // Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider { .dropdown-divider {