From e454c8ec1e5197d959baf48fb089719bf900fb2a Mon Sep 17 00:00:00 2001 From: Johann-S Date: Sun, 29 Oct 2017 23:29:13 +0100 Subject: [PATCH] Add dropright and dropleft (right and left placements for our dropdown) (#23860) * Add dropright (right placement for our dropdown) * Add dropleft * moves drop left arrow to the left --- docs/4.0/components/dropdowns.md | 126 +++++++++++++++++++++++++++++++ js/src/dropdown.js | 14 +++- js/tests/visual/dropdown.html | 48 ++++++++++++ scss/_dropdown.scss | 28 +++++++ scss/mixins/_caret.scss | 30 ++++++++ 5 files changed, 244 insertions(+), 2 deletions(-) diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md index c4ada2b0fa..cb307550d4 100644 --- a/docs/4.0/components/dropdowns.md +++ b/docs/4.0/components/dropdowns.md @@ -410,6 +410,132 @@ 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 %} + +## 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 %} + +
+ +
+ +
+
+ + +
+
+ +
+ +
+
+ +
+{% 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 ` +
+ + + +
+ +
+ +
+ + + +
+
+ +
+ Dropleft split + +
+ + + +
+
+
+ +
+ + + +
+
+ + diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 2717641887..19edfca7a7 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -44,6 +44,34 @@ } } +.dropright { + .dropdown-menu { + margin-top: 0; + margin-left: $dropdown-spacer; + } + + .dropdown-toggle { + @include caret(right); + &::after { + vertical-align: 0; + } + } +} + +.dropleft { + .dropdown-menu { + margin-top: 0; + margin-right: $dropdown-spacer; + } + + .dropdown-toggle { + @include caret(left); + &::before { + 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 daab9d03c0..40478e4929 100644 --- a/scss/mixins/_caret.scss +++ b/scss/mixins/_caret.scss @@ -12,6 +12,18 @@ 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-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 { @@ -25,6 +37,24 @@ @include caret-down; } @else if $direction == up { @include caret-up; + } @else if $direction == right { + @include caret-right; + } + } + + @if $direction == left { + &::after { + display: none; + } + + &::before { + display: inline-block; + width: 0; + height: 0; + margin-right: $caret-width * .85; + vertical-align: $caret-width * .85; + content: ""; + @include caret-left; } }