mirror of https://github.com/twbs/ratchet.git
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.
133 lines
2.8 KiB
133 lines
2.8 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 with buttons |
|
// -------------------------------------------------- |
|
|
|
.table-view .btn { |
|
margin-top: -1px; // Center the btn inside the cell |
|
} |
|
|
|
|
|
// Table-views with badges |
|
// -------------------------------------------------- |
|
.table-view .badge { |
|
margin-top: 2px; |
|
|
|
&.pull-left { |
|
margin-right: 5px; |
|
} |
|
&.pull-right { |
|
margin-left: 5px; |
|
} |
|
} |
|
|
|
|
|
// Table-views with toggles |
|
// -------------------------------------------------- |
|
|
|
.table-view .toggle { |
|
margin-top: -4px; // Center the toggle inside the cell |
|
} |
|
|
|
|
|
// Table-views with Ratchicons |
|
// -------------------------------------------------- |
|
.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; |
|
} |
|
}
|
|
|