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