ratchet/lib/sass/table-views.scss

//
// Table views
// --------------------------------------------------

.table-view {
  padding: 0;
  margin: 0;
  list-style: none; // Remove usual bullet styles from table view
  background-color: #fff;

  // Pad each table view item and add dividers
  .table-view-cell {
    position: relative;
    padding: 11px 15px 12px 15px;
    border-bottom: $border-default;

    // Remove the border from the last table view item
    &:last-child { 
      border-bottom: 0;
    }
    // If it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
    > a:not(.btn) {
      position: relative;
      display: block;
      padding: inherit;
      margin: -11px -15px -12px -15px; // Make the entire list item tappable.
      color: inherit;

      &:active {
        background-color: #eee;
      }
    }
    p {
      margin: 0;
    }
  }

  // Table view dividers
  // --------------------------------------------------

  .table-view-divider {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 15px;
    margin-top: -1px; // Hides the border of the previous list item  
    margin-left: 0;
    color: #999;
    font-weight: $font-weight;
    border-top: $border-default;
    border-bottom: $border-default;
    background-color: #fafafa;

    // Rounding first divider on inset lists and remove border on the top
    &:first-child {
      top: 0;
      border-radius: $border-radius $border-radius 0 0;
    }

    // Rounding last divider on inset table views
    &:last-child {
      border-radius: 0 0 $border-radius $border-radius;
    }
  }
}


// Indented table views
// --------------------------------------------------

.table-view-indented .table-view-cell {
  padding-left: 59px;
  background-position-x: 59px; // Make room for your left aligned media/icons.

  > a:not(.btn) {
    margin-left: -59px;
  }

  > .pull-left,
  > a:not(.btn) .pull-left {
    position: absolute;
    left: 15px;
    z-index: 1;
  }
}


// Table-views with buttons
// --------------------------------------------------

.table-view .btn {
  margin-top: -1px; // Center the btn inside the cell
}


// Table-views with badges
// --------------------------------------------------
.table-view .badge {
  margin-top: 2px;

  &.pull-left {
    margin-right: 5px;
  }
  &.pull-right {
    margin-left: 5px;
  }
}


// Table-views with toggles
// --------------------------------------------------

.table-view .toggle {
  margin-top: -4px; // Center the toggle inside the cell
}


// Table-views with Ratchicons
// --------------------------------------------------
.table-view .icon {
  margin-top: 3px;
  font-size: inherit;

  &.icon-left,
  &.icon-right {
    color: #bbb;
  }
  &.pull-left {
    margin-right: 5px;
  }
  &.pull-right {
    margin-left: 5px;
  }
}