stylobate/lib/kinds/list/kind-list.styl

Framework for writing really abstract CSS in Stylus

stylobate_defaults('kind-list',
  '_reset',
  '_align' baseline
  )

// TODO: _gap modifier, either with on one element, or with two if there is `inner` element.
//       but if nowrap, then margin .item + .item

// TODO: paddings inside gaps

kind-list($this)
  position: relative
  display: block

  +optional-element($this, 'inner')
    display: flex
    flex-wrap: wrap


kind-list__item($this)
  if 'reset' in $this.modifiers
    reset('li')

  position: relative
  display: inline-block
  flex-shrink: 0

  if 'align' in $this.modifiers
    vertical-align: $this.modifiers.align

  $gap = $this.modifiers.gap
  if $gap
    if 'nowrap' in $this.modifiers
      // FIXME: use proper selector for item here?
      & + &
        margin-left: $gap
    else
      margin-left: $gap


kind-list__inner($this)
  position: relative

kind-list_nowrap($this)
  +optional-element($this, 'inner')
    white-space: nowrap
    flex-wrap: nowrap


kind-list_justified($this)
  +optional-element($this, 'inner')
    justify-content: space-between
    text-align: justify


kind-list_align($this)
  +optional-element($this, 'inner')
    $align = $this.modifiers.align || 'baseline'
    if $align == 'baseline'
      align-items: baseline


kind-list_gap($this)
  +optional-element($this, 'inner')
    $gap = $this.modifiers.gap

    unless 'nowrap' in $this.modifiers
      margin-left: -1*$gap


kind-list_reset($this)
  +optional-element($this, 'inner')
    margin: 0
    padding: 0
    list-style: none