Build mobile apps with simple HTML, CSS, and JS components. http://goratchet.com/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

114 lines
2.7 KiB

11 years ago
//
// Table views
// --------------------------------------------------
12 years ago
.table-view {
11 years ago
list-style: none; // Remove usual bullet styles from table view
12 years ago
background-color: #fff;
11 years ago
// 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
margin-left: 15px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
// Remove the border from the last table view item
&:last-child {
border-bottom: 0;
}
11 years ago
// If a it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
> a:not([class*="button"]) {
position: relative;
display: block;
padding: inherit;
margin: -11px -60px -11px 0;
color: inherit;
}
11 years ago
}
// Inset table views
// --------------------------------------------------
&.inset {
width: auto;
margin-right: 10px;
margin-left: 10px;
border: 1px solid rgba(0, 0, 0, .15);
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:last-child {
border-bottom-width: 0;
}
}
// Table view dividers
// --------------------------------------------------
.table-view-divider {
position: relative;
top: -1px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
margin-left: 0;
font-weight: bold;
line-height: 18px;
background-color: #f8f8f8;
border-top: 1px solid rgba(0, 0, 0, .1);
border-bottom: 1px solid rgba(0, 0, 0, .1);
// Rounding first divider on inset lists and remove border on the top
&:first-child {
11 years ago
top: 0;
border-top-width: 0;
border-radius: 6px 6px 0 0;
}
// Rounding last divider on inset table views
&:last-child {
11 years ago
border-radius: 0 0 6px 6px;
}
}
// Right-aligned subcontent in table views (chevrons, buttons, counts and toggles)
// -------------------------------------------------------------------------------
.chevron,
[class*="button"],
[class*="count"],
.toggle {
position: absolute;
top: 50%;
right: 10px;
}
// Position chevrons/counts vertically centered on the right in table view items
.chevron,
[class*="count"] {
margin-top: -10px; // Half height of chevron
}
// Push count over if there's a sibling chevron
.chevron + [class*="count"] {
right: 30px;
11 years ago
}
12 years ago
11 years ago
// Position buttons vertically centered on the right in table view items
[class*="button"] {
left: auto;
margin-top: -14px; // Half height of button
}
12 years ago
11 years ago
.toggle {
margin-top: -15px; // Half height of toggle
}
12 years ago
}