brainworxx/kreXX-TYPO3-Extension

View on GitHub
Resources/Private/Css/Includes/_tables.scss

Summary

Maintainability
Test Coverage
.krexx-backend {
  .table-wrapper {
    background-color: $white;
    border: 1px solid $grey-15;
    border-radius: 2px;

    &.formtable {
      max-width: 750px;
    }

    table {
      width: 100%;
      max-width: 100%;

      * {
        font-size: 12px;
      }

      th {
        padding: 6px;
        margin-top: 15px;
        border-bottom: 1px solid $grey-15;
        text-align: left;

        &.time {
          width: 110px;
        }

        &.size {
          width: 80px;
        }

        &.delete {
          width: 32px;
        }

        &.filename {
          width: 250px;
        }
      }

      thead tr {
        background-color: $grey-05;
      }

      tr {
        border-bottom: 1px solid $grey-15;

        &:last-child {
          border-bottom: none;
        }

        &:nth-child(even) {
          background-color: $white;
        }

        &:hover {
          background-color: $grey-05;

          td {
            background-color: rgba(256, 256, 256, 0.2);
          }
        }
      }

      &.krexx-logs tr {
        border-bottom: 1px solid $grey-20;
      }

      .krexx-data {
        display: table-cell;
        vertical-align: top;
        padding-bottom: 10px;
      }

      .krexx-data-wrapper {
        display: table-row;
        margin-bottom: 5px;
      }

      td {
        padding: 6px 6px 3px 6px;
        vertical-align: top;

        &.description {
          width: 400px;
        }

        &.commands {
          width: 77px;
          max-width: 77px;
          min-width: 77px;
          text-align: right;
        }
        &.td-icon {
          width: 10px;
        }
      }

      @media (max-width: 991px) {
        th.time,
        th.size,
        td.time,
        td.size {
          display: none;
        }
      }

      @media (max-width: 768px) {
        th.meta,
        td.meta,
        td.td-icon {
          display: none;
        }
        td.description {
          max-width: 200px;
        }
      }
    }
  }
}