81 lines
1.1 KiB
SCSS
81 lines
1.1 KiB
SCSS
|
table {
|
||
|
|
tbody .table-expand-row{
|
||
|
|
border-top: $global-border-archive;
|
||
|
|
}
|
||
|
|
th {
|
||
|
|
color: $mid-grey;
|
||
|
|
}
|
||
|
|
th,td {
|
||
|
|
font-weight: normal;
|
||
|
|
padding: $global-padding*1.5;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// --
|
||
|
|
// table expand
|
||
|
|
// https://get.foundation/building-blocks/blocks/table-expand.html
|
||
|
|
|
||
|
|
.table-expand {
|
||
|
|
// margin-top: 5rem;
|
||
|
|
|
||
|
|
td {
|
||
|
|
// color: $dark-gray;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr {
|
||
|
|
// border: 1px solid $light-gray;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-right {
|
||
|
|
// padding-right: 3rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-expand-row {
|
||
|
|
&.is-active {
|
||
|
|
.expand-icon::after {
|
||
|
|
content: '-';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.expand-icon::after {
|
||
|
|
content: '+';
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// this is where the magic happens
|
||
|
|
.table-expand-row-content {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-expand-row-content {
|
||
|
|
&.is-active {
|
||
|
|
display: table-row;
|
||
|
|
animation: fadeIn ease-in 1;
|
||
|
|
animation-fill-mode: both;
|
||
|
|
animation-duration: 0.5s;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-expand-row-nested {
|
||
|
|
column-span: 3;
|
||
|
|
// background-color: $light-gray;
|
||
|
|
&:first-child {
|
||
|
|
column-span: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeIn {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// end table expand
|
||
|
|
// --
|