From 638febae4c95acf407288a9d72f4366d8b70f2cd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 12 Jul 2020 20:40:54 +0300 Subject: [PATCH 1/3] Add side modals --- scss/_modal.scss | 47 ++++++ scss/_variables.scss | 3 + site/content/docs/5.0/components/modal.md | 174 +++++++++++++++++++++- 3 files changed, 223 insertions(+), 1 deletion(-) diff --git a/scss/_modal.scss b/scss/_modal.scss index 06ab5644d..2b44dc46d 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -233,3 +233,50 @@ } } } + +.modal-left, +.modal-right { + .modal-dialog { + width: $modal-sidebar-width; + max-width: $modal-sidebar-max-width; + height: 100%; + margin: 0; + transform: translate(0); + @include transition(transform .2s); + } + + .modal-content { + height: inherit; + border: 0; + @include border-radius(0); + } + + .modal-body { + overflow-y: auto; + } + + &.modal.fade { + .modal-dialog { + transform: translateX(0); + } + } + &.modal.show { + .modal-dialog { + transform: none; + } + } +} + +.modal.modal-left { + .modal-dialog { + margin-right: auto; + transform: translateX(-100%); + } +} + +.modal.modal-right { + .modal-dialog { + margin-left: auto; + transform: translateX(100%); + } +} diff --git a/scss/_variables.scss b/scss/_variables.scss index 0b64330e9..645154bce 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1161,6 +1161,9 @@ $modal-md: 500px !default; $modal-lg: 800px !default; $modal-xl: 1140px !default; +$modal-sidebar-width: 350px !default; +$modal-sidebar-max-width: 80% !default; + $modal-fade-transform: translate(0, -50px) !default; $modal-show-transform: none !default; $modal-transition: transform .3s ease-out !default; diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index 55e9f8302..87169491c 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -186,7 +186,6 @@ When backdrop is set to static, the modal will not close when clicking outside i ``` - ### Scrolling long content When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean. @@ -347,6 +346,179 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ``` +## Sidebar modals + +Convert modals into offcanvas sidebar components with the addition of `.modal-left` or `.modal-right`. These classes override the modal's default position, sizing, and transitions to make them appear as offcanvas drawers for content, shopping carts, navigation, and more. + +With these two demos, we've removed our optional `.modal-footer`s, but you can add them back. You can also add any custom content within the modal, or change the default appearance, as you need. + +### Left modal + +Our first demo is for `.modal-left`, which also has a vertical `.nav-pills` component in it. If you include `.fade` on the `.modal`, the modal and backdrop will slowly fade into view instead of sliding into the viewport from offscreen. + + + + + +
+ + +
+ +{{< highlight html >}} + + + + + +{{< /highlight >}} + +### Right modal + +In this `.modal-right` example, we've removed the default `.modal-body` padding with `.p-0` and added a linked list group within. Just like the left modal, add `.fade` to fade in the modal and backdrop instead of sliding into the viewport from offscreen. + + + + + +
+ + +
+ +{{< highlight html >}} + + + + + + +{{< /highlight >}} + +## Working with modals + ### Tooltips and popovers [Tooltips]({{< docsref "/components/tooltips" >}}) and [popovers]({{< docsref "/components/popovers" >}}) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed. From d5d42c55e51413ec50aff369580f8fa3b2bfde8e Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sat, 14 Nov 2020 09:34:25 +0200 Subject: [PATCH 2/3] Adapt modal.md to the recent main branch changes --- site/content/docs/5.0/components/modal.md | 49 +++++++++-------------- 1 file changed, 18 insertions(+), 31 deletions(-) diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index 87169491c..a3cc42bf1 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -361,9 +361,7 @@ Our first demo is for `.modal-left`, which also has a vertical `.nav-pills` comp
- +
    @@ -390,9 +388,7 @@ Our first demo is for `.modal-left`, which also has a vertical `.nav-pills` comp
    - +
      @@ -415,29 +411,29 @@ Our first demo is for `.modal-left`, which also has a vertical `.nav-pills` comp
    - -
    -{{< highlight html >}} - - -{{< /highlight >}} +``` ### Right modal @@ -448,15 +444,11 @@ In this `.modal-right` example, we've removed the default `.modal-body` padding
    - +
    - - Cras justo odio - + Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac @@ -472,15 +464,11 @@ In this `.modal-right` example, we've removed the default `.modal-body` padding
    - +
    - - Cras justo odio - + Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac @@ -492,30 +480,29 @@ In this `.modal-right` example, we've removed the default `.modal-body` padding
    - -
    -{{< highlight html >}} - - - -{{< /highlight >}} +``` ## Working with modals From deb8568064250693bce722f934ba3d7f1c29748a Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sun, 6 Dec 2020 09:19:29 +0200 Subject: [PATCH 3/3] Update modal.md --- site/content/docs/5.0/components/modal.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index ecdbaffff..22b258d2b 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -415,7 +415,7 @@ Our first demo is for `.modal-left`, which also has a vertical `.nav-pills` comp Launch left modal
    @@ -428,7 +428,7 @@ Our first demo is for `.modal-left`, which also has a vertical `.nav-pills` comp
    @@ -497,7 +497,7 @@ In this `.modal-right` example, we've removed the default `.modal-body` padding