From 1abc1afb3ff1d243ceb9d7c52a5f537e601e1769 Mon Sep 17 00:00:00 2001 From: connors Date: Sat, 19 Oct 2013 13:44:19 -0700 Subject: [PATCH] Adding hairline dividers to table views. --- dist/ratchet.css | 34 +++++++++++++++----------------- lib/sass/table-views.scss | 41 +++++++++++++++++++-------------------- lib/sass/variables.scss | 6 +++++- 3 files changed, 41 insertions(+), 40 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index e5b37c4..94166e4 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -400,18 +400,20 @@ strong { } .table-view li { position: relative; - padding: 11px 60px 11px 0; + padding: 11px 60px 12px 0; margin-left: 15px; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); + background-image: url("data:image/svg+xml;utf8,"); + background-repeat: repeat-x; + background-position: bottom; } .table-view li:last-child { - border-bottom: 0; + background-image: none; } .table-view li > a:not([class*="button"]) { position: relative; display: block; padding: inherit; - margin: -11px -60px -11px 0; + margin: -11px -60px -12px 0; color: inherit; } .table-view li p { @@ -424,28 +426,24 @@ strong { border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 6px; } -.table-view.inset li:first-child { - border-top-width: 0; -} +.table-view.inset li:first-child, .table-view.inset li:last-child { - border-bottom-width: 0; + background-image: none; } .table-view .table-view-divider { - position: relative; - top: -1px; padding-top: 6px; padding-bottom: 6px; padding-left: 15px; + margin-top: -1px; margin-left: 0; + color: #999; font-weight: 500; - background-color: #f8f8f8; - border-top: 1px solid rgba(0, 0, 0, 0.1); - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - opacity: .4; + background-color: #fafafa; + 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 { top: 0; - border-top-width: 0; border-radius: 6px 6px 0 0; } .table-view .table-view-divider:last-child { @@ -453,17 +451,17 @@ strong { } .table-view .chevron, .table-view [class*="button"], -.table-view [class*="count"], +.table-view [class*="badge"], .table-view .toggle { position: absolute; top: 50%; right: 10px; } .table-view .chevron, -.table-view [class*="count"] { +.table-view [class*="badge"] { margin-top: -10px; } -.table-view .chevron + [class*="count"] { +.table-view .chevron + [class*="badge"] { right: 30px; } .table-view [class*="button"] { diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss index 9c3334a..7e5fa4d 100644 --- a/lib/sass/table-views.scss +++ b/lib/sass/table-views.scss @@ -11,13 +11,16 @@ // Pad each table view item and add dividers li { position: relative; - padding: 11px 60px 11px 0; // Given extra right padding to accomodate counts, chevrons or buttons + 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; - border-bottom: 1px solid rgba(0, 0, 0, .1); + background-image: $hairline; + background-repeat: repeat-x; + background-position: bottom; + // Remove the border from the last table view item &:last-child { - border-bottom: 0; + background-image: none; } // If a it's a table view of links, make sure the child takes up full table view item tap area (want to avoid selecting child buttons though) @@ -25,7 +28,7 @@ position: relative; display: block; padding: inherit; - margin: -11px -60px -11px 0; + margin: -11px -60px -12px 0; color: inherit; } @@ -46,11 +49,9 @@ border-radius: 6px; // Remove border from first/last standard list items to avoid double border at top/bottom of table views - li:first-child { - border-top-width: 0; - } + li:first-child, li:last-child { - border-bottom-width: 0; + background-image: none; } } @@ -59,22 +60,20 @@ // -------------------------------------------------- .table-view-divider { - position: relative; - top: -1px; padding-top: 6px; padding-bottom: 6px; - padding-left: 15px; + padding-left: 15px; + margin-top: -1px; // Hides the border of the previous list item margin-left: 0; + color: #999; font-weight: $font-weight; - background-color: #f8f8f8; - border-top: 1px solid rgba(0, 0, 0, .1); - border-bottom: 1px solid rgba(0, 0, 0, .1); - opacity: .4; + background-color: #fafafa; + background-image: $hairline, $hairline; + background-position: top, bottom; // Rounding first divider on inset lists and remove border on the top &:first-child { top: 0; - border-top-width: 0; border-radius: 6px 6px 0 0; } @@ -90,21 +89,21 @@ .chevron, [class*="button"], - [class*="count"], + [class*="badge"], .toggle { position: absolute; top: 50%; right: 10px; } - // Position chevrons/counts vertically centered on the right in table view items + // Position chevrons/badges vertically centered on the right in table view items .chevron, - [class*="count"] { + [class*="badge"] { margin-top: -10px; // Half height of chevron } - // Push count over if there's a sibling chevron - .chevron + [class*="count"] { + // Push badge over if there's a sibling chevron + .chevron + [class*="badge"] { right: 30px; } diff --git a/lib/sass/variables.scss b/lib/sass/variables.scss index 3c847f9..aefa203 100644 --- a/lib/sass/variables.scss +++ b/lib/sass/variables.scss @@ -41,4 +41,8 @@ $button-font-size: 14px; // Transitions // -------------------------------------------------- -$timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods \ No newline at end of file +$timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods + +// Misc +// -------------------------------------------------- +$hairline: url("data:image/svg+xml;utf8,");