Make modal sizes be breakpoint widths, with default having modal-sm sizing and modal-xs being 300px

.gitignore

@@ -36,3 +36,5 @@ Thumbs.db
 # Folders to ignore
 bower_components
 node_modules
+
+yarn.lock

dist/css/bootstrap-theme.min.css

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v5.1.4 (http://bootstrap.transferwise.com)
+ * Bootstrap v5.2.1 (http://bootstrap.transferwise.com)
  * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/transferwise/bootstrap/blob/master/LICENSE)
  */

dist/js/bootstrap.js

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v5.1.4 (http://bootstrap.transferwise.com)
+ * Bootstrap v5.2.1 (http://bootstrap.transferwise.com)
  * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/transferwise/bootstrap/blob/master/LICENSE)
  */

docs/_includes/customizer-variables.html

@@ -1990,18 +1990,36 @@ <h2 id="modals">Modals</h2>
     <input id="input-@modal-footer-border-color" type="text" aria-describedby="help-block-@modal-footer-border-color" value="@modal-header-border-color" data-var="@modal-footer-border-color" class="form-control"/>
     <p id="help-block-@modal-footer-border-color" class="help-block">Modal footer border color</p>
   </div>
+  <div class="col-xs-4">
+    <label for="input-@modal-dialog-margin-xs">@modal-dialog-margin-xs</label>
+    <input id="input-@modal-dialog-margin-xs" type="text" value="(@padding-base-vertical * 2)" data-var="@modal-dialog-margin-xs" class="form-control"/>
+  </div>
+  <div class="clearfix"></div>
+  <div class="col-xs-4">
+    <label for="input-@modal-dialog-margin-sm">@modal-dialog-margin-sm</label>
+    <input id="input-@modal-dialog-margin-sm" type="text" value="(@padding-base-vertical * 4)" data-var="@modal-dialog-margin-sm" class="form-control"/>
+  </div>
+  <div class="col-xs-4">
+    <label for="input-@modal-xl">@modal-xl</label>
+    <input id="input-@modal-xl" type="text" aria-describedby="help-block-@modal-xl" value="@screen-xl-min" data-var="@modal-xl" class="form-control"/>
+    <p id="help-block-@modal-xl" class="help-block">Modal sizes</p>
+  </div>
   <div class="col-xs-4">
     <label for="input-@modal-lg">@modal-lg</label>
-    <input id="input-@modal-lg" type="text" value="720px" data-var="@modal-lg" class="form-control"/>
+    <input id="input-@modal-lg" type="text" value="@screen-lg-min" data-var="@modal-lg" class="form-control"/>
   </div>
   <div class="clearfix"></div>
   <div class="col-xs-4">
     <label for="input-@modal-md">@modal-md</label>
-    <input id="input-@modal-md" type="text" value="540px" data-var="@modal-md" class="form-control"/>
+    <input id="input-@modal-md" type="text" value="@screen-md-min" data-var="@modal-md" class="form-control"/>
   </div>
   <div class="col-xs-4">
     <label for="input-@modal-sm">@modal-sm</label>
-    <input id="input-@modal-sm" type="text" value="300px" data-var="@modal-sm" class="form-control"/>
+    <input id="input-@modal-sm" type="text" value="@screen-sm-min" data-var="@modal-sm" class="form-control"/>
+  </div>
+  <div class="col-xs-4">
+    <label for="input-@modal-xs">@modal-xs</label>
+    <input id="input-@modal-xs" type="text" value="300px" data-var="@modal-xs" class="form-control"/>
   </div>
 </div>
 <h2 id="alerts">Alerts</h2>

docs/_includes/js/modal.html

@@ -153,11 +153,24 @@ <h4>Embedding YouTube videos</h4>
   <h2 id="modals-sizes">Optional sizes</h2>
   <p>Modals have two optional sizes, available via modifier classes to be placed on a <code>.modal-dialog</code>.</p>
   <div class="bs-example">
+    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-xl">Extra large modal</button>
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
-    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-md">Normal modal</button>
-    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
+    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-md">Medium modal</button>
+    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small (default) modal</button>
+    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-xs">Extra small modal</button>
   </div>
 {% highlight html %}
+<!-- Extra large modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-xl">Extra large modal</button>
+
+<div class="modal fade bs-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel">
+  <div class="modal-dialog modal-xl">
+    <div class="modal-content">
+      ...
+    </div>
+  </div>
+</div>
+
 <!-- Large modal -->
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
 
@@ -169,19 +182,19 @@ <h2 id="modals-sizes">Optional sizes</h2>
   </div>
 </div>
 
-<!-- Normal modal -->
-<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-md">Small modal</button>
+<!-- Medium modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-md">Medium modal</button>
 
 <div class="modal fade bs-example-modal-md" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
-  <div class="modal-dialog">
+  <div class="modal-dialog modal-md">
     <div class="modal-content">
       ...
     </div>
   </div>
 </div>
 
 <!-- Small modal -->
-<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small (default) modal</button>
 
 <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
   <div class="modal-dialog modal-sm">
@@ -190,9 +203,34 @@ <h2 id="modals-sizes">Optional sizes</h2>
     </div>
   </div>
 </div>
+
+<!-- Extra small modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-xs">Extra small modal</button>
+
+<div class="modal fade bs-example-modal-xs" tabindex="-1" role="dialog" aria-labelledby="myExtraSmallModalLabel">
+  <div class="modal-dialog modal-xs">
+    <div class="modal-content">
+      ...
+    </div>
+  </div>
+</div>
 {% endhighlight %}
 
   <!--  Modal content for the above example -->
+  <div class="modal fade bs-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel">
+    <div class="modal-dialog modal-xl">
+      <div class="modal-content">
+
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <h4 class="modal-title" id="myExtraLargeModalLabel">Extra large modal</h4>
+        </div>
+        <div class="modal-body">
+          ...
+        </div>
+      </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+  </div><!-- /.modal -->
   <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
     <div class="modal-dialog modal-lg">
       <div class="modal-content">
@@ -208,12 +246,12 @@ <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->
   <div class="modal fade bs-example-modal-md" tabindex="-1" role="dialog" aria-labelledby="myNormalModalLabel">
-    <div class="modal-dialog">
+    <div class="modal-dialog modal-md">
       <div class="modal-content">
 
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-          <h4 class="modal-title" id="myNormalModalLabel">Normal modal</h4>
+          <h4 class="modal-title" id="myNormalModalLabel">Medium modal</h4>
         </div>
         <div class="modal-body">
           ...
@@ -227,7 +265,21 @@ <h4 class="modal-title" id="myNormalModalLabel">Normal modal</h4>
 
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-          <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
+          <h4 class="modal-title" id="mySmallModalLabel">Small (default) modal</h4>
+        </div>
+        <div class="modal-body">
+          ...
+        </div>
+      </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+  </div><!-- /.modal -->
+  <div class="modal fade bs-example-modal-xs" tabindex="-1" role="dialog" aria-labelledby="myExtraSmallModalLabel">
+    <div class="modal-dialog modal-xs">
+      <div class="modal-content">
+
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <h4 class="modal-title" id="myExtraSmallModalLabel">Extra small modal</h4>
         </div>
         <div class="modal-body">
           ...

docs/dist/css/bootstrap-theme.min.css

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v5.1.4 (http://bootstrap.transferwise.com)
+ * Bootstrap v5.2.1 (http://bootstrap.transferwise.com)
  * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/transferwise/bootstrap/blob/master/LICENSE)
  */

docs/dist/js/bootstrap.js

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v5.1.4 (http://bootstrap.transferwise.com)
+ * Bootstrap v5.2.1 (http://bootstrap.transferwise.com)
  * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/transferwise/bootstrap/blob/master/LICENSE)
  */