From 550f5c58dfd580b9ce9a22b97a5715f886f305fb 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 | 9 +++-- js/tests/visual/dropdown.html | 26 ++++++++++++++ scss/_dropdown.scss | 14 ++++++++ scss/mixins/_caret.scss | 8 +++++ 5 files changed, 116 insertions(+), 2 deletions(-) diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md index d38b410c78b5..a2daa2f0dba8 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 32657167f54d..c8985a852eda 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -22,6 +22,20 @@ } } +.dropright { + .dropdown-menu { + margin-top: 0; + margin-left: $dropdown-spacer; + } + + .dropdown-toggle { + @include caret(right); + &::after { + vertical-align: 0; + } + } +} + // The dropdown menu .dropdown-menu { position: absolute; diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss index daab9d03c0c5..ff1b3554f11a 100644 --- a/scss/mixins/_caret.scss +++ b/scss/mixins/_caret.scss @@ -12,6 +12,12 @@ border-left: $caret-width solid transparent; } +@mixin caret-right { + border-top: $caret-width solid transparent; + border-bottom: $caret-width solid transparent; + border-left: $caret-width solid; +} + @mixin caret($direction: down) { @if $enable-caret { &::after { @@ -25,6 +31,8 @@ @include caret-down; } @else if $direction == up { @include caret-up; + } @else if $direction == right { + @include caret-right; } }