Normalize examples' CSS. (#24210)

docs/4.0/examples/blog/blog.css

@@ -20,7 +20,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: normal;
+  font-weight: 400;
   color: #333;
 }
 
@@ -41,7 +41,6 @@ h6, .h6 {
 .blog-masthead {
   margin-bottom: 3rem;
   background-color: #428bca;
-  -webkit-box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
   box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
 }
 
@@ -89,7 +88,7 @@ h6, .h6 {
 .blog-title {
   margin-bottom: 0;
   font-size: 2rem;
-  font-weight: normal;
+  font-weight: 400;
 }
 .blog-description {
   font-size: 1.1rem;
@@ -110,7 +109,6 @@ h6, .h6 {
 /* Sidebar modules for boxing content */
 .sidebar-module {
   padding: 1rem;
-  /*margin: 0 -1rem 1rem;*/
 }
 .sidebar-module-inset {
   padding: 1rem;

docs/4.0/examples/carousel/carousel.css

@@ -18,8 +18,8 @@ body {
 }
 /* Since positioning the image, we need to help out the caption */
 .carousel-caption {
-  z-index: 10;
   bottom: 3rem;
+  z-index: 10;
 }
 
 /* Declare heights because of positioning of img element */
@@ -45,7 +45,7 @@ body {
   text-align: center;
 }
 .marketing h2 {
-  font-weight: normal;
+  font-weight: 400;
 }
 .marketing .col-lg-4 p {
   margin-right: .75rem;

docs/4.0/examples/cover/cover.css

@@ -41,7 +41,6 @@ body {
   width: 100%;
   height: 100%; /* For at least Firefox */
   min-height: 100%;
-  -webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
   box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
 }
 .site-wrapper-inner {
@@ -73,7 +72,7 @@ body {
 
 .nav-masthead .nav-link {
   padding: .25rem 0;
-  font-weight: bold;
+  font-weight: 700;
   color: rgba(255,255,255,.5);
   background-color: transparent;
   border-bottom: .25rem solid transparent;
@@ -112,7 +111,7 @@ body {
 }
 .cover .btn-lg {
   padding: .75rem 1.25rem;
-  font-weight: bold;
+  font-weight: 700;
 }
 
 
@@ -139,10 +138,12 @@ body {
     position: fixed;
     bottom: 0;
   }
+
   /* Start the vertical centering */
   .site-wrapper-inner {
     vertical-align: middle;
   }
+
   /* Handle the widths */
   .masthead,
   .mastfoot,

docs/4.0/examples/dashboard/dashboard.css

@@ -12,8 +12,8 @@ body {
  */
 
 h1 {
-  margin-bottom: 20px;
   padding-bottom: 9px;
+  margin-bottom: 20px;
   border-bottom: 1px solid #eee;
 }
 
@@ -35,8 +35,8 @@ h1 {
 
 /* Sidebar navigation */
 .sidebar {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 
 .sidebar .nav {

docs/4.0/examples/justified-nav/justified-nav.css

@@ -20,24 +20,17 @@ body {
 }
 
 .navbar {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7),to(#eee));
-  background-image: -webkit-linear-gradient(top, #f7f7f7 0%,#eee 100%);
-  background-image: -o-linear-gradient(top, #f7f7f7 0%,#eee 100%);
   background-image: linear-gradient(to bottom, #f7f7f7 0%,#eee 100%);
   border: 1px solid #e5e5e5;
 }
 
 @media (min-width: 768px) {
   .navbar-nav {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
   }
 
   .navbar-nav .nav-item {
-    -webkit-box-flex: 1;
-    -webkit-flex: 1 0 auto;
     -ms-flex: 1 0 auto;
     flex: 1 0 auto;
   }

docs/4.0/examples/narrow-jumbotron/narrow-jumbotron.css

@@ -17,6 +17,7 @@ body {
   padding-bottom: 1rem;
   border-bottom: .05rem solid #e5e5e5;
 }
+
 /* Make the masthead heading the same height as the navigation */
 .header h3 {
   margin-top: 0;
@@ -68,10 +69,12 @@ body {
     padding-right: 0;
     padding-left: 0;
   }
+
   /* Space out the masthead */
   .header {
     margin-bottom: 2rem;
   }
+
   /* Remove the bottom border on the jumbotron for visual effect */
   .jumbotron {
     border-bottom: 0;

docs/4.0/examples/navbars/navbar.css

@@ -1,5 +1,4 @@
 body {
-  /*padding-top: 20px;*/
   padding-bottom: 20px;
 }
 

docs/4.0/examples/offcanvas/offcanvas.css

@@ -20,8 +20,6 @@ footer {
 @media screen and (max-width: 767px) {
   .row-offcanvas {
     position: relative;
-    -webkit-transition: all .25s ease-out;
-         -o-transition: all .25s ease-out;
     transition: all .25s ease-out;
   }
 
@@ -33,23 +31,19 @@ footer {
     left: 0;
   }
 
-  .row-offcanvas-right
+  .row-offcanvas-right .sidebar-offcanvas {
-  .sidebar-offcanvas {
     right: -100%; /* 12 columns */
   }
 
-  .row-offcanvas-right.active
+  .row-offcanvas-right.active .sidebar-offcanvas {
-  .sidebar-offcanvas {
     right: -50%; /* 6 columns */
   }
 
-  .row-offcanvas-left
+  .row-offcanvas-left .sidebar-offcanvas {
-  .sidebar-offcanvas {
     left: -100%; /* 12 columns */
   }
 
-  .row-offcanvas-left.active
+  .row-offcanvas-left.active .sidebar-offcanvas {
-  .sidebar-offcanvas {
     left: -50%; /* 6 columns */
   }
 

docs/4.0/examples/signin/signin.css

@@ -14,13 +14,12 @@ body {
   margin-bottom: 10px;
 }
 .form-signin .checkbox {
-  font-weight: normal;
+  font-weight: 400;
 }
 .form-signin .form-control {
   position: relative;
-  height: auto;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box;
+  height: auto;
   padding: 10px;
   font-size: 16px;
 }

docs/4.0/examples/sticky-footer/sticky-footer.css

@@ -5,15 +5,13 @@ html {
   min-height: 100%;
 }
 body {
-  /* Margin bottom by footer height */
+  margin-bottom: 60px; /* Margin bottom by footer height */
-  margin-bottom: 60px;
 }
 .footer {
   position: absolute;
   bottom: 0;
   width: 100%;
-  /* Set the fixed height of the footer here */
+  height: 60px; /* Set the fixed height of the footer here */
-  height: 60px;
   line-height: 60px; /* Vertically center the text there */
   background-color: #f5f5f5;
 }