Skip to content

Instantly share code, notes, and snippets.

@mplatts
Created May 28, 2014
Embed
What would you like to do?
_table.scss
$table-border: darken($gray-lighter, 10%);
$table-bg: mix($gray-lighter, $white);
.table {
background-color: $table-bg;
border-collapse: separate;
tr > *:first-child {
border-left: solid 1px $table-border;
}
tr > *:last-child {
border-right: solid 1px $table-border;
}
tr:first-child > *:first-child { border-top-left-radius: 4px; }
tr:first-child > *:last-child { border-top-right-radius:4px }
tr:last-child > *:first-child { border-bottom-left-radius:4px }
tr:last-child > *:last-child { border-bottom-right-radius:4px }
tbody {
tr {
&:first-child {
td {
border-top: solid 1px $table-border;
}
}
th {
border-left: solid 1px $table-border;
border-right: solid 1px $table-border;
color: $gray;
}
td, th {
border-top: none;
border-bottom: solid 1px $table-border;
line-height: 20px;
font-size: 13px;
}
img.profile-image {
margin: -2px 5px -2px -2px;
vertical-align: top;
width: 24px;
height: 24px;
border-radius: 4px;
}
.progress {
margin-top: 2px;
}
}
}
.selectable {
cursor: pointer;
font-weight: bold;
position: relative;
&.active, &:hover {
background-color: $secondary;
color: $primary;
text-decoration: none;
border-color: darken($secondary, 10%) !important;
td {
background-color: inherit;
color: inherit;
border-color: inherit;
}
&:not(:first-child) {
td {
position: relative;
&::before {
content: '';
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 1px;
background-color: darken($secondary, 10%) !important;
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment