editable-grid/less/grid.less

Bootstrap grid with CRUD functionality.

@import '../node_modules/date-selector/less/datepicker';

// variables
@newRowButtonFontSize: 12px;
@color_table_row_hover: #F5F7D3;
@color_table_header_row: #ecf5ec;

// mixins

// apply to all tables
.editable-header-table, .editable-body-table, .editable-footer-table {
  // set margin-bottom to zero, bootstrap has this set to 20px
  table {
    margin-bottom: 0px;
    table-layout: fixed;
  }

  .alignment-right {
    text-align: right;
  }

  .alignment-center {
    text-align: center;
  }

  .tree-node {
    margin-left: 8px;
    margin-right: 5px;
    vertical-align: middle;
    cursor: pointer;

    &.tree-node-expand {
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 9px solid #666666;

      &:hover {
        border-left-color: black;
      }
    }

    &.tree-node-collapse {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 9px solid #666666;

      &:hover {
        border-top-color: black;
      }
    }

    &.tree-node-none {
    }
  }

  td {
    vertical-align: middle !important;
  }

  table.no-borders {
    border: none !important;
    th, td {
      border: none !important;
    }
    thead > tr {
      text-decoration: underline;
      background-color: inherit !important;
    }
  }
}

// header table
.editable-header-table {
  // sorting
  .sorted-ascending {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
  }

  .sorted-descending {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
  }

  th.sortable {
    cursor: pointer;
  }

  thead > tr {
    background-color: @color_table_header_row;
  }
}

// body table
.editable-body-table {
  overflow-y: auto;

  table.table-hover {
    tr {
      cursor: pointer;
    }

    tr:hover > td {
      background-color: @color_table_row_hover;
    }
  }

  td.tree-column, td.delete-column {
    > div {
      display: inline-block;
    }
  }

  .row-delete button.close {
    float: none;
    font-size: inherit;
    opacity: 0.4;
    background-color: inherit;
    margin-right: 5px; // same tree node
  }
}

// footer table
.editable-footer-table {

  button.new-row {
    font-size: @newRowButtonFontSize;
  }
}