From 1f91f4a0bb618741e4abe30b6389a8c8889e19dc Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Fri, 1 Nov 2013 09:02:24 -0500
Subject: [PATCH] thumbnail margin

---
 dist/css/ionic-ios7.css    | 131 +++++++++++++++++++++++-------------
 dist/css/ionic-scoped.css  | 132 ++++++++++++++++++++++++-------------
 dist/css/ionic.css         | 131 +++++++++++++++++++++++-------------
 scss/ionic/_items.scss     |  16 ++---
 scss/ionic/_variables.scss |   1 +
 test/cards.html            |  27 +++++++-
 6 files changed, 295 insertions(+), 143 deletions(-)

diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 017e5965d8..6e17f1c558 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -182,7 +182,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -646,9 +646,12 @@ a.subdued‎ {
   .bar .title a {
     color: inherit; }
   .bar > .button {
-    box-flex: 1;
     -webkit-box-flex: 0;
+    -webkit-flex: 0;
     -moz-box-flex: 0;
+    -moz-flex: 0;
+    -ms-flex: 0;
+    flex: 0;
     z-index: 1;
     margin: 0;
     padding: 2px 8px 0 8px;
@@ -835,9 +838,17 @@ a.subdued‎ {
  * A navigation bar with any number of tab items supported.
  */
 .tabs {
-  box-orient: horizontal;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-direction: normal;
   -webkit-box-orient: horizontal;
-  -moz-box-orient: horizontal;
+  -webkit-flex-direction: horizontal;
+  -moz-flex-direction: horizontal;
+  -ms-flex-direction: horizontal;
+  flex-direction: horizontal;
   background-color: white;
   background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
   border-color: #dddddd;
@@ -845,8 +856,6 @@ a.subdued‎ {
   position: fixed;
   bottom: 0;
   z-index: 5;
-  display: -webkit-box;
-  display: box;
   width: 100%;
   height: 49px;
   border-style: solid;
@@ -906,13 +915,16 @@ a.subdued‎ {
   top: 44px; }
 
 .tab-item {
-  box-flex: 1;
   -webkit-box-flex: 1;
+  -webkit-flex: 1;
   -moz-box-flex: 1;
-  display: block;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: inline-block;
   overflow: hidden;
   box-sizing: border-box;
-  width: 0;
+  margin: auto;
   height: 100%;
   color: inherit;
   text-align: center;
@@ -970,6 +982,16 @@ a.subdued‎ {
   .tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
     color: #444444; }
 
+.item.tabs {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0; }
+  .item.tabs i, .item.tabs .icon {
+    position: relative; }
+
 .menu {
   position: absolute;
   top: 0;
@@ -1273,23 +1295,23 @@ button.item-icon-right:after {
     border-radius: 4px; }
 
 .item-thumbnail-left {
-  padding-left: 95px;
-  min-height: 80px; }
+  padding-left: 105px;
+  min-height: 100px; }
   .item-thumbnail-left img:first-child, .item-thumbnail-left .item-image {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: 10px;
+    left: 10px;
     max-width: 80px;
     max-height: 80px;
     width: 100%; }
 
 .item-thumbnail-right {
-  padding-right: 95px;
-  min-height: 80px; }
+  padding-right: 105px;
+  min-height: 100px; }
   .item-thumbnail-right img:first-child, .item-thumbnail-right .item-image {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: 10px;
+    right: 10px;
     max-width: 80px;
     max-height: 80px;
     width: 100%; }
@@ -1663,7 +1685,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   background-color: white; }
 
 select[multiple],
@@ -1735,7 +1757,7 @@ input[type="checkbox"][readonly] {
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, 0.05s; }
+  transition-delay: 0s, .05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -1750,7 +1772,7 @@ input[type="checkbox"][readonly] {
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: 0.05s, 0s; }
+    transition-delay: .05s, 0s; }
 
 .item-radio {
   padding: 0; }
@@ -2034,7 +2056,7 @@ input[type="range"] {
     .button.button-icon:active, .button.button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px white; }
+      text-shadow: 0px 0px 10px #fff; }
   .button.block, .button.button-full {
     margin-top: 10px;
     margin-bottom: 10px; }
@@ -2076,29 +2098,41 @@ a.button {
   text-decoration: none; }
 
 .button-bar {
-  box-flex: 1;
-  -webkit-box-flex: 1;
-  -moz-box-flex: 1;
-  box-orient: horizontal;
-  -webkit-box-orient: horizontal;
-  -moz-box-orient: horizontal;
   display: -webkit-box;
-  display: box; }
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-box-direction: normal;
+  -webkit-box-orient: horizontal;
+  -webkit-flex-direction: horizontal;
+  -moz-flex-direction: horizontal;
+  -ms-flex-direction: horizontal;
+  flex-direction: horizontal; }
 
 .button-bar > .button {
-  box-flex: 1;
   -webkit-box-flex: 1;
+  -webkit-flex: 1;
   -moz-box-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   display: block;
   overflow: hidden;
-  padding: 8px 16px;
+  padding: 0 16px;
   width: 0;
   border-width: 1px 0px 1px 1px;
   border-radius: 0;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
-  line-height: 15px; }
+  line-height: 13px; }
   .button-bar > .button:first-child {
     border-radius: 2px 0px 0px 2px; }
   .button-bar > .button:last-child {
@@ -2106,14 +2140,23 @@ a.button {
     border-radius: 0px 2px 2px 0px; }
 
 .buttons {
-  box-flex: 1;
-  -webkit-box-flex: 1;
-  -moz-box-flex: 1;
-  box-orient: horizontal;
-  -webkit-box-orient: horizontal;
-  -moz-box-orient: horizontal;
   display: -webkit-box;
-  display: box; }
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-box-direction: normal;
+  -webkit-box-orient: horizontal;
+  -webkit-flex-direction: horizontal;
+  -moz-flex-direction: horizontal;
+  -ms-flex-direction: horizontal;
+  flex-direction: horizontal; }
 
 .badge {
   display: inline-block;
@@ -2392,9 +2435,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin 0.75s linear infinite;
-  animation: spin 0.75s linear infinite; }
+  -webkit-animation: spin .75s linear infinite;
+  -moz-animation: spin .75s linear infinite;
+  animation: spin .75s linear infinite; }
   .icon-loading:before {
     content: "\e144"; }
 
@@ -2407,9 +2450,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin 0.75s linear infinite;
-  animation: spin 0.75s linear infinite; }
+  -webkit-animation: spin .75s linear infinite;
+  -moz-animation: spin .75s linear infinite;
+  animation: spin .75s linear infinite; }
   .icon-refreshing:before {
     content: "\e144"; }
 
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index b852c3aaed..dc2e6a1f23 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -1195,7 +1195,7 @@
   .ionic fieldset {
     margin: 0 2px;
     padding: 0.35em 0.625em 0.75em;
-    border: 1px solid silver; }
+    border: 1px solid #c0c0c0; }
   .ionic legend {
     padding: 0;
     /* 2 */
@@ -1579,9 +1579,12 @@
     .ionic .bar .title a {
       color: inherit; }
     .ionic .bar > .button {
-      box-flex: 1;
       -webkit-box-flex: 0;
+      -webkit-flex: 0;
       -moz-box-flex: 0;
+      -moz-flex: 0;
+      -ms-flex: 0;
+      flex: 0;
       z-index: 1;
       margin: 0;
       padding: 2px 8px 0 8px;
@@ -1749,9 +1752,17 @@
     bottom: 44px;
     display: block; }
   .ionic .tabs {
-    box-orient: horizontal;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-direction: normal;
     -webkit-box-orient: horizontal;
-    -moz-box-orient: horizontal;
+    -webkit-flex-direction: horizontal;
+    -moz-flex-direction: horizontal;
+    -ms-flex-direction: horizontal;
+    flex-direction: horizontal;
     background-color: white;
     background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
     border-color: #dddddd;
@@ -1759,8 +1770,6 @@
     position: fixed;
     bottom: 0;
     z-index: 5;
-    display: -webkit-box;
-    display: box;
     width: 100%;
     height: 49px;
     border-style: solid;
@@ -1818,13 +1827,16 @@
   .ionic .tabs-top {
     top: 44px; }
   .ionic .tab-item {
-    box-flex: 1;
     -webkit-box-flex: 1;
+    -webkit-flex: 1;
     -moz-box-flex: 1;
-    display: block;
+    -moz-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    display: inline-block;
     overflow: hidden;
     box-sizing: border-box;
-    width: 0;
+    margin: auto;
     height: 100%;
     color: inherit;
     text-align: center;
@@ -1874,6 +1886,15 @@
       color: #f0b840; }
     .ionic .tab-item.active.tab-item-dark, .ionic .tab-item:active.tab-item-dark {
       color: #444444; }
+  .ionic .item.tabs {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flexbox;
+    display: flex;
+    padding: 0; }
+    .ionic .item.tabs i, .ionic .item.tabs .icon {
+      position: relative; }
   .ionic .menu {
     position: absolute;
     top: 0;
@@ -2151,22 +2172,22 @@
       width: 100%;
       border-radius: 4px; }
   .ionic .item-thumbnail-left {
-    padding-left: 95px;
-    min-height: 80px; }
+    padding-left: 105px;
+    min-height: 100px; }
     .ionic .item-thumbnail-left img:first-child, .ionic .item-thumbnail-left .item-image {
       position: absolute;
-      top: 0;
-      left: 0;
+      top: 10px;
+      left: 10px;
       max-width: 80px;
       max-height: 80px;
       width: 100%; }
   .ionic .item-thumbnail-right {
-    padding-right: 95px;
-    min-height: 80px; }
+    padding-right: 105px;
+    min-height: 100px; }
     .ionic .item-thumbnail-right img:first-child, .ionic .item-thumbnail-right .item-image {
       position: absolute;
-      top: 0;
-      right: 0;
+      top: 10px;
+      right: 10px;
       max-width: 80px;
       max-height: 80px;
       width: 100%; }
@@ -2487,7 +2508,7 @@
   .ionic input[type="file"] {
     line-height: 34px; }
   .ionic select {
-    border: 1px solid #cccccc;
+    border: 1px solid #ccc;
     background-color: white; }
   .ionic select[multiple],
   .ionic select[size] {
@@ -2536,7 +2557,7 @@
       border-radius: 50%;
       background: white;
       content: ' ';
-      transition: background-color 0.1s ease-in-out; }
+      transition: background-color .1s ease-in-out; }
   .ionic .checkbox input:after {
     position: absolute;
     top: 34%;
@@ -2549,7 +2570,7 @@
     border-right: 0;
     content: ' ';
     opacity: 0;
-    transition: opacity 0.05s ease-in-out;
+    transition: opacity .05s ease-in-out;
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg); }
   .ionic .checkbox input:checked:before {
@@ -2900,7 +2921,7 @@
       .ionic .button.button-icon:active, .ionic .button.button-icon.active {
         background: none;
         box-shadow: none;
-        text-shadow: 0px 0px 10px white; }
+        text-shadow: 0px 0px 10px #fff; }
     .ionic .button.block, .ionic .button.button-full {
       margin-top: 10px;
       margin-bottom: 10px; }
@@ -2935,42 +2956,63 @@
   .ionic a.button {
     text-decoration: none; }
   .ionic .button-bar {
-    box-flex: 1;
-    -webkit-box-flex: 1;
-    -moz-box-flex: 1;
-    box-orient: horizontal;
-    -webkit-box-orient: horizontal;
-    -moz-box-orient: horizontal;
     display: -webkit-box;
-    display: box; }
-  .ionic .button-bar > .button {
-    box-flex: 1;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flexbox;
+    display: flex;
     -webkit-box-flex: 1;
+    -webkit-flex: 1;
     -moz-box-flex: 1;
+    -moz-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -webkit-flex-direction: horizontal;
+    -moz-flex-direction: horizontal;
+    -ms-flex-direction: horizontal;
+    flex-direction: horizontal; }
+  .ionic .button-bar > .button {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -moz-box-flex: 1;
+    -moz-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
     display: block;
     overflow: hidden;
-    padding: 8px 16px;
+    padding: 0 16px;
     width: 0;
     border-width: 1px 0px 1px 1px;
     border-radius: 0;
     text-align: center;
     text-overflow: ellipsis;
     white-space: nowrap;
-    line-height: 15px; }
+    line-height: 13px; }
     .ionic .button-bar > .button:first-child {
       border-radius: 2px 0px 0px 2px; }
     .ionic .button-bar > .button:last-child {
       border-right-width: 1px;
       border-radius: 0px 2px 2px 0px; }
   .ionic .buttons {
-    box-flex: 1;
-    -webkit-box-flex: 1;
-    -moz-box-flex: 1;
-    box-orient: horizontal;
-    -webkit-box-orient: horizontal;
-    -moz-box-orient: horizontal;
     display: -webkit-box;
-    display: box; }
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -moz-box-flex: 1;
+    -moz-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -webkit-flex-direction: horizontal;
+    -moz-flex-direction: horizontal;
+    -ms-flex-direction: horizontal;
+    flex-direction: horizontal; }
   .ionic .badge {
     display: inline-block;
     min-width: 10px;
@@ -3166,9 +3208,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin 0.75s linear infinite;
-    -moz-animation: spin 0.75s linear infinite;
-    animation: spin 0.75s linear infinite; }
+    -webkit-animation: spin .75s linear infinite;
+    -moz-animation: spin .75s linear infinite;
+    animation: spin .75s linear infinite; }
     .ionic .icon-loading:before {
       content: "\e144"; }
   .ionic .icon-refreshing {
@@ -3180,9 +3222,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin 0.75s linear infinite;
-    -moz-animation: spin 0.75s linear infinite;
-    animation: spin 0.75s linear infinite; }
+    -webkit-animation: spin .75s linear infinite;
+    -moz-animation: spin .75s linear infinite;
+    animation: spin .75s linear infinite; }
     .ionic .icon-refreshing:before {
       content: "\e144"; }
   .ionic .hidden,
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 5b9d1366c6..f4e11b13a8 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1521,7 +1521,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -2015,9 +2015,12 @@ a.subdued‎ {
   .bar .title a {
     color: inherit; }
   .bar > .button {
-    box-flex: 1;
     -webkit-box-flex: 0;
+    -webkit-flex: 0;
     -moz-box-flex: 0;
+    -moz-flex: 0;
+    -ms-flex: 0;
+    flex: 0;
     z-index: 1;
     margin: 0;
     padding: 2px 8px 0 8px;
@@ -2204,9 +2207,17 @@ a.subdued‎ {
  * A navigation bar with any number of tab items supported.
  */
 .tabs {
-  box-orient: horizontal;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-direction: normal;
   -webkit-box-orient: horizontal;
-  -moz-box-orient: horizontal;
+  -webkit-flex-direction: horizontal;
+  -moz-flex-direction: horizontal;
+  -ms-flex-direction: horizontal;
+  flex-direction: horizontal;
   background-color: white;
   background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
   border-color: #dddddd;
@@ -2214,8 +2225,6 @@ a.subdued‎ {
   position: fixed;
   bottom: 0;
   z-index: 5;
-  display: -webkit-box;
-  display: box;
   width: 100%;
   height: 49px;
   border-style: solid;
@@ -2275,13 +2284,16 @@ a.subdued‎ {
   top: 44px; }
 
 .tab-item {
-  box-flex: 1;
   -webkit-box-flex: 1;
+  -webkit-flex: 1;
   -moz-box-flex: 1;
-  display: block;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: inline-block;
   overflow: hidden;
   box-sizing: border-box;
-  width: 0;
+  margin: auto;
   height: 100%;
   color: inherit;
   text-align: center;
@@ -2339,6 +2351,16 @@ a.subdued‎ {
   .tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
     color: #444444; }
 
+.item.tabs {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0; }
+  .item.tabs i, .item.tabs .icon {
+    position: relative; }
+
 .menu {
   position: absolute;
   top: 0;
@@ -2676,23 +2698,23 @@ button.item-icon-right:after {
     border-radius: 4px; }
 
 .item-thumbnail-left {
-  padding-left: 95px;
-  min-height: 80px; }
+  padding-left: 105px;
+  min-height: 100px; }
   .item-thumbnail-left img:first-child, .item-thumbnail-left .item-image {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: 10px;
+    left: 10px;
     max-width: 80px;
     max-height: 80px;
     width: 100%; }
 
 .item-thumbnail-right {
-  padding-right: 95px;
-  min-height: 80px; }
+  padding-right: 105px;
+  min-height: 100px; }
   .item-thumbnail-right img:first-child, .item-thumbnail-right .item-image {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: 10px;
+    right: 10px;
     max-width: 80px;
     max-height: 80px;
     width: 100%; }
@@ -3066,7 +3088,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   background-color: white; }
 
 select[multiple],
@@ -3121,7 +3143,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color 0.1s ease-in-out; }
+    transition: background-color .1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -3136,7 +3158,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity 0.05s ease-in-out;
+  transition: opacity .05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -3515,7 +3537,7 @@ input[type="range"] {
     .button.button-icon:active, .button.button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px white; }
+      text-shadow: 0px 0px 10px #fff; }
   .button.block, .button.button-full {
     margin-top: 10px;
     margin-bottom: 10px; }
@@ -3557,29 +3579,41 @@ a.button {
   text-decoration: none; }
 
 .button-bar {
-  box-flex: 1;
-  -webkit-box-flex: 1;
-  -moz-box-flex: 1;
-  box-orient: horizontal;
-  -webkit-box-orient: horizontal;
-  -moz-box-orient: horizontal;
   display: -webkit-box;
-  display: box; }
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-box-direction: normal;
+  -webkit-box-orient: horizontal;
+  -webkit-flex-direction: horizontal;
+  -moz-flex-direction: horizontal;
+  -ms-flex-direction: horizontal;
+  flex-direction: horizontal; }
 
 .button-bar > .button {
-  box-flex: 1;
   -webkit-box-flex: 1;
+  -webkit-flex: 1;
   -moz-box-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
   display: block;
   overflow: hidden;
-  padding: 8px 16px;
+  padding: 0 16px;
   width: 0;
   border-width: 1px 0px 1px 1px;
   border-radius: 0;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
-  line-height: 15px; }
+  line-height: 13px; }
   .button-bar > .button:first-child {
     border-radius: 2px 0px 0px 2px; }
   .button-bar > .button:last-child {
@@ -3587,14 +3621,23 @@ a.button {
     border-radius: 0px 2px 2px 0px; }
 
 .buttons {
-  box-flex: 1;
-  -webkit-box-flex: 1;
-  -moz-box-flex: 1;
-  box-orient: horizontal;
-  -webkit-box-orient: horizontal;
-  -moz-box-orient: horizontal;
   display: -webkit-box;
-  display: box; }
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-box-direction: normal;
+  -webkit-box-orient: horizontal;
+  -webkit-flex-direction: horizontal;
+  -moz-flex-direction: horizontal;
+  -ms-flex-direction: horizontal;
+  flex-direction: horizontal; }
 
 .badge {
   display: inline-block;
@@ -3978,9 +4021,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin 0.75s linear infinite;
-  animation: spin 0.75s linear infinite; }
+  -webkit-animation: spin .75s linear infinite;
+  -moz-animation: spin .75s linear infinite;
+  animation: spin .75s linear infinite; }
   .icon-loading:before {
     content: "\e144"; }
 
@@ -3993,9 +4036,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin 0.75s linear infinite;
-  animation: spin 0.75s linear infinite; }
+  -webkit-animation: spin .75s linear infinite;
+  -moz-animation: spin .75s linear infinite;
+  animation: spin .75s linear infinite; }
   .icon-refreshing:before {
     content: "\e144"; }
 
diff --git a/scss/ionic/_items.scss b/scss/ionic/_items.scss
index 06400caa6a..c17607d90e 100644
--- a/scss/ionic/_items.scss
+++ b/scss/ionic/_items.scss
@@ -275,13 +275,13 @@ button.item-icon-right:after {
 // -------------------------------
 
 .item-thumbnail-left {
-  padding-left: $item-thumbnail-width + $item-padding;
-  min-height: $item-thumbnail-height;
+  padding-left: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
+  min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
 
   img:first-child, .item-image {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: $item-thumbnail-margin;
+    left: $item-thumbnail-margin;
     max-width: $item-thumbnail-width;
     max-height: $item-thumbnail-height;
     width: 100%;
@@ -289,13 +289,13 @@ button.item-icon-right:after {
 }
 
 .item-thumbnail-right {
-  padding-right: $item-thumbnail-width + $item-padding;
-  min-height: $item-thumbnail-height;
+  padding-right: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
+  min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
 
   img:first-child, .item-image {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: $item-thumbnail-margin;
+    right: $item-thumbnail-margin;
     max-width: $item-thumbnail-width;
     max-height: $item-thumbnail-height;
     width: 100%;
diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss
index 7536ea7ee4..be282691d2 100644
--- a/scss/ionic/_variables.scss
+++ b/scss/ionic/_variables.scss
@@ -411,6 +411,7 @@ $item-avitar-height:           40px !default;
 
 $item-thumbnail-width:         80px !default;
 $item-thumbnail-height:        80px !default;
+$item-thumbnail-margin:        10px !default;
 
 
 // Icons
diff --git a/test/cards.html b/test/cards.html
index 2891b3ab0f..881f0edc8b 100644
--- a/test/cards.html
+++ b/test/cards.html
@@ -95,6 +95,18 @@
             <p>November 05, 1955</p>
           </div>
 
+          <div class="item item-thumbnail-left">
+            <img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
+            <h2>Marty McFly</h2>
+            <p>November 05, 1955</p>
+          </div>
+
+          <div class="item item-thumbnail-right">
+            <img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
+            <h2>Marty McFly</h2>
+            <p>November 05, 1955</p>
+          </div>
+
           <div class="item item-body">
             <img class="full-image" src="http://paulaubin.com/wp/wp-content/uploads/2012/05/back-to-the-future-delorean.jpg">
             <p>
@@ -108,8 +120,19 @@
             </p>
           </div>
 
-          <div class="item item-divider">
-            Like Comment Share
+          <div class="item tabs tabs-icon-left">
+            <a class="tab-item">
+              <i class="icon-home"></i>
+              Like
+            </a>
+            <a class="tab-item">
+              <i class="icon-star"></i>
+              Comment
+            </a>
+            <a class="tab-item">
+              <i class="icon-gear-a"></i>
+              Share
+            </a>
           </div>
 
         </div>