No Questions Asked Form & Magic Focus

index.haml

%form.form{action: ''}
  %p.field.required
    %label.label.required{for: 'name'} Full name
    %input.text-input#name{type: 'text', name: 'name', required: true, value: 'Use Tab'}
  %p.field.required.half
    %label.label{for: 'email'} E-mail
    %input.text-input#email{type: 'email', name: 'email', required: true}
  %p.field.half
    %label.label{for: 'phone'} Phone
    %input.text-input#phone{type: 'phone', name: 'phone'}
  %p.field.half.required.error
    %label.label{for: 'login'} Login
    %input.text-input#login{type: 'text', name: 'login', required: true, value: 'mican'}
    -# %span.message Already taken
  %p.field.half.required
    %label.label{for: 'password'} Password
    %input.text-input#password{type: 'password', name: 'password', required: true}
  %div.field
    %label.label Sport?
    %ul.checkboxes
      - %w(Football Basketball Volleyball Golf Swimming).each_with_index do |item,i|
        %li.checkbox
          %input.checkbox-input{name: 'choice', type: 'checkbox', value: i, id: "choice-#{i}"}/
          %label.checkbox-label{:for => "choice-#{i}"}= item
  %div.field
    %label.label Favourite JS framework
    %ul.options
      - %w(React Vue Angular Riot Polymer Ember Meteor Knockout).each_with_index do |item,i|
        %li.option
          %input.option-input{name: 'option', type: 'radio', value: i, id: "option-#{i}"}/
          %label.option-label{:for => "option-#{i}"}= item
  %p.field
    %label.label{for: "about"} About
    %textarea.textarea#about{cols: 50, name: "about", rows: 4}
  %p.field.half
    %label.label{for: "select"} Position
    %select#select.select
      %option{value: '', selected: true}
      %option{value: "ceo"} CEO
      %option{value: "front-end"} Front-end developer
      %option{value: "back-end"} Back-end developer
  %p.field.half
    %input.button{type: "submit", value: "Send"}

no-questions-asked-form-magic-focus.markdown

No Questions Asked Form & Magic Focus

Recreation of No Questions Asked form

http://www.noquestionsasked.nyc/challengers/new

plus MAGIC FOCUS

Haml & Sass & CoffeeScript

A Pen by Michal Niewitala 🍋 on CodePen.

License.

script.coffeescript

class magicFocus
  
  constructor: (@parent) ->
    
    return unless @parent
        
    @focus = document.createElement 'div'
    @focus.classList.add 'magic-focus'
    @parent.classList.add 'has-magic-focus'
    @parent.appendChild @focus

    for input in @parent.querySelectorAll('input, textarea, select')      
      input.addEventListener 'focus', ->
        window.magicFocus.show()
      input.addEventListener 'blur', ->
        window.magicFocus.hide()
    
  show: =>
    
    return unless ['INPUT','SELECT','TEXTAREA'].includes? (el = document.activeElement).nodeName
    
    clearTimeout(@reset)
                   
    el = document.querySelector("[for=#{el.id}]") if ['checkbox', 'radio'].includes? el.type

    @focus.style.top = "#{el.offsetTop||0}px"
    @focus.style.left = "#{el.offsetLeft||0}px"
    @focus.style.width = "#{el.offsetWidth||0}px"
    @focus.style.height = "#{el.offsetHeight||0}px"
      
  hide: =>
       
    @focus.style.width = 0 unless ['INPUT','SELECT','TEXTAREA', 'LABEL'].includes? (el = document.activeElement).nodeName
        
    @reset = setTimeout ->
      window.magicFocus.focus.removeAttribute('style')
    , 200

# initialize
    
window.magicFocus = new magicFocus document.querySelector('.form')

$ ->
  $('.select').customSelect()

scripts

<script src="https://codepen.io/mican/pen/XgRmNr"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.customSelect/0.5.1/jquery.customSelect.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.sass

// colors

$bg: #111111
$vibrant: #E8474C

$text: white
$label: white

$border: transparent
$static: #222222
$focus: #4E4E4E
$active: white
$inactive: #4E4E4E
$error: #E8474C

html
  -webkit-font-smoothing: antialiased

body
  background-color: $bg
  font-family: 'Titillium Web', sans-serif
  
  @media screen and (min-width: 40em)
    font-size: 1.25em

%block
  padding: .75em 1em
  appearance: none
  outline: none
  line-height: normal
  border-radius: 0
  border: none
  background: none
  display: block
  
%label
  @extend %block
  font-weight: bold
  color: $label
  padding:
    top: 0
    left: 0
  letter-spacing: .025em
  font-size: 1.125em
  line-height: 1.25
  position: relative
  z-index: 100
  
  .required &:after
    content: '\0020*'
    color: $error
    font-weight: normal
    font-size: .75em
    vertical-align: top
    
=stripes($color1: #555, $color2: transparent, $angle: 0deg, $stripe1-width: 25px, $stripe2-width: null)
  @if $stripe2-width == null
    $stripe2-width: $stripe1-width

  $tile-size: ($stripe1-width + $stripe2-width) * 2
  $stripe2-start: $stripe1-width / $tile-size * 100%
  $stripe3-start: $stripe2-start + $stripe2-width / $tile-size * 100%
  $stripe4-start: $stripe3-start + $stripe1-width / $tile-size * 100%

  background-size: $tile-size $tile-size
  background-image: linear-gradient($angle, $color1, $color1 $stripe2-start, $color2 $stripe2-start, $color2 $stripe3-start, $color1 $stripe3-start, $color1 $stripe4-start, $color2 $stripe4-start, $color2)
  background-repeat: repeat
    
%input
  @extend %block
  font: inherit
  line-height: normal
  width: 100%
  box-sizing: border-box
  background: $static
  color: white
  position: relative
  
  &:placeholder
    color: $label

  &:-webkit-autofill
    box-shadow: 0 0 0px 1000px $bg inset
    -webkit-text-fill-color: white
    border-top-color: $bg
    border-left-color: $bg
    border-right-color: $bg

  &.required, &[required]
  
  &:not(:focus):not(:active)
    &.error, .error &
      +stripes(rgba($vibrant,.5), transparent, 135deg, 2px, 2px)

  &:active, &:focus
    .form:not(.has-magic-focus) &
      background: $focus
  
%error
  @extend %block
  // color: red
  position: absolute
  bottom: 0
  right: 0
  z-index: 100
  font-size: .625em
  color: $label
  
%checkbox
  border: 0
  clip: rect(0 0 0 0)
  height: 1px
  margin: -1px
  overflow: hidden
  padding: 0
  position: absolute
  width: 1px

  + label
    @extend %input
    display: inline-block
    width: auto
    color: $inactive
    position: relative
    user-select: none
    cursor: pointer
    
  &:focus, &:active
    + label
      color: $focus
          
  &:checked 
    + label
      color: $active
    
    // &:focus, &:active
    //   + label:before
    //     box-shadow: inset 0px 0px 0px .5em $focus
    //     color: $active

%option
  + label
    // &:before
    //   border-radius: 50%
    // &:after
    //   top: 1px
    //   left: 1px
    //   width: 1em
    //   height: 1em
    //   box-sizing: border-box
    //   border: 3px solid $bg
    //   border-radius: 50%
    //   transform: none
    

%button
  @extend %block
  
  font: inherit
  // font-size: 1em
  line-height: normal
  cursor: pointer

  background: $vibrant
  color: white
  font-weight: bold
  width: auto
  margin-left: auto
  font-weight: bold
  padding:
    left: 2em
    right: 2em

  &:hover, &:focus, &:active
    color: white
    border-color: white

  &:active
    position: relative
    top: 1px
    left: 1px

body
  padding: 2em
  
.form
  max-width: 40em
  margin: 0 auto
  position: relative
  
  display: flex
  flex-flow: row wrap
  justify-content: space-between
  align-items: flex-end
  
  .field
    width: 100%
    margin: 0 0 1.5em 0
    &.half
      @media screen and (min-width: 40em)
        width: calc(50% - 1px)
    &.last
      margin-left: auto

  .text-input
    @extend %input

  .textarea
    @extend %input
    max-width: 100%
    
  .button
    @extend %button
    
  .label
    @extend %label
    
  .message
    @extend %error
    
  .select
    @extend %input
    text-indent: 0.01px
    text-overflow: ""!important
    &::-ms-expand
      display: none
    
  .checkboxes, .options
    padding: 0
    margin: 0
    list-style-type: none
    overflow: hidden
    
  .checkbox, .option
    float: left
    margin: 1px
    
  .checkbox-input
    @extend %checkbox
    
  .option-input
    @extend %checkbox
    // @extend %option
    
.customSelect
  @extend %input
  pointer-events: none
  &:after
    content: ''
    pointer-events: none
    width: .5em
    height: .5em
    border-style: solid
    border-color: $label
    border-width: 0 3px 3px 0
    position: absolute
    top: 50%
    margin-top: -.625em
    right: 1em
    transform-origin: 0 0
    transform: rotate(45deg)

  &.customSelectHover
    
  &.customSelectOpen

  &.customSelectFocus
    @extend %input:active
    &:after
      border-color: white
    
    
  .customSelectInner

.magic-focus
  position: absolute
  z-index: 0
  width: 0
  // height: 0
  pointer-events: none
  background: rgba(white,.15)
  
  transition: top .2s, left .2s, width .2s

  backface-visibility: hidden
  transform-style: preserve-3d
  will-change: top, left, width
  
  transform-origin: 0 0

styles

<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700" rel="stylesheet" />