mezis/appfab

View on GitHub
app/assets/stylesheets/application/components/_responsive_table.css.sass

Summary

Maintainability
Test Coverage
@import application/variables
@import application/mixins

// a column representing 1 state
.af-rtable-column
  padding:    5px
  border:     none

  &:nth-child(2n)
    background-color: transparentize($wellBackground, 0.5)
  &:nth-child(2n+1)
    background-color: transparentize($wellBackground, 0.8)

+respond-to(wide)
  .af-rtable
    display:         table
    position:        relative
    border-collapse: collapse
  .af-rtable-column
    display:         table-cell
    width:           10%
  .af-rtable-cell
    padding-bottom:  1ex

+respond-to(desktop)
  .af-rtable-column
    margin-bottom:  $section_spacing
  .af-rtable-cell
    box-sizing: border-box
    display:    inline-block
    width:      33%
    padding:    1ex

+respond-to(tablet)
  .af-rtable-column
    margin-bottom:  $section_spacing
  .af-rtable-cell
    box-sizing: border-box
    display:    inline-block
    width:      49%
    padding:    1ex