diff --git a/dist/ratchet.css b/dist/ratchet.css
index 1917776..8253a8e 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -400,11 +400,10 @@ strong {
}
.table-view li {
position: relative;
- padding: 11px 60px 12px 0;
- margin-left: 15px;
- background-image: url("data:image/svg+xml;utf8,");
- background-repeat: repeat-x;
- background-position: bottom;
+ padding: 11px 60px 12px 15px;
+ background-image: url("data:image/svg+xml;utf8,");
+ background-position: 15px 100%;
+ background-repeat: no-repeat;
}
.table-view li:last-child {
background-image: none;
@@ -413,9 +412,12 @@ strong {
position: relative;
display: block;
padding: inherit;
- margin: -11px -60px -12px 0;
+ margin: -11px -60px -12px -15px;
color: inherit;
}
+.table-view li > a:not([class*="button"]):active {
+ background-color: #eee;
+}
.table-view li p {
margin: 0;
}
@@ -439,7 +441,7 @@ strong {
color: #999;
font-weight: 500;
background-color: #fafafa;
- background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,");
+ background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,");
background-position: top, bottom;
}
.table-view .table-view-divider:first-child {
diff --git a/lib/sass/badges.scss b/lib/sass/badges.scss
index b2bf357..0ad6751 100644
--- a/lib/sass/badges.scss
+++ b/lib/sass/badges.scss
@@ -58,11 +58,13 @@
padding-bottom: 2px;
margin: -2px -4px -2px 4px;
}
+
// Styles for filled badges within filled buttons
.button-filled .badge-filled,
[class*="button"]:active .badge-filled {
background-color: rgba(0,0,0,.2);
}
+
// Position badges within block level buttons
// Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always
// stays at true center of button
diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss
index 0f32322..c375ffb 100644
--- a/lib/sass/table-views.scss
+++ b/lib/sass/table-views.scss
@@ -11,11 +11,10 @@
// Pad each table view item and add dividers
li {
position: relative;
- padding: 11px 60px 12px 0; // Given extra right padding to accomodate badges, chevrons or buttons. Extra 1px bottom padding given for hairline divider.
- margin-left: 15px;
+ padding: 11px 60px 12px 15px; // Given extra right padding to accomodate badges, chevrons or buttons. Extra 1px bottom padding given for hairline divider.
background-image: $hairline;
- background-repeat: repeat-x;
- background-position: bottom;
+ background-position: 15px 100%;
+ background-repeat: no-repeat;
// Remove the border from the last table view item
@@ -28,8 +27,12 @@
position: relative;
display: block;
padding: inherit;
- margin: -11px -60px -12px 0;
+ margin: -11px -60px -12px -15px; // Make the entire list item tappable.
color: inherit;
+
+ &:active {
+ background-color: #eee;
+ }
}
p {
diff --git a/lib/sass/variables.scss b/lib/sass/variables.scss
index 42f5324..6c92e48 100644
--- a/lib/sass/variables.scss
+++ b/lib/sass/variables.scss
@@ -47,4 +47,4 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
// --------------------------------------------------
// Hairline dividers (.5px tall for retina devices.)
-$hairline: url("data:image/svg+xml;utf8,"); // Thanks to @madrobby
+$hairline: url("data:image/svg+xml;utf8,"); // Thanks to @madrobby