diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/_tables.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/_tables.scss | 67 |
1 files changed, 39 insertions, 28 deletions
diff --git a/assets/stylesheets/bootstrap/_tables.scss b/assets/stylesheets/bootstrap/_tables.scss index a652d17..3238439 100644 --- a/assets/stylesheets/bootstrap/_tables.scss +++ b/assets/stylesheets/bootstrap/_tables.scss @@ -99,32 +99,36 @@ @include table-row-variant(active, $table-active-bg); -// Inverse styles +// Dark 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; +.table { + .thead-dark { + th { + color: $table-dark-color; + background-color: $table-dark-bg; + border-color: $table-dark-border-color; + } } -} -.thead-default { - th { - color: $table-head-color; - background-color: $table-head-bg; + .thead-light { + th { + color: $table-head-color; + background-color: $table-head-bg; + border-color: $table-border-color; + } } } -.table-inverse { - color: $table-inverse-color; - background-color: $table-inverse-bg; +.table-dark { + color: $table-dark-color; + background-color: $table-dark-bg; th, td, thead th { - border-color: $table-inverse-border-color; + border-color: $table-dark-border-color; } &.table-bordered { @@ -133,14 +137,14 @@ &.table-striped { tbody tr:nth-of-type(odd) { - background-color: $table-inverse-accent-bg; + background-color: $table-dark-accent-bg; } } &.table-hover { tbody tr { @include hover { - background-color: $table-inverse-hover-bg; + background-color: $table-dark-hover-bg; } } } @@ -149,20 +153,27 @@ // 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. +// Generate series of `.table-responsive-*` classes for configuring the screen +// size of where your table will overflow. .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; + @each $breakpoint in map-keys($grid-breakpoints) { + $next: breakpoint-next($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($next, $grid-breakpoints); + + &#{$infix} { + @include media-breakpoint-down($breakpoint) { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + -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; + } + } } } } |