diff options
Diffstat (limited to 'templates/assets/bootstrap/scss/_tables.scss')
| -rw-r--r-- | templates/assets/bootstrap/scss/_tables.scss | 169 |
1 files changed, 169 insertions, 0 deletions
diff --git a/templates/assets/bootstrap/scss/_tables.scss b/templates/assets/bootstrap/scss/_tables.scss new file mode 100644 index 0000000..f041f60 --- /dev/null +++ b/templates/assets/bootstrap/scss/_tables.scss @@ -0,0 +1,169 @@ +// +// Basic Bootstrap table +// + +.table { + width: 100%; + max-width: 100%; + margin-bottom: $spacer; + background-color: $table-bg; // Reset for nesting within parents with `background-color`. + + th, + td { + padding: $table-cell-padding; + vertical-align: top; + border-top: $table-border-width solid $table-border-color; + } + + thead th { + vertical-align: bottom; + border-bottom: (2 * $table-border-width) solid $table-border-color; + } + + tbody + tbody { + border-top: (2 * $table-border-width) solid $table-border-color; + } + + .table { + background-color: $body-bg; + } +} + + +// +// Condensed table w/ half padding +// + +.table-sm { + th, + td { + padding: $table-sm-cell-padding; + } +} + + +// Bordered version +// +// Add borders all around the table and between all the columns. + +.table-bordered { + border: $table-border-width solid $table-border-color; + + th, + td { + border: $table-border-width solid $table-border-color; + } + + thead { + th, + td { + border-bottom-width: (2 * $table-border-width); + } + } +} + + +// Zebra-striping +// +// Default zebra-stripe styles (alternating gray and transparent backgrounds) + +.table-striped { + tbody tr:nth-of-type(odd) { + background-color: $table-bg-accent; + } +} + + +// Hover effect +// +// Placed here since it has to come after the potential zebra striping + +.table-hover { + tbody tr { + @include hover { + background-color: $table-bg-hover; + } + } +} + + +// Table backgrounds +// +// Exact selectors below required to override `.table-striped` and prevent +// inheritance to nested tables. + +// Generate the contextual variants +@include table-row-variant(active, $table-bg-active); +@include table-row-variant(success, $state-success-bg); +@include table-row-variant(info, $state-info-bg); +@include table-row-variant(warning, $state-warning-bg); +@include table-row-variant(danger, $state-danger-bg); + + +// Inverse styles +// +// Same table markup, but inverted color scheme: dark background and light text. + +.thead-inverse { + th { + color: $table-inverse-color; + background-color: $table-inverse-bg; + } +} + +.thead-default { + th { + color: $table-head-color; + background-color: $table-head-bg; + } +} + +.table-inverse { + color: $table-inverse-color; + background-color: $table-inverse-bg; + + th, + td, + thead th { + border-color: $table-inverse-border; + } + + &.table-bordered { + border: 0; + } + + &.table-striped { + tbody tr:nth-of-type(odd) { + background-color: $table-inverse-bg-accent; + } + } + + &.table-hover { + tbody tr { + @include hover { + background-color: $table-inverse-bg-hover; + } + } + } +} + + +// Responsive tables +// +// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by +// enabling horizontal scrolling. Only applies <768px. Everything above that +// will display normally. + +.table-responsive { + @include media-breakpoint-down(md) { + display: block; + width: 100%; + overflow-x: auto; + -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 + + // Prevent double border on horizontal scroll due to use of `display: block;` + &.table-bordered { + border: 0; + } + } +} |
