Update LESS
This commit is contained in:
Foxaii
@@ -3,242 +3,209 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// BASE TABLES
|
||||
// -----------------
|
||||
|
||||
table {
|
||||
max-width: 100%;
|
||||
background-color: @tableBackground;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
background-color: @table-bg;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// BASELINE STYLES
|
||||
|
||||
// Baseline styles
|
||||
// ---------------
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-bottom: @baseLineHeight;
|
||||
margin-bottom: @line-height-computed;
|
||||
// Cells
|
||||
th,
|
||||
td {
|
||||
padding: 8px;
|
||||
line-height: @baseLineHeight;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid @tableBorder;
|
||||
}
|
||||
th {
|
||||
font-weight: bold;
|
||||
thead,
|
||||
tbody,
|
||||
tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: @table-cell-padding;
|
||||
line-height: @line-height-base;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid @table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Bottom align for column headings
|
||||
thead th {
|
||||
thead > tr > 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;
|
||||
caption + thead,
|
||||
colgroup + thead,
|
||||
thead:first-child {
|
||||
tr:first-child {
|
||||
th, td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Account for multiple tbody instances
|
||||
tbody + tbody {
|
||||
border-top: 2px solid @tableBorder;
|
||||
border-top: 2px solid @table-border-color;
|
||||
}
|
||||
|
||||
// Nesting
|
||||
.table {
|
||||
background-color: @bodyBackground;
|
||||
background-color: @body-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// CONDENSED TABLE W/ HALF PADDING
|
||||
// Condensed table w/ half padding
|
||||
// -------------------------------
|
||||
|
||||
.table-condensed {
|
||||
th,
|
||||
td {
|
||||
padding: 4px 5px;
|
||||
thead,
|
||||
tbody,
|
||||
tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: @table-condensed-cell-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// BORDERED VERSION
|
||||
|
||||
// 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;
|
||||
.border-radius(@baseBorderRadius);
|
||||
th,
|
||||
td {
|
||||
border-left: 1px solid @tableBorder;
|
||||
border: 1px solid @table-border-color;
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
border: 1px solid @table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 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 {
|
||||
.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 {
|
||||
.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 {
|
||||
.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 {
|
||||
.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 {
|
||||
.border-bottom-left-radius(0);
|
||||
}
|
||||
tfoot + tbody:last-child tr:last-child td:last-child {
|
||||
.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 {
|
||||
.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 {
|
||||
.border-top-right-radius(@baseBorderRadius);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// ZEBRA-STRIPING
|
||||
// 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;
|
||||
> tbody {
|
||||
> tr:nth-child(odd) {
|
||||
> td,
|
||||
> th {
|
||||
background-color: @table-bg-accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// HOVER EFFECT
|
||||
|
||||
// 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;
|
||||
> tbody {
|
||||
> tr:hover {
|
||||
> td,
|
||||
> th {
|
||||
background-color: @table-bg-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// TABLE CELL SIZING
|
||||
|
||||
// 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
|
||||
// Reset default table behavior
|
||||
table col[class^="col-"] {
|
||||
float: none;
|
||||
display: table-column;
|
||||
}
|
||||
|
||||
// Change the column widths to account for td/th padding
|
||||
.table td,
|
||||
.table th {
|
||||
&.span1 { .tableColumns(1); }
|
||||
&.span2 { .tableColumns(2); }
|
||||
&.span3 { .tableColumns(3); }
|
||||
&.span4 { .tableColumns(4); }
|
||||
&.span5 { .tableColumns(5); }
|
||||
&.span6 { .tableColumns(6); }
|
||||
&.span7 { .tableColumns(7); }
|
||||
&.span8 { .tableColumns(8); }
|
||||
&.span9 { .tableColumns(9); }
|
||||
&.span10 { .tableColumns(10); }
|
||||
&.span11 { .tableColumns(11); }
|
||||
&.span12 { .tableColumns(12); }
|
||||
table {
|
||||
td,
|
||||
th {
|
||||
&[class^="col-"] {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// TABLE BACKGROUNDS
|
||||
// Table backgrounds
|
||||
// -----------------
|
||||
// Exact selectors below required to override .table-striped
|
||||
// Exact selectors below required to override `.table-striped` and prevent
|
||||
// inheritance to nested tables.
|
||||
|
||||
.table tbody tr {
|
||||
&.success > td {
|
||||
background-color: @successBackground;
|
||||
.table > thead > tr,
|
||||
.table > tbody > tr,
|
||||
.table > tfoot > tr {
|
||||
> td.active,
|
||||
> th.active,
|
||||
&.active > td,
|
||||
&.active > th {
|
||||
background-color: @table-bg-hover;
|
||||
}
|
||||
&.error > td {
|
||||
background-color: @errorBackground;
|
||||
> td.success,
|
||||
> th.success,
|
||||
&.success > td,
|
||||
&.success > th {
|
||||
background-color: @state-success-bg;
|
||||
border-color: @state-success-border;
|
||||
}
|
||||
&.warning > td {
|
||||
background-color: @warningBackground;
|
||||
> td.danger,
|
||||
> th.danger,
|
||||
&.danger > td,
|
||||
&.danger > th {
|
||||
background-color: @state-danger-bg;
|
||||
border-color: @state-danger-border;
|
||||
}
|
||||
&.info > td {
|
||||
background-color: @infoBackground;
|
||||
> td.warning,
|
||||
> th.warning,
|
||||
&.warning > td,
|
||||
&.warning > th {
|
||||
background-color: @state-warning-bg;
|
||||
border-color: @state-warning-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover states for .table-hover
|
||||
.table-hover tbody tr {
|
||||
// Hover states for `.table-hover`
|
||||
// Note: this is not available for cells or rows within `thead` or `tfoot`.
|
||||
.table-hover > tbody > tr {
|
||||
> td.success:hover,
|
||||
> th.success:hover,
|
||||
&.success:hover > td {
|
||||
background-color: darken(@successBackground, 5%);
|
||||
background-color: darken(@state-success-bg, 5%);
|
||||
border-color: darken(@state-success-border, 5%);
|
||||
}
|
||||
&.error:hover > td {
|
||||
background-color: darken(@errorBackground, 5%);
|
||||
> td.danger:hover,
|
||||
> th.danger:hover,
|
||||
&.danger:hover > td {
|
||||
background-color: darken(@state-danger-bg, 5%);
|
||||
border-color: darken(@state-danger-border, 5%);
|
||||
}
|
||||
> td.warning:hover,
|
||||
> th.warning:hover,
|
||||
&.warning:hover > td {
|
||||
background-color: darken(@warningBackground, 5%);
|
||||
}
|
||||
&.info:hover > td {
|
||||
background-color: darken(@infoBackground, 5%);
|
||||
background-color: darken(@state-warning-bg, 5%);
|
||||
border-color: darken(@state-warning-border, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user