ios7 style navigation tabs and pills

public/css/ios7.less

@@ -15,7 +15,6 @@ html {
 }
 
 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-  margin-top: 0;
   font-weight: 300;
 }
 
@@ -217,40 +216,69 @@ label-info {
   border-radius: 0px;
 }
 
-nav-tabs > li > a > [class*="icon-"] {
-  margin-right: 0 !important;
-}
-.nav-tabs > li > a > [class*="icon-"] + span {
-  display: none;
-}
-
 // Tabs ========================================================================
 
-.nav-tabs > li {
+.nav-tabs-justified {
-
+  > li > a {
-  > a {
+    border-radius: 0;
-  border-radius: 0px;
+    border-bottom: 1px solid #007aff;
-  padding: 7px 15px;
   }
-  .active > a {
 
+  > .active > a,
+  > .active > a:hover,
+  > .active > a:focus {
+    border: 1px solid #007aff;
+    border-bottom-color: #fff;
   }
 }
 
 .nav-tabs {
-  margin-top: -5px;
+  border-bottom: 1px solid #007aff;
-  border: 0;
+  > li {
-}
+    > a {
+      color: #555;
+      border: 1px solid transparent;
+      border-radius: 0;
 
-.tab-content {
+      transition: all 0.3s;
-  .row {
+
-    margin: 0;
+      &:hover {
+        color: #333;
+        background-color: rgba(0,0,0,0.05);
       }
     }
 
-.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
+    // Active state, and it's :hover to override normal :hover
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: #007aff;
+      }
+    }
+  }
+}
+
+.nav-pills {
+  > li {
+    > a {
+      border: 1px solid #007aff;
+
+      &:hover,
+      &:focus {
+        background-color: transparent;
+      }
+    }
+
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
         background-color: #007aff;
       }
+    }
+  }
+}
 
 
 // Buttons ====================================================================

views/api/foursquare.jade

@@ -16,8 +16,8 @@ block content
         div= message
   else
     h1
-      i.fa.fa-tumblr-square
+      i.fa.fa-foursquare
-      |  Tumblr API
+      |  Foursquare APIs
     .btn-group.btn-group-justified
       a.btn.btn-lg.btn-primary-outline(href='https://developer.foursquare.com/start', target='_blank')
         i.fa.fa-check-square-o
@@ -29,23 +29,14 @@ block content
         i.fa.fa-code-fork
         | API Endpoints
 
-    .panel.panel-default
+    ul.nav.nav-tabs.nav-justified
-      .panel-heading.tabs
-        i.fa.fa-foursquare
-        | Foursquare API
-        ul.nav.nav-tabs.pull-right
       li.active
-            a(href='#venues', data-toggle='tab')
+        a(href='#venues', data-toggle='tab') Venues
-              i.fa.fa-map-marker
-              | Venues
       li
-            a(href='#users', data-toggle='tab')
+        a(href='#users', data-toggle='tab') Users
-              i.fa.fa-user
-              | Users
-      .panel-body
     .tab-content
       #venues.tab-pane.fade.active.in
-            h3.lead.text-primary Trending Venues
+        h3.text-primary Trending Venues
 
         table.dataTable.table.table-striped.table-bordered
           thead
@@ -61,19 +52,16 @@ block content
                 td.hidden-xs.hidden-sm #{venue.categories[0].name}
                 td.hidden-xs #{venue.stats.checkinsCount}
                 td= venue.hereNow.count
-
-            h3.lead.text-primary Venue Detail
         p
-              span.label.label-primary #{venueDetail.venue.name} (#{venueDetail.venue.categories[0].shortName})
+          h3.text-primary Venue Detail
           p
-              span.label.label-success #{venueDetail.venue.location.address}, #{venueDetail.venue.location.city}, #{venueDetail.venue.location.state}
+            img(src='#{venueDetail.venue.photos.groups[0].items[0].prefix}150x150#{venueDetail.venue.photos.groups[0].items[0].suffix}')
-            p
+          .label.label-primary #{venueDetail.venue.name} (#{venueDetail.venue.categories[0].shortName})
-              span.label.label-warning #{venueDetail.venue.likes.count} likes, #{venueDetail.venue.rating} rating
+          .label.label-success #{venueDetail.venue.location.address}, #{venueDetail.venue.location.city}, #{venueDetail.venue.location.state}
-
+          .label.label-warning #{venueDetail.venue.likes.count} likes, #{venueDetail.venue.rating} rating
-            img.pull-left(src='#{venueDetail.venue.photos.groups[0].items[0].prefix}150x150#{venueDetail.venue.photos.groups[0].items[0].suffix}')
 
       #users.tab-pane.fade
-            .lead User Checkins
+        h3.text-primary User Checkins
         table.dataTable.table.table-bordered.table-hover
           thead
             tr

views/index.jade

@@ -11,3 +11,11 @@ block content
     .alert.alert-success.fade.in
       button.close(type='button', data-dismiss='alert', aria-hidden='true') ×
       | Congratulations, you are logged in!
+
+  ul.nav.nav-tabs.nav-justified
+    li.active
+      a(href='#venues', data-toggle='tab') Venues
+    li
+      a(href='#users', data-toggle='tab') Users
+    .tab-content
+      h2 Demo