@use 'sass:math'; .table { color: $text; border-radius: $radius; border: 1px solid $grey-blue; border-collapse: separate; width: 100%; &:not(.no-mobile-condense) { @media #{$mq-table-overflow} { display: block; overflow-x: auto; } } &.is-fixed { table-layout: fixed; td { text-overflow: ellipsis; overflow: hidden; } } &.is-isolated { margin-bottom: 0; } &.with-foot { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; + .table-foot { margin-bottom: 1.5rem; } } &.is-compact { th, td { padding: 0.75em; } .is-selectable a { padding: 0.75em; } } &.with-collapsed-borders { border-collapse: collapse; } &.is-darkened { tbody tr:not(.is-selected) { background-color: $white-bis; &:hover { background-color: $white-ter; } } &.is-striped { tbody tr:not(.is-selected) { &:nth-child(even) { background-color: $white-ter; &:hover { background-color: darken($white-ter, 5%); } } } } } th, td { padding: 0.75em 1.5em; border: none; &.is-three-quarters { width: 75%; } &.is-two-thirds { width: 66.66%; } &.is-half { width: 50%; } &.is-one-third { width: 33.33%; } &.is-one-quarter { width: 25%; } &.is-truncatable { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } &.is-narrow { padding: 1.25em 0 1.25em 0.5em; & + th, & + td { padding-left: 0.5em; } } &.is-long-text { word-break: break-word; } // Only use px modifiers when text needs to be truncated. // In this and only this scenario are percentages not effective. &.is-200px { width: 200px; max-width: 200px; } @for $i from 1 through 11 { &.is-#{$i} { width: math.div(100%, 12) * $i; max-width: math.div(100%, 12) * $i; } } a { color: $blue; text-decoration: underline; font-weight: $weight-normal; &.is-primary { color: $text; font-weight: $weight-semibold; } } } thead { background: $white-ter; border: 1px solid $grey-blue; tr { &:hover { background-color: inherit; } } td, th { color: $grey-light; font-weight: $weight-normal; vertical-align: bottom; border-bottom: 1px solid $grey-blue; &.is-selectable { padding: 0; a { display: block; padding: 0.75em 1.5em; width: 100%; text-decoration: none; position: relative; &:hover { background-color: darken($white-ter, 5%); } &::before, &::after { position: absolute; pointer-events: none; color: $grey-light; } &::after { transform: translateX(6px); } &::before { transform: translateX(-20px); } } } &.is-active { &.desc a::after { content: '⬆'; } &.asc a::after { content: '⬇'; } &.has-text-right { a::after { content: none; } &.desc a::before { content: '⬆'; } &.asc a::before { content: '⬇'; } } } a { color: $grey; } } } tbody { tr { &.is-interactive { cursor: pointer; box-sizing: border-box; } &.is-active { background: rgba($blue, 0.1); td:first-child { position: relative; &::after { position: absolute; content: ''; width: 3px; top: 0; bottom: 0; left: -1px; display: block; background: $blue; } } } } td.is-subheading { font-weight: $weight-bold; background: $white; color: $blue; } td { border: 1px solid $grey-blue; border-width: 0 0 1px; padding: 1.25em 1.5em; &.is-one-line { white-space: nowrap; } } } .is-faded { color: $grey-light; } } .table tfoot, .table-foot { margin-top: -1px; background: $white-ter; border: 1px solid $grey-blue; border-bottom-right-radius: $radius; border-bottom-left-radius: $radius; overflow: hidden; display: flex; justify-content: space-between; align-items: center; &.with-padding { padding: 6px; } .pagination { padding: 0; margin: 0; } // Field overrides specifically for use of Field within a table foot. // Bulma does a lot of typically helpful layout tweaks at different // breakpoints that are undesirable in this context. .field { margin-bottom: 0; &:first-child { margin-left: 1.5em; } &.is-horizontal { display: flex; } .label, .field-label { color: $grey; flex-basis: 0; flex-grow: 1; flex-shrink: 0; text-align: right; &.is-small { font-size: $size-7; } } .field-body { display: flex; flex-basis: 0; flex-grow: 5; flex-shrink: 1; } } }