440 lines
7.4 KiB
Plaintext
440 lines
7.4 KiB
Plaintext
/* ------------------------------------------------------------------------------
|
|
*
|
|
* # Tables component
|
|
*
|
|
* Overrides for tables bootstrap component
|
|
*
|
|
* Version: 1.1
|
|
* Latest update: Oct 20, 2015
|
|
*
|
|
* ---------------------------------------------------------------------------- */
|
|
|
|
|
|
// Base class
|
|
// -------------------------
|
|
|
|
// All table headers are semi-bold
|
|
th {
|
|
font-weight: 500;
|
|
}
|
|
|
|
// Table base
|
|
.table {
|
|
margin-bottom: 0;
|
|
|
|
// Cells
|
|
> thead,
|
|
> tbody,
|
|
> tfoot {
|
|
> tr {
|
|
> th,
|
|
> td {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Lighten border in colored tables or panels
|
|
.panel[class*=bg-] &,
|
|
&[class*=bg-] {
|
|
> thead,
|
|
> tbody,
|
|
> tfoot {
|
|
> tr {
|
|
> th,
|
|
> td {
|
|
border-color: fade(#fff, 20%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
tr {
|
|
&[class*=bg-] {
|
|
> td,
|
|
> th {
|
|
border-color: #fff;
|
|
}
|
|
}
|
|
|
|
> td[class*=bg-],
|
|
> th[class*=bg-] {
|
|
border-color: #fff;
|
|
}
|
|
}
|
|
|
|
|
|
// Custom header bottom border color
|
|
> thead {
|
|
> tr[class*=border-bottom-] {
|
|
> th,
|
|
> td {
|
|
border-bottom-color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Custom body and footer bottom border color
|
|
> tbody,
|
|
> tfoot {
|
|
> tr[class*=border-top-] {
|
|
> th,
|
|
> td {
|
|
border-top-color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Darker border colors for thead and tfoot
|
|
> thead > tr > th {
|
|
border-bottom: 1px solid @table-border-highlight;
|
|
}
|
|
> tfoot > tr > th {
|
|
border-top: 1px solid @table-border-highlight;
|
|
}
|
|
|
|
// Nesting
|
|
.table {
|
|
background-color: @panel-bg;
|
|
}
|
|
}
|
|
|
|
// Add top border in multiple table rows
|
|
.table:not(.table-bordered):not(.table-framed) {
|
|
.table-responsive + .table-responsive > &,
|
|
& + & {
|
|
border-top: 1px solid @table-border-color;
|
|
}
|
|
}
|
|
|
|
// Remove doubled top border if no thead
|
|
.panel-body {
|
|
+ .table,
|
|
+ .table-responsive > .table {
|
|
> tbody:first-child > tr:first-child {
|
|
> td,
|
|
> th {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Inside modal dialog body
|
|
.modal-body {
|
|
+ .table-responsive > .table,
|
|
+ .table {
|
|
border-bottom: 1px solid @table-border-color;
|
|
}
|
|
|
|
// Table responsive div container
|
|
+ .table-responsive {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
// Apply white color to top borders in solid panels
|
|
.panel[class*=bg-] {
|
|
> .panel-body {
|
|
+ .table,
|
|
+ .table-responsive {
|
|
border-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Table borders
|
|
// -------------------------
|
|
|
|
// Solid border
|
|
.table {
|
|
> thead > tr {
|
|
&.border-solid {
|
|
> th,
|
|
> td {
|
|
border-bottom-width: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
> tbody > tr,
|
|
> tfoot > tr {
|
|
&.border-solid {
|
|
> td,
|
|
> th {
|
|
border-top-width: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-bordered {
|
|
> thead > tr {
|
|
&.border-solid:first-child {
|
|
> th,
|
|
> td {
|
|
border-bottom-width: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Double border
|
|
.table {
|
|
> thead > tr {
|
|
&.border-double {
|
|
> th,
|
|
> td {
|
|
border-bottom-width: 3px;
|
|
border-bottom-style: double;
|
|
}
|
|
}
|
|
}
|
|
|
|
> tbody > tr,
|
|
> tfoot > tr {
|
|
&.border-double {
|
|
> td,
|
|
> th {
|
|
border-top-width: 3px;
|
|
border-top-style: double;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-bordered {
|
|
> thead > tr.border-double:first-child {
|
|
> th,
|
|
> td {
|
|
border-bottom-width: 3px;
|
|
border-bottom-style: double;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Dashed border
|
|
.table {
|
|
> tbody > tr {
|
|
&.border-dashed {
|
|
> td,
|
|
> th {
|
|
border-top-style: dashed;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Framed table
|
|
.table-framed {
|
|
&,
|
|
.panel > &,
|
|
.panel > .table-responsive > & {
|
|
border: 1px solid @table-border-color;
|
|
}
|
|
|
|
// Hide border on mobile
|
|
@media screen and (max-width: @screen-xs-max) {
|
|
.table-responsive > & {
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Borderless table
|
|
.table-borderless {
|
|
> tbody {
|
|
> tr {
|
|
> td,
|
|
> th {
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Columned table
|
|
.table-columned {
|
|
> tbody,
|
|
> tfoot {
|
|
> tr {
|
|
> td,
|
|
> th {
|
|
border: 0;
|
|
border-left: 1px solid @table-border-color;
|
|
|
|
&:first-child {
|
|
border-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> thead {
|
|
> tr {
|
|
> th,
|
|
> td {
|
|
border-left: 1px solid @table-border-color;
|
|
|
|
&:first-child {
|
|
border-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Table sizing
|
|
// -------------------------
|
|
|
|
// XLarge
|
|
.table-xlg {
|
|
> thead,
|
|
> tbody,
|
|
> tfoot {
|
|
> tr {
|
|
> th,
|
|
> td {
|
|
padding: @table-xlarge-cell-padding;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Large
|
|
.table-lg {
|
|
> thead,
|
|
> tbody,
|
|
> tfoot {
|
|
> tr {
|
|
> th,
|
|
> td {
|
|
padding: @table-large-cell-padding;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Small
|
|
.table-sm {
|
|
> thead,
|
|
> tbody,
|
|
> tfoot {
|
|
> tr {
|
|
> th,
|
|
> td {
|
|
padding: @table-small-cell-padding;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Mini
|
|
.table-xs {
|
|
> thead,
|
|
> tbody,
|
|
> tfoot {
|
|
> tr {
|
|
> th,
|
|
> td {
|
|
padding: @table-mini-cell-padding;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Extra mini
|
|
.table-xxs {
|
|
> thead,
|
|
> tbody,
|
|
> tfoot {
|
|
> tr {
|
|
> th,
|
|
> td {
|
|
padding: @table-micro-cell-padding;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Bordered table
|
|
// -------------------------
|
|
|
|
.table-bordered {
|
|
tr:first-child {
|
|
> td,
|
|
> th {
|
|
border-top-color: @table-border-highlight;
|
|
}
|
|
}
|
|
|
|
// Inside colored table elements
|
|
tr[class*=bg-] > th,
|
|
tr[class*=bg-] > td,
|
|
tr > th[class*=bg-],
|
|
tr > td[class*=bg-] {
|
|
border-color: #fff;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Striped table
|
|
// -------------------------
|
|
|
|
.table-striped {
|
|
.panel[class*=bg-] & > tbody > tr:nth-child(odd),
|
|
&[class*=bg-] > tbody > tr:nth-child(odd) {
|
|
background-color: fade(#000, 5%);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Hover table
|
|
// -------------------------
|
|
|
|
.table-hover {
|
|
|
|
// Inherit bg color on hover
|
|
> tbody > tr:hover {
|
|
> th,
|
|
> td {
|
|
background-color: inherit;
|
|
}
|
|
}
|
|
|
|
// Inside colored tables
|
|
.panel[class*=bg-] & > tbody > tr:hover,
|
|
&[class*=bg-] > tbody > tr:hover {
|
|
background-color: fade(#000, 10%);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Table backgrounds
|
|
// -------------------------
|
|
|
|
// Change active bg color in colored panel and table
|
|
.panel[class*=bg-] .panel-body > .table,
|
|
.panel[class*=bg-] .panel-body > .table-responsive > .table,
|
|
.table[class*=bg-] {
|
|
.active > th,
|
|
.active > td,
|
|
th.active,
|
|
td.active {
|
|
background-color: fade(#000, 15%);
|
|
}
|
|
}
|