Sha256: c46cd97c60a6e2f4a1f7a8b3c3575d85e2febfb55dd72d85f407611053571bab
Contents?: true
Size: 1.65 KB
Versions: 9
Compression:
Stored size: 1.65 KB
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();
}
Version data entries
9 entries across 9 versions & 1 rubygems