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

Framework for writing really abstract CSS in Stylus

kind-group()
  +cache()
    kind('block' inline)
    white-space: nowrap

kind-group__item($this)
  unless $this.params.no-radius
    &:first-child:not(:only-child)
      kind-group__start($this)

    &:not(:first-child):not(:last-child)
      kind-group__middle($this)

    &:last-child:not(:only-child)
      kind-group__end($this)

kind-group__start($this)
  {$this.strings[0] or ''}
    $placeholder = $this.params.vertical ? '$kind-group__start_vertical' : '$kind-group__start'
    @extends {$placeholder}

$kind-group__start
  unless ie
    border-top-right-radius: 0 !important
    border-bottom-right-radius: 0 !important

$kind-group__start_vertical
  unless ie
    border-bottom-right-radius: 0 !important
    border-bottom-left-radius: 0 !important

kind-group__end($this)
  unless $this.params.no-margin
    $placeholder = $this.params.vertical ? '$kind-group__margin_vertical' : '$kind-group__margin'
    @extends {$placeholder}

  {$this.strings[0] or ''}
    $placeholder = $this.params.vertical ? '$kind-group__end_vertical' : '$kind-group__end'
    @extends {$placeholder}

$kind-group__end
  unless ie
    border-top-left-radius: 0 !important
    border-bottom-left-radius: 0 !important

$kind-group__end_vertical
  unless ie
    border-top-right-radius: 0 !important
    border-top-left-radius: 0 !important

$kind-group__margin
  margin-left: -1px

$kind-group__margin_vertical
  margin-top: -1px

kind-group__middle($this)
  unless $this.params.no-margin
    $placeholder = $this.params.vertical ? '$kind-group__margin_vertical' : '$kind-group__margin'
    @extends {$placeholder}

  $selector = $this.strings[0] or ''
  if $selector != ''
    {$selector}
      border-radius: 0 !important
  else
    border-radius: 0 !important