chore(demo): update demo page for bootstrap3

Adds new header, mobile menu, fastclick, smooth scrolling, and more.

Closes #1243
Closes #1469

Author: thienedits

Diff for: misc/demo/assets/app.js

@@ -1,4 +1,5 @@
 angular.module('bootstrapDemoApp', ['ui.bootstrap', 'plunker'], function($httpProvider){
+  FastClick.attach(document.body);
   delete $httpProvider.defaults.headers.common['X-Requested-With'];
 });
 
@@ -52,4 +53,4 @@ var SelectModulesCtrl = function($scope, $modalInstance, modules) {
   $scope.cancel = function () {
     $modalInstance.dismiss();
   };
-};
+};

Diff for: misc/demo/assets/demo.css

@@ -32,53 +32,259 @@ section {
     background-color: #f5f5f5;
 }
 
-.jumbotron {
-    position: relative;
-    padding: 40px 0;
-    color: #fff;
+.bs-social {
+    margin-top: 20px;
+    margin-bottom: 20px;
     text-align: center;
-    text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
-    background: #020031;
-    background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%);
-    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353));
-    background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%);
-    background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%);
-    background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%);
-    background: linear-gradient(45deg, #020031 0%,#6d3353 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 );
-    -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
-    -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
-    box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
-    border-radius: 0;
-    -moz-border-radius: 0;
-    -webkit-border-radius: 0;
-    -o-border-radius: 0;
-}
-.bs-docs-social {
-    margin-top: 1em;
-    padding: 15px 0;
-    text-align: center;
-    background-color: rgba(245,245,245,0.3);
-    border-top: 1px solid rgba(255,255,255,0.3);
-    border-bottom: 1px solid rgba(221,221,221,0.3);
 }
 
-.nav, .pagination, .carousel, .panel-title a {
+@media (min-width: 768px) {
+
+    .bs-social {
+        text-align: left;
+    }
+
+}
+
+.nav, .pagination, .carousel a {
     cursor: pointer;
 }
 
-.bs-docs-social-buttons {
-    margin-left: 0;
+.bs-social-buttons {
+    display: inline-block;
     margin-bottom: 0;
     padding-left: 0;
     list-style: none;
 }
-.bs-docs-social-buttons li {
+.bs-social-buttons li {
     display: inline-block;
     padding: 5px 8px;
     line-height: 1;
 }
 
+@media (max-width: 767px) {
+
+    .visible-xs.collapse.in {
+        display: block!important;
+    }
+    .visible-xs.collapse {
+        display: none!important;
+    }
+
+}
+
+.navbar .collapse {
+    border-top: 1px solid #e7e7e7;
+    margin-left: -15px;
+    margin-right: -15px;
+    padding-right: 15px;
+    padding-left: 15px;
+}
+
+.show-grid {
+  margin-bottom: 15px;
+}
+
+/*
+ * Container
+ *
+ * Tweak to width of container.
+ */
+
+/*@media (min-width: 1200px) {
+    .container{
+        max-width: 970px;
+    }
+}*/
+
+/*
+ * Tabs
+ *
+ * Tweaks to the Tabs.
+ */
+
+.code .nav-tabs {
+border-bottom: 1px solid #ccc;
+}
+
+.code pre, .code code {
+    border-top: none;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.code .nav-tabs>li.active>a, .code .nav-tabs>li.active>a:hover, .code .nav-tabs>li.active>a:focus {
+background-color: #f8f8f8;
+border: 1px solid #ccc;
+border-bottom-color: transparent;
+}
+
+/*
+ * Button Inverse
+ *
+ * Buttons in the masthead.
+ */
+
+.btn-outline-inverse {
+color: #fff;
+background-color: transparent;
+border-color: #cdbfe3;
+margin: 10px;
+}
+
+@media (min-width: 768px) {
+
+    .btn-outline-inverse {
+        width: auto;
+        margin: 20px 5px 20px 0;
+        padding: 18px 24px;
+        font-size: 21px;
+    }
+
+}
+
+.btn-outline-inverse:hover, .btn-outline-inverse:focus, .btn-outline-inverse:active {
+color: #563d7c;
+text-shadow: none;
+background-color: #fff;
+border-color: #fff;
+}
+
+
+/* Page headers */
+.bs-header {
+  padding: 30px 15px 40px; /* side padding builds on .container 15px, so 30px */
+  font-size: 16px;
+  text-align: center;
+  text-shadow: 0 1px 0 rgba(0,0,0,.15);
+  color: #cdbfe3;
+  background-color: #563d7c;
+  background-image: url(header.png);
+}
+.bs-header a {
+  color: #fff;
+  font-weight: normal;
+}
+.bs-header h1 {
+  color: #fff;
+}
+.bs-header p {
+  font-weight: 200;
+  line-height: 1.4;
+}
+.bs-header .container {
+  position: relative;
+}
+
+@media (min-width: 768px) {
+  .bs-header {
+    font-size: 30px;
+    text-align: left;
+  }
+  .bs-header h1 {
+    font-size: 100px;
+    line-height: 1;
+  }
+}
+
+@media (min-width: 992px) {
+  .bs-header p {
+    margin-right: 25%;
+  }
+}
+
+.navbar-inner {
+    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.175);
+    box-shadow: 0 3px 3px rgba(0,0,0,0.175);
+}
+
+/*
+ * Side navigation
+ *
+ * Scrollspy and affixed enhanced navigation to highlight sections and secondary
+ * sections of docs content.
+ */
+
+/* By default it's not affixed in mobile views, so undo that */
+.bs-sidebar.affix {
+  position: static;
+}
+
+/* First level of nav */
+.bs-sidenav {
+  margin-top: 30px;
+  margin-bottom: 30px;
+  padding-top:    10px;
+  padding-bottom: 10px;
+  text-shadow: 0 1px 0 #fff;
+  background-color: #f7f5fa;
+  border-radius: 5px;
+}
+
+/* All levels of nav */
+.bs-sidebar .nav > li > a {
+  display: block;
+  color: #716b7a;
+  padding: 5px 20px;
+}
+.bs-sidebar .nav > li > a:hover,
+.bs-sidebar .nav > li > a:focus {
+  text-decoration: none;
+  background-color: #e5e3e9;
+  border-right: 1px solid #dbd8e0;
+}
+.bs-sidebar .nav > .active > a,
+.bs-sidebar .nav > .active:hover > a,
+.bs-sidebar .nav > .active:focus > a {
+  font-weight: bold;
+  color: #563d7c;
+  background-color: transparent;
+  border-right: 1px solid #563d7c;
+}
+
+/* Nav: second level (shown on .active) */
+.bs-sidebar .nav .nav {
+  display: none; /* Hide by default, but at >768px, show it */
+  margin-bottom: 8px;
+}
+.bs-sidebar .nav .nav > li > a {
+  padding-top:    3px;
+  padding-bottom: 3px;
+  padding-left: 30px;
+  font-size: 90%;
+}
+
+/* Show and affix the side nav when space allows it */
+@media (min-width: 992px) {
+  .bs-sidebar .nav > .active > ul {
+    display: block;
+  }
+  /* Widen the fixed sidebar */
+  .bs-sidebar.affix,
+  .bs-sidebar.affix-bottom {
+    width: 213px;
+  }
+  .bs-sidebar.affix {
+    position: fixed; /* Undo the static from mobile first approach */
+    top: 80px;
+  }
+  .bs-sidebar.affix-bottom {
+    position: absolute; /* Undo the static from mobile first approach */
+  }
+  .bs-sidebar.affix-bottom .bs-sidenav,
+  .bs-sidebar.affix .bs-sidenav {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+@media (min-width: 1200px) {
+  /* Widen the fixed sidebar again */
+  .bs-sidebar.affix-bottom,
+  .bs-sidebar.affix {
+    width: 263px;
+  }
+}
+
 
 /* Not enough room on mobile for markup tab, js tab, and plunk btn.
   And no one cares about plunk button on a phone anyway */
@@ -95,7 +301,7 @@ section {
 }
 
 .header-placeholder {
-    height: 175px;
+    height: 50px;
 }
 
 @media screen and (min-width: 768px) {
@@ -114,4 +320,4 @@ section {
         margin-left: 10px;
     }
 
-}
+}