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

Add basic position to dropup/right/left and dropdown-menu-right (#25400)

Browse source
This commit is contained in:
ysds 2018-03-13 02:44:05 +09:00 committed by XhmikosR
parent fb15575ec5
commit 14f712601e
2 changed files with 29 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
scss/_dropdown.scss
View file

@ -1,6 +1,8 @@
// The dropdown wrapper (`<div>`) // The dropdown wrapper (`<div>`)
.dropup, .dropup,
.dropdown { .dropright,
.dropdown,
.dropleft {
position: relative; position: relative;
} }
@ -31,10 +33,17 @@
@include box-shadow($dropdown-box-shadow); @include box-shadow($dropdown-box-shadow);
} }
.dropdown-menu-right {
right: 0;
left: auto;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu) // Allow for dropdowns to go bottom up (aka, dropup-menu)
// Just add .dropup after the standard .dropdown class and you're set. // Just add .dropup after the standard .dropdown class and you're set.
.dropup { .dropup {
.dropdown-menu { .dropdown-menu {
top: auto;
bottom: 100%;
margin-top: 0; margin-top: 0;
margin-bottom: $dropdown-spacer; margin-bottom: $dropdown-spacer;
} }
@ -46,6 +55,9 @@
.dropright { .dropright {
.dropdown-menu { .dropdown-menu {
top: 0;
right: auto;
left: 100%;
margin-top: 0; margin-top: 0;
margin-left: $dropdown-spacer; margin-left: $dropdown-spacer;
} }
@ -60,6 +72,9 @@
.dropleft { .dropleft {
.dropdown-menu { .dropdown-menu {
top: 0;
right: 100%;
left: auto;
margin-top: 0; margin-top: 0;
margin-right: $dropdown-spacer; margin-right: $dropdown-spacer;
} }
@ -72,6 +87,19 @@
} }
} }
// When enabled Popper.js, reset basic dropdown position
// stylelint-disable no-duplicate-selectors
.dropdown-menu {
&[x-placement^="top"],
&[x-placement^="right"],
&[x-placement^="bottom"],
&[x-placement^="left"] {
right: auto;
bottom: auto;
}
}
// stylelint-enable no-duplicate-selectors
// Dividers (basically an `<hr>`) within the dropdown // Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider { .dropdown-divider {
@include nav-divider($dropdown-divider-bg); @include nav-divider($dropdown-divider-bg);

12
scss/_navbar.scss
View file

@ -162,11 +162,6 @@
position: absolute; position: absolute;
} }
.dropdown-menu-right {
right: 0;
left: auto; // Reset the default from `.dropdown-menu`
}
.nav-link { .nav-link {
padding-right: $navbar-nav-link-padding-x; padding-right: $navbar-nav-link-padding-x;
padding-left: $navbar-nav-link-padding-x; padding-left: $navbar-nav-link-padding-x;
@ -189,13 +184,6 @@
.navbar-toggler { .navbar-toggler {
display: none; display: none;
} }
.dropup {
.dropdown-menu {
top: auto;
bottom: 100%;
}
}
} }
} }
} }