From 4b42634e1ffd1e30ca21325ed99312654887072e Mon Sep 17 00:00:00 2001 From: Johann-S Date: Thu, 7 Sep 2017 11:46:47 +0200 Subject: [PATCH] Add dropright (right placement for our dropdown) --- docs/4.0/components/dropdowns.md | 61 ++++++++++++++++++++++++++++++++ js/src/dropdown.js | 10 ++++-- js/tests/visual/dropdown.html | 26 ++++++++++++++ scss/_dropdown.scss | 16 +++++++++ 4 files changed, 110 insertions(+), 3 deletions(-) diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md index 93c9c892a27c..25a39520c610 100644 --- a/docs/4.0/components/dropdowns.md +++ b/docs/4.0/components/dropdowns.md @@ -410,6 +410,67 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. {% endhighlight %} +## Dropright variation + +Trigger dropdown menus at the right of the elements by adding `.dropright` to the parent element. + +
+
+ +
+ Action + Another action + Something else here +
+ Separated link +
+
+ +
+ + +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ +{% highlight html %} + +
+ + +
+ +
+
+ + +
+ + +
+ +
+
+{% endhighlight %} + ## Menu items Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use ` +
+ + + +
+ +
+ +
+ + + +
+
+ + diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 05e8b165232f..3fb576245d2d 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -39,6 +39,22 @@ } } +.dropright { + .dropdown-menu { + margin-top: -1px; + margin-left: 2px; + } + + .dropdown-toggle { + &::after { + vertical-align: 0; + border-top: $caret-width solid transparent; + border-bottom: $caret-width solid transparent; + border-left: $caret-width solid; + } + } +} + // The dropdown menu .dropdown-menu { position: absolute;