formir/src/less/core/components/table.less

Pure CSS / HTML Framework

@include-core-component-table: true;

table, .@{table} {
  width: 100%;
  box-sizing: border-box;
}

.@{table-header-sticky} {
  thead, .@{thead} {
    th, .@{th} {
      top: 0;
      position: sticky !important;
      .th-sticky;
    }
  }
  &.@{table-borders-horizontal}, &.@{table-borders}, .@{table-borders-horizontal}, .@{table-borders} {
    thead, .@{thead} {
      .@{th}, th {
        border-bottom: @table-border;
      }
    }
    tbody, .@{tbody} {
      tr, .@{tr} {
        &:first-child {
          .@{th}, th, .@{td}, td {
            border-top: 0 none;
          }
        }
      }
    }
  }
}

.@{table-footer-sticky} {
  tfoot, .@{tfoot} {
    .@{th}, th, .@{td}, td {
      bottom: 0;
      position: sticky !important;
      .td-sticky;
    }
  }
  &.@{table-borders-horizontal}, &.@{table-borders}, .@{table-borders-horizontal}, .@{table-borders} {
    tfoot, .@{tfoot} {
      .@{th}, th, .@{td}, td {
        border-top: @table-border;
      }
    }
  }
}

.@{table-body-sticky} {
  tbody, .@{tbody} {
    th, .@{th} {
      left: 0;
      position: sticky !important;
      .th-sticky;
    }
  }
  &.@{table-borders-horizontal}, &.@{table-borders} {
    tbody, .@{tbody} {
      .@{th}, th {
        border-right: @table-border;
      }
    }
  }
}

table, .@{table}, .@{inline-table} {
  border-spacing: 0;
  background: @table-background;
  text-align: @table-text-align;

  &.@{table-borders-horizontal} {
    border-bottom: @table-border;
    .@{td}, td, .@{th}, th {
      border-top: @table-border;
    }
  }

  &.@{table-borders-vertical} {
    border-right: @table-border;
    .@{td}, td, .@{th}, th {
      border-left: @table-border;
    }
  }

  &.@{table-borders} {
    border-right: @table-border;
    border-bottom: @table-border;
    .@{td}, td, .@{th}, th {
      border-left: @table-border;
      border-top: @table-border;
    }
  }
  &.@{table-borders-outside} {
    border: @table-border;
  }

  &.@{table-fixed} {
    table-layout: fixed;
  }

  &.@{table-ellipsis} {
    table-layout: fixed;
    .@{td}, td, .@{th}, th {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  @media (min-width: @table-mobile-max-width + 1px) {
    &.@{table-hoverable-td} {
      tbody, .@{tbody} {
        td, .@{td} {
          &:not(.@{table-un-hover}) {
            &:hover, &.hover {
              background-color: @table-td-bgcolor-hover !important;
              color: @table-td-color-hover !important;
              .@{table-on-hover} {
                visibility: visible;
              }
            }
          }
        }
      }
    }

    &.@{table-hoverable-tr} {
      tbody, .@{tbody} {
        tr, .@{tr} {
          &:not(.@{table-un-hover}) {
            &:hover, &.hover {
              td, .@{td} {
                .td-hover;
                .@{table-on-hover} {
                  visibility: visible;
                }
              }
            }
          }
        }
      }
    }
  
    &.@{table-hoverable-col} {
      overflow: hidden;
      col, .@{col}, td, .@{td}, th, .@{th} {
        position: relative;
        span {
          position: relative;
          z-index: 3;
        }
        &:hover, &.hover {
          &:after {
            background-color: @table-col-bgcolor-hover;
            content: '\00a0'; 
            height: 300vh;  
            left: 0;
            position: absolute;  
            top: -100vh;
            width: 100%;
            z-index: 10;
            pointer-events: none;
          }
        }
      }
    }
  }

  &.@{table-zebra-odd} {
    .@{tbody}, tbody {
      .@{tr}, tr {
        &:nth-child(odd) {
          td, .@{td} {
            background-color: @table-zebra-bgcolor;
          }
        }
      }
    }
  }

  &.@{table-zebra-even} {
    .@{tbody}, tbody {
      .@{tr}, tr {
        &:nth-child(even) {
          td, .@{td} {
            background-color: @table-zebra-bgcolor;
          }
        }
      }
    }
  }

  .@{table-on-hover} {
    visibility: hidden;
  }
  tfoot, .@{tfoot}, tbody, .@{tbody} {
    font-size: @table-font-size;
    color: @table-color;
  }
  tbody, .@{tbody} {
    a.@{tr}, a.@{td} {
      color: inherit;
    }
    td:not(.@{actions}) a:not(.@{button}) {
      &:hover {
        text-decoration: underline;
      }
    }
    td, .@{td} {
      a {
        cursor: pointer;
      }
    }
  }
}

.@{overflow-auto}, .@{overflow-scroll} {
  table, .@{table}, .@{inline-table} {
    &.@{table-hoverable-col} {
      overflow: visible;
      col, .@{col}, td, .@{td}, th, .@{th} {
        &:hover, &.hover {
          &:after {
            height: 100vh;  
          }
        }
      }
    }
  }
}
td, .@{td} {
  .td-style;
  &.@{disabled} {
    .td-disabled;
  }
  &.@{table-td-ellipsis} {
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: visible;
    text-overflow: ellipsis;
  }
}
th, .@{th} {
  .th-style;
}
tr, .@{tr} {
  &.@{disabled} {
    .@{td}, td {
      .td-disabled;
    }
  }
}
.@{table-scroll} {
  overflow-y: auto;
  width: 100%;
}
.@{table} {
  display: table;
}
.@{inline-table} {
  display: inline-table;
}
.@{table}, .@{inline-table} {
  .@{tbody} {
    display: table-row-group;
  }
  .@{tfoot} {
    display: table-footer-group;
  }
  .@{thead} {
    display: table-header-group;
  }
  .@{tr} {
    display: table-row;
  }
  .@{td}, .@{th} {
    display: table-cell;
  }
  .@{colgroup} {
    display: table-column-group;
  }
  .@{col} {
    display: table-column;
  }
}

each(@table-td-width-vw-sizes, {
  .@{width}-@{value}-vw {
    width: 10vw;
  }
});

@media (max-width: @table-mobile-max-width) {
  .@{table-mobile} {
    display: block !important;
    width: 100%;
    &.@{table-borders-vertical} {
      td, .@{td}, th, .@{th} {
        &[data-th]:before {
          border-left: @table-border;
          border-right: @table-mobile-td-border;
        }
      }
    }
    &.@{table-borders}, &.@{table-borders-horizontal} {
      tr, .@{tr} {
        border-top: @table-border;
      }
      th, td, .@{th}, .@{td} {
        &:not(:first-child) {
          border-top: @table-mobile-td-border;
        }
      }
    }

    tbody, .@{tbody}, tfoot, .@{tfoot}, tr, .@{tr} {
      display: block;
      width: 100%;
    }
    .@{thead}, thead {
      display: none;
    }
    tr, .@{tr} {
      .table-mobile-tr;
      .@{td}, td {
        display: table;
        table-layout: fixed;
        padding: 0 !important;
        border: 0 none;
        width: 100%;
        &[data-th] {
          &:before {
            content: attr(data-th);
            display: table-cell;
            box-sizing: border-box;
            text-align: left;
            vertical-align: middle;
            .th-style;
            width: @table-mobile-th-width;
            max-width: @table-mobile-th-width;
            padding: @table-mobile-th-padding;
          }
        }
        .@{table-on-hover} {
          visibility: visible;
        }
        > span {
          padding: @table-mobile-td-padding;
          display: table-cell;
          width: @table-mobile-td-width;
          box-sizing: border-box;
          text-align: left;
          vertical-align: middle;
          ~ span {
            width: auto !important;
          }
        }
      }
    }
  }
}

.@{table}, .@{inline-table} {
  .@{expandable-trigger} {
    .@{toggle-show} {
      display: none;
    }
    .@{toggle-hide} {
      display: inline-block;
    }
  }

  .@{expandable-toggler} {
    display: none !important;
    &:checked {
      + .@{expandable-trigger} {
        .@{toggle-show} {
          display: inline-block;
        }
        .@{toggle-hide} {
          display: none;
        }
      }
    }
  }

  .@{expandable-toggler} {
    &:not(:checked) {
      + * {
        &.@{expandable} {
          display: none !important;
        }
        &.@{expandable-trigger} {
          + .@{expandable} {
            display: none !important;
          }
        }
      }
    }
    &:checked {
      + * {
        &.@{expandable} {
          .table-expanded;
        }
        &.@{expandable-trigger} {
          .table-expanded-trigger;
          + .@{expandable} {
            .table-expanded;
          }
        }
      }
    }
  }
}