icons in bars and buttons

components.html

@@ -117,11 +117,10 @@ base_url: "../"
 
 {% highlight html %}
 <header class="bar bar-nav">
-  <a class="btn btn-link pull-left">
-    Previous
-  </a>
+  <span class="icon icon-refresh pull-left"></span>
   <a class="btn btn-link pull-right">
     Next
+    <span class="icon icon-lg-right"></span>
   </a>
   <h1 class="title">Title</h1>
 </header>
@@ -547,7 +546,7 @@ base_url: "../"
   <!-- Buttons -->
   <article class="component" id="buttons">
     <h3 class="component-title">Buttons</h3>
-    <p class="component-description">Buttons come in four flavors and should be used for user actions.</p>
+    <p class="component-description">Buttons come in many flavors and should be used for user actions.</p>
 
     <div class="component-example">
       <a class="btn">Button</a>
@@ -563,6 +562,27 @@ base_url: "../"
 <a class="btn btn-positive">Button</a>
 <a class="btn btn-negative">Button</a>
 <a class="btn btn-link">Button</a>
+      
+<a class="btn">
+  <span class="icon icon-search"></span>
+  Button
+</a>
+<a class="btn btn-primary">
+  <span class="icon icon-search"></span>
+  Button
+</a>
+<a class="btn btn-positive">
+  <span class="icon icon-search"></span>
+  Button
+</a>
+<a class="btn btn-negative">
+  <span class="icon icon-search"></span>
+  Button
+</a>
+<a class="btn btn-link">
+  <span class="icon icon-left"></span>
+  Button
+</a>
 {% endhighlight %}
 
   </article>

dist/ios-theme.css

@@ -211,6 +211,14 @@ textarea,
 .bar-nav .btn-link {
   color: #007aff;
 }
+.bar-nav .btn-link.pull-right .icon {
+  margin-right: -8px;
+  margin-left: -3px;
+}
+.bar-nav .btn-link.pull-left .icon {
+  margin-right: -3px;
+  margin-left: -8px;
+}
 .bar-nav .btn-link:active {
   color: #007aff;
   opacity: .6;

dist/ratchet.css

@@ -355,31 +355,30 @@ strong {
   padding: 0;
   border-top: 1px solid #dddddd;
 }
-
-.tab-item {
+.bar-tab .tab-item {
   display: table-cell;
   height: 100%;
   width: 1%;
   padding-top: 9px;
   text-align: center;
 }
-.tab-item .tab-label,
-.tab-item .icon {
+.bar-tab .tab-item .tab-label,
+.bar-tab .tab-item .icon {
   color: #929292;
 }
-.tab-item .tab-label {
+.bar-tab .tab-item .tab-label {
   margin-top: -2px;
   font-size: 11px;
   font-weight: 400;
 }
-.tab-item .icon {
+.bar-tab .tab-item .icon {
   width: 24px;
   height: 24px;
   margin-top: -2px;
 }
-.tab-item.active .tab-label,
-.tab-item.active .icon, .tab-item:active .tab-label,
-.tab-item:active .icon {
+.bar-tab .tab-item.active .tab-label,
+.bar-tab .tab-item.active .icon, .bar-tab .tab-item:active .tab-label,
+.bar-tab .tab-item:active .icon {
   color: #428bca;
 }
 
@@ -1220,3 +1219,12 @@ input[type="button"] {
 .icon-up:before {
   content: '\e802';
 }
+
+.btn .icon {
+  font-size: inherit;
+}
+
+.bar .icon {
+  font-size: 24px;
+  margin-top: 11px;
+}

docs-assets/css/docs.css

@@ -983,6 +983,14 @@ hr {
 .platform-ios .bar-nav .btn-link {
   color: #007aff;
 }
+.platform-ios .bar-nav .btn-link.pull-right .icon {
+  margin-right: -8px;
+  margin-left: -3px;
+}
+.platform-ios .bar-nav .btn-link.pull-left .icon {
+  margin-right: -3px;
+  margin-left: -8px;
+}
 .platform-ios .bar-nav .btn-link:active {
   color: #007aff;
   opacity: .6;

lib/sass/bars.scss

@@ -84,40 +84,40 @@
   height: $bar-tab-height;
   padding: 0;
   border-top: $border-default;
-}
-
-// Navigational tab
-.tab-item {
-  display: table-cell;
-  height: 100%;
-  width: 1%;
-  padding-top: 9px;
-  text-align: center;
 
-  .tab-label,
-  .icon {
-    color: #929292;
-  }
-
-  // Label for tab
-  .tab-label {
-    margin-top: -2px;
-    font-size: 11px;
-    font-weight: 400;
-  }
-  
-  .icon {
-    width: 24px;
-    height: 24px;
-    margin-top: -2px;
-  }
+  // Navigational tab
+  .tab-item {
+    display: table-cell;
+    height: 100%;
+    width: 1%;
+    padding-top: 9px;
+    text-align: center;
 
-  // Active states for the tab bar
-  &.active,
-  &:active {
     .tab-label,
     .icon {
-      color: $primary-color;
+      color: #929292;
+    }
+
+    // Label for tab
+    .tab-label {
+      margin-top: -2px;
+      font-size: 11px;
+      font-weight: 400;
+    }
+    
+    .icon {
+      width: 24px;
+      height: 24px;
+      margin-top: -2px;
+    }
+
+    // Active states for the tab bar
+    &.active,
+    &:active {
+      .tab-label,
+      .icon {
+        color: $primary-color;
+      }
     }
   }
 }

lib/sass/ratchicons.scss

@@ -40,3 +40,18 @@
 .icon-sound4:before { content: '\f004'; }
 .icon-sound:before { content: '\f001'; }
 .icon-up:before { content: '\e802'; }
+
+// Ratchicons in buttons
+.btn {
+  .icon {
+    font-size: inherit;
+  }
+}
+
+// Ratchicons in nav bars
+.bar {
+  .icon {
+    font-size: 24px;
+    margin-top: 11px;
+  }
+}

lib/sass/theme-ios.scss

@@ -285,9 +285,18 @@ textarea,
 // --------------------------------------------------
 
 .bar-nav {
+  // Link buttons in nav bars
   .btn-link {
     color: $primary-color;
 
+    &.pull-right .icon{
+      margin-right: -8px;
+      margin-left: -3px;
+    }
+    &.pull-left .icon {
+      margin-right: -3px;
+      margin-left: -8px;
+    }
     &:active {
       color: $primary-color;
       opacity: .6;