bcotton / centos / centos.org

Forked from centos/centos.org 2 years ago
Clone

Blame content/assets/css/bootstrap/_tables.scss

e8ec7a
//
e8ec7a
// Tables
e8ec7a
// --------------------------------------------------
e8ec7a
e8ec7a
e8ec7a
table {
e8ec7a
  max-width: 100%;
e8ec7a
  background-color: $table-bg;
e8ec7a
}
e8ec7a
th {
e8ec7a
  text-align: left;
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Baseline styles
e8ec7a
e8ec7a
.table {
e8ec7a
  width: 100%;
e8ec7a
  margin-bottom: $line-height-computed;
e8ec7a
  // Cells
e8ec7a
  thead,
e8ec7a
  tbody,
e8ec7a
  tfoot {
e8ec7a
    > tr {
e8ec7a
      > th,
e8ec7a
      > td {
e8ec7a
        padding: $table-cell-padding;
e8ec7a
        line-height: $line-height-base;
e8ec7a
        vertical-align: top;
e8ec7a
        border-top: 1px solid $table-border-color;
e8ec7a
      }
e8ec7a
    }
e8ec7a
  }
e8ec7a
  // Bottom align for column headings
e8ec7a
  thead > tr > th {
e8ec7a
    vertical-align: bottom;
e8ec7a
    border-bottom: 2px solid $table-border-color;
e8ec7a
  }
e8ec7a
  // Remove top border from thead by default
e8ec7a
  caption + thead,
e8ec7a
  colgroup + thead,
e8ec7a
  thead:first-child {
e8ec7a
    tr:first-child {
e8ec7a
      th, td {
e8ec7a
        border-top: 0;
e8ec7a
      }
e8ec7a
    }
e8ec7a
  }
e8ec7a
  // Account for multiple tbody instances
e8ec7a
  tbody + tbody {
e8ec7a
    border-top: 2px solid $table-border-color;
e8ec7a
  }
e8ec7a
e8ec7a
  // Nesting
e8ec7a
  .table {
e8ec7a
    background-color: $body-bg;
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Condensed table w/ half padding
e8ec7a
e8ec7a
.table-condensed {
e8ec7a
  thead,
e8ec7a
  tbody,
e8ec7a
  tfoot {
e8ec7a
    > tr {
e8ec7a
      > th,
e8ec7a
      > td {
e8ec7a
        padding: $table-condensed-cell-padding;
e8ec7a
      }
e8ec7a
    }
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Bordered version
e8ec7a
//
e8ec7a
// Add borders all around the table and between all the columns.
e8ec7a
e8ec7a
.table-bordered {
e8ec7a
  border: 1px solid $table-border-color;
e8ec7a
  > thead,
e8ec7a
  > tbody,
e8ec7a
  > tfoot {
e8ec7a
    > tr {
e8ec7a
      > th,
e8ec7a
      > td {
e8ec7a
        border: 1px solid $table-border-color;
e8ec7a
      }
e8ec7a
    }
e8ec7a
  }
e8ec7a
  > thead {
e8ec7a
    > tr {
e8ec7a
      > th,
e8ec7a
      > td {
e8ec7a
        border-bottom-width: 2px;
e8ec7a
      }
e8ec7a
    }
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Zebra-striping
e8ec7a
//
e8ec7a
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
e8ec7a
e8ec7a
.table-striped {
e8ec7a
  > tbody {
e8ec7a
    > tr:nth-child(odd) {
e8ec7a
      > td,
e8ec7a
      > th {
e8ec7a
        background-color: $table-bg-accent;
e8ec7a
      }
e8ec7a
    }
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Hover effect
e8ec7a
//
e8ec7a
// Placed here since it has to come after the potential zebra striping
e8ec7a
e8ec7a
.table-hover {
e8ec7a
  > tbody {
e8ec7a
    > tr:hover {
e8ec7a
      > td,
e8ec7a
      > th {
e8ec7a
        background-color: $table-bg-hover;
e8ec7a
      }
e8ec7a
    }
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Table cell sizing
e8ec7a
//
e8ec7a
// Reset default table behavior
e8ec7a
e8ec7a
table col[class*="col-"] {
e8ec7a
  float: none;
e8ec7a
  display: table-column;
e8ec7a
}
e8ec7a
table {
e8ec7a
  td,
e8ec7a
  th {
e8ec7a
    &[class*="col-"] {
e8ec7a
      float: none;
e8ec7a
      display: table-cell;
e8ec7a
    }
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Table backgrounds
e8ec7a
//
e8ec7a
// Exact selectors below required to override `.table-striped` and prevent
e8ec7a
// inheritance to nested tables.
e8ec7a
e8ec7a
.table > thead > tr,
e8ec7a
.table > tbody > tr,
e8ec7a
.table > tfoot > tr {
e8ec7a
  > td.active,
e8ec7a
  > th.active,
e8ec7a
  &.active > td,
e8ec7a
  &.active > th  {
e8ec7a
    background-color: $table-bg-active;
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
// Generate the contextual variants
e8ec7a
@include table-row-variant('success', $state-success-bg, $state-success-border);
e8ec7a
@include table-row-variant('danger', $state-danger-bg, $state-danger-border);
e8ec7a
@include table-row-variant('warning', $state-warning-bg, $state-warning-border);
e8ec7a
e8ec7a
e8ec7a
// Responsive tables
e8ec7a
//
e8ec7a
// Wrap your tables in `.table-scrollable` and we'll make them mobile friendly
e8ec7a
// by enabling horizontal scrolling. Only applies <768px. Everything above that
e8ec7a
// will display normally.
e8ec7a
e8ec7a
@media (max-width: $screen-sm) {
e8ec7a
  .table-responsive {
e8ec7a
    width: 100%;
e8ec7a
    margin-bottom: 15px;
e8ec7a
    overflow-y: hidden;
e8ec7a
    overflow-x: scroll;
e8ec7a
    border: 1px solid $table-border-color;
e8ec7a
e8ec7a
    // Tighten up spacing and give a background color
e8ec7a
    > .table {
e8ec7a
      margin-bottom: 0;
e8ec7a
      background-color: #fff;
e8ec7a
e8ec7a
      // Ensure the content doesn't wrap
e8ec7a
      > thead,
e8ec7a
      > tbody,
e8ec7a
      > tfoot {
e8ec7a
        > tr {
e8ec7a
          > th,
e8ec7a
          > td {
e8ec7a
            white-space: nowrap;
e8ec7a
          }
e8ec7a
        }
e8ec7a
      }
e8ec7a
    }
e8ec7a
e8ec7a
    // Special overrides for the bordered tables
e8ec7a
    > .table-bordered {
e8ec7a
      border: 0;
e8ec7a
e8ec7a
      // Nuke the appropriate borders so that the parent can handle them
e8ec7a
      > thead,
e8ec7a
      > tbody,
e8ec7a
      > tfoot {
e8ec7a
        > tr {
e8ec7a
          > th:first-child,
e8ec7a
          > td:first-child {
e8ec7a
            border-left: 0;
e8ec7a
          }
e8ec7a
          > th:last-child,
e8ec7a
          > td:last-child {
e8ec7a
            border-right: 0;
e8ec7a
          }
e8ec7a
        }
e8ec7a
        > tr:last-child {
e8ec7a
          > th,
e8ec7a
          > td {
e8ec7a
            border-bottom: 0;
e8ec7a
          }
e8ec7a
        }
e8ec7a
      }
e8ec7a
    }
e8ec7a
  }
e8ec7a
}