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.

108 lines
2.4 KiB

//
// Table views
// --------------------------------------------------
.table-view {
padding: 0;
margin: 0;
list-style: none; // Remove usual bullet styles from table view
background-color: #fff;
// Pad each table view item and add dividers
.table-view-cell {
position: relative;
padding: 11px 15px 12px 15px;
border-bottom: $border-default;
// Remove the border from the last table view item
&:last-child {
border-bottom: 0;
}
// If 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(.btn) {
position: relative;
display: block;
padding: inherit;
margin: -11px -15px -12px -15px; // Make the entire list item tappable.
color: inherit;
&:active {
background-color: #eee;
}
}
p {
margin: 0;
}
}
// Table view dividers
// --------------------------------------------------
.table-view-divider {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
margin-top: -1px; // Hides the border of the previous list item
margin-left: 0;
color: #999;
font-weight: $font-weight;
border-top: $border-default;
border-bottom: $border-default;
background-color: #fafafa;
// Rounding first divider on inset lists and remove border on the top
&:first-child {
top: 0;
border-radius: $border-radius $border-radius 0 0;
}
// Rounding last divider on inset table views
&:last-child {
border-radius: 0 0 $border-radius $border-radius;
}
}
}
// Indented table views
// --------------------------------------------------
.table-view-indented .table-view-cell {
padding-left: 59px;
background-position-x: 59px; // Make room for your left aligned media/icons.
> a:not(.btn) {
margin-left: -59px;
}
> .pull-left,
> a:not(.btn) .pull-left {
position: absolute;
left: 15px;
z-index: 1;
}
}
// Table views in cards
// --------------------------------------------------
.card .table-view li:last-child {
border: 0;
}
// Table views in popovers
// --------------------------------------------------
.popover .table-view {
width: auto;
max-height: 300px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
overflow: auto;
background-color: #fff;
border-radius: $border-radius;
-webkit-overflow-scrolling: touch;
}