spacing issues

dist/ratchet.css

@@ -288,6 +288,11 @@ strong {
   padding-top: 88px;
 }
 
+.container {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
 .pull-left {
   float: left;
 }
@@ -319,10 +324,12 @@ h4, .h4 {
 
 h5, .h5 {
   font-size: 14px;
+  margin-top: 20px;
 }
 
 h6, .h6 {
   font-size: 12px;
+  margin-top: 20px;
 }
 
 p {
@@ -677,6 +684,13 @@ input[type="button"] {
   border-top: 0;
   border-bottom: 0;
 }
+.card .table-view .table-view-divider:first-child {
+  top: 0;
+  border-radius: 6px 6px 0 0;
+}
+.card .table-view .table-view-divider:last-child {
+  border-radius: 0 0 6px 6px;
+}
 
 .card .table-view li:last-child {
   border: 0;
@@ -725,13 +739,6 @@ input[type="button"] {
   border-bottom: 1px solid #dddddd;
   background-color: #fafafa;
 }
-.table-view .table-view-divider:first-child {
-  top: 0;
-  border-radius: 6px 6px 0 0;
-}
-.table-view .table-view-divider:last-child {
-  border-radius: 0 0 6px 6px;
-}
 
 .table-view .media,
 .table-view .media-body {

examples/app-default/index.html

@@ -8,7 +8,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
     <link rel="stylesheet" href="../../dist/ratchet.css">
-    <link rel="stylesheet" href="../../dist/android-theme.css">
+    <!-- <link rel="stylesheet" href="../../dist/android-theme.css"> -->
     <link rel="stylesheet" href="css/app.css">
     <script src="../../dist/ratchet.js"></script>
   </head>
@@ -164,8 +164,9 @@
             </div>
           </li>
         </ul>
-
-        <a class="btn btn-positive btn-block">Save settings</a>
+        <div class="container">
+          <a class="btn btn-positive btn-block">Save settings</a>
+        </div>
       </div>
     </div>
   </body>

lib/sass/base.scss

@@ -64,6 +64,10 @@ strong {
 }
 
 // Utility classes
+.container {
+  padding-right: 15px;
+  padding-left: 15px;
+}
 .pull-left {
   float: left;
 }

lib/sass/cards.scss

@@ -24,6 +24,17 @@
   margin: 0;
   border-top: 0;
   border-bottom: 0;
+
+  // Rounding first divider on carded lists and remove border on the top
+  .table-view-divider:first-child {
+    top: 0;
+    border-radius: $border-radius $border-radius 0 0;
+  }
+
+  // Rounding last divider on carded table views
+  .table-view-divider:last-child {
+    border-radius: 0 0 $border-radius $border-radius;
+  }
 }
 .card .table-view li:last-child {
   border: 0;

lib/sass/table-views.scss

@@ -53,17 +53,6 @@
     border-top: $border-default;
     border-bottom: $border-default;
     background-color: #fafafa;
-
-    // Rounding first divider on inset lists and remove border on the top
-    &:first-child {
-      top: 0;
-      border-radius: $border-radius $border-radius 0 0;
-    }
-
-    // Rounding last divider on inset table views
-    &:last-child {
-      border-radius: 0 0 $border-radius $border-radius;
-    }
   }
 }
 

lib/sass/type.scss

@@ -10,8 +10,8 @@ h1, .h1 { font-size: 36px; }
 h2, .h2 { font-size: 30px; }
 h3, .h3 { font-size: 24px; }
 h4, .h4 { font-size: 18px; }
-h5, .h5 { font-size: 14px; }
-h6, .h6 { font-size: 12px; }
+h5, .h5 { font-size: 14px; margin-top: 20px }
+h6, .h6 { font-size: 12px; margin-top: 20px }
 
 // Paragraphs
 p {