From 6cd52a0401fce9a0ad81b80d5093fcb5b6d07374 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Thu, 29 Aug 2013 09:54:18 -0500
Subject: [PATCH] borderless buttons and icons

---
 dist/ionic.css                    |  9 ++++++++-
 example/panels.html               | 10 +++++++---
 scss/ionic/structure/_button.scss |  1 +
 scss/ionic/theme/_button.scss     |  7 +++++++
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/dist/ionic.css b/dist/ionic.css
index 497a840ee2..73a7f6e410 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -134,7 +134,8 @@ main > * {
   .button.button-inline {
     display: inline-block; }
   .button.button-borderless {
-    border: none; }
+    border: none;
+    padding: 2px 6px; }
 
 .button-group {
   position: relative;
@@ -546,6 +547,12 @@ a.button {
     box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: black; }
 
+.button-transparent {
+  background: transparent; }
+
+.button-borderless [class^="icon-"], [class*=" icon-"] {
+  font-size: 2.3em; }
+
 .list-divider {
   background-color: whitesmoke;
   color: #222222;
diff --git a/example/panels.html b/example/panels.html
index 338c92c56b..efabfbe8f7 100644
--- a/example/panels.html
+++ b/example/panels.html
@@ -5,7 +5,7 @@
 
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <!--<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">-->
+    <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="../../dist/ionic.css">
 
   </head>
@@ -14,9 +14,13 @@
     <section data-default-panel="my-left-panel">
 
       <header class="bar bar-header bar-dark">
-        <button class="button" data-panel-toggle="my-left-panel"></button>
+        <button class="button button-borderless button-transparent " data-panel-toggle="my-left-panel">
+          <i class="icon-reorder"></i>
+        </button>
         <h1 class="title">Panels</h1>
-        <button class="button" data-panel-toggle="my-right-panel" data-panel-direction="right"></button>
+        <button class="button button-borderless button-transparent " data-panel-toggle="my-right-panel" data-panel-direction="right">
+          <i class="icon-cog"></i>
+        </button>
       </header>
 
       <main class="content content-padded has-header">
diff --git a/scss/ionic/structure/_button.scss b/scss/ionic/structure/_button.scss
index 9f51021d07..45124cefa2 100644
--- a/scss/ionic/structure/_button.scss
+++ b/scss/ionic/structure/_button.scss
@@ -12,5 +12,6 @@
 
 	&.button-borderless {
     border: none;
+    padding: 2px 6px;
   }
 }
diff --git a/scss/ionic/theme/_button.scss b/scss/ionic/theme/_button.scss
index ce1ec329d2..639ce2fefa 100644
--- a/scss/ionic/theme/_button.scss
+++ b/scss/ionic/theme/_button.scss
@@ -34,3 +34,10 @@ a.button {
 .button-dark {
   @include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
 }
+.button-transparent {
+  background: transparent;
+}
+
+.button-borderless [class^="icon-"], [class*=" icon-"] {
+  font-size: 2.3em;  
+}
\ No newline at end of file