Added table-row-variant mixin

This commit is contained in:
ggam 2013-08-14 21:16:45 +02:00
parent 3890ab3987
commit 72a2efb3db
2 changed files with 38 additions and 43 deletions

View File

@ -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,

View File

@ -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);