Merge branch 'v4-dev' into patrickhlauke-docs-accordionheadings

twbs · Nov 11, 2018 · 63b0f7c · 63b0f7c
2 parents f67d453 + 976efcd
commit 63b0f7c
Show file tree

Hide file tree

Showing 36 changed files with 2,312 additions and 2,679 deletions.
diff --git a/scss/_modal.scss b/scss/_modal.scss
@@ -18,11 +18,11 @@
 .modal {
   position: fixed;
   top: 0;
-  right: 0;
-  bottom: 0;
   left: 0;
   z-index: $zindex-modal;
   display: none;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
   // Prevent Chrome on Windows from adding a focus outline. For details, see
   // https://github.com/twbs/bootstrap/pull/10951.
@@ -84,10 +84,10 @@
 .modal-backdrop {
   position: fixed;
   top: 0;
-  right: 0;
-  bottom: 0;
   left: 0;
   z-index: $zindex-modal-backdrop;
+  width: 100vw;
+  height: 100vh;
   background-color: $modal-backdrop-bg;
 
   // Fade for backdrop

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -259,6 +259,17 @@ $transition-base:             all .2s ease-in-out !default;
 $transition-fade:             opacity .15s linear !default;
 $transition-collapse:         height .35s ease !default;
 
+$embed-responsive-aspect-ratios: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$embed-responsive-aspect-ratios: join(
+  (
+    (21 9),
+    (16 9),
+    (3 4),
+    (1 1),
+  ),
+  $embed-responsive-aspect-ratios
+);
 
 // Fonts
 //

diff --git a/scss/utilities/_embed.scss b/scss/utilities/_embed.scss
@@ -27,26 +27,13 @@
   }
 }
 
-.embed-responsive-21by9 {
-  &::before {
-    padding-top: percentage(9 / 21);
-  }
-}
-
-.embed-responsive-16by9 {
-  &::before {
-    padding-top: percentage(9 / 16);
-  }
-}
-
-.embed-responsive-4by3 {
-  &::before {
-    padding-top: percentage(3 / 4);
-  }
-}
+@each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
+  $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
+  $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
 
-.embed-responsive-1by1 {
-  &::before {
-    padding-top: percentage(1 / 1);
+  .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
+    &::before {
+      padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
+    }
   }
 }
diff --git a/site/_includes/analytics.html b/site/_includes/analytics.html
@@ -0,0 +1,6 @@
+<script>
+  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+  ga('create', 'UA-146052-10', 'getbootstrap.com');
+  ga('send', 'pageview');
+</script>
+<script async src='https://www.google-analytics.com/analytics.js'></script>
diff --git a/site/_includes/header.html b/site/_includes/header.html
@@ -12,26 +12,7 @@
   {%- endif -%}
 </title>
 
-<!-- Bootstrap core CSS -->
-{% if jekyll.environment == "production" %}
-<link href="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/css/bootstrap.min.css" rel="stylesheet" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
-{% else %}
-<link href="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/css/bootstrap.css" rel="stylesheet">
-{% endif %}
-
-<!-- Documentation extras -->
-{% if page.layout == "docs" %}
-<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-{% endif %}
-<link href="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/css/docs.min.css" rel="stylesheet">
-
+{% include stylesheet.html %}
 {% include favicons.html %}
-
 {% include social.html %}
-
-<script>
-  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
-  ga('create', 'UA-146052-10', 'getbootstrap.com');
-  ga('send', 'pageview');
-</script>
-<script async src='https://www.google-analytics.com/analytics.js'></script>
+{% include analytics.html %}
diff --git a/site/_includes/stylesheet.html b/site/_includes/stylesheet.html
@@ -0,0 +1,16 @@
+<!-- Bootstrap core CSS -->
+{%- if jekyll.environment == "production" %}
+<link href="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/css/bootstrap.min.css" rel="stylesheet" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
+{% else %}
+<link href="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/css/bootstrap.css" rel="stylesheet">
+{% endif -%}
+
+{%- if page.layout == "docs" or page.layout != "examples" -%}
+<!-- Documentation extras -->
+{% if page.layout == "docs" %}
+<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
+{% endif %}
+{% if page.layout != "examples" %}
+<link href="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/css/docs.min.css" rel="stylesheet">
+{% endif %}
+{%- endif -%}
diff --git a/site/_layouts/examples.html b/site/_layouts/examples.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en"{% if page.html_class %} class="{{ page.html_class }}"{% endif %}>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="{{ site.authors }}">
+    <meta name="generator" content="Jekyll v{{ jekyll.version }}">
+    <title>{{ page.title | smartify }} · {{ site.title | smartify }}</title>
+
+    {% include stylesheet.html %}
+
+    {%- for css in page.extra_css %}
+    <!-- Custom styles for this template -->
+    <link href="{{ css }}" rel="stylesheet">
+    {%- endfor %}
+  </head>
+  <body{% if page.body_class %} class="{{ page.body_class }}"{% endif %}>
+    {{ content }}
+
+    {%- if page.include_js != false -%}
+      <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
+      <script>window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
+
+      {%- if jekyll.environment == "production" -%}
+        <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/js/bootstrap.bundle.min.js" integrity="{{ site.cdn.js_bundle_hash }}" crossorigin="anonymous"></script>
+      {%- else -%}
+        <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/js/bootstrap.bundle.js"></script>
+      {%- endif -%}
+
+      {%- if page.include_holder == true -%}
+        <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/holder.min.js"></script>
+      {%- endif -%}
+
+      {%- for js in page.extra_js %}
+        <script src="{{ js }}"></script>
+      {%- endfor %}
+    {%- endif -%}
+  </body>
+</html>
diff --git a/site/docs/4.1/assets/js/src/application.js b/site/docs/4.1/assets/js/src/application.js
@@ -10,7 +10,7 @@
  * details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
-/* global ClipboardJS: false, anchors: false, Holder: false */
+/* global ClipboardJS: false, anchors: false, Holder: false, bsCustomFileInput: false */
 
 (function ($) {
   'use strict'
@@ -108,5 +108,7 @@
       font: 'Helvetica',
       fontweight: 'normal'
     })
+
+    bsCustomFileInput.init()
   })
 }(jQuery))
diff --git a/site/docs/4.1/components/dropdowns.md b/site/docs/4.1/components/dropdowns.md
@@ -715,11 +715,13 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
       <label for="exampleDropdownFormPassword1">Password</label>
       <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
     </div>
-    <div class="form-check">
-      <input type="checkbox" class="form-check-input" id="dropdownCheck">
-      <label class="form-check-label" for="dropdownCheck">
-        Remember me
-      </label>
+    <div class="form-group">
+      <div class="form-check">
+        <input type="checkbox" class="form-check-input" id="dropdownCheck">
+        <label class="form-check-label" for="dropdownCheck">
+          Remember me
+        </label>
+      </div>
     </div>
     <button type="submit" class="btn btn-primary">Sign in</button>
   </form>
@@ -740,11 +742,13 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
     <label for="exampleDropdownFormPassword2">Password</label>
     <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
   </div>
-  <div class="form-check">
-    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
-    <label class="form-check-label" for="dropdownCheck2">
-      Remember me
-    </label>
+  <div class="form-group">
+    <div class="form-check">
+      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
+      <label class="form-check-label" for="dropdownCheck2">
+        Remember me
+      </label>
+    </div>
   </div>
   <button type="submit" class="btn btn-primary">Sign in</button>
 </form>

diff --git a/site/docs/4.1/components/forms.md b/site/docs/4.1/components/forms.md
@@ -715,11 +715,13 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
         <option>Disabled select</option>
       </select>
     </div>
-    <div class="form-check">
-      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
-      <label class="form-check-label" for="disabledFieldsetCheck">
-        Can't check this
-      </label>
+    <div class="form-group">
+      <div class="form-check">
+        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
+        <label class="form-check-label" for="disabledFieldsetCheck">
+          Can't check this
+        </label>
+      </div>
     </div>
     <button type="submit" class="btn btn-primary">Submit</button>
   </fieldset>

diff --git a/site/docs/4.1/examples/album/album.css b/site/docs/4.1/examples/album/album.css
@@ -1,17 +1,13 @@
-:root {
-  --jumbotron-padding-y: 3rem;
-}
-
 .jumbotron {
-  padding-top: var(--jumbotron-padding-y);
-  padding-bottom: var(--jumbotron-padding-y);
+  padding-top: 3rem;
+  padding-bottom: 3rem;
   margin-bottom: 0;
   background-color: #fff;
 }
 @media (min-width: 768px) {
   .jumbotron {
-    padding-top: calc(var(--jumbotron-padding-y) * 2);
-    padding-bottom: calc(var(--jumbotron-padding-y) * 2);
+    padding-top: 6rem;
+    padding-bottom: 6rem;
   }
 }