From 7f3589253838d183e4cf162e94c5a50d5404e684 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Wed, 18 Oct 2017 10:12:35 +0200 Subject: [PATCH] Add dropleft --- docs/4.0/components/dropdowns.md | 65 +++++++++++++++++++++++++++++++- js/src/dropdown.js | 7 +++- js/tests/visual/dropdown.html | 22 +++++++++++ scss/_dropdown.scss | 14 +++++++ scss/mixins/_caret.scss | 8 ++++ 5 files changed, 113 insertions(+), 3 deletions(-) diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md index 5e0e1740ed2e..27150d294f42 100644 --- a/docs/4.0/components/dropdowns.md +++ b/docs/4.0/components/dropdowns.md @@ -450,7 +450,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
@@ -463,7 +463,68 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th Split dropright +
+ +
+
+{% endhighlight %} + +## Dropleft variation + +Trigger dropdown menus at the left of the elements by adding `.dropleft` to the parent element. + +
+
+ +
+ Action + Another action + Something else here +
+ Separated link +
+
+ +
+ + +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ +{% highlight html %} + +
+ + +
+ +
+
+ + +
+ +
diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 64fdc8f0bc64..90716bb124c1 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -56,6 +56,7 @@ const Dropdown = (() => { SHOW : 'show', DROPUP : 'dropup', DROPRIGHT : 'dropright', + DROPLEFT : 'dropleft', MENURIGHT : 'dropdown-menu-right', MENULEFT : 'dropdown-menu-left' } @@ -74,7 +75,9 @@ const Dropdown = (() => { BOTTOM : 'bottom-start', BOTTOMEND : 'bottom-end', RIGHT : 'right-start', - RIGHTEND : 'right-end' + RIGHTEND : 'right-end', + LEFT : 'left-start', + LEFTEND : 'left-end' } const Default = { @@ -240,6 +243,8 @@ const Dropdown = (() => { } } else if ($parentDropdown.hasClass(ClassName.DROPRIGHT)) { placement = AttachmentMap.RIGHT + } else if ($parentDropdown.hasClass(ClassName.DROPLEFT)) { + placement = AttachmentMap.LEFT } else if ($(this._menu).hasClass(ClassName.MENURIGHT)) { placement = AttachmentMap.BOTTOMEND } diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html index 96ef863e72c2..467414c2293b 100644 --- a/js/tests/visual/dropdown.html +++ b/js/tests/visual/dropdown.html @@ -138,6 +138,28 @@

Dropdown Bootstrap Visual Test

+ +
+ Dropleft split + +
+ + + +
+
+
+ +
+ + + +
+
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 64ed42e40ab1..cc8b07207942 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -58,6 +58,20 @@ } } +.dropleft { + .dropdown-menu { + margin-top: 0; + margin-right: $dropdown-spacer; + } + + .dropdown-toggle { + @include caret(left); + &::after { + vertical-align: 0; + } + } +} + // Dividers (basically an `
`) within the dropdown .dropdown-divider { @include nav-divider($dropdown-divider-bg); diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss index ff1b3554f11a..ec47b7766aca 100644 --- a/scss/mixins/_caret.scss +++ b/scss/mixins/_caret.scss @@ -18,6 +18,12 @@ border-left: $caret-width solid; } +@mixin caret-left { + border-top: $caret-width solid transparent; + border-right: $caret-width solid; + border-bottom: $caret-width solid transparent; +} + @mixin caret($direction: down) { @if $enable-caret { &::after { @@ -33,6 +39,8 @@ @include caret-up; } @else if $direction == right { @include caret-right; + } @else if $direction == left { + @include caret-left; } }