blaze/scss/components.tables.scss

@import "mixins/settings.global";
@import "mixins/objects.grid";

.c-table {
  @include grid;
  @include grid--wrap;
  width: $table-width;
  margin: $table-margin;
  padding: $table-padding;
  border: $table-border;
  border-collapse: collapse;
  border-spacing: 0;
}

.c-table__caption {
  @include grid;
  @include grid__cell--full;
  max-width: $table-caption-max-width;
  padding: $table-caption-padding;
  color: $table-caption-color;
  font-size: $table-caption-font-size;
  text-align: $table-caption-text-align;
}

.c-table__row,
.c-table__head,
.c-table__body {
  display: flex;
  flex: 0 0 100%;
  flex-wrap: wrap;
  max-width: 100%;
}

.c-table--striped :not(.c-table__row--heading).c-table__row:nth-of-type(odd) {
  background-color: $table-row-striped-background-color;
  color: $table-row-striped-color;
}

.c-table__cell {
  display: flex;
  flex: 1;
  padding: $table-cell-padding;
  text-align: $table-cell-text-align;
  overflow: auto;
}

.c-table__row--heading .c-table__cell {
  display: flex;
  flex: 1;
  border-bottom: $table-heading-border;
  background-color: $table-heading-background-color;
  color: $table-heading-color;
  font-size: $text-font-size-medium;
  font-weight: $table-heading-font-weight;
}

.c-table--striped .c-table__row--heading .c-table__cell {
  background-color: $table-heading-striped-background-color;
  color: $table-heading-striped-color;
}

.c-table--clickable :not(.c-table__row--heading).c-table__row:hover .c-table__cell,
.c-table__row--clickable:hover .c-table__cell {
  background-color: $table-row-clickable-background-color;
  color: $table-row-clickable-color;
  cursor: pointer;
}

.c-table__row--disabled {
  background-color: $table-row-disabled-background-color;
  color: $table-row-disabled-color;
  cursor: default;
}

.c-table--clickable :not(.c-table__row--heading).c-table__row--disabled:hover .c-table__cell,
.c-table__row--disabled:hover .c-table__cell {
  background-color: $table-row-disabled-background-color;
  color: $table-row-disabled-color;
  cursor: not-allowed;
}

.c-table--condensed {
  font-size: $table-condensed-font-size;

  .c-table__cell {
    padding: $table-condensed-cell-padding;
  }
}