fixing some docs issues

18 files changed, 191 insertions, 107 deletions

diff --git a/dist/android-theme.css b/dist/android-theme.css
index 1a2687d..26b49c3 100644
--- a/dist/android-theme.css
+++ b/dist/android-theme.css
@@ -218,12 +218,12 @@ a:active {
 }
 
 .bar .btn {
-  margin-top: 7px;
+  top: 7px;
   padding-top: 10px;
   padding-bottom: 10px;
 }
 .bar .btn-link {
-  margin-top: 0;
+  top: 0;
   padding: 0;
   color: #33b5e5;
   font-size: 18px;
@@ -236,6 +236,9 @@ a:active {
   top: 2px;
   padding: 0;
 }
+.bar .btn-block {
+  top: 4px;
+}
 
 .bar .segmented-control {
   top: 7px;
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 9b9e0ad..e3ff990 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -358,7 +358,7 @@ p {
 .btn {
   position: relative;
   display: inline-block;
-  padding: 5px 8px;
+  padding: 6px 8px 7px;
   margin-bottom: 0;
   font-size: 12px;
   font-weight: 400;
@@ -455,8 +455,6 @@ input[type="button"] {
 
 .btn .badge {
   font-size: 12px;
-  padding-top: 2px;
-  padding-bottom: 2px;
   margin: -2px -4px -2px 4px;
   background-color: rgba(0, 0, 0, 0.15);
 }
@@ -574,9 +572,10 @@ input[type="button"] {
 
 .bar .btn {
   position: relative;
+  top: 7px;
   z-index: 20;
   padding: 6px 12px 7px;
-  margin-top: 8px;
+  margin-top: 0;
   font-weight: 400;
 }
 .bar .btn.pull-right {
@@ -587,7 +586,7 @@ input[type="button"] {
 }
 
 .bar .btn-link {
-  margin-top: 0;
+  top: 0;
   padding: 0;
   font-size: 16px;
   color: #428bca;
@@ -599,8 +598,8 @@ input[type="button"] {
 }
 
 .bar .btn-block {
-  padding: 7px 0 6px;
-  margin-top: 5px;
+  top: 6px;
+  padding: 7px 0;
   margin-bottom: 0;
   font-size: 16px;
 }
@@ -643,14 +642,14 @@ input[type="button"] {
 }
 
 .bar .segmented-control {
-  top: 8px;
+  top: 7px;
   margin: 0 auto;
 }
 
 .badge {
   display: inline-block;
-  padding: 2px 9px;
-  font-size: 13px;
+  padding: 2px 9px 3px;
+  font-size: 12px;
   line-height: 1;
   color: #333;
   background-color: rgba(0, 0, 0, 0.15);
@@ -863,6 +862,10 @@ select {
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
 }
 
+.input-group {
+  background-color: #fff;
+}
+
 .input-group input,
 .input-group textarea {
   margin-bottom: 0;
@@ -1147,7 +1150,7 @@ select {
   top: 3px;
   right: 11px;
   color: #999;
-  font-size: 14px;
+  font-size: 13px;
   text-transform: uppercase;
   content: "Off";
 }
@@ -1178,7 +1181,7 @@ select {
 .content.fade.in {
   opacity: 1;
 }
-.content.slide {
+.content.sliding {
   z-index: 2;
   -webkit-transition: -webkit-transform 0.4s;
   -moz-transition: -webkit-transform 0.4s;
@@ -1187,13 +1190,13 @@ select {
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
-.content.slide.left {
+.content.sliding.left {
   z-index: 1;
   -webkit-transform: translate3d(-100%, 0, 0);
   -ms-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
 }
-.content.slide.right {
+.content.sliding.right {
   z-index: 3;
   -webkit-transform: translate3d(100%, 0, 0);
   -ms-transform: translate3d(100%, 0, 0);
diff --git a/dist/ratchet.js b/dist/ratchet.js
index df015ac..77b5c3d 100644
--- a/dist/ratchet.js
+++ b/dist/ratchet.js
@@ -396,8 +396,8 @@
 
       if (/slide/.test(transition)) {
         swap.classList.add('sliding-in', enter ? 'right' : 'left');
-        swap.classList.add('slide');
-        container.classList.add('slide');
+        swap.classList.add('sliding');
+        container.classList.add('sliding');
       }
 
       container.parentNode.insertBefore(swap, container);
@@ -434,7 +434,7 @@
 
       function slideEnd() {
         swap.removeEventListener('webkitTransitionEnd', slideEnd);
-        swap.classList.remove('slide', 'sliding-in');
+        swap.classList.remove('sliding', 'sliding-in');
         swap.classList.remove(swapDirection);
         container.parentNode.removeChild(container);
         complete && complete();
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index e652743..575b4d9 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -1 +1 @@
-<p class="docs-mini-footer">Code licensed under the MIT license. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors">Connor Sears</a>.</p>
+<p class="docs-mini-footer">Code licensed under the MIT license and the docs are licensed under CC BY 3.0. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors">Connor Sears</a>.</p>
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 0fc9335..35e9311 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -92,7 +92,7 @@ body {
   z-index: 20;
   overflow: hidden;
   height: 0;
-  background-color: rgba(0, 0, 0, 0.95);
+  background-color: rgba(0, 0, 0, 0.9);
   opacity: 0;
 }
 .docs-nav .docs-nav-group.active {
@@ -342,6 +342,7 @@ body {
   margin-bottom: 15px;
   font-size: 24px;
   font-weight: 300;
+  line-height: 34px;
 }
 
 .component-description {
@@ -368,19 +369,56 @@ body {
   position: relative;
 }
 
-.component-example-fullbleed,
-.highlight {
-  margin-left: -15px;
-  margin-right: -15px;
+.component-example .bar {
+  border-top: 1px solid #dddddd;
+  border-bottom: 1px solid #dddddd;
+}
+.component-example .bar.bar-header-secondary {
+  top: 0 !important;
+  border-top: 0;
 }
 
-.component-example .table-view.inset {
-  margin-left: 0;
-  margin-right: 0;
+.component-example > .content-padded {
+  margin: 15px;
 }
 
-.component-example .bar-header-secondary {
-  top: 0;
+.component-example > .card {
+  margin: 15px 0 0;
+}
+.component-example > .card .control-content {
+  padding: 15px;
+}
+
+.component-example > .btn,
+.component-example > .toggle {
+  margin-bottom: 10px;
+}
+
+.component-example .slider {
+  height: 200px;
+}
+
+.component-example .slide img {
+  width: 100%;
+  height: 200px;
+}
+
+.component-example .slide-text {
+  position: absolute;
+  top: 45%;
+  left: 0;
+  width: 100%;
+  color: #fff;
+  text-align: center;
+  font-size: 24px;
+  font-weight: 300;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.component-example-fullbleed,
+.highlight {
+  margin-left: -15px;
+  margin-right: -15px;
 }
 
 .bar-nav ~ .content {
@@ -400,6 +438,16 @@ body {
   word-wrap: normal;
 }
 
+#modals .modal {
+  left: 0;
+  z-index: 50;
+}
+
+#push .component-example {
+  height: 150px;
+  overflow: hidden;
+}
+
 #buttonsInDevice .btn,
 #buttonsBadgesInDevice .btn {
   margin-top: 10px;
@@ -1568,12 +1616,12 @@ hr {
   text-align: left;
 }
 .platform-android .bar .btn {
-  margin-top: 7px;
+  top: 7px;
   padding-top: 10px;
   padding-bottom: 10px;
 }
 .platform-android .bar .btn-link {
-  margin-top: 0;
+  top: 0;
   padding: 0;
   color: #33b5e5;
   font-size: 18px;
@@ -1586,6 +1634,9 @@ hr {
   top: 2px;
   padding: 0;
 }
+.platform-android .bar .btn-block {
+  top: 4px;
+}
 .platform-android .bar .segmented-control {
   top: 7px;
 }
diff --git a/docs/components.html b/docs/components.html
index 541aafb..eb6806f 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -289,12 +289,6 @@ title: Components &middot; Ratchet
         <div class="bar bar-standard bar-header-secondary">
           <a class="btn btn-block">Block level button</a>
         </div>
-
-
-        <!-- Block button in standard bar fixed below top bar -->
-        <div class="bar bar-standard bar-footer">
-          <a class="btn btn-block">Block level button</a>
-        </div>
       </div>
 
 {% highlight html %}
@@ -1011,9 +1005,6 @@ title: Components &middot; Ratchet
       <div class="toggle active">
         <div class="toggle-handle"></div>
       </div>
-      <div class="toggle">
-        <div class="toggle-handle"></div>
-      </div>
     </div>
 
 {% highlight html %}
@@ -1040,24 +1031,6 @@ document
   <article class="component" id="popovers">
     <h3 class="component-title">Popovers</h3>
 
-    <div class="component-example">
-      <div id="popover" class="popover">  
-        <header class="bar bar-nav">
-          <h3 class="title">Popover title</h3>
-        </header>
-        <ul class="table-view">
-          <li class="table-view-cell">Item1</li>
-          <li class="table-view-cell">Item2</li>
-          <li class="table-view-cell">Item3</li>
-          <li class="table-view-cell">Item4</li>
-          <li class="table-view-cell">Item5</li>
-          <li class="table-view-cell">Item6</li>
-          <li class="table-view-cell">Item7</li>
-          <li class="table-view-cell">Item8</li>
-        </ul>
-      </div>
-    </div>
-
 {% highlight html %}
 <div id="popover" class="popover">  
   <header class="bar bar-nav">
@@ -1100,12 +1073,10 @@ document
       <div id="myModalexample" class="modal">
         <header class="bar bar-nav">
           <a class="icon icon-close pull-right" href="#myModalexample"></a>
-          <h1 class="title">Modal</h1>
+          <h1 class="title">Modal mobile</h1>
         </header>
         
-        <div class="content">
-          <p class="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
-        </div>
+        <p class="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
       </div>
     </div>
 
diff --git a/docs/dist/android-theme.css b/docs/dist/android-theme.css
index 1a2687d..26b49c3 100644
--- a/docs/dist/android-theme.css
+++ b/docs/dist/android-theme.css
@@ -218,12 +218,12 @@ a:active {
 }
 
 .bar .btn {
-  margin-top: 7px;
+  top: 7px;
   padding-top: 10px;
   padding-bottom: 10px;
 }
 .bar .btn-link {
-  margin-top: 0;
+  top: 0;
   padding: 0;
   color: #33b5e5;
   font-size: 18px;
@@ -236,6 +236,9 @@ a:active {
   top: 2px;
   padding: 0;
 }
+.bar .btn-block {
+  top: 4px;
+}
 
 .bar .segmented-control {
   top: 7px;
diff --git a/docs/dist/ratchet.css b/docs/dist/ratchet.css
index 9b9e0ad..e3ff990 100644
--- a/docs/dist/ratchet.css
+++ b/docs/dist/ratchet.css
@@ -358,7 +358,7 @@ p {
 .btn {
   position: relative;
   display: inline-block;
-  padding: 5px 8px;
+  padding: 6px 8px 7px;
   margin-bottom: 0;
   font-size: 12px;
   font-weight: 400;
@@ -455,8 +455,6 @@ input[type="button"] {
 
 .btn .badge {
   font-size: 12px;
-  padding-top: 2px;
-  padding-bottom: 2px;
   margin: -2px -4px -2px 4px;
   background-color: rgba(0, 0, 0, 0.15);
 }
@@ -574,9 +572,10 @@ input[type="button"] {
 
 .bar .btn {
   position: relative;
+  top: 7px;
   z-index: 20;
   padding: 6px 12px 7px;
-  margin-top: 8px;
+  margin-top: 0;
   font-weight: 400;
 }
 .bar .btn.pull-right {
@@ -587,7 +586,7 @@ input[type="button"] {
 }
 
 .bar .btn-link {
-  margin-top: 0;
+  top: 0;
   padding: 0;
   font-size: 16px;
   color: #428bca;
@@ -599,8 +598,8 @@ input[type="button"] {
 }
 
 .bar .btn-block {
-  padding: 7px 0 6px;
-  margin-top: 5px;
+  top: 6px;
+  padding: 7px 0;
   margin-bottom: 0;
   font-size: 16px;
 }
@@ -643,14 +642,14 @@ input[type="button"] {
 }
 
 .bar .segmented-control {
-  top: 8px;
+  top: 7px;
   margin: 0 auto;
 }
 
 .badge {
   display: inline-block;
-  padding: 2px 9px;
-  font-size: 13px;
+  padding: 2px 9px 3px;
+  font-size: 12px;
   line-height: 1;
   color: #333;
   background-color: rgba(0, 0, 0, 0.15);
@@ -863,6 +862,10 @@ select {
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
 }
 
+.input-group {
+  background-color: #fff;
+}
+
 .input-group input,
 .input-group textarea {
   margin-bottom: 0;
@@ -1147,7 +1150,7 @@ select {
   top: 3px;
   right: 11px;
   color: #999;
-  font-size: 14px;
+  font-size: 13px;
   text-transform: uppercase;
   content: "Off";
 }
@@ -1178,7 +1181,7 @@ select {
 .content.fade.in {
   opacity: 1;
 }
-.content.slide {
+.content.sliding {
   z-index: 2;
   -webkit-transition: -webkit-transform 0.4s;
   -moz-transition: -webkit-transform 0.4s;
@@ -1187,13 +1190,13 @@ select {
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
-.content.slide.left {
+.content.sliding.left {
   z-index: 1;
   -webkit-transform: translate3d(-100%, 0, 0);
   -ms-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
 }
-.content.slide.right {
+.content.sliding.right {
   z-index: 3;
   -webkit-transform: translate3d(100%, 0, 0);
   -ms-transform: translate3d(100%, 0, 0);
diff --git a/docs/dist/ratchet.js b/docs/dist/ratchet.js
index 9664f90..d5ca79a 100644
--- a/docs/dist/ratchet.js
+++ b/docs/dist/ratchet.js
@@ -405,8 +405,8 @@
 
       if (/slide/.test(transition)) {
         swap.classList.add('sliding-in', enter ? 'right' : 'left');
-        swap.classList.add('slide');
-        container.classList.add('slide');
+        swap.classList.add('sliding');
+        container.classList.add('sliding');
       }
 
       container.parentNode.insertBefore(swap, container);
@@ -443,7 +443,7 @@
 
       function slideEnd() {
         swap.removeEventListener('webkitTransitionEnd', slideEnd);
-        swap.classList.remove('slide', 'sliding-in');
+        swap.classList.remove('sliding', 'sliding-in');
         swap.classList.remove(swapDirection);
         container.parentNode.removeChild(container);
         complete && complete();
diff --git a/js/push.js b/js/push.js
index b044a52..f052f93 100644
--- a/js/push.js
+++ b/js/push.js
@@ -287,8 +287,8 @@
 
       if (/slide/.test(transition)) {
         swap.classList.add('sliding-in', enter ? 'right' : 'left');
-        swap.classList.add('slide');
-        container.classList.add('slide');
+        swap.classList.add('sliding');
+        container.classList.add('sliding');
       }
 
       container.parentNode.insertBefore(swap, container);
@@ -325,7 +325,7 @@
 
       function slideEnd() {
         swap.removeEventListener('webkitTransitionEnd', slideEnd);
-        swap.classList.remove('slide', 'sliding-in');
+        swap.classList.remove('sliding', 'sliding-in');
         swap.classList.remove(swapDirection);
         container.parentNode.removeChild(container);
         complete && complete();
diff --git a/sass/badges.scss b/sass/badges.scss
index 8b5143d..c76d7ab 100644
--- a/sass/badges.scss
+++ b/sass/badges.scss
@@ -4,8 +4,8 @@
 
 .badge {
   display: inline-block;
-  padding: 2px 9px;
-  font-size: 13px;
+  padding: 2px 9px 3px;
+  font-size: 12px;
   line-height: 1;
   color: #333;
   background-color: rgba(0,0,0,.15);
diff --git a/sass/bars.scss b/sass/bars.scss
index 9e45f08..e431292 100644
--- a/sass/bars.scss
+++ b/sass/bars.scss
@@ -124,9 +124,10 @@
 
 .bar .btn {
   position: relative;
+  top: 7px;
   z-index: 20; // Position the buttons on top of .title
   padding: 6px 12px 7px;
-  margin-top: 8px;
+  margin-top: 0;
   font-weight: $font-weight-light;
 
   // Give buttons that are floated left and right side margin
@@ -140,7 +141,7 @@
 
 // Bars with link buttons (Line the text up with content)
 .bar .btn-link {
-  margin-top: 0;
+  top: 0;
   padding: 0;
   font-size: 16px;
   color: $primary-color;
@@ -157,8 +158,8 @@
 //
 // Add proper padding
 .bar .btn-block {
-  padding: 7px 0 6px;
-  margin-top: 5px;
+  top: 6px;
+  padding: 7px 0;
   margin-bottom: 0;
   font-size: 16px; // Scale down font size to fit in bar.
 }
@@ -230,6 +231,6 @@
 
 // Position the control correctly inside a bar.
 .bar .segmented-control {
-  top: 8px;
+  top: 7px;
   margin: 0 auto;
 }
diff --git a/sass/buttons.scss b/sass/buttons.scss
index e13370d..00c2373 100644
--- a/sass/buttons.scss
+++ b/sass/buttons.scss
@@ -5,7 +5,7 @@
 .btn {
   position: relative;
   display: inline-block;
-  padding: 5px 8px;
+  padding: 6px 8px 7px;
   margin-bottom: 0; // For input.btn
   font-size: $button-font-size;
   font-weight: $font-weight-light;
@@ -139,8 +139,6 @@ input[type="button"] {
 // Generic styles for all badges within default buttons
 .btn .badge {
   font-size: 12px;
-  padding-top: 2px;
-  padding-bottom: 2px;
   margin: -2px -4px -2px 4px;
   background-color: rgba(0,0,0,.15);
 }
diff --git a/sass/docs.scss b/sass/docs.scss
index 319cd55..bc83c98 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -90,7 +90,7 @@ body {
     z-index: 20;
     overflow: hidden;
     height: 0;
-    background-color: rgba(0,0,0,.95);
+    background-color: rgba(0,0,0,.9);
     opacity: 0;
 
     &.active {
@@ -342,6 +342,7 @@ body {
   margin-bottom: 15px;
   font-size: 24px;
   font-weight: 300;
+  line-height: 34px;
 }
 .component-description {
   margin-bottom: 15px;
@@ -365,18 +366,52 @@ body {
 .component-example .content {
   position: relative;
 }
+.component-example .bar {
+  border-top: $border-default;
+  border-bottom: $border-default;
+
+  &.bar-header-secondary {
+    top: 0 !important;
+    border-top: 0;
+  }
+}
+.component-example > .content-padded {
+  margin: 15px;
+}
+.component-example > .card {
+  margin: 15px 0 0;
+
+  .control-content {
+    padding: 15px;
+  }
+}
+.component-example > .btn,
+.component-example > .toggle {
+  margin-bottom: 10px;
+}
+.component-example .slider {
+  height: 200px;
+}
+.component-example .slide img {
+  width: 100%;
+  height: 200px;
+}
+.component-example .slide-text {
+  position: absolute;
+  top: 45%;
+  left: 0;
+  width: 100%;
+  color: #fff;
+  text-align: center;
+  font-size: 24px;
+  font-weight: 300;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
 .component-example-fullbleed,
 .highlight {
   margin-left: -15px;
   margin-right: -15px;
 }
-.component-example .table-view.inset {
-  margin-left: 0;
-  margin-right: 0;
-}
-.component-example .bar-header-secondary {
-  top: 0;
-}
 .bar-nav ~ .content {
   padding: 0;
 }
@@ -392,6 +427,16 @@ body {
   white-space: pre;
   word-wrap: normal;
 }
+// Modals
+#modals .modal {
+  left: 0;
+  z-index: 50;
+}
+// Push
+#push .component-example {
+  height: 150px;
+  overflow: hidden;
+}
 
 // Buttons
 #buttonsInDevice,
diff --git a/sass/forms.scss b/sass/forms.scss
index 069e630..ad978e0 100644
--- a/sass/forms.scss
+++ b/sass/forms.scss
@@ -69,6 +69,9 @@ select {
 // -------------------------------------------------------------------
 
 // Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input
+.input-group {
+  background-color: #fff;
+}
 .input-group input,
 .input-group textarea {
   margin-bottom: 0;
diff --git a/sass/push.scss b/sass/push.scss
index bc6da86..6083826 100644
--- a/sass/push.scss
+++ b/sass/push.scss
@@ -14,7 +14,7 @@
   }
 
   // Slide animation
-  &.slide {
+  &.sliding {
     z-index: 2;
     @include transition(-webkit-transform .4s);
     @include transform(translate3d(0, 0, 0));
diff --git a/sass/theme-android.scss b/sass/theme-android.scss
index b33a4c0..9de299d 100644
--- a/sass/theme-android.scss
+++ b/sass/theme-android.scss
@@ -300,12 +300,12 @@ a {
 // Bars with buttons
 .bar {
   .btn {
-    margin-top: 7px;
+    top: 7px;
     padding-top: 10px;
     padding-bottom: 10px;
   }
   .btn-link {
-    margin-top: 0;
+    top: 0;
     padding: 0;
     color: $primary-color;
     font-size: $font-size-default;
@@ -322,6 +322,9 @@ a {
       padding: 0;
     }
   }
+  .btn-block {
+    top: 4px;
+  }
 }
 
 // Bars with segmented-controls
diff --git a/sass/toggles.scss b/sass/toggles.scss
index c87a528..a5908d9 100644
--- a/sass/toggles.scss
+++ b/sass/toggles.scss
@@ -32,7 +32,7 @@
     top: 3px;
     right: 11px;
     color: #999;
-    font-size: 14px;
+    font-size: 13px;
     text-transform: uppercase;
     content: "Off";
   }