stylobate/lib/kinds/file-intruder/kind-file-intruder.styl

Framework for writing really abstract CSS in Stylus

kind-file-intruder($this)
  +cache()
    kind(fill)
    z-index: 11

    // In IE we could live without focus
    if ie
      overflow: hidden

  $focus = $this.elements.focus
  $focus-skin = utilus_get_string($focus, $index: 1)
  {$this.elements.input[0]}:focus + {utilus_get_string($focus)}
    skin-{$focus-skin}() if $focus-skin

kind-file-intruder__inner()
  +cache()
    float: right
    text-align:right
    overflow: hidden

    width: 100%
    height: 100%

kind-file-intruder__input()
  +cache()
    position: relative
    z-index: 11

    display: inline-block
    vertical-align: 0
    padding: 0
    margin: -5em 0 0 -400px
    width: 500px

    cursor: pointer

    font-size: 80px

    opacity: 0

kind-file-intruder__focus()
  kind(fill)