From 55b270bffe73a9cf1a471509635372ddd156a537 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Tue, 15 Oct 2013 12:25:58 -0500
Subject: [PATCH] button updates

---
 dist/css/ionic-ios7.css       |  99 ++++++++++++-------
 dist/css/ionic-scoped.css     |  90 ++++++++++-------
 dist/css/ionic.css            |  99 ++++++++++++-------
 scss/ionic/_bar.scss          |  43 +++++----
 scss/ionic/_button-group.scss |  11 +--
 scss/ionic/_button.scss       |  13 ++-
 scss/ionic/_util.scss         |  44 +++++++++
 test/button-groups.html       |  34 +++----
 test/buttons.html             | 176 ++++++++++++++++++++--------------
 9 files changed, 390 insertions(+), 219 deletions(-)

diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 2ddfc38a52..d1f967e8f9 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -393,12 +393,36 @@ body, .ionic-body {
 .padded {
   padding: 10px; }
 
+.padded-top {
+  padding-top: 10px; }
+
+.padded-right {
+  padding-right: 10px; }
+
+.padded-bottom {
+  padding-bottom: 10px; }
+
+.padded-left {
+  padding-left: 10px; }
+
 .padded-2 {
   padding: 20px; }
 
 .inset {
   margin: 10px; }
 
+.inset-top {
+  margin-top: 10px; }
+
+.inset-right {
+  margin-right: 10px; }
+
+.inset-bottom {
+  margin-bottom: 10px; }
+
+.inset-left {
+  margin-left: 10px; }
+
 .inset-2 {
   margin: 20px; }
 
@@ -534,24 +558,24 @@ address {
   line-height: 1.42857; }
 
 .bar {
-  position: absolute;
-  left: 0;
-  right: 0;
-  z-index: 10;
-  display: -webkit-box;
-  display: box;
-  width: 100%;
-  height: 44px;
-  padding: 5px;
-  box-sizing: border-box;
-  background-color: white;
-  border-style: solid;
-  border-width: 0;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
-  user-select: none; }
+  user-select: none;
+  position: absolute;
+  right: 0;
+  left: 0;
+  z-index: 10;
+  display: -webkit-box;
+  display: box;
+  box-sizing: border-box;
+  padding: 5px;
+  width: 100%;
+  height: 44px;
+  border-width: 0;
+  border-style: solid;
+  background-color: white; }
   .bar.bar-header {
     border-bottom-width: 1px; }
   .bar.bar-footer {
@@ -606,31 +630,32 @@ address {
       color: white; }
   .bar .title {
     position: absolute;
-    z-index: 0;
     top: 0;
-    left: 0;
     right: 0;
-    line-height: 44px;
+    left: 0;
+    z-index: 0;
     margin: 0;
     min-width: 30px;
-    text-overflow: ellipsis;
     text-align: center;
+    text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: 17px; }
+    font-size: 17px;
+    line-height: 44px; }
   .bar .title a {
     color: inherit; }
   .bar .button {
     box-flex: 1;
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
-    background-color: transparent;
-    line-height: 23px;
-    font-size: 12px;
+    z-index: 1;
+    margin: 0;
     padding: 4px 12px;
-    z-index: 1; }
+    background-color: transparent;
+    font-size: 12px;
+    line-height: 23px; }
     .bar .button.button-clear {
-      line-height: 34px;
-      padding: 0 5px; }
+      padding: 0 5px;
+      line-height: 34px; }
   .bar .button-bar {
     line-height: 18px; }
   .bar .button-bar + .button, .bar .button + .button-bar {
@@ -780,8 +805,8 @@ address {
     font-size: 17px; }
 
 .bar .button-icon {
-  background-color: transparent;
   border: 1px solid transparent;
+  background-color: transparent;
   font-size: 24px; }
 
 .bar-header {
@@ -793,11 +818,11 @@ address {
 .bar-tabs {
   padding: 0; }
 
-.bar-header-secondary {
+.bar-subheader {
   top: 44px;
   display: block; }
 
-.bar-footer-secondary {
+.bar-subfooter {
   bottom: 44px;
   display: block; }
 
@@ -1554,9 +1579,11 @@ input[type="checkbox"][readonly] {
   display: block;
   margin: 10px 0 10px 0;
   padding: 8px 12px;
-  border-width: 1px;
+  width: 100%;
+  border-width: 0;
   border-style: solid;
-  border-radius: 2px;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
   color: #222222;
   vertical-align: middle;
   text-align: center;
@@ -1769,13 +1796,21 @@ input[type="checkbox"][readonly] {
 a.button {
   text-decoration: none; }
 
+.inset .button,
+.padded .button {
+  border-right-width: 1px;
+  border-left-width: 1px;
+  border-radius: 2px; }
+
 .button-group {
   position: relative;
   display: inline-block;
   vertical-align: middle; }
   .button-group > .button {
     position: relative;
-    float: left; }
+    display: inline-block;
+    float: left;
+    width: auto; }
     .button-group > .button:hover, .button-group > .button:focus, .button-group > .button:active, .button-group > .button.active {
       z-index: 2; }
     .button-group > .button:focus {
@@ -1846,9 +1881,9 @@ a.button {
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   display: block;
-  width: 0;
   overflow: hidden;
   padding: 8px 16px;
+  width: 0;
   border-width: 1px 0px 1px 1px;
   border-radius: 0;
   text-align: center;
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index a6a9dbc027..b251970668 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -1117,10 +1117,26 @@
     display: none !important; }
   .ionic .padded {
     padding: 10px; }
+  .ionic .padded-top {
+    padding-top: 10px; }
+  .ionic .padded-right {
+    padding-right: 10px; }
+  .ionic .padded-bottom {
+    padding-bottom: 10px; }
+  .ionic .padded-left {
+    padding-left: 10px; }
   .ionic .padded-2 {
     padding: 20px; }
   .ionic .inset {
     margin: 10px; }
+  .ionic .inset-top {
+    margin-top: 10px; }
+  .ionic .inset-right {
+    margin-right: 10px; }
+  .ionic .inset-bottom {
+    margin-bottom: 10px; }
+  .ionic .inset-left {
+    margin-left: 10px; }
   .ionic .inset-2 {
     margin: 20px; }
   .ionic .rounded {
@@ -1255,24 +1271,24 @@
     background-color: rgba(255, 255, 255, 0.95);
     margin-bottom: 10px; }
   .ionic .bar {
-    position: absolute;
-    left: 0;
-    right: 0;
-    z-index: 10;
-    display: -webkit-box;
-    display: box;
-    width: 100%;
-    height: 44px;
-    padding: 5px;
-    box-sizing: border-box;
-    background-color: white;
-    border-style: solid;
-    border-width: 0;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
-    user-select: none; }
+    user-select: none;
+    position: absolute;
+    right: 0;
+    left: 0;
+    z-index: 10;
+    display: -webkit-box;
+    display: box;
+    box-sizing: border-box;
+    padding: 5px;
+    width: 100%;
+    height: 44px;
+    border-width: 0;
+    border-style: solid;
+    background-color: white; }
     .ionic .bar.bar-header {
       border-bottom-width: 1px; }
     .ionic .bar.bar-footer {
@@ -1327,31 +1343,32 @@
         color: white; }
     .ionic .bar .title {
       position: absolute;
-      z-index: 0;
       top: 0;
-      left: 0;
       right: 0;
-      line-height: 44px;
+      left: 0;
+      z-index: 0;
       margin: 0;
       min-width: 30px;
-      text-overflow: ellipsis;
       text-align: center;
+      text-overflow: ellipsis;
       white-space: nowrap;
-      font-size: 17px; }
+      font-size: 17px;
+      line-height: 44px; }
     .ionic .bar .title a {
       color: inherit; }
     .ionic .bar .button {
       box-flex: 1;
       -webkit-box-flex: 0;
       -moz-box-flex: 0;
-      background-color: transparent;
-      line-height: 23px;
-      font-size: 12px;
+      z-index: 1;
+      margin: 0;
       padding: 4px 12px;
-      z-index: 1; }
+      background-color: transparent;
+      font-size: 12px;
+      line-height: 23px; }
       .ionic .bar .button.button-clear {
-        line-height: 34px;
-        padding: 0 5px; }
+        padding: 0 5px;
+        line-height: 34px; }
     .ionic .bar .button-bar {
       line-height: 18px; }
     .ionic .bar .button-bar + .button, .ionic .bar .button + .button-bar {
@@ -1492,8 +1509,8 @@
       box-shadow: none;
       font-size: 17px; }
   .ionic .bar .button-icon {
-    background-color: transparent;
     border: 1px solid transparent;
+    background-color: transparent;
     font-size: 24px; }
   .ionic .bar-header {
     top: 0; }
@@ -1501,10 +1518,10 @@
     bottom: 0; }
   .ionic .bar-tabs {
     padding: 0; }
-  .ionic .bar-header-secondary {
+  .ionic .bar-subheader {
     top: 44px;
     display: block; }
-  .ionic .bar-footer-secondary {
+  .ionic .bar-subfooter {
     bottom: 44px;
     display: block; }
   .ionic .tabs {
@@ -2189,9 +2206,11 @@
     display: block;
     margin: 10px 0 10px 0;
     padding: 8px 12px;
-    border-width: 1px;
+    width: 100%;
+    border-width: 0;
     border-style: solid;
-    border-radius: 2px;
+    border-top-width: 1px;
+    border-bottom-width: 1px;
     color: #222222;
     vertical-align: middle;
     text-align: center;
@@ -2402,13 +2421,20 @@
       margin: 10px 0 10px 0; }
   .ionic a.button {
     text-decoration: none; }
+  .ionic .inset .button,
+  .ionic .padded .button {
+    border-right-width: 1px;
+    border-left-width: 1px;
+    border-radius: 2px; }
   .ionic .button-group {
     position: relative;
     display: inline-block;
     vertical-align: middle; }
     .ionic .button-group > .button {
       position: relative;
-      float: left; }
+      display: inline-block;
+      float: left;
+      width: auto; }
       .ionic .button-group > .button:hover, .ionic .button-group > .button:focus, .ionic .button-group > .button:active, .ionic .button-group > .button.active {
         z-index: 2; }
       .ionic .button-group > .button:focus {
@@ -2469,9 +2495,9 @@
     -webkit-box-flex: 1;
     -moz-box-flex: 1;
     display: block;
-    width: 0;
     overflow: hidden;
     padding: 8px 16px;
+    width: 0;
     border-width: 1px 0px 1px 1px;
     border-radius: 0;
     text-align: center;
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 919e5d97ee..31287e4b1b 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1450,12 +1450,36 @@ body, .ionic-body {
 .padded {
   padding: 10px; }
 
+.padded-top {
+  padding-top: 10px; }
+
+.padded-right {
+  padding-right: 10px; }
+
+.padded-bottom {
+  padding-bottom: 10px; }
+
+.padded-left {
+  padding-left: 10px; }
+
 .padded-2 {
   padding: 20px; }
 
 .inset {
   margin: 10px; }
 
+.inset-top {
+  margin-top: 10px; }
+
+.inset-right {
+  margin-right: 10px; }
+
+.inset-bottom {
+  margin-bottom: 10px; }
+
+.inset-left {
+  margin-left: 10px; }
+
 .inset-2 {
   margin: 20px; }
 
@@ -1621,24 +1645,24 @@ address {
   margin-bottom: 10px; }
 
 .bar {
-  position: absolute;
-  left: 0;
-  right: 0;
-  z-index: 10;
-  display: -webkit-box;
-  display: box;
-  width: 100%;
-  height: 44px;
-  padding: 5px;
-  box-sizing: border-box;
-  background-color: white;
-  border-style: solid;
-  border-width: 0;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
-  user-select: none; }
+  user-select: none;
+  position: absolute;
+  right: 0;
+  left: 0;
+  z-index: 10;
+  display: -webkit-box;
+  display: box;
+  box-sizing: border-box;
+  padding: 5px;
+  width: 100%;
+  height: 44px;
+  border-width: 0;
+  border-style: solid;
+  background-color: white; }
   .bar.bar-header {
     border-bottom-width: 1px; }
   .bar.bar-footer {
@@ -1693,31 +1717,32 @@ address {
       color: white; }
   .bar .title {
     position: absolute;
-    z-index: 0;
     top: 0;
-    left: 0;
     right: 0;
-    line-height: 44px;
+    left: 0;
+    z-index: 0;
     margin: 0;
     min-width: 30px;
-    text-overflow: ellipsis;
     text-align: center;
+    text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: 17px; }
+    font-size: 17px;
+    line-height: 44px; }
   .bar .title a {
     color: inherit; }
   .bar .button {
     box-flex: 1;
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
-    background-color: transparent;
-    line-height: 23px;
-    font-size: 12px;
+    z-index: 1;
+    margin: 0;
     padding: 4px 12px;
-    z-index: 1; }
+    background-color: transparent;
+    font-size: 12px;
+    line-height: 23px; }
     .bar .button.button-clear {
-      line-height: 34px;
-      padding: 0 5px; }
+      padding: 0 5px;
+      line-height: 34px; }
   .bar .button-bar {
     line-height: 18px; }
   .bar .button-bar + .button, .bar .button + .button-bar {
@@ -1867,8 +1892,8 @@ address {
     font-size: 17px; }
 
 .bar .button-icon {
-  background-color: transparent;
   border: 1px solid transparent;
+  background-color: transparent;
   font-size: 24px; }
 
 .bar-header {
@@ -1880,11 +1905,11 @@ address {
 .bar-tabs {
   padding: 0; }
 
-.bar-header-secondary {
+.bar-subheader {
   top: 44px;
   display: block; }
 
-.bar-footer-secondary {
+.bar-subfooter {
   bottom: 44px;
   display: block; }
 
@@ -2672,9 +2697,11 @@ input[type="checkbox"][readonly] {
   display: block;
   margin: 10px 0 10px 0;
   padding: 8px 12px;
-  border-width: 1px;
+  width: 100%;
+  border-width: 0;
   border-style: solid;
-  border-radius: 2px;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
   color: #222222;
   vertical-align: middle;
   text-align: center;
@@ -2887,13 +2914,21 @@ input[type="checkbox"][readonly] {
 a.button {
   text-decoration: none; }
 
+.inset .button,
+.padded .button {
+  border-right-width: 1px;
+  border-left-width: 1px;
+  border-radius: 2px; }
+
 .button-group {
   position: relative;
   display: inline-block;
   vertical-align: middle; }
   .button-group > .button {
     position: relative;
-    float: left; }
+    display: inline-block;
+    float: left;
+    width: auto; }
     .button-group > .button:hover, .button-group > .button:focus, .button-group > .button:active, .button-group > .button.active {
       z-index: 2; }
     .button-group > .button:focus {
@@ -2964,9 +2999,9 @@ a.button {
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   display: block;
-  width: 0;
   overflow: hidden;
   padding: 8px 16px;
+  width: 0;
   border-width: 1px 0px 1px 1px;
   border-radius: 0;
   text-align: center;
diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss
index 799c7f861e..d2707eb77b 100644
--- a/scss/ionic/_bar.scss
+++ b/scss/ionic/_bar.scss
@@ -1,22 +1,22 @@
 .bar {
+
+  @include user-select(none);
   position: absolute;
-  left: 0;
   right: 0;
+  left: 0;
   z-index: 10;
 
   display: -webkit-box;
   display: box;
+  box-sizing: border-box;
+  padding: $bar-padding-portrait;
 
   width: 100%;
   height: $bar-height;
-  padding: $bar-padding-portrait;
-  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
 
   background-color: $bar-bg;
-  border-style: solid;
-  border-width: 0;
-
-  @include user-select(none);
 
   &.bar-header {
     border-bottom-width: 1px;
@@ -60,25 +60,25 @@
   // Title inside of a bar is centered
   .title {
     position: absolute;
-    z-index: 0;
 
     top: 0;
-    left: 0;
     right: 0;
-
-    line-height: $bar-height;
+    left: 0;
+    z-index: 0;
 
     margin: 0;
     //padding: $barPaddingVertical 0px;
 
     min-width: 30px;
 
+    text-align: center;
+
     // Go into ellipsis if too small
     text-overflow: ellipsis;
-
-    text-align: center;
     white-space: nowrap;
     font-size: $bar-title-font-size;
+
+    line-height: $bar-height;
   }
 
   .title a {
@@ -87,15 +87,16 @@
 
   .button {
     @include box-flex(0);
-    background-color: transparent;
-    line-height: $bar-button-line-height;
-    font-size: 12px;
-    padding: 4px 12px;
     z-index: 1;
+    margin: 0;
+    padding: 4px 12px;
+    background-color: transparent;
+    font-size: 12px;
+    line-height: $bar-button-line-height;
 
     &.button-clear {
-      line-height: $bar-button-clear-line-height;
       padding: 0 5px;
+      line-height: $bar-button-clear-line-height;
     }
   }
 
@@ -175,8 +176,8 @@
 }
 
 .bar .button-icon {
-  background-color: transparent;
   border: 1px solid transparent;
+  background-color: transparent;
   font-size: 24px;
 }
 
@@ -195,11 +196,11 @@
   padding: 0;
 }
 
-.bar-header-secondary {
+.bar-subheader {
   top: $bar-height;
   display: block;
 }
-.bar-footer-secondary {
+.bar-subfooter {
   bottom: $bar-height;
   display: block;
 }
diff --git a/scss/ionic/_button-group.scss b/scss/ionic/_button-group.scss
index 97ba236245..fe316f9ff5 100644
--- a/scss/ionic/_button-group.scss
+++ b/scss/ionic/_button-group.scss
@@ -5,7 +5,9 @@
 
   > .button {
     position: relative;
+    display: inline-block;
     float: left;
+    width: auto;
     // Bring the "active" button to the front
     &:hover,
     &:focus,
@@ -20,7 +22,6 @@
   }
 }
 
-
 .button-group {
   .button + .button,
   .button + .button-group,
@@ -64,25 +65,23 @@
 }
 
 .button-bar {
-
   @include box-flex(1);
   @include box-orient(horizontal);
   display: -webkit-box;
   display: box;
-
 }
 
 .button-bar > .button {
   @include box-flex(1);
   display: block;
-
-  // Fix for unequal widths of buttons
-  width: 0;
   
   overflow: hidden;
 
   padding: 8px 16px;
 
+  // Fix for unequal widths of buttons
+  width: 0;
+
   border-width: 1px 0px 1px 1px;
   border-radius: 0;
   text-align: center;
diff --git a/scss/ionic/_button.scss b/scss/ionic/_button.scss
index 278694f069..8c7e919114 100644
--- a/scss/ionic/_button.scss
+++ b/scss/ionic/_button.scss
@@ -4,10 +4,12 @@
   margin: $button-block-margin;
 
   padding: $button-padding;
+  width: 100%;
 
-  border-width: $button-border-width;
+  border-width: 0;
   border-style: solid;
-  border-radius: $button-border-radius;
+  border-top-width: $button-border-width;
+  border-bottom-width: $button-border-width;
 
   color: $button-color;
 
@@ -116,3 +118,10 @@
 a.button {
   text-decoration: none;
 }
+
+.inset .button,
+.padded .button {
+  border-right-width: $button-border-width;
+  border-left-width: $button-border-width;
+  border-radius: $button-border-radius;
+}
diff --git a/scss/ionic/_util.scss b/scss/ionic/_util.scss
index 71d7f2de80..510eee1322 100644
--- a/scss/ionic/_util.scss
+++ b/scss/ionic/_util.scss
@@ -3,22 +3,66 @@
   display: none !important; 
 }
 
+
+// Padded
+// -------------------------------
+
 .padded {
   padding: $content-padding;
 }
 
+.padded-top {
+  padding-top: $content-padding;
+}
+
+.padded-right {
+  padding-right: $content-padding;
+}
+
+.padded-bottom {
+  padding-bottom: $content-padding;
+}
+
+.padded-left {
+  padding-left: $content-padding;
+}
+
 .padded-2 {
   padding: $content-padding * 2;
 }
 
+
+// Inset 
+// -------------------------------
+
 .inset {
   margin: $inset-margin;
 }
 
+.inset-top {
+  margin-top: $inset-margin;
+}
+
+.inset-right {
+  margin-right: $inset-margin;
+}
+
+.inset-bottom {
+  margin-bottom: $inset-margin;
+}
+
+.inset-left {
+  margin-left: $inset-margin;
+}
+
 .inset-2 {
   margin: $inset-margin * 2;
 }
 
+
+// Rounded
+// -------------------------------
+
 .rounded {
   border-radius: $border-radius-base;
 }
diff --git a/test/button-groups.html b/test/button-groups.html
index 70c9307d72..fc9ea2e266 100644
--- a/test/button-groups.html
+++ b/test/button-groups.html
@@ -5,33 +5,27 @@
 
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="../dist/ionicons.css" rel="stylesheet">
-    <link href="../dist/ionic.css" rel="stylesheet">
+    <link href="../dist/css/ionic.css" rel="stylesheet">
   </head>
   <body>
 
-    <section>
-
       <header class="bar bar-header bar-dark">
         <h1 class="title">Button Group</h1>
       </header>
 
-      <main class="content padded has-header">
-        <p>
-          <div class="button-group">
-            <a class="button button-primary">Success</a>
-            <a class="button button-primary">Warning</a>
-            <a class="button button-primary">Danger</a>
-            <a class="button button-primary">Dark</a>
-          </div>
-        </p>
-        <p><a class="button button-secondary" href="index.html">Homepage</a></p>
-      </main>
-
-    </section>
-    
-    <script src="../dist/ionic.js"></script>
-    <script src="../dist/ionic-simple.js"></script>
+      <div class="content-wrapper">
+        <main class="content padded has-header">
+          <p>
+            <div class="button-group">
+              <a class="button button-primary">Success</a>
+              <a class="button button-primary">Warning</a>
+              <a class="button button-primary">Danger</a>
+              <a class="button button-primary">Dark</a>
+            </div>
+          </p>
+          <p><a class="button button-secondary" href="index.html">Homepage</a></p>
+        </main>
+      </div>
 
   </body>
 </html>
diff --git a/test/buttons.html b/test/buttons.html
index 2e34134615..fbd3734be6 100644
--- a/test/buttons.html
+++ b/test/buttons.html
@@ -14,9 +14,99 @@
     </header>
 
     <div class="content-wrapper">
-      <main class="content padded has-header">
+      <main class="content has-header">
 
-        <h3>Default (Block)</h3>
+        <div class="padded">
+
+          <h3>Default (Block w/ parent .padded)</h3>
+          <p>
+            <a class="button button-default">Default</a>
+            <a class="button button-secondary">Secondary</a>
+            <a class="button button-primary">Primary</a>
+            <a class="button button-info">Info</a>
+            <a class="button button-success">Success</a>
+            <a class="button button-warning">Warning</a>
+            <a class="button button-danger">Danger</a>
+            <a class="button button-dark">Dark</a>
+          </p>
+
+          <h3>Inline (.button-inline override)</h3>
+          <p>
+            <a class="button button-default button-inline">Default</a>
+            <a class="button button-secondary button-inline">Secondary</a>
+            <a class="button button-primary button-inline">Primary</a>
+            <a class="button button-info button-inline">Info</a>
+            <a class="button button-success button-inline">Success</a>
+            <a class="button button-warning button-inline">Warning</a>
+            <a class="button button-danger button-inline">Danger</a>
+            <a class="button button-dark button-inline">Dark</a>
+          </p>
+
+          <h3>Icon (Inline Default)</h3>
+          <p>
+            <a class="button button-icon"><i class="icon-home"></i></a>
+          </p>
+
+          <h3>Icon (.button-block override)</h3>
+          <p>
+            <a class="button button-icon button-block"><i class="icon-home"></i></a>
+          </p>
+
+          <h3>Outline (Inline Default)</h3>
+          <p>
+            <a class="button button-default button-outline">Default</a>
+            <a class="button button-secondary button-outline">Secondary</a>
+            <a class="button button-primary button-outline">Primary</a>
+            <a class="button button-info button-outline">Info</a>
+            <a class="button button-success button-outline">Success</a>
+            <a class="button button-warning button-outline">Warning</a>
+            <a class="button button-danger button-outline">Danger</a>
+            <a class="button button-dark button-outline">Dark</a>
+          </p>
+
+          <h3>Outline (.button-block override)</h3>
+          <p>
+            <a class="button button-default button-outline button-block">Default</a>
+            <a class="button button-secondary button-outline button-block">Secondary</a>
+            <a class="button button-primary button-outline button-block">Primary</a>
+            <a class="button button-info button-outline button-block">Info</a>
+            <a class="button button-success button-outline button-block">Success</a>
+            <a class="button button-warning button-outline button-block">Warning</a>
+            <a class="button button-danger button-outline button-block">Danger</a>
+            <a class="button button-dark button-outline button-block">Dark</a>
+          </p>
+
+          <h3>Clear (Inline Default)</h3>
+          <p>
+            <a class="button button-default button-clear">Default</a>
+            <a class="button button-secondary button-clear">Secondary</a>
+            <a class="button button-primary button-clear">Primary</a>
+            <a class="button button-info button-clear">Info</a>
+            <a class="button button-success button-clear">Success</a>
+            <a class="button button-warning button-clear">Warning</a>
+            <a class="button button-danger button-clear">Danger</a>
+            <a class="button button-dark button-clear">Dark</a>
+          </p>
+
+          <h3>Clear (.button-block override)</h3>
+          <p>
+            <a class="button button-default button-clear button-block">Default</a>
+            <a class="button button-secondary button-clear button-block">Secondary</a>
+            <a class="button button-primary button-clear button-block">Primary</a>
+            <a class="button button-info button-clear button-block">Info</a>
+            <a class="button button-success button-clear button-block">Success</a>
+            <a class="button button-warning button-clear button-block">Warning</a>
+            <a class="button button-danger button-clear button-block">Danger</a>
+            <a class="button button-dark button-clear button-block">Dark</a>
+          </p>
+
+          <p>
+            <a class="button button-secondary" href="index.html">Homepage</a>
+          </p>
+
+        </div>
+
+        <h3>Default (Block w/out padded)</h3>
         <p>
           <a class="button button-default">Default</a>
           <a class="button button-secondary">Secondary</a>
@@ -28,78 +118,16 @@
           <a class="button button-dark">Dark</a>
         </p>
 
-        <h3>Inline (.button-inline override)</h3>
-        <p>
-          <a class="button button-default button-inline">Default</a>
-          <a class="button button-secondary button-inline">Secondary</a>
-          <a class="button button-primary button-inline">Primary</a>
-          <a class="button button-info button-inline">Info</a>
-          <a class="button button-success button-inline">Success</a>
-          <a class="button button-warning button-inline">Warning</a>
-          <a class="button button-danger button-inline">Danger</a>
-          <a class="button button-dark button-inline">Dark</a>
-        </p>
-
-        <h3>Icon (Inline Default)</h3>
-        <p>
-          <a class="button button-icon"><i class="icon-home"></i></a>
-        </p>
-
-        <h3>Icon (.button-block override)</h3>
-        <p>
-          <a class="button button-icon button-block"><i class="icon-home"></i></a>
-        </p>
-
-        <h3>Outline (Inline Default)</h3>
-        <p>
-          <a class="button button-default button-outline">Default</a>
-          <a class="button button-secondary button-outline">Secondary</a>
-          <a class="button button-primary button-outline">Primary</a>
-          <a class="button button-info button-outline">Info</a>
-          <a class="button button-success button-outline">Success</a>
-          <a class="button button-warning button-outline">Warning</a>
-          <a class="button button-danger button-outline">Danger</a>
-          <a class="button button-dark button-outline">Dark</a>
-        </p>
-
-        <h3>Outline (.button-block override)</h3>
-        <p>
-          <a class="button button-default button-outline button-block">Default</a>
-          <a class="button button-secondary button-outline button-block">Secondary</a>
-          <a class="button button-primary button-outline button-block">Primary</a>
-          <a class="button button-info button-outline button-block">Info</a>
-          <a class="button button-success button-outline button-block">Success</a>
-          <a class="button button-warning button-outline button-block">Warning</a>
-          <a class="button button-danger button-outline button-block">Danger</a>
-          <a class="button button-dark button-outline button-block">Dark</a>
-        </p>
-
-        <h3>Clear (Inline Default)</h3>
-        <p>
-          <a class="button button-default button-clear">Default</a>
-          <a class="button button-secondary button-clear">Secondary</a>
-          <a class="button button-primary button-clear">Primary</a>
-          <a class="button button-info button-clear">Info</a>
-          <a class="button button-success button-clear">Success</a>
-          <a class="button button-warning button-clear">Warning</a>
-          <a class="button button-danger button-clear">Danger</a>
-          <a class="button button-dark button-clear">Dark</a>
-        </p>
-
-        <h3>Clear (.button-block override)</h3>
-        <p>
-          <a class="button button-default button-clear button-block">Default</a>
-          <a class="button button-secondary button-clear button-block">Secondary</a>
-          <a class="button button-primary button-clear button-block">Primary</a>
-          <a class="button button-info button-clear button-block">Info</a>
-          <a class="button button-success button-clear button-block">Success</a>
-          <a class="button button-warning button-clear button-block">Warning</a>
-          <a class="button button-danger button-clear button-block">Danger</a>
-          <a class="button button-dark button-clear button-block">Dark</a>
-        </p>
-
-        <p>
-          <a class="button button-secondary" href="index.html">Homepage</a>
+        <h3>Default (Block w/out padded and parent .inset)</h3>
+        <p class="inset">
+          <a class="button button-default">Default</a>
+          <a class="button button-secondary">Secondary</a>
+          <a class="button button-primary">Primary</a>
+          <a class="button button-info">Info</a>
+          <a class="button button-success">Success</a>
+          <a class="button button-warning">Warning</a>
+          <a class="button button-danger">Danger</a>
+          <a class="button button-dark">Dark</a>
         </p>
 
       </main>