diff options
author | ysds <fellows3@gmail.com> | 2018-03-12 20:44:05 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2018-03-12 20:44:05 +0300 |
commit | 14f712601edf87aa4e2e65243775682b1270124e (patch) | |
tree | 158534f6b9bcf19f9c00dd9e83120057c57217b2 /scss | |
parent | fb15575ec51782fdc3567813d0e7f058498b02ce (diff) |
Add basic position to dropup/right/left and dropdown-menu-right (#25400)
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_dropdown.scss | 30 | ||||
-rw-r--r-- | scss/_navbar.scss | 12 |
2 files changed, 29 insertions, 13 deletions
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 8d96c1ba63..ee6f658087 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -1,6 +1,8 @@ // The dropdown wrapper (`<div>`) .dropup, -.dropdown { +.dropright, +.dropdown, +.dropleft { position: relative; } @@ -31,10 +33,17 @@ @include box-shadow($dropdown-box-shadow); } +.dropdown-menu-right { + right: 0; + left: auto; +} + // 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 { + top: auto; + bottom: 100%; margin-top: 0; margin-bottom: $dropdown-spacer; } @@ -46,6 +55,9 @@ .dropright { .dropdown-menu { + top: 0; + right: auto; + left: 100%; margin-top: 0; margin-left: $dropdown-spacer; } @@ -60,6 +72,9 @@ .dropleft { .dropdown-menu { + top: 0; + right: 100%; + left: auto; margin-top: 0; 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 .dropdown-divider { @include nav-divider($dropdown-divider-bg); diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 8d68c6c8c4..05025273f8 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -162,11 +162,6 @@ position: absolute; } - .dropdown-menu-right { - right: 0; - left: auto; // Reset the default from `.dropdown-menu` - } - .nav-link { padding-right: $navbar-nav-link-padding-x; padding-left: $navbar-nav-link-padding-x; @@ -189,13 +184,6 @@ .navbar-toggler { display: none; } - - .dropup { - .dropdown-menu { - top: auto; - bottom: 100%; - } - } } } } |