viur-ignite-css/less/table.less

Core of VIUR Ignite - a less framework

@charset "UTF-8";
/**
 * TABLES
 */


@tableHeadBackgroundColor:@mainColor;
@tableRowBackgroundColor:#fefefe;


.table {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin: 0 0 15px;
  padding: 0;
  font-size: .8rem; // 80% of body text.
  .shd;
}

.tableHead {}
.tableHead-row {
  background-color:@tableHeadBackgroundColor;
  &:hover {background-color:lighten(@tableHeadBackgroundColor, 10%);}
}
.tableHead-cell {
  border:0px solid darken(@tableHeadBackgroundColor,15%);
  border-width: 1px 1px 1px 0;
  font-weight:bold;
  color:lighten(contrast(@tableHeadBackgroundColor),5%);
  text-align:center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 4px 10px;
  &:first-of-type {border-left-width: 1px !important;}
}

.tableBody {}
.tableBody-row {
  &:nth-of-type(even) {background-color:darken(@tableRowBackgroundColor, 2%);}
  &:nth-of-type(odd) {background-color:darken(@tableRowBackgroundColor, 4%);}
  &:nth-of-type(even):hover {background-color:lighten(@tableRowBackgroundColor, 6%);}
  &:nth-of-type(odd):hover {background-color:lighten(@tableRowBackgroundColor, 6%);}
  &:nth-of-type(even).is-active {background-color:darken(@successColor, 2%);}
  &:nth-of-type(odd).is-active {background-color:darken(@successColor, 4%);}
  &:nth-of-type(even).is-active:hover {background-color:lighten(@successColor, 6%);}
  &:nth-of-type(odd).is-active:hover {background-color:lighten(@successColor, 6%);}
}

.tableBody-cell {
  vertical-align:middle;
  border:1px solid darken(@tableRowBackgroundColor,15%);
  border-width: 0 1px 1px 0;
  text-align: left;
  padding:5px 10px;
  font-weight:normal;
  color:contrast(@tableRowBackgroundColor);
  .tableBody-row.is-active & {color:contrast(@successColor);}
  .tableBody-row &:first-of-type {border-left-width: 1px;}
}

.tableLink {
  display:block;
  padding:8px;
  color:contrast(@tableRowBackgroundColor);
}

.tableFoot {}

.table-vNoborder {
  .tableHead-cell,
  .tableBody-cell {
    border-width: 0;
    &:last-of-type {border-right-width: 1px;}
  }
  .tableBody-row:last-of-type .tableBody-cell {border-bottom-width: 1px;}
  .tableHead-row:first-of-type .tableHead-cell {border-top-width: 1px;}
  .tableHead-row .tableHead-cell:first-of-type {border-left-width: 1px;}
}
.table-vNoXborder {
  .tableHead-cell,
  .tableBody-cell {
    border-top-width: 0;
    border-bottom-width: 0;
  }
  .tableHead-row:first-of-type .tableHead-cell {border-top-width: 1px;}
  .tableBody-row:last-of-type .tableBody-cell {border-bottom-width: 1px;}
}
.table-vNoYborder {
  .tableHead-cell,
  .tableBody-cell {
    border-left-width: 0;
    border-right-width: 0;
    &:last-of-type {border-right-width: 1px;}
  }
}

// => Tables Media Queries

.media-mixin(@break) when (@break = @breakSmall) {
}

.media-mixin(@break) when (@break = @breakMedium) {
}

.media-mixin(@break) when (@break = @breakLarge) {
}

.media-mixin(@break) when (@break = @break2x) {
}

.media-mixin(@break) when (@break = @breakPrint) {
}