Simple forms

index.pug

//mixin for selects
mixin select(selectId, options)
  select(id=selectId class="form-field")
      each obj in options
        option(value= obj) ${obj}
        
//mixin for checkboxes
mixin checkbox(text, name)
  div.form-field
    input(class="checkbox" type= "checkbox", id= name, name= name)
    label(for= name)= text
    
//mixin for radios    
mixin radio(text, id, group ) 
  div.form-field
    input(class="radio" type= "radio", id= id, name= group)
    label(for= id)= text	
    
form(class='form' action='' method='POST')
  //Personal Information
  fieldset
    legend Personal Information
    input(class="form-field" type="text" placeholder="First Name" required)
    input(class="form-field" type="text" placeholder="Last Name" required)
    input(class="form-field" type="email" placeholder="email@address.com" required)
    
  //Login Information  
  fieldset
    legend Login Information
    input(class="form-field" type="text" placeholder="Street Number and Name")
    input(class="form-field" type="text" placeholder="Apartment")
    input(class="form-field" type="text" placeholder="City")
    
  // Address    
  fieldset
    legend Address
    -var cities = ['Texas', 'Alaska', 'Colorado', 'Oklahoma']  
    +select('countrySelect', cities )
    input(class="form-field" type="number" placeholder="Zip Code")
    textarea(class="form-field") Your Message
  fieldset
    legend Нow did you find us?
    +radio("Search Engine", "search-engine", 'referrer')
    +radio("Other", "other", 'referrer')
  fieldset
    legend Terms & Conditions
    +checkbox("I accept the Terms and Conditions", "terms")
    input(type="submit" value ="Submit" class="btn btn-primary")

simple-forms.markdown

Simple forms

A Pen by Elena on CodePen.

License.

style.stylus

@import 'nib'

$form-width          = 640px
$baseline-height     = 20px
$color-invalid       = #cf5340
$color-valid         = #b4d388
$accent-color        = lighten(#3498DB, 20%) 
  
$primary-text-color   = #222
$secondary-text-color = #777
$divider-color        = #ddd

*, *:before, *:after
  box-sizing border-box
  
html,
button,
input,
select,
textarea 
    color $primary-text-color
    font-family  sans-serif
    line-height 1.4
    color $primary-text-color
    font-size 13px
    
body
  padding $baseline-height
  background #f1f1f1  
  
button, input, optgroup, select, textarea 
    color: inherit;
    font: inherit;
 
.form  
  width $form-width
  background #fff
  padding $baseline-height
  border-radius .4em
  box-shadow 0 2px 4px rgba(0, 0, 0, .075)
  
  fieldset, .form-field
    &:not(:last-child ) 
      margin-bottom $baseline-height
      
  legend 
    font-size 18px
    font-weight bold
    margin-bottom $baseline-height
 
input[type="text"], input[type="password"],
input[type="email"], input[type="url"], 
input[type="time"], input[type="date"], 
input[type="datetime-local"], input[type="url"],
input[type="tel"], input[type="number"], 
input[type="search"], textarea, select 
    border $divider-color
    background-image: none
    padding: 13px 10px
    width: 100%;
    color $secondary-text-color
    border-radius .3em
    box-shadow 0 0 0 0 transparent
    
    background-repeat no-repeat
    background-size 8px
    background-position right .75rem center
    
    outline 0
    border 1px solid #e5e5e5
    transition border-color .15s linear
    
    &:focus
        border $accent-color
 
      &:focus
        &:invalid
          border-color $color-invalid

      &:valid
        border-color $color-valid
        
  input:invalid ~ .form__submit
    display none
    
placeholder()
	&::-webkit-input-placeholder
		{block}
	&:-moz-placeholder
		{block}
	&::-moz-placeholder
		{block}
	&:-ms-input-placeholder
		{block}     
    
+placeholder()
    color $secondary-text-color
    
textarea
  resize vertical
  
select 
    -moz-appearance: none
    background-position calc(100% - 13px) center 
    background-repeat no-repeat
    background-size 0.5rem auto
    padding-right 26px
    option 
      padding 0
      margin 0

.checkbox, .radio 
    border 0 none
    clip rect(0px, 0px, 0px, 0px)
    size 1px
    margin -1px;
    overflow hidden
    padding 0
    position absolute
    
    & + label 
        cursor pointer
        display block

    & + label:before 
        content ' '
        position: relative 
        display inline-block
        vertical-align middle
        border $divider-color
        top -1px
        size 18px
        margin-right $baseline-height *.5
        border-radius .1em
        transition all .2s
        
    &:checked + label::before
       background $accent-color

.radio + label::before 
    border-radius: 50% 

.radio:checked + label::before 
    background-color: #fff
    border: 6px solid $accent-color


.checkbox:checked + label::before 
    background $accent-color
    border-style none