From b1623c44290b414b656bb4d9e3baaaa3093bda8f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Oct 2017 15:14:10 -0700 Subject: [PATCH 1/3] Add `.modal-dialog-centered` for optional vertically centered modal (#24510) * Add .modal-dialog-centered for optional vertically cenetered modal Fixes #23638 * adds modal-dialog-centered class to docs and removes margin to avoid generating a vertical scrolling * mention limitations * fix aria attr * Add `width: 100%` to the .modal-content for the centered version. Adding it here to avoid adding another selector by limiting it to the centered modal modifier. --- docs/4.0/components/modal.md | 58 ++++++++++++++++++++++++++++++++++++ scss/_modal.scss | 15 ++++++++++ 2 files changed, 73 insertions(+) diff --git a/docs/4.0/components/modal.md b/docs/4.0/components/modal.md index c4191b83d1..b9ebc4ad4b 100644 --- a/docs/4.0/components/modal.md +++ b/docs/4.0/components/modal.md @@ -208,6 +208,64 @@ When modals become too long for the user's viewport or device, they scroll indep {% endhighlight %} +### Vertically centered + +Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. **Do not use this with long modals**—it will overflow the viewport and potentially hide parts of your modal. + + + +
+ +
+ +{% highlight html %} + + + + + +{% endhighlight %} + ### Tooltips and popovers [Tooltips]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) and [popovers]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed. diff --git a/scss/_modal.scss b/scss/_modal.scss index 5fabc83f46..bd4abc7c64 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -50,11 +50,20 @@ } } +.modal-dialog-centered { + display: flex; + align-items: center; + height: 100%; + margin-top: 0; + margin-bottom: 0; +} + // Actual modal .modal-content { position: relative; display: flex; flex-direction: column; + width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog` // counteract the pointer-events: none; in the .modal-dialog pointer-events: auto; background-color: $modal-content-bg; @@ -144,11 +153,17 @@ margin: $modal-dialog-margin-y-sm-up auto; } + .modal-dialog-centered { + margin-top: 0; + margin-bottom: 0; + } + .modal-content { @include box-shadow($modal-content-box-shadow-sm-up); } .modal-sm { max-width: $modal-sm; } + } @include media-breakpoint-up(lg) { From e454c8ec1e5197d959baf48fb089719bf900fb2a Mon Sep 17 00:00:00 2001 From: Johann-S Date: Sun, 29 Oct 2017 23:29:13 +0100 Subject: [PATCH 2/3] 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; } } From 2232b6b4d140cf8a01314deb7e4779c7fde8ab05 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Sun, 29 Oct 2017 23:51:04 +0100 Subject: [PATCH 3/3] Throw error about Popper.js only when it's needed because some of our plugins don't use it (#24573) --- js/src/dropdown.js | 16 ++++++++-------- js/src/tooltip.js | 16 +++++++--------- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 45d061c93a..a18f0c28ae 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -12,14 +12,6 @@ import Util from './util' const Dropdown = (($) => { - /** - * Check for Popper dependency - * Popper - https://popper.js.org - */ - if (typeof Popper === 'undefined') { - throw new Error('Bootstrap dropdown require Popper.js (https://popper.js.org)') - } - /** * ------------------------------------------------------------------------ * Constants @@ -151,6 +143,14 @@ const Dropdown = (($) => { return } + /** + * Check for Popper dependency + * Popper - https://popper.js.org + */ + if (typeof Popper === 'undefined') { + throw new Error('Bootstrap dropdown require Popper.js (https://popper.js.org)') + } + let element = this._element // for dropup with alignment we use the parent as popper container if ($(parent).hasClass(ClassName.DROPUP)) { diff --git a/js/src/tooltip.js b/js/src/tooltip.js index a3fc93c913..7cefd0be6a 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -12,15 +12,6 @@ import Util from './util' const Tooltip = (($) => { - /** - * Check for Popper dependency - * Popper - https://popper.js.org - */ - if (typeof Popper === 'undefined') { - throw new Error('Bootstrap tooltips require Popper.js (https://popper.js.org)') - } - - /** * ------------------------------------------------------------------------ * Constants @@ -120,6 +111,13 @@ const Tooltip = (($) => { class Tooltip { constructor(element, config) { + /** + * Check for Popper dependency + * Popper - https://popper.js.org + */ + if (typeof Popper === 'undefined') { + throw new Error('Bootstrap tooltips require Popper.js (https://popper.js.org)') + } // private this._isEnabled = true