Moving the embed to it's own CSS file, moving the docs to the Components page...

Moving the embed to it's own CSS file, moving the docs to the Components page with an example, fixing a Glyhpicons list problem in the docs

dist/css/bootstrap-rtl.css

@@ -6344,6 +6344,35 @@ a.list-group-item-danger.active:focus {
   border-bottom-color: #ebccd1;
 }
 
+.embed-responsive {
+  position: relative;
+  display: block;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.embed-responsive .embed-responsive-item,
+.embed-responsive iframe,
+.embed-responsive embed,
+.embed-responsive object {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.embed-responsive.embed-responsive-16by9 {
+  padding-bottom: 56.25%;
+}
+
+.embed-responsive.embed-responsive-4by3 {
+  padding-bottom: 75%;
+}
+
 .well {
   min-height: 20px;
   padding: 19px;
@@ -7085,34 +7114,6 @@ button.close {
   position: fixed;
 }
 
-.embed-responsive {
-  position: relative;
-  display: block;
-  height: 0;
-  padding: 0;
-  overflow: hidden;
-}
-
-.embed-responsive .embed-responsive-item,
-.embed-responsive iframe,
-.embed-responsive embed,
-.embed-responsive object {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.embed-responsive.embed-responsive-16by9 {
-  padding-bottom: 56.25%;
-}
-
-.embed-responsive.embed-responsive-4by3 {
-  padding-bottom: 75%;
-}
-
 @-ms-viewport {
   width: device-width;
 }

dist/css/bootstrap.css

@@ -5104,6 +5104,31 @@ a.list-group-item-danger.active:focus {
 .panel-danger > .panel-footer + .panel-collapse > .panel-body {
   border-bottom-color: #ebccd1;
 }
+.embed-responsive {
+  position: relative;
+  display: block;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+}
+.embed-responsive .embed-responsive-item,
+.embed-responsive iframe,
+.embed-responsive embed,
+.embed-responsive object {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+.embed-responsive.embed-responsive-16by9 {
+  padding-bottom: 56.25%;
+}
+.embed-responsive.embed-responsive-4by3 {
+  padding-bottom: 75%;
+}
 .well {
   min-height: 20px;
   padding: 19px;
@@ -5742,30 +5767,6 @@ button.close {
 .affix {
   position: fixed;
 }
-.embed-responsive {
-  position: relative;
-  display: block;
-  height: 0;
-  padding: 0;
-  overflow: hidden;
-}
-.embed-responsive .embed-responsive-item,
-.embed-responsive iframe,
-.embed-responsive embed,
-.embed-responsive object {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.embed-responsive.embed-responsive-16by9 {
-  padding-bottom: 56.25%;
-}
-.embed-responsive.embed-responsive-4by3 {
-  padding-bottom: 75%;
-}
 @-ms-viewport {
   width: device-width;
 }

docs/_includes/nav-components.html

@@ -138,4 +138,5 @@
     <li><a href="#panels-list-group">With list groups</a>
   </ul>
 </li>
+<li><a href="#responsive-embed">Responsive embed</a></li>
 <li><a href="#wells">Wells</a></li>

docs/_includes/nav-css.html

@@ -103,7 +103,6 @@
     <li><a href="#helper-classes-show-hide">Showing and hiding content</a></li>
     <li><a href="#helper-classes-screen-readers">Screen reader content</a></li>
     <li><a href="#helper-classes-image-replacement">Image replacement</a></li>
-    <li><a href="#helper-classes-embeds-responsive">Embeds responsive</a></li>
   </ul>
 </li>
 <li>

docs/assets/css/docs.css

@@ -1212,7 +1212,7 @@ h1[id] {
  */
 
 .bs-glyphicons {
-  margin: 0 -19px 20px -16px;
+  margin: 0 -10px 20px;
   overflow: hidden;
 }
 .bs-glyphicons-list {

docs/components.html

@@ -3025,6 +3025,34 @@ body { padding-bottom: 70px; }
 
 
 
+<!-- Responsive embeds
+================================================== -->
+<div class="bs-docs-section">
+  <h1 id="responsive-embed" class="page-header">Responsive embed</h1>
+
+  <p>Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.</p>
+  <p>Rules are directly apply to <code>&lt;iframe&gt;</code>, <code>&lt;embed&gt;</code> and <code>&lt;object&gt;</code> elements, optionally use of an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
+  <p><strong>Pro-Tip!</strong> You don't need to include <code>frameborder="0"</code> in your <code>&lt;iframe&gt;</code>s as we override that for you.</p>
+  <div class="bs-example">
+    <div class="embed-responsive embed-responsive-16by9">
+      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
+    </div>
+  </div>
+{% highlight html %}
+<!-- 16:9 aspect ratio -->
+<div class="embed-responsive embed-responsive-16by9">
+  <iframe class="embed-responsive-item" src="…"></iframe>
+</div>
+
+<!-- 4:3 aspect ratio -->
+<div class="embed-responsive embed-responsive-4by3">
+  <iframe class="embed-responsive-item" src="…"></iframe>
+</div>
+{% endhighlight %}
+</div>
+
+
+
 <!-- Wells
 ================================================== -->
 <div class="bs-docs-section">

docs/css.html

@@ -2570,22 +2570,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 .heading {
   .text-hide();
 }
-{% endhighlight %}
-
-
-  <h3 id="helper-classes-embeds-responsive">Embeds responsive</h3>
-  <p>Allows browsers to determine videos or slideshow dimensions based on the width of their containing block to create an intrinsic ratio that will properly scale on any device.</p>
-  <p>Rules are directly apply to <code>&lt;iframe&gt;</code>, <code>&lt;embed&gt;</code> and <code>&lt;object&gt;</code> elements, optionally use of an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
-{% highlight html %}
-<!-- 16:9 aspect ratio -->
-<div class="embed-responsive embed-responsive-16by9">
-  <iframe class="embed-responsive-item" src="…"></iframe>
-</div>
-
-<!-- 4:3 aspect ratio -->
-<div class="embed-responsive embed-responsive-4by3">
-  <iframe class="embed-responsive-item" src="…"></iframe>
-</div>
 {% endhighlight %}
 </div>
 

less/bootstrap.less

@@ -35,6 +35,7 @@
 @import "media.less";
 @import "list-group.less";
 @import "panels.less";
+@import "responsive-embed.less";
 @import "wells.less";
 @import "close.less";
 

less/responsive-embed.less

+// Embeds responsive
+//
+// Credit: Nicolas Gallagher and SUIT CSS.
+
+.embed-responsive {
+  position: relative;
+  display: block;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+
+  .embed-responsive-item,
+  iframe,
+  embed,
+  object {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    border: 0;
+  }
+
+  // Modifier class for 16:9 aspect ratio
+  &.embed-responsive-16by9 {
+    padding-bottom: 56.25%;
+  }
+
+  // Modifier class for 4:3 aspect ratio
+  &.embed-responsive-4by3 {
+    padding-bottom: 75%;
+  }
+}

less/utilities.less

@@ -54,39 +54,3 @@
 .affix {
   position: fixed;
 }
-
-
-// Embeds responsive
-// -------------------------
-
-// Credit: Nicolas Gallagher
-
-.embed-responsive {
-  position: relative;
-  display: block;
-  height: 0;
-  padding: 0;
-  overflow: hidden;
-
-  .embed-responsive-item,
-  iframe,
-  embed,
-  object {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    height: 100%;
-    width: 100%;
-  }
-
-  // Modifier class for 16:9 aspect ratio
-  &.embed-responsive-16by9 {
-    padding-bottom: 56.25%;
-  }
-
-  // Modifier class for 4:3 aspect ratio
-  &.embed-responsive-4by3 {
-    padding-bottom: 75%;
-  }
-}