Permalink
Fetching contributors…
Cannot retrieve contributors at this time
66 lines (53 sloc) 1.39 KB
/// Global namespace for table component
/// @access public
/// @group table
/// @type string
$DBtable-namespace: "c-table";
// Tables
.#{$DBtable-namespace} {
display: table;
width: 100%;
text-align: left;
&__th, th,
&__td, td {
@include share(padding-top, padding-bottom, $DBbaseline/2);
@include share(padding-left, padding-right, $DBbaseline/4);
}
&__th, th {
font-weight: 400;
color: grayscale(5);
border-bottom: 2px solid color(gray, light);
}
&__row, tr {
border-bottom: 1px solid color(gray, light);
}
// Messaging state modifiers
&__row, tr,
&__td, td {
&--success {
background-color: color(green, light);
}
&--warning {
background-color: color(yellow, light);
}
&--error {
background-color: color(red, light);
}
}
// "Zebra-striped" rows change in color every other row
&--zebra &__row:nth-child(odd),
&--zebra tbody tr:nth-child(odd) {
background-color: color(gray, x-light);
}
// Selectable states also get hover/focus interaction
&--selectable &__row,
&--selectable tbody tr {
&:hover, &:focus,
&.has-focus {
background-color: color(blue, x-light);
}
&.is-selected {
background-color: color(blue, light);
}
}
}