fixing up toggles and cards

_includes/header.html

@@ -7,7 +7,7 @@
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <link rel="stylesheet" href="dist/ratchet.css">
-<link rel="stylesheet" href="dist/ios-theme.css">
+<!-- <link rel="stylesheet" href="dist/ios-theme.css"> -->
 <link rel="stylesheet" href="assets/css/docs.css">
 <link rel="stylesheet" href="assets/css/pygments.css">
 <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

dist/ios-theme.css

@@ -59,6 +59,10 @@
   border-radius: 12px;
 }
 
+.card .table-view li:last-child {
+  background-image: none;
+}
+
 select,
 textarea,
 input[type="text"],
@@ -269,6 +273,7 @@ textarea,
 }
 
 .toggle {
+  width: 47px;
   border: 2px solid #e6e6e6;
   -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
   box-shadow: inset 0 0 0 0 #e1e1e1;
@@ -284,6 +289,9 @@ textarea,
   -webkit-transition-property: -webkit-transform, border, width;
   transition-property: -webkit-transform, border, width;
 }
+.toggle:before {
+  display: none;
+}
 .toggle:active .toggle-handle {
   width: 35px;
 }
@@ -293,6 +301,10 @@ textarea,
   -webkit-box-shadow: inset 0 0 0 13px #4cd964;
   box-shadow: inset 0 0 0 13px #4cd964;
 }
+.toggle.active .toggle-handle {
+  -webkit-transform: translate3d(17px, 0, 0);
+  transform: translate3d(17px, 0, 0);
+}
 .toggle.active:active .toggle-handle,
 .toggle.active .toggle-handle:active {
   -webkit-transform: translate3d(10px, 0, 0) !important;

dist/ratchet.css

@@ -396,6 +396,15 @@ strong {
   right: 15px;
 }
 
+.card {
+  width: auto;
+  overflow: hidden;
+  margin: 10px;
+  background-color: #fff;
+  border: 1px solid #dddddd;
+  border-radius: 6px;
+}
+
 .table-view {
   padding: 0;
   margin: 0;
@@ -423,16 +432,6 @@ strong {
 .table-view .table-view-cell p {
   margin: 0;
 }
-.table-view.inset {
-  width: auto;
-  margin-right: 10px;
-  margin-left: 10px;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 6px;
-}
-.table-view.inset li:last-child {
-  background-image: none;
-}
 .table-view .table-view-divider {
   padding-top: 6px;
   padding-bottom: 6px;
@@ -491,6 +490,10 @@ strong {
   z-index: 1;
 }
 
+.card .table-view li:last-child {
+  border: 0;
+}
+
 .popover .table-view {
   width: auto;
   max-height: 300px;
@@ -991,8 +994,9 @@ input[type="button"] {
 }
 
 .toggle {
+  display: block;
   position: relative;
-  width: 47px;
+  width: 74px;
   height: 30px;
   background-color: #fff;
   border: 2px solid #ddd;
@@ -1017,14 +1021,31 @@ input[type="button"] {
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s;
 }
+.toggle:before {
+  position: absolute;
+  top: 3px;
+  right: 11px;
+  color: #999;
+  text-transform: uppercase;
+  content: "Off";
+}
 .toggle.active {
   border: 2px solid #5cb85c;
   background-color: #5cb85c;
 }
 .toggle.active .toggle-handle {
   border-color: #5cb85c;
-  -webkit-transform: translate3d(17px, 0, 0);
-  transform: translate3d(17px, 0, 0);
+  -webkit-transform: translate3d(44px, 0, 0);
+  transform: translate3d(44px, 0, 0);
+}
+.toggle.active:before {
+  right: auto;
+  left: 15px;
+  color: #fff;
+  content: "On";
+}
+.toggle input[type="checkbox"] {
+  display: none;
 }
 
 .content.fade {

index.html

@@ -515,21 +515,24 @@ layout: default
         <ul class="table-view">
           <li class="table-view-cell">
             Item 1
-            <div class="toggle">
+            <label class="toggle">
+              <input type="checkbox">
               <div class="toggle-handle"></div>
-            </div>
+            </label>
           </li>
           <li class="table-view-cell">
             Item 2
-            <div class="toggle active">
+            <label class="toggle active">
+              <input type="checkbox" checked>
               <div class="toggle-handle"></div>
-            </div>
+            </label>
           </li>
           <li class="table-view-cell">
             Item 3
-            <div class="toggle">
+            <label class="toggle">
+              <input type="checkbox">
               <div class="toggle-handle"></div>
-            </div>
+            </label>
           </li>
         </ul>
       </div>
@@ -538,21 +541,24 @@ layout: default
 <ul class="table-view">
   <li class="table-view-cell">
     Item 1
-    <div class="toggle">
+    <label class="toggle">
+      <input type="checkbox">
       <div class="toggle-handle"></div>
-    </div>
+    </label>
   </li>
   <li class="table-view-cell">
     Item 2
-    <div class="toggle active">
+    <label class="toggle active">
+      <input type="checkbox" checked>
       <div class="toggle-handle"></div>
-    </div>
+    </label>
   </li>
   <li class="table-view-cell">
     Item 3
-    <div class="toggle">
+    <label class="toggle">
+      <input type="checkbox">
       <div class="toggle-handle"></div>
-    </div>
+    </label>
   </li>
 </ul>
 {% endhighlight %}
@@ -560,10 +566,11 @@ layout: default
     </article>
 
     <article class="component">
-      <h3 class="component-title">Inset table views</h3>
+      <h3 class="component-title">Carded table views</h3>
 
       <div class="component-example">
-        <ul class="table-view inset">
+        <div class="card">
+          <ul class="table-view">
             <li class="table-view-cell">Item 1</li>
             <li class="table-view-cell">Item 2</li>
             <li class="table-view-cell table-view-divider">Divider</li>
@@ -571,15 +578,18 @@ layout: default
             <li class="table-view-cell">Item 4</li>
           </ul>
         </div>
+      </div>
 
 {% highlight html %}
-<ul class="table-view inset">
+<div class="card">
+  <ul class="table-view">
     <li class="table-view-cell">Item 1</li>
     <li class="table-view-cell">Item 2</li>
     <li class="table-view-cell table-view-divider">Divider</li>
     <li class="table-view-cell">Item 3</li>
     <li class="table-view-cell">Item 4</li>
   </ul>
+</div>
 {% endhighlight %}
 
     </article>
@@ -677,7 +687,9 @@ layout: default
             <a href="#item3mobile">Thing three</a>
           </li>
         </ul>
-        <ul class="inset table-view">
+
+        <div class="card">
+          <ul class="table-view">
             <li id="item1mobile" class="table-view-cell segmented-controller-item selected">
               Item 1
             </li>
@@ -689,6 +701,7 @@ layout: default
             </li>
           </ul>
         </div>
+      </div>
 
 {% highlight html %}
 <ul class="segmented-controller">
@@ -702,7 +715,8 @@ layout: default
     <a href="#item3mobile">Thing three</a>
   </li>
 </ul>
-<ul class="inset table-view">
+<div class="card">
+  <ul class="table-view">
     <li id="item1mobile" class="table-view-cell segmented-controller-item selected">
       Item 1
     </li>
@@ -713,6 +727,7 @@ layout: default
       Item 3
     </li>
   </ul>
+</div>
 {% endhighlight %}
 
     </article>
@@ -837,21 +852,25 @@ layout: default
       <p class="component-description">Toggles can be used by sliding or tapping the control.</p>
 
       <div class="component-example">
-        <div class="toggle active">
+        <label class="toggle active">
+          <input type="checkbox" checked>
           <div class="toggle-handle"></div>
-        </div>
-        <div class="toggle">
+        </label>
+        <label class="toggle">
+          <input type="checkbox">
           <div class="toggle-handle"></div>
-        </div>
+        </label>
       </div>
 
 {% highlight html %}
-<div class="toggle active">
+<label class="toggle active">
+  <input type="checkbox">
   <div class="toggle-handle"></div>
-</div>
-<div class="toggle">
+</label>
+<label class="toggle">
+  <input type="checkbox">
   <div class="toggle-handle"></div>
-</div>
+</label>
 {% endhighlight %}
 
       <p class="component-description">Toggles.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>

lib/sass/ratchet.scss

@@ -11,6 +11,7 @@
 
 // Components
 @import "bars.scss";
+@import "cards.scss";
 @import "table-views.scss";
 @import "forms.scss";
 @import "buttons.scss";

lib/sass/table-views.scss

@@ -35,24 +35,6 @@
     }
   }
 
-
-  // Inset table views (Will be deprecated and changed into `.card` component)
-  // --------------------------------------------------
-
-  &.inset {
-    width: auto;
-    margin-right: 10px;
-    margin-left: 10px;
-    border: 1px solid rgba(0, 0, 0, .15);
-    border-radius: $border-radius;
-
-    // Remove border from last standard list items to avoid double border at top/bottom of table views
-    li:last-child {
-      background-image: none;
-    }
-  }
-
-
   // Table view dividers
   // --------------------------------------------------
 
@@ -136,6 +118,14 @@
   }
 }
 
+// Table views in cards
+// --------------------------------------------------
+
+.card .table-view li:last-child {
+  border: 0;
+}
+
+
 // Table views in popovers
 // --------------------------------------------------
 

lib/sass/theme-ios.scss

@@ -100,6 +100,10 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
   border-radius: 12px;
 }
 
+.card .table-view li:last-child {
+  background-image: none;
+}
+
 
 // Forms
 // --------------------------------------------------
@@ -383,6 +387,7 @@ textarea,
 // Toggles styles
 // --------------------------------------------------
 .toggle {
+  width: 47px;
   border: 2px solid #e6e6e6;
   @include box-shadow(inset 0 0 0 0 #e1e1e1);
   @include transition-property(box-shadow, border);
@@ -394,6 +399,9 @@ textarea,
     @include box-shadow(0 3px 3px rgba(0,0,0,.08));
     @include transition-property(-webkit-transform, border, width);
   }
+  &:before {
+    display: none;
+  }
   &:active .toggle-handle {
     width: 35px;
   }
@@ -403,7 +411,11 @@ textarea,
     background-color: transparent;
     @include box-shadow(inset 0 0 0 13px $positive-color);
 
-    // Handle when the handle and the container is active
+    .toggle-handle {
+      @include transform(translate3d(17px,0,0)); 
+    }
+
+    // When the handle and the container is active
     &:active .toggle-handle,
     .toggle-handle:active {
       @include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js.

lib/sass/toggles.scss

@@ -3,8 +3,9 @@
 // --------------------------------------------------
 
 .toggle {
+  display: block;
   position: relative;
-  width: 47px;
+  width: 74px;
   height: 30px;
   background-color: #fff;
   border: 2px solid #ddd;
@@ -26,6 +27,14 @@
     @include transition-property(-webkit-transform, border, width);
     @include transition-duration(.2s);
   }
+  &:before {
+    position: absolute;
+    top: 3px;
+    right: 11px;
+    color: #999;
+    text-transform: uppercase;
+    content: "Off";
+  }
 
   // Active state for toggle
   &.active {
@@ -34,7 +43,17 @@
 
     .toggle-handle {
       border-color: $positive-color;
-      @include transform(translate3d(17px,0,0)); 
+      @include transform(translate3d(44px,0,0)); 
+    }
+    &:before {
+      right: auto;
+      left: 15px;
+      color: #fff;
+      content: "On";
+    }
   }
+  // Hide the checkbox
+  input[type="checkbox"] {
+    display: none;
   }
 }