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,");