diff options
author | Mark Otto <markdotto@gmail.com> | 2016-05-12 02:28:28 +0300 |
---|---|---|
committer | Mark Otto <markdotto@gmail.com> | 2016-05-12 02:28:28 +0300 |
commit | d74a897f55ff01258b81e05c94a8126a819b8601 (patch) | |
tree | da0d7dfee345fe04dcf4f02b0526e31e0b1e4bbe /scss | |
parent | 7fa88b3b8af37d05c312af02e0e3d3f47fb06b78 (diff) |
Overhaul tables docs and use rgba() colors for inverse tables
- Add inverse examples for all variants
- Use rgba() colors for hover and accent states for easy usage in inverse styles
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_tables.scss | 48 | ||||
-rw-r--r-- | scss/_variables.scss | 4 |
2 files changed, 29 insertions, 23 deletions
diff --git a/scss/_tables.scss b/scss/_tables.scss index c04e7c9b8a..d865884ec0 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -99,24 +99,9 @@ @include table-row-variant(danger, $state-danger-bg); -// Responsive tables +// Inverse styles // -// Wrap your tables in `.table-responsive` and we'll make them mobile friendly -// by enabling horizontal scrolling. Only applies <768px. Everything above that -// will display normally. - -.table-responsive { - display: block; - width: 100%; - min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) - overflow-x: auto; - - // TODO: find out if we need this still. - // - // border: $table-border-width solid $table-border-color; - // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 -} - +// Same table markup, but inverted color scheme—dark background and light text. .thead-inverse { th { @@ -124,6 +109,7 @@ background-color: $gray-dark; } } + .thead-default { th { color: $gray; @@ -135,15 +121,35 @@ color: $gray-lighter; background-color: $gray-dark; - &.table-bordered { - border: 0; - } - th, td, thead th { border-color: $gray; } + + &.table-bordered { + border: 0; + } +} + + + +// Responsive tables +// +// Wrap your tables in `.table-responsive` and we'll make them mobile friendly +// by enabling horizontal scrolling. Only applies <768px. Everything above that +// will display normally. + +.table-responsive { + display: block; + width: 100%; + min-height: .01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) + overflow-x: auto; + + // TODO: find out if we need this still. + // + // border: $table-border-width solid $table-border-color; + // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 } diff --git a/scss/_variables.scss b/scss/_variables.scss index 5be9795454..a98f4edbe2 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -244,8 +244,8 @@ $table-cell-padding: .75rem !default; $table-sm-cell-padding: .3rem !default; $table-bg: transparent !default; -$table-bg-accent: #f9f9f9 !default; -$table-bg-hover: #f5f5f5 !default; +$table-bg-accent: rgba(0,0,0,.05) !default; +$table-bg-hover: rgba(0,0,0,.075) !default; $table-bg-active: $table-bg-hover !default; $table-border-width: $border-width !default; |