components/sass/table.scss
2019-11-22 16:04:26 -05:00

100 lines
1.3 KiB
SCSS

.table {
width: 100%;
position: relative;
th,
td {
overflow: hidden;
&:first-of-type {
padding-left: var(--spacing-l);
}
&:last-of-type {
padding-right: var(--spacing-l);
}
}
thead {
cursor: default;
position: relative;
th {
border-bottom: 1px solid var(--color-border);
}
}
tr {
&:not(:last-of-type) {
td {
border-bottom: 1px solid var(--color-border);
}
}
&:nth-child(2n) {
background-color: var(--color-table-highlight);
}
}
th,
td {
padding: 0.5rem 1rem;
}
}
th {
text-align: left;
}
td {
// white-space: nowrap;
}
.table--fixed {
table-layout: fixed;
}
.table--condensed {
td,
th {
padding: 0.5rem;
&:first-of-type {
padding-left: 0;
}
&:last-of-type {
padding-right: 0;
}
}
tr {
&:nth-child(2n) {
background-color: transparent;
}
}
}
.table__item-label {
font-size: var(--font-multiplier-small);
font-weight: 300;
color: var(--color-text-subtitle);
}
.table__item--align-right {
text-align: right;
}
.table__item--actionable {
vertical-align: middle;
white-space: nowrap;
.button {
vertical-align: top;
height: 2rem;
top: -0.2rem;
padding: var(--spacing-s);
margin-left: var(--spacing-m);
}
}