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

Framework for writing really abstract CSS in Stylus

stylobate_defaults('kind-field', __content('&-content'), __left('&-left'), __right('&-right'))

kind-field($this)
  kind(input no-reset)

  deprecate($this.params, 'no-elements')

kind-field__content()
  +cache()
    flex-grow: 1

    display: block

    // TODO: somehow apply this only when no flex
    overflow: hidden

    height: 100%

kind-field__left($this)
  +cache()
    position: relative
    z-index: 9
    float: left

  $sides = any_get_sides($this)
  // TODO: Stylus should do proper checks for xx and xx.yy
  unless ($this.parent and $this.parent['params']['no-margin']) or $this.params.no-margin
    margin: -1*$sides[0] 0 -1*$sides[2] -1*$sides[3]

  unless ($this.parent and $this.parent['params']['no-padding']) or $this.params.no-padding
    padding: $sides

kind-field__right($this)
  +cache()
    order: 1
    position: relative
    z-index: 9
    float: right

  $sides = any_get_sides($this)
  unless ($this.parent and $this.parent['params']['no-margin']) or $this.params.no-margin
    margin: -1*$sides[0] -1*$sides[1] -1*$sides[2] 0

  unless ($this.parent and $this.parent['params']['no-padding']) or $this.params.no-padding
    padding: $sides