angular.tableview/angular.tableview.material.less

AngularJS TableView

[tableview][theme=material] {
  font-family: sans-serif;
  font-size: .875em;

  margin: 0 15px;
  #scrollable() {
    &::-webkit-scrollbar {
      width: 15px;
      height: 15px;
    }
    &::-webkit-scrollbar-thumb {
      border: 5px solid transparent;
      border-radius: 7px;
      background: rgba(0, 0, 0, 0);
      background-clip: padding-box;
    }
    &:hover::-webkit-scrollbar-thumb {
      border: 5px solid transparent;
      border-radius: 7px;
      background: rgba(0, 0, 0, .1);
      background-clip: padding-box;
    }
    &::-webkit-scrollbar-thumb:horizontal:hover,
    &::-webkit-scrollbar-thumb:vertical:hover {background-color: rgba(0,0,0,.2)}
    &::-webkit-scrollbar-thumb:horizontal:active,
    &::-webkit-scrollbar-thumb:vertical:active{background-color: #31a0e7;}
    &::-webkit-scrollbar-corner {background: transparent}
  }

  border: 1px solid #e9e9e9;
  border-radius: .2em;
  color: #364c5d;
  * {text-overflow: ellipsis; -webkit-overflow-scrolling: touch;}
  thead *, pager * {vertical-align: middle;}
  &.scrollable:not(.-mobile-) {
    .holder.scroller {
      overflow-y: scroll;
      margin-right: -15px;
      #scrollable();
    }
  }
  th, td, pager > * {
    padding: .7142em .3571em;
    &:first-child {
      padding-left: 2.1428em;
    }
    &:last-child {
      padding-right: 2.1428em;
    }
  }
  thead {
    font-weight: bold;
    background: #eef9ff;
    text-transform: uppercase;
    th, td {
      @padding-v: 1.0714em;
      white-space: nowrap;
      padding-top: @padding-v;
      padding-bottom: @padding-v;
      &.filterable {
        & > input {
          display: block;
          box-sizing: border-box;
          overflow: hidden;
          font-size: 1em;
          width: 100%;
          margin-top: @padding-v/2;
          background: transparent;
          border-radius: 0;
          border: 0 none;
          border-top: 1px solid #ddd;
          padding: @padding-v/2 0 0;
          outline: 0 none;
          color: #31a0e7;
          &:hover::-webkit-input-placeholder {opacity: 1; color: #31a0e7;}
          &:focus::-webkit-input-placeholder {opacity: 1; color: #31a0e7;}
          &:hover::-moz-placeholder          {opacity: 1; color: #31a0e7;}
          &:focus::-moz-placeholder          {opacity: 1; color: #31a0e7;}
          &:hover:-ms-input-placeholder      {opacity: 1; color: #31a0e7;}
          &:focus:-ms-input-placeholder      {opacity: 1; color: #31a0e7;}
          &:hover, &:focus, &:valid {
            box-shadow: none;
            border-color: #31a0e7;
          }
        }
      }
    }
  }
  table > tbody {
    & > tr {
      border-top: 1px solid #e9e9e9;
      &.selected {background-color: #ffd;}
      &:hover {
        background: #f5f5f5;
        transition: background .2s;
      }
      & > .editable {
        &.edition {
          & > input,
          & > textarea {
            font-size: 1em;
            font-family: inherit;
            color: inherit;
            display: block;
            width: 100%;
            box-sizing: border-box;
            padding: .3em .6em;
            border: 0 none;
            border-radius: .3em;
            box-shadow: inset 0 0 .4em;
            background: rgba(0, 0, 0, .05);
          }
          & > textarea {overflow: auto; #scrollable(); resize: vertical;}
          & > .message:not(:empty) {
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            margin: 0;
            padding: .6em .8em;
            box-shadow: 0 0 1em rgba(0,0,0,.3);
            background: #4cae4c;
            &:after {
              left: 50%;
              transform: translateX(-50%);
              border-top-color: #4cae4c;
            }
          }
          &.invalid > .message:not(:empty) {
            background: #d9534f;
            &:after {
              border-top-color: #d9534f;
            }
          }
        }
      }
    }
  }
  pager {
    background: #e6e6e6;
    text-shadow: 1px 1px 1px #fff;
    font-weight: bold;
    text-transform: uppercase;
    user-select: none;

    button {
      font-size: 1em;
      position: relative;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: .22em;
      outline: 0 none;
      padding: 0 .5em;
      height: 1.72em;
      vertical-align: middle;
      overflow: hidden;
      color: #364c5d;
      cursor: pointer;
      &:hover {
        background: #fafafa;
      }
      &:disabled {
        cursor: default;
        background: transparent;
      }
    }

    & > .limit {
      &:before {
        content: "Per page";
        font-size: .7142em;
        margin-right: .5em;
      }
      & > select {
        font-size: 1em;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: .22em;
        height: 1.72em;
        padding: 0 0 0 .3em;
        color: #364c5d;
        outline: 0 none;
        cursor: pointer;
        &:hover, &:focus {
          background: #fafafa;
          box-shadow: none;
        }
      }
    }
    & > .selection {
      .selected {font-size: .7142em;}
    }
    & > .controls {
      & > .pageOf {
        font-size: .7142em;
      }
      & > button {
        &.prev, &.next {
          border-radius: 0;
          width: 2.64em;
          overflow: hidden;
          color: transparent;
          &:before {
            content: "<";
            color: #bbb;
            position: absolute;
            left: 0;
            right: 0;
            text-align: center;
            font-weight: bold;
          }
        }
        &.prev {
          border-top-left-radius: .22em;
          border-bottom-left-radius: .22em;
          margin-left: 1em;
          margin-right:-1px;
        }
        &.next {
          border-top-right-radius: .22em;
          border-bottom-right-radius: .22em;
        }
        &.next:before {
          content: ">";
        }
      }
    }
  }
}