Contents

//
// Tables
//

//
// Structure
//
//<table class="rf-table">
//  <tr class="rf-table__row rf-table__row--header">
//    <th class="rf-table__th">Product</th>
//    <th class="rf-table__th">Name</th>
//  </tr>
//  <tbody class="rf-table__body">
//    <tr class="rf-table__row">
//      <td class="rf-table__td"> Cell #1</td>
//      <td class="rf-table__td"> Cell #2</td>
//    </tr>
//  </tbody>
//</table>
//
// Best Practices
//
// Set column widths in the header
//

.rf-table {
  width: 100%;
  border-collapse: separate;  // Necessary to round corners
  table-layout: fixed;
}

.rf-table__th,
.rf-table__td {
  padding-left: $list-padding/2;
  padding-right: $list-padding/2;

  &:last-of-type {
    padding-right: $list-padding;
  }

  &:first-of-type {
    padding-left: $list-padding;
  }
}

.rf-table__row--header {
  vertical-align: bottom;
}

.rf-table__col--centered {
  text-align: center;

  .form-control {
    text-align: center;
  }
}

.rf-table__col--right {
  text-align: right;
}


// Padding and borders for table cells

.rf-table__td,
.rf-table__th {
  @include word-wrap;
}

.rf-table__td {
  border-bottom: $border-default;
  font-size: 13px;
  padding: $list-padding;
  vertical-align: middle;
}

.rf-table__th {
  @extend %h5;
  padding: 0px $list-padding 5px;
}

.rf-table__td--strong {
  color: $charcoal;
  font-weight: bold;
}


// Draws table borders
tr:first-of-type > .rf-table__td {
  border-top: $border-default;
}

.rf-table__row > td:first-of-type {
  border-left: $border-default;
}

.rf-table__row > td:last-of-type {
  border-right: $border-default;
}

// Rounds corners of the table body
.rf-table__body {
  @include round-table-corners();
}


//
// Row status classes
//

.rf-table__row--error {
  border-left: 6px solid $red;
}

.rf-table__row--success {
  border-left: 6px solid $green;
}

Version data entries

4 entries across 4 versions & 1 rubygems

Version	Path
ethosstyles-0.1.14	app/assets/stylesheets/components/_tables.scss
ethosstyles-0.1.13	app/assets/stylesheets/components/_tables.scss
ethosstyles-0.1.12	app/assets/stylesheets/components/_tables.scss
ethosstyles-0.1.11	app/assets/stylesheets/components/_tables.scss