formir/src/less/themes/default/components/table.less

Pure CSS / HTML Framework

.td-style() {
  padding: @table-td-padding;
  text-align: left;
  vertical-align: middle;
  word-wrap: break-word;
  &.@{table-number} {
    text-align: right;
    padding-right: 2rem;
    white-space: nowrap !important;
  }
  &.@{table-bold} {
    font-weight: bold;
  }
  &.@{actions} {
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
    > a, > label {
      display: inline-block;
      cursor: pointer;
      i {
        vertical-align: middle;
      }
      &:hover {
        text-decoration: none;
      }
    }
  }
}

.th-style() {
  color: @color-mute;
  text-transform: uppercase;
  padding: @table-th-padding;
  font-size: @table-th-font-size;
  &.@{table-number} {
    text-align: right;
    padding-right: 2rem;
  }
  &.@{table-bold} {
    font-weight: bold;
  }
  &.@{actions} {
    text-align: right;
  }
}

.th-sticky() {
  background: @table-background;
  z-index: 9;
}

.td-sticky() {
  background: @table-background;
  z-index: 9;
}

.td-disabled() {
  opacity: 0.3;
  pointer-events: none;
}

.td-hover() {
  background-color: @table-tr-bgcolor-hover;
  color: @table-tr-color-hover;
}

.table-mobile-tr() {
}

.table-expanded() {
  .@{td}, td, .@{th}, th {
    background-color: darken(@table-background, 10%);
    + .@{td}, + td, + .@{th}, + th {
      border-left-color: darken(@table-background, 8%);
    }
  }
}
.table-expanded-trigger() {
  background-color: darken(@table-background, 5%);
  + .@{td}, + td, + .@{th}, + th {
    border-left-color: darken(@table-background, 4%);
  }
}

table, .@{table}, .@{inline-table} {
  &.@{text-center} {
    .@{td}, td, .@{th}, th {
      text-align: center !important;
      > span {
        text-align: center !important;
      }
    }
  }

  &.@{text-right} {
    .@{td}, td, .@{th}, th {
      text-align: right !important;
      > span {
        text-align: right !important;
      }
    }
  }
}