table {
td, th { border-width: 0; padding: 0.5rem 0.25rem; vertical-align: middle; } tbody tr:nth-of-type(odd) { background-color: transparent; }
}
.table-styled {
@extend .table; @extend .table-striped; box-shadow: 0 5px 10px 0 rgba(0, 35, 75, 0.15); td { font-size: 12px; font-weight: 500; color: rgba(0, 35, 75, 0.5); padding-left: 0.5rem; padding-right: 0.5rem; border-top: 1px solid #f7f7f9; } th { font-size: 10px; font-weight: 500; color: #7f91a5; text-transform: uppercase; padding-left: 0.5rem; padding-right: 0.5rem; }
}
.table-data {
@extend .table; @extend .table-hover; th { font-size: 10px; font-weight: 500; color: $blue-grey; text-transform: uppercase; &:first-of-type { padding-left: 40px; } } th { &:nth-of-type(4) { text-align: center; } &:last-of-type { padding-right: 20px; } } td { font-size: 12px; font-weight: 500; color: $navy-50; &:first-of-type { padding-left: 40px; color: $navy-50; } &:last-of-type { padding-right: 40px; } &:nth-of-type(2) { color: $navy; } &:nth-of-type(5) { text-align: center; } a { text-decoration: underline; @extend .text-info; } }
}
.table-hover tbody tr:hover td {
color: $navy;
} @media (max-width: 768px) {
.table-data { thead { display: none; } tr { display: -webkit-flex; display: -ms-flex; display: flex; flex-wrap: wrap; border-bottom: solid 1px #e0e0e0; padding: 25px 0; td { padding: 0; } td:nth-of-type(2) { min-width: 40px; max-width: 40px; border-right: solid 1px #e0e0e0; line-height: 1; text-transform: uppercase; h2 { margin-bottom: 0; font-size: 2rem; } } td:nth-of-type(3) { min-width: calc(100% - 80px); max-width: 100%; padding-left: 10px; } td:nth-of-type(5) { -ms-flex-order: 3; order: 3; padding-left: 50px; margin-top: -20px; padding-right: 0; &:after { content: "Credits"; margin-right: 10px; } } td:nth-of-type(4) { -ms-flex-order: 4; order: 4; margin-top: -20px; &:before { content: '\2219'; font-size: 30px; line-height: 0; vertical-align: -4px; margin-right: 10px; } } } }
}