sanger/sequencescape

// The DataTables styles work with bootstrap, but don't always play great when
// used in combination with other components. These fixed make minor display
// tweaks

.card {
  .dataTables_filter {
    // Bootstrap lets tables be embedded straight in a card, pushing the table
    // right up to the edges. This looks fine for the table itself, which already
    // has its own padding, but the dataTables_filter buts right up against the
    // edge. This adds just a bit of padding. Extending with .card-body has a
    // similar effect, but also adds unnecessary bottom padding which looks a
    // little clunky
    @extend .mr-3;
    @extend .mt-3;
  }

  .dataTables_info {
    // Similar to the above, if presented in a card the 'Showing x of y entries'
    // line butts up against the card borders. In this case we do use card-body
    // as bootstrap is already padding the bottom of the table.
    // I did consider using card-footer, but the content actually only spans
    // half the width of the card. (I'm assuming some other options populate the
    // right-hand side)
    @extend .card-body;
  }
}