diff --git a/less/mixins.less b/less/mixins.less index 701ed2cc36..d0a65597e1 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -360,6 +360,37 @@ } } +// Tables +// ------------------------- +.table-row-variant(@state; @background; @border) { + // Exact selectors below required to override `.table-striped` and prevent + // inheritance to nested tables. + .table > thead > tr, + .table > tbody > tr, + .table > tfoot > tr { + > td.@{state}, + > th.@{state}, + &.@{state} > td, + &.@{state} > th { + background-color: @background; + border-color: @border; + } + } + + // Hover states for `.table-hover` + // Note: this is not available for cells or rows within `thead` or `tfoot`. + .table-hover > tbody > tr { + > td.@{state}:hover, + > th.@{state}:hover, + &.@{state}:hover > td { + background-color: darken(@background, 5%); + border-color: darken(@border, 5%); + //background-color: darken(@background, 5%); + //border-color: darken(@border, 5%); + } + } +} + // Button variants // ------------------------- // Easily pump out default styles, as well as :hover, :focus, :active, diff --git a/less/tables.less b/less/tables.less index b3c921dbb4..05c0919234 100644 --- a/less/tables.less +++ b/less/tables.less @@ -164,48 +164,12 @@ table { &.active > th { background-color: @table-bg-active; } - > td.success, - > th.success, - &.success > td, - &.success > th { - background-color: @state-success-bg; - border-color: @state-success-border; - } - > td.danger, - > th.danger, - &.danger > td, - &.danger > th { - background-color: @state-danger-bg; - border-color: @state-danger-border; - } - > td.warning, - > th.warning, - &.warning > td, - &.warning > th { - background-color: @state-warning-bg; - border-color: @state-warning-border; - } } -// 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(@state-success-bg, 5%); - border-color: darken(@state-success-border, 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(@state-warning-bg, 5%); - border-color: darken(@state-warning-border, 5%); - } -} +// Contextual variants +// ------------------- +.table-row-variant(success; @state-success-bg; @state-success-border); + +.table-row-variant(danger; @state-danger-bg; @state-danger-border); + +.table-row-variant(warning; @state-warning-bg; @state-warning-border);