Non puoi selezionare più di 25 argomenti
Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
235 righe
5.8 KiB
235 righe
5.8 KiB
// |
|
// Tables |
|
// -------------------------------------------------- |
|
|
|
|
|
// BASE TABLES |
|
// ----------------- |
|
|
|
table { |
|
max-width: 100%; |
|
background-color: $tableBackground; |
|
border-collapse: collapse; |
|
border-spacing: 0; |
|
} |
|
|
|
// BASELINE STYLES |
|
// --------------- |
|
|
|
.table { |
|
width: 100%; |
|
margin-bottom: $baseLineHeight; |
|
// Cells |
|
th, |
|
td { |
|
padding: 8px; |
|
line-height: $baseLineHeight; |
|
text-align: left; |
|
vertical-align: top; |
|
border-top: 1px solid $tableBorder; |
|
} |
|
th { |
|
font-weight: bold; |
|
} |
|
// Bottom align for column headings |
|
thead th { |
|
vertical-align: bottom; |
|
} |
|
// Remove top border from thead by default |
|
caption + thead tr:first-child th, |
|
caption + thead tr:first-child td, |
|
colgroup + thead tr:first-child th, |
|
colgroup + thead tr:first-child td, |
|
thead:first-child tr:first-child th, |
|
thead:first-child tr:first-child td { |
|
border-top: 0; |
|
} |
|
// Account for multiple tbody instances |
|
tbody + tbody { |
|
border-top: 2px solid $tableBorder; |
|
} |
|
|
|
// Nesting |
|
.table { |
|
background-color: $bodyBackground; |
|
} |
|
} |
|
|
|
|
|
|
|
// CONDENSED TABLE W/ HALF PADDING |
|
// ------------------------------- |
|
|
|
.table-condensed { |
|
th, |
|
td { |
|
padding: 4px 5px; |
|
} |
|
} |
|
|
|
|
|
// BORDERED VERSION |
|
// ---------------- |
|
|
|
.table-bordered { |
|
border: 1px solid $tableBorder; |
|
border-collapse: separate; // Done so we can round those corners! |
|
*border-collapse: collapse; // IE7 can't round corners anyway |
|
border-left: 0; |
|
@include border-radius($baseBorderRadius); |
|
th, |
|
td { |
|
border-left: 1px solid $tableBorder; |
|
} |
|
// Prevent a double border |
|
caption + thead tr:first-child th, |
|
caption + tbody tr:first-child th, |
|
caption + tbody tr:first-child td, |
|
colgroup + thead tr:first-child th, |
|
colgroup + tbody tr:first-child th, |
|
colgroup + tbody tr:first-child td, |
|
thead:first-child tr:first-child th, |
|
tbody:first-child tr:first-child th, |
|
tbody:first-child tr:first-child td { |
|
border-top: 0; |
|
} |
|
// For first th/td in the first row in the first thead or tbody |
|
thead:first-child tr:first-child > th:first-child, |
|
tbody:first-child tr:first-child > td:first-child, |
|
tbody:first-child tr:first-child > th:first-child { |
|
@include border-top-left-radius($baseBorderRadius); |
|
} |
|
// For last th/td in the first row in the first thead or tbody |
|
thead:first-child tr:first-child > th:last-child, |
|
tbody:first-child tr:first-child > td:last-child, |
|
tbody:first-child tr:first-child > th:last-child { |
|
@include border-top-right-radius($baseBorderRadius); |
|
} |
|
// For first th/td (can be either) in the last row in the last thead, tbody, and tfoot |
|
thead:last-child tr:last-child > th:first-child, |
|
tbody:last-child tr:last-child > td:first-child, |
|
tbody:last-child tr:last-child > th:first-child, |
|
tfoot:last-child tr:last-child > td:first-child, |
|
tfoot:last-child tr:last-child > th:first-child { |
|
@include border-bottom-left-radius($baseBorderRadius); |
|
} |
|
// For last th/td (can be either) in the last row in the last thead, tbody, and tfoot |
|
thead:last-child tr:last-child > th:last-child, |
|
tbody:last-child tr:last-child > td:last-child, |
|
tbody:last-child tr:last-child > th:last-child, |
|
tfoot:last-child tr:last-child > td:last-child, |
|
tfoot:last-child tr:last-child > th:last-child { |
|
@include border-bottom-right-radius($baseBorderRadius); |
|
} |
|
|
|
// Clear border-radius for first and last td in the last row in the last tbody for table with tfoot |
|
tfoot + tbody:last-child tr:last-child td:first-child { |
|
@include border-bottom-left-radius(0); |
|
} |
|
tfoot + tbody:last-child tr:last-child td:last-child { |
|
@include border-bottom-right-radius(0); |
|
} |
|
|
|
// Special fixes to round the left border on the first td/th |
|
caption + thead tr:first-child th:first-child, |
|
caption + tbody tr:first-child td:first-child, |
|
colgroup + thead tr:first-child th:first-child, |
|
colgroup + tbody tr:first-child td:first-child { |
|
@include border-top-left-radius($baseBorderRadius); |
|
} |
|
caption + thead tr:first-child th:last-child, |
|
caption + tbody tr:first-child td:last-child, |
|
colgroup + thead tr:first-child th:last-child, |
|
colgroup + tbody tr:first-child td:last-child { |
|
@include border-top-right-radius($baseBorderRadius); |
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
// ZEBRA-STRIPING |
|
// -------------- |
|
|
|
// Default zebra-stripe styles (alternating gray and transparent backgrounds) |
|
.table-striped { |
|
tbody { |
|
> tr:nth-child(odd) > td, |
|
> tr:nth-child(odd) > th { |
|
background-color: $tableBackgroundAccent; |
|
} |
|
} |
|
} |
|
|
|
|
|
// HOVER EFFECT |
|
// ------------ |
|
// Placed here since it has to come after the potential zebra striping |
|
.table-hover { |
|
tbody { |
|
tr:hover > td, |
|
tr:hover > th { |
|
background-color: $tableBackgroundHover; |
|
} |
|
} |
|
} |
|
|
|
|
|
// TABLE CELL SIZING |
|
// ----------------- |
|
|
|
// Reset default grid behavior |
|
table td[class*="span"], |
|
table th[class*="span"], |
|
.row-fluid table td[class*="span"], |
|
.row-fluid table th[class*="span"] { |
|
display: table-cell; |
|
float: none; // undo default grid column styles |
|
margin-left: 0; // undo default grid column styles |
|
} |
|
|
|
// Change the column widths to account for td/th padding |
|
.table td, |
|
.table th { |
|
@for $i from 1 through 12 { |
|
&.span#{$i} { @include tableColumns($i); } |
|
} |
|
} |
|
|
|
|
|
|
|
// TABLE BACKGROUNDS |
|
// ----------------- |
|
// Exact selectors below required to override .table-striped |
|
|
|
.table tbody tr { |
|
&.success > td { |
|
background-color: $successBackground; |
|
} |
|
&.error > td { |
|
background-color: $errorBackground; |
|
} |
|
&.warning > td { |
|
background-color: $warningBackground; |
|
} |
|
&.info > td { |
|
background-color: $infoBackground; |
|
} |
|
} |
|
|
|
// Hover states for .table-hover |
|
.table-hover tbody tr { |
|
&.success:hover > td { |
|
background-color: darken($successBackground, 5%); |
|
} |
|
&.error:hover > td { |
|
background-color: darken($errorBackground, 5%); |
|
} |
|
&.warning:hover > td { |
|
background-color: darken($warningBackground, 5%); |
|
} |
|
&.info:hover > td { |
|
background-color: darken($infoBackground, 5%); |
|
} |
|
}
|
|
|