strong-arc/client/less/ui/tables.less

A visual suite for the StrongLoop API Platform

.ui-table {
  width: 100%;
  border-collapse: collapse;

  thead {
    th {
      background-color: @ui-table-header-bg-color;
      color: @ui-table-header-color;
      font-weight: 200;
      border: 1px solid @ui-table-border-color;
      padding: 1rem 1.5rem;

      &.actions {
        border: none;
        background-color: inherit;
        width: 5rem;
      }
    }
  }

  tbody, tfoot {
    td.btn-td {
      padding: 1rem 0;
      margin-left: -0.5rem;
    }

    td.btn-td .ui-btn {
      margin-left: 0;
      margin-right: 0.75rem;
    }

    td.btn-td.text-right .ui-btn {
      margin-left: 0.75remu;
      margin-right: 0;
    }

    tr:not(.ui-sans-tr) {
      td {
        border: 1px solid @ui-table-border-color;
        padding: 1rem 1.5rem;

        &.has-selectable {
          padding: 0;
        }

        .ui-form-group {
          margin: 0;

          .ui-input {
            border: none;
            line-height: 1.6;
            .box-shadow(none);

            &:focus {
              border: none;
            }

            &.skinny {
              width: 9rem;
            }
          }
        }
      }
    }

    tr {
      &.selected {
        td:not(.actions) {
          background-color: @ui-table-cell-hover-bg-color;
          color: @ui-table-cell-hover-color;

          .ui-input {
            background-color: @ui-table-cell-hover-bg-color;
            color: @ui-table-cell-hover-color;
          }

          button {
            color: @ui-table-selectable-btn-color;
          }
        }
      }

      &:hover:not(.selected):not(.has-selected-selectable):not(.ui-sans-tr) {
        td {
          border-bottom: 1px solid @ui-table-row-hover-border-color;
          box-shadow: inset 0 1px 0 0 @ui-table-row-hover-border-color;

          &:first-child {
            border-left: 1px solid @ui-table-row-hover-border-color;
          }

          &:nth-last-child(2) {
            border-right: 1px solid @ui-table-row-hover-border-color;
          }
        }
      }
    }

    td {
      .selectable {
        border: 1px solid transparent;
        height: 100%;
        position: relative;

        &.selected {
          border: 1px solid @ui-table-cell-selected-border-color;

          &.invalid {
            border-color: @ui-msg-error-color;
          }
        }
      }

      .status {
        .ui-popover {
          cursor: pointer;
        }

      }

      &.actions {
        box-shadow: none !important;
        text-align: center;
        border-color: transparent !important;
        vertical-align: middle;
      }
    }
  }

  tfoot {
    td {
      padding: 1.0rem 0;

      .ui-btn {
        margin: 0;
      }
    }
  }

  tbody {
    tr {
      .ui-close {
        display: none;
      }

      &:hover {
        .ui-close {
          display: inline-block;
        }
      }
    }

    td {
      vertical-align: top;
    }
  }
}