feat(modals): Orange branded 🎉

Orange-OpenSource · Jan 26, 2021 · bfd285c · bfd285c
1 parent 318d89d
commit bfd285c
Show file tree

Hide file tree

Showing 7 changed files with 221 additions and 20 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "23.9 kB"
+      "maxSize": "24 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",

diff --git a/scss/_modal.scss b/scss/_modal.scss
@@ -61,7 +61,11 @@
   }
 
   .modal-body {
+    padding: $modal-scrollable-inner-padding; // Boosted mod
+    margin: $modal-scrollable-inner-margin; // Boosted mod
     overflow-y: auto;
+    border: $modal-content-border-width solid $modal-content-border-color; // Boosted mod
+    border-width: $modal-content-border-width 0; // Boosted mod
   }
 }
 
@@ -71,6 +75,12 @@
   min-height: subtract(100%, $modal-dialog-margin * 2);
 }
 
+// Boosted mod
+.modal-dialog:not(.modal-dialog-scrollable) .modal-body > :last-child {
+  margin-bottom: 0;
+}
+// End mod
+
 // Actual modal
 .modal-content {
   position: relative;
@@ -83,7 +93,7 @@
   pointer-events: auto;
   background-color: $modal-content-bg;
   background-clip: padding-box;
-  border: if($modal-content-border-color == null, null, $modal-content-border-width solid $modal-content-border-color); // Boosted mod
+  border: $modal-content-border-width solid $modal-content-border-color;
   @include border-radius($modal-content-border-radius);
   @include box-shadow($modal-content-box-shadow-xs);
 }
@@ -103,6 +113,21 @@
   &.show { opacity: $modal-backdrop-opacity; }
 }
 
+
+// Boosted mod
+//// Modal image
+.modal-img {
+  margin: $modal-img-margin;
+
+  + .modal-header .btn-close {
+    position: absolute;
+    top: $modal-img-btn-close-offset;
+    right: $modal-img-btn-close-offset;
+  }
+}
+// End mod
+
+
 // Modal header
 // Top section of the modal w/ title and dismiss
 .modal-header {
@@ -142,15 +167,15 @@
   flex-shrink: 0;
   align-items: center; // vertically center
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
-  padding: $modal-inner-padding - $modal-footer-margin-between / 2;
+  padding: $modal-footer-padding; // Boosted mod
   border-top: if($modal-footer-border-color == null, null, $modal-footer-border-width solid $modal-footer-border-color); // Boosted mod
   @include border-bottom-radius($modal-content-inner-border-radius);
 
   // Place margin between footer elements
   // This solution is far from ideal because of the universal selector usage,
   // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
   > * {
-    margin: $modal-footer-margin-between / 2;
+    margin: 0 $modal-footer-margin-between / 2; // Boosted mod
   }
 }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -916,11 +916,11 @@ $form-validation-states: (
 $zindex-dropdown:                   1000 !default;
 $zindex-sticky:                     1020 !default;
 $zindex-fixed:                      1030 !default;
+$zindex-back-to-top:                1035 !default; // Boosted mod
 $zindex-modal-backdrop:             1040 !default;
 $zindex-modal:                      1050 !default;
 $zindex-popover:                    1060 !default;
 $zindex-tooltip:                    1070 !default;
-$zindex-back-to-top:                1080 !default; // Boosted mod
 // scss-docs-end zindex-stack
 
 // Navs
@@ -1240,42 +1240,53 @@ $badge-border-radius:               $border-radius !default;
 // Modals
 
 // Padding applied to the modal body
-$modal-inner-padding:               $spacer / 2 0 !default;
+$modal-inner-padding:               $spacer / 2 $spacer !default;
 
 // Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
 $modal-footer-margin-between:       $spacer / 2 !default;
+$modal-footer-padding:              $spacer / 2 subtract($spacer, $modal-footer-margin-between / 2) 0 !default; // Boosted mod
 
 $modal-dialog-margin:               $spacer / 2 !default;
 $modal-dialog-margin-y-sm-up:       $spacer * 1.5 !default;
-$modal-dialog-border-color:         $gray-500 !default; // Boosted mod
-$modal-dialog-border-width:         $border-width !default; // Boosted mod
 
 $modal-title-line-height:           $line-height-base !default;
 
-$modal-content-padding:             $spacer !default; // Boosted mod
+$modal-content-padding-y:           $spacer !default; // Boosted mod
+$modal-content-padding-x:           0 !default; // Boosted mod
+$modal-content-padding:             $modal-content-padding-y $modal-content-padding-x !default; // Boosted mod
 $modal-content-color:               null !default;
 $modal-content-bg:                  $white !default;
-$modal-content-border-color:        null !default;
+$modal-content-border-color:        $gray-500 !default;
 $modal-content-border-width:        $border-width !default;
 $modal-content-border-radius:       $border-radius-lg !default;
 $modal-content-inner-border-radius: $border-radius !default;
 $modal-content-box-shadow-xs:       $box-shadow-sm !default;
 $modal-content-box-shadow-sm-up:    $box-shadow !default;
 
-$modal-backdrop-bg:                 $gray-900 !default;
+$modal-backdrop-bg:                 $black !default;
 $modal-backdrop-opacity:            .5 !default;
 $modal-header-border-color:         null !default;
 $modal-footer-border-color:         null !default;
 $modal-header-border-width:         $modal-content-border-width !default;
 $modal-footer-border-width:         $modal-header-border-width !default;
-$modal-header-padding-y:            null !default;
-$modal-header-padding-x:            null !default;
+$modal-header-padding-y:            0 !default;
+$modal-header-padding-x:            $spacer !default;
 $modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
 
+// Boosted mod
+//// Scrollable modal
+$modal-scrollable-inner-padding:    $spacer !default;
+$modal-scrollable-inner-margin:     $spacer 0 $spacer / 2 !default;
+
+//// Modal with top image
+$modal-img-margin:                  -$modal-content-padding-y 0 $modal-content-padding-y !default; // Boosted mod
+$modal-img-btn-close-offset:        $modal-content-padding-y !default;
+// End mod
+
 $modal-sm:                          300px !default;
-$modal-md:                          700px !default;
+$modal-md:                          460px !default;
 $modal-lg:                          700px !default;
-$modal-xl:                          700px !default;
+$modal-xl:                          940px !default;
 
 $modal-fade-transform:              translate(0, -50px) !default;
 $modal-show-transform:              none !default;

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -194,11 +194,25 @@
 }
 
 .bd-example-modal {
-  background-color: #fafafa;
+  background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity); // Boosted mod
 
   .modal {
     position: static;
     display: block;
+
+    // Boosted mod
+    &:first-child .modal-dialog {
+      margin-top: 3.125rem;
+    }
+
+    &:last-child .modal-dialog {
+      margin-bottom: 3.125rem;
+    }
+
+    .modal-dialog-scrollable .modal-content {
+      max-height: 25rem;
+    }
+    // End mod
   }
 }
 

diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md
@@ -78,6 +78,54 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
 </div>
 ```
 
+<!-- Boosted mod -->
+#### With image
+
+Modals may start with a picture. Add `.modal-img` to your `<img>` or `<svg>` tag—being `.modal-content`'s first child— and you're done!
+
+<div class="bd-example bd-example-modal">
+  <div class="modal" tabindex="-1">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        {{< placeholder width="100%" height="260" class="modal-img" text="Image cap" >}}
+        <div class="modal-header">
+          <h5 class="modal-title">Modal title</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p>Modal body text goes here.</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-primary">Save changes</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+```html
+<div class="modal" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <img class="modal-img" src="..." alt="...">
+      <div class="modal-header">
+        <h5 class="modal-title">Modal title</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <p>Modal body text goes here.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+<!-- End mod -->
+
 ### Live demo
 
 Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
@@ -553,22 +601,22 @@ Modals have three optional sizes, available via modifier classes to be placed on
     <tr>
       <td>Small</td>
       <td><code>.modal-sm</code></td>
-      <td><code>300px</code></td>
+      <td><code>300px</code></td><!-- Boosted mod -->
     </tr>
     <tr>
       <td>Default</td>
       <td class="text-muted">None</td>
-      <td><code>500px</code></td>
+      <td><code>460px</code></td><!-- Boosted mod -->
     </tr>
     <tr>
       <td>Large</td>
       <td><code>.modal-lg</code></td>
-      <td><code>800px</code></td>
+      <td><code>700px</code></td><!-- Boosted mod -->
     </tr>
     <tr>
       <td>Extra large</td>
       <td><code>.modal-xl</code></td>
-      <td><code>1280px</code></td>
+      <td><code>940px</code></td><!-- Boosted mod -->
     </tr>
   </tbody>
 </table>

diff --git a/site/content/docs/5.0/guidelines/modals.md b/site/content/docs/5.0/guidelines/modals.md
@@ -0,0 +1,102 @@
+---
+layout: guidelines
+title: Modals
+description: Display dialog or additional information above the current page.
+group: guidelines
+subgroup: Components
+toc: true
+---
+
+## Modal with title and description
+
+[Documentation]({{< docsref "/components/modal" >}})&nbsp;—&nbsp;{{< anchor web-mod-std-001 >}}
+
+<div class="bd-example-modal">
+  <div class="modal" tabindex="-1">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Modal title</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore.</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Button</button>
+          <button type="button" class="btn btn-primary">Button</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal" tabindex="-1">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Modal title</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore.</p>
+        </div>
+        <div class="modal-footer">
+          <a href="#" class="fw-bold me-3">Text link</a>
+          <button type="button" class="btn btn-primary">Button</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+## Modal with image, title and description
+
+[Documentation]({{< docsref "/components/modal" >}}#with-image)&nbsp;—&nbsp;{{< anchor web-mod-std-002 >}}
+
+<div class="bd-example-modal">
+  <div class="modal" tabindex="-1">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        {{< placeholder width="100%" height="260" class="modal-img" text="Image cap" >}}
+        <div class="modal-header">
+          <h5 class="modal-title">Modal title</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p lang="zxx">Lorem ipsum dolor sit amet, consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore.</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Button</button>
+          <button type="button" class="btn btn-primary">Button</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+## Modal with scrolling
+
+[Documentation]({{< docsref "/components/modal" >}}#scrolling-long-content)&nbsp;—&nbsp;{{< anchor web-mod-scr-001 >}}
+
+<div class="bd-example-modal">
+  <div class="modal" tabindex="-1">
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Modal title</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body" lang="zxx">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          <p>Consectetur lorem donec massa sapien faucibus et molestie. Nunc mattis enim ut tellus elementum sagittis vitae et leo.</p>
+          <p>Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Lorem sed risus ultricies tristique. Volutpat diam ut venenatis tellus in. Mauris vitae ultricies leo integer malesuada nunc vel risus.</p>
+          <p>Sit amet consectetur adipiscing elit duis tristique. Lacus laoreet non curabitur gravida arcu ac tortor. Pellentesque pulvinar pellentesque habitant morbi.</p>
+          <p>Adipiscing commodo elit at imperdiet dui accumsan sit amet. Sit amet aliquam id diam maecenas. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Tellus at urna condimentum mattis pellentesque id nibh tortor.</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Button</button>
+          <button type="button" class="btn btn-primary">Button</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/site/data/guidelines.yml b/site/data/guidelines.yml
@@ -17,6 +17,7 @@
     - title: Forms
     - title: Data tables
     - title: Progress indicators
+    - title: Modals
 
 - title: Modules
   pages: