datahub/wherehows-web/app/styles/components/nacho/_nacho-table.scss

@import "restyle";

@include restyle-define(table, (
        restyle-var(border-color): set-color(grey, light),
        restyle-var(header-color): set-color(grey, light),
        restyle-var(horizontal-padding): 10px,
        restyle-var(font-size): 16px,
        restyle-var(zebra): tint(set-color(grey, light), 80%),
        border-collapse: collapse,
        border-spacing: 0,
        text-align: left,
        width: 100%,
        table-layout: fixed,
        background-color: set-color(white, base),
        '& th': (
                font-size: restyle-var(font-size),
                background-color: restyle-var(header-color),
                min-height: 36px,
                padding: restyle-var(horizontal-padding),
                vertical-align: middle,
                white-space: nowrap,
        ),
        '& td': (
                restyle-var(cell-height): 52px,
                box-sizing: border-box,
                height: restyle-var(cell-height),
                padding: (5px restyle-var(horizontal-padding)),
                border-bottom: 1px solid set-color(grey, light),
                vertical-align: middle,
                word-wrap: break-word
        ),
        restyle-modifiers: (
                'with a border': (
                  border: 1px solid restyle-var(border-color)
                ),
                'with stripped rows': (
                        '& tr:nth-child(odd)': (
                                background-color: restyle-var(zebra)
                        )
                ),
                'with variable width': (
                        table-layout: auto
                )
        )
));

.nacho-table {
  @include restyle(table);

  &--bordered {
    @include restyle(table with a border);
  }

  &--stripped {
    @include restyle(table with stripped rows);
  }

  &--dynamic {
    @include restyle(table with variable width);
  }

  /**
   * Removes the the non wrap for words in the td, or th cell in  nacho-table
   */
  .nacho-table-cell-wrapped {
    white-space: normal;
  }
}