diff --git a/components.html b/components.html
index 9d1f400..d3044c3 100644
--- a/components.html
+++ b/components.html
@@ -341,20 +341,20 @@ quis nostrud exercitation ullamco.
@@ -364,20 +364,20 @@ quis nostrud exercitation ullamco.
@@ -390,17 +390,17 @@ quis nostrud exercitation ullamco.
- - Item 1 4
- - Item 2 1
- - Item 3 5
+ - Item 1 4
+ - Item 2 1
+ - Item 3 5
{% highlight html %}
- - Item 1 4
- - Item 2 1
- - Item 3 5
+ - Item 1 4
+ - Item 2 1
+ - Item 3 5
{% endhighlight %}
@@ -413,23 +413,23 @@ quis nostrud exercitation ullamco.
@@ -439,23 +439,23 @@ quis nostrud exercitation ullamco.
@@ -468,19 +468,19 @@ quis nostrud exercitation ullamco.
{% highlight html %}
{% endhighlight %}
@@ -493,19 +493,19 @@ quis nostrud exercitation ullamco.
-
Item 1
-
+
-
Item 2
-
+
-
Item 3
-
+
@@ -516,19 +516,19 @@ quis nostrud exercitation ullamco.
-
Item 1
-
+
-
Item 2
-
+
-
Item 3
-
+
@@ -1043,9 +1043,9 @@ document
@@ -1061,9 +1061,9 @@ document
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 9c4161a..ce77de6 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -423,7 +423,7 @@ p {
}
.table-view .table-view-cell {
position: relative;
- padding: 11px 60px 12px 15px;
+ padding: 11px 15px 12px 15px;
border-bottom: 1px solid #dddddd;
}
.table-view .table-view-cell:last-child {
@@ -433,7 +433,7 @@ p {
position: relative;
display: block;
padding: inherit;
- margin: -11px -60px -12px -15px;
+ margin: -11px -15px -12px -15px;
color: inherit;
}
.table-view .table-view-cell > a:not(.btn):active {
@@ -461,30 +461,6 @@ p {
.table-view .table-view-divider:last-child {
border-radius: 0 0 6px 6px;
}
-.table-view .chevron,
-.table-view .btn,
-.table-view .badge,
-.table-view .toggle {
- position: absolute;
- top: 50%;
- right: 10px;
-}
-.table-view .chevron {
- margin-top: -10px;
-}
-.table-view .badge {
- margin-top: -9px;
-}
-.table-view .chevron + .badge {
- right: 30px;
-}
-.table-view .btn {
- left: auto;
- margin-top: -12px;
-}
-.table-view .toggle {
- margin-top: -15px;
-}
.table-view-indented .table-view-cell {
padding-left: 59px;
@@ -771,27 +747,8 @@ input[type="button"] {
margin-right: 5px;
}
-.chevron {
- display: block;
- height: 20px;
-}
-.chevron:before, .chevron:after {
- position: relative;
- display: block;
- width: 10px;
- height: 3px;
- background-color: #c7c7cc;
- content: '';
-}
-.chevron:before {
- top: 6px;
- -webkit-transform: rotate(45deg);
- transform: rotate(45deg);
-}
-.chevron:after {
- top: 8px;
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
+.table-view .btn {
+ margin-top: -1px;
}
.badge {
@@ -857,6 +814,16 @@ input[type="button"] {
margin-right: 10px;
}
+.table-view .badge {
+ margin-top: 2px;
+}
+.table-view .badge.pull-left {
+ margin-right: 5px;
+}
+.table-view .badge.pull-right {
+ margin-left: 5px;
+}
+
.segmented-control {
position: relative;
display: table;
@@ -1115,6 +1082,10 @@ input[type="button"] {
display: none;
}
+.table-view .toggle {
+ margin-top: -4px;
+}
+
.content.fade {
left: 0;
opacity: 0;
@@ -1242,3 +1213,17 @@ input[type="button"] {
font-size: 24px;
margin-top: 11px;
}
+
+.table-view .icon {
+ margin-top: 3px;
+ font-size: inherit;
+}
+.table-view .icon.icon-left, .table-view .icon.icon-right {
+ color: #bbb;
+}
+.table-view .icon.pull-left {
+ margin-right: 5px;
+}
+.table-view .icon.pull-right {
+ margin-left: 5px;
+}
diff --git a/lib/sass/badges.scss b/lib/sass/badges.scss
index 6807543..be32f3f 100644
--- a/lib/sass/badges.scss
+++ b/lib/sass/badges.scss
@@ -83,3 +83,17 @@
right: 0;
margin-right: 10px;
}
+
+// Ratchicons in table-views
+.table-view {
+ .badge {
+ margin-top: 2px;
+
+ &.pull-left {
+ margin-right: 5px;
+ }
+ &.pull-right {
+ margin-left: 5px;
+ }
+ }
+}
diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss
index 359fb5d..67d7c86 100644
--- a/lib/sass/buttons.scss
+++ b/lib/sass/buttons.scss
@@ -198,3 +198,11 @@ input[type="button"] {
}
}
}
+
+// Buttons in table-views
+// --------------------------------------------------
+.table-view {
+ .btn {
+ margin-top: -1px; // Center the btn inside the cell
+ }
+}
diff --git a/lib/sass/chevrons.scss b/lib/sass/chevrons.scss
deleted file mode 100644
index 43e33bb..0000000
--- a/lib/sass/chevrons.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-//
-// Chevrons
-// --------------------------------------------------
-
-.chevron {
- display: block;
- height: 20px;
-
- // Base styles for both halves of the chevron
- &:before,
- &:after {
- position: relative;
- display: block;
- width: 10px;
- height: 3px;
- background-color: #c7c7cc;
- content: '';
- }
-
- // Position and rotate respective halves of the chevron
- &:before {
- top: 6px;
- @include transform(rotate(45deg));
- }
- &:after {
- top: 8px;
- @include transform(rotate(-45deg));
- }
-}
diff --git a/lib/sass/ratchet.scss b/lib/sass/ratchet.scss
index cb069d7..1704869 100644
--- a/lib/sass/ratchet.scss
+++ b/lib/sass/ratchet.scss
@@ -15,7 +15,6 @@
@import "table-views.scss";
@import "forms.scss";
@import "buttons.scss";
-@import "chevrons.scss";
@import "badges.scss";
@import "segmented-controls.scss";
@import "popovers.scss";
diff --git a/lib/sass/ratchicons.scss b/lib/sass/ratchicons.scss
index 87ba3fd..ae50d8a 100644
--- a/lib/sass/ratchicons.scss
+++ b/lib/sass/ratchicons.scss
@@ -54,4 +54,23 @@
font-size: 24px;
margin-top: 11px;
}
+}
+
+// Ratchicons in table-views
+.table-view {
+ .icon {
+ margin-top: 3px;
+ font-size: inherit;
+
+ &.icon-left,
+ &.icon-right {
+ color: #bbb;
+ }
+ &.pull-left {
+ margin-right: 5px;
+ }
+ &.pull-right {
+ margin-left: 5px;
+ }
+ }
}
\ No newline at end of file
diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss
index b91bc83..d79d911 100644
--- a/lib/sass/table-views.scss
+++ b/lib/sass/table-views.scss
@@ -11,7 +11,7 @@
// Pad each table view item and add dividers
.table-view-cell {
position: relative;
- padding: 11px 60px 12px 15px; // Given extra right padding to accomodate badges, chevrons or buttons. Extra 1px bottom padding given for hairline divider.
+ padding: 11px 15px 12px 15px;
border-bottom: $border-default;
// Remove the border from the last table view item
@@ -23,7 +23,7 @@
position: relative;
display: block;
padding: inherit;
- margin: -11px -60px -12px -15px; // Make the entire list item tappable.
+ margin: -11px -15px -12px -15px; // Make the entire list item tappable.
color: inherit;
&:active {
@@ -61,42 +61,6 @@
border-radius: 0 0 $border-radius $border-radius;
}
}
-
-
- // Right-aligned subcontent in table views (chevrons, buttons, badges and toggles)
- // -------------------------------------------------------------------------------
-
- .chevron,
- .btn,
- .badge,
- .toggle {
- position: absolute;
- top: 50%;
- right: 10px;
- }
-
- // Position chevrons/badges vertically centered on the right in table view items
- .chevron {
- margin-top: -10px; // Half height of chevron
- }
- .badge {
- margin-top: -9px; // Aligned just right
- }
-
- // Push badge over if there's a sibling chevron
- .chevron + .badge {
- right: 30px;
- }
-
- // Position buttons vertically centered on the right in table view items
- .btn {
- left: auto;
- margin-top: -12px; // Half height of button
- }
-
- .toggle {
- margin-top: -15px; // Half height of toggle
- }
}
// Indented table views
diff --git a/lib/sass/toggles.scss b/lib/sass/toggles.scss
index c87a528..419ca37 100644
--- a/lib/sass/toggles.scss
+++ b/lib/sass/toggles.scss
@@ -58,3 +58,12 @@
display: none;
}
}
+
+
+// Toggles in table-views
+// --------------------------------------------------
+.table-view {
+ .toggle {
+ margin-top: -4px; // Center the toggle inside the cell
+ }
+}
diff --git a/one.html b/one.html
index c719fb1..5dc8466 100644
--- a/one.html
+++ b/one.html
@@ -30,9 +30,9 @@