Correct padding for tab bar with labels

Fixes framework7io#320
gregkeys · Sep 12, 2014 · bd08923 · bd08923
1 parent 406ad14
commit bd08923
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 17 deletions.
diff --git a/kitchen-sink/css/kitchen-sink.css b/kitchen-sink/css/kitchen-sink.css
@@ -29,17 +29,21 @@
 .statusbar-overlay.with-panel-right {
   background: #000;
 }
-.page[data-page="tabbar"] .toolbar,
-.page[data-page="tabbar-labels"] .toolbar {
+.page[data-page="tabbar"] .tabbar,
+.page[data-page="tabbar-labels"] .tabbar {
   -webkit-transform: none;
   -moz-transform: none;
   -ms-transform: none;
   -o-transform: none;
   transform: none;
 }
-.page[data-page="tabbar"] .page-content,
 .page[data-page="tabbar-labels"] .page-content {
-  padding-bottom: 44px;
+  padding-bottom: 50px;
+}
+@media all and (min-width: 768px) {
+  .page[data-page="tabbar-labels"] .page-content {
+    padding-bottom: 56px;
+  }
 }
 i.ks-tabbar-icon-1 {
   width: 30px;

diff --git a/kitchen-sink/jade/tabbar-labels.jade b/kitchen-sink/jade/tabbar-labels.jade
@@ -9,7 +9,7 @@
       a(href="#").link.open-panel.icon-only
         i.icon.icon-bars
 .pages.navbar-through
-  .page(data-page="tabbar-labels").no-toolbar.toolbar-fixed
+  .page(data-page="tabbar-labels").no-toolbar.tabbar-labels-fixed
     .toolbar.tabbar.tabbar-labels
       .toolbar-inner
         a(href="#tab-1").tab-link.active

diff --git a/kitchen-sink/less/kitchen-sink.less b/kitchen-sink/less/kitchen-sink.less
@@ -35,15 +35,20 @@
 }
 // Demo tab bars
 .page[data-page="tabbar"], .page[data-page="tabbar-labels"] {
-    .toolbar {
+    .tabbar {
         -webkit-transform: none;
         -moz-transform: none;
         -ms-transform: none;
         -o-transform: none;
         transform: none;
     }
+}
+.page[data-page="tabbar-labels"] {
     .page-content {
-        padding-bottom: 44px;
+        padding-bottom: 50px;
+        @media all and (min-width:768px) {
+            padding-bottom: 56px;
+        }
     }
 }
 i.ks-tabbar-icon-1 {

diff --git a/kitchen-sink/tabbar-labels.html b/kitchen-sink/tabbar-labels.html
@@ -7,7 +7,7 @@
   </div>
 </div>
 <div class="pages navbar-through">
-  <div data-page="tabbar-labels" class="page no-toolbar toolbar-fixed">
+  <div data-page="tabbar-labels" class="page no-toolbar tabbar-labels-fixed">
     <div class="toolbar tabbar tabbar-labels">
       <div class="toolbar-inner"><a href="#tab-1" class="tab-link active"><i class="icon ks-tabbar-icon-1"></i><span class="tabbar-label">Information</span></a><a href="#tab-2" class="tab-link"><i class="icon ks-tabbar-icon-2"><span class="badge bg-red">4</span></i><span class="tabbar-label">Inbox</span></a><a href="#tab-3" class="tab-link"><i class="icon ks-tabbar-icon-3"></i><span class="tabbar-label">Upload</span></a><a href="#tab-4" class="tab-link"><i class="icon ks-tabbar-icon-4"><span class="badge bg-green">27</span></i><span class="tabbar-label">Photos</span></a></div>
     </div>

diff --git a/kitchen-sink/tabbar.html b/kitchen-sink/tabbar.html
@@ -9,7 +9,7 @@
 <div class="pages navbar-through">
   <div data-page="tabbar" class="page no-toolbar toolbar-fixed">
     <div class="toolbar tabbar">
-      <div class="toolbar-inner"><a href="#tab-1" class="tab-link active"><i class="icon ks-tabbar-icon-1"></i></a><a href="#tab-2" class="tab-link"><i class="icon ks-tabbar-icon-2"><span class="badge badge-red">9</span></i></a><a href="#tab-3" class="tab-link"><i class="icon ks-tabbar-icon-3"></i></a><a href="#tab-4" class="tab-link"><i class="icon ks-tabbar-icon-4"></i></a></div>
+      <div class="toolbar-inner"><a href="#tab-1" class="tab-link active"><i class="icon ks-tabbar-icon-1"></i></a><a href="#tab-2" class="tab-link"><i class="icon ks-tabbar-icon-2"><span class="badge bg-red">9</span></i></a><a href="#tab-3" class="tab-link"><i class="icon ks-tabbar-icon-3"></i></a><a href="#tab-4" class="tab-link"><i class="icon ks-tabbar-icon-4"></i></a></div>
     </div>
     <div class="page-content">
       <div class="tabs">

diff --git a/src/less/toolbars-pages.less b/src/less/toolbars-pages.less
@@ -4,21 +4,23 @@
         position: absolute;
     }
 }
-.navbar-through {
+.navbar-through, .navbar-fixed {
     .page-content {
         padding-top: 44px;
     }
 }
-.toolbar-through {
+.toolbar-through, .toolbar-fixed, .tabbar-through, .tabbar-fixed {
     .page-content {
         padding-bottom: 44px;
     }
 }
-.navbar-fixed .page-content {
-    padding-top: 44px;
-}
-.toolbar-fixed .page-content {
-    padding-bottom: 44px;
+.tabbar-labels-fixed, .tabbar-labels-through {
+    .page-content {
+        padding-bottom: 50px;
+        @media all and (min-width:768px) {
+            padding-bottom: 56px;
+        }
+    }
 }
 // Page Hidden Navbar
 .hidden-navbar {

diff --git a/src/less/toolbars.less b/src/less/toolbars.less
@@ -178,7 +178,7 @@
         }
     }
     .tabbar-labels {
-        height: 55px;
+        height: 56px;
         span.tabbar-label {
             font-size: 14px;
         }