Tables

[charliewilco]

The table implementation needs a variable for the heading color / width on small screen sizes

[charliewilco]

related

the table data should be floated right and cleared on smaller screen sizes.

[charliewilco]

this should move to an object

:root {
  --Table-border: 1px solid color(var(--color-1) blackness(+20%));
  --Table-label-color: var(--litegray);
  --Table-label-size: .625rem;
}

.o-RTable  { width: 100%; }

.o-RTable__heading { display: none; }
.o-RTable__content { display: block; }

.o-RTable__content:before {
  content: attr(data-heading);
  display: inline-block;
  width: 7rem;
  margin-right: 1rem;
  color: var(--Table-label-color);
  font-size: var(--Table-label-size);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: left;
}

.o-RTable__row:not(:last-of-type) {
  border-bottom: var(--Table-border);
}

@media (--md) {
  .o-RTable__content,
  .o-RTable__heading { display: table-cell; }

  .o-RTable__content:before { display: none; }
}