blog/_src/_assets/styl/forms.styl

//
// kremalicious3
// --------------
// Forms
//


// Normalize non-controls
/////////////////////////////////////

fieldset
    padding: 0
    margin: 0
    border: 0
    min-width: 0

legend
    display: block
    width: 100%
    padding: 0
    margin-bottom: $line-height-computed
    font-size: ($font-size-base * 1.5)
    line-height: inherit
    border: 0

label
    @extend .bold
    display: inline-block
    margin-bottom: 5px
    cursor: pointer


// Normalize form controls
/////////////////////////////////////

// Override content-box in Normalize (* isn't specific enough)
input[type="search"]
    box-sizing: border-box

// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"]
    margin: 4px 0 0
    margin-top: 1px \9 // IE8-9
    line-height: normal

// Set the height of file controls to match text inputs
input[type="file"]
    display: block

// Make range inputs behave like textual form controls
input[type="range"]
    display: block
    width: 100%

// Make multiple select elements height not fixed
select[multiple],
select[size]
    height: auto


// Common form controls
/////////////////////////////////////

.form-control
    display: block
    width: 100%
    height: $input-height-base
    padding: $padding-base-vertical $padding-base-horizontal
    font-size: $input-font-size
    font-weight: $input-font-weight
    line-height: $line-height-base
    color: $input-color
    background-color: $input-bg
    background-image: none // Reset unusual Firefox-on-Android default style
    border: 0
    border-radius: $input-border-radius
    box-shadow: none
    transition: all ease-in-out .15s
    -webkit-appearance: none // screw you, iOS default inset box-shadow

    // Placeholder
    placeholder($input-color-placeholder)

    &:hover
        lighten($input-bg, 30%)

    &:focus
        background-color: $input-bg-focus
        border-color: $input-border-focus
        outline: 0
        placeholder(lighten($input-color-placeholder, 25%))

    // Disabled and read-only inputs
    //
    // HTML5 says that controls under a fieldset > legend:first-child won't be
    // disabled if the fieldset is disabled. Due to implementation difficulty, we
    // don't honor that edge case; we style them as disabled anyway.
    &[disabled],
    &[readonly],
    fieldset[disabled] &
        cursor: not-allowed
        background-color: $input-bg-disabled
        opacity: 1 // iOS fix for unreadable disabled content


// Form groups
/////////////////////////////////////

.form-group
    margin-bottom: $line-height-computed


// Search inputs
/////////////////////////////////////

input[type="search"]
    -webkit-appearance: none // This overrides the extra rounded corners on search inputs in iOS


// Checkboxes and radios
/////////////////////////////////////

.radio,
.checkbox
    display: block
    min-height: $line-height-computed // clear the floating input if there is no label text
    margin-top: 10px
    margin-bottom: 10px

    label
        padding-left: 20px
        margin-bottom: 0
        font-weight: normal
        cursor: pointer

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"]
    float: left
    margin-left: -20px

.radio + .radio,
.checkbox + .checkbox
    margin-top: -5px // Move up sibling radios or checkboxes for tighter spacing

// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline
    display: inline-block
    padding-left: 20px
    margin-bottom: 0
    vertical-align: middle
    font-weight: normal
    cursor: pointer

.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline
    margin-top: 0
    margin-left: 10px // space out consecutive inline controls

// Disabled Behavior
input[type="radio"],
input[type="checkbox"],
.radio,
.radio-inline,
.checkbox,
.checkbox-inline
    &[disabled],
    fieldset[disabled] &
        cursor: not-allowed


// Form control sizing
/////////////////////////////////////

input-small()
    input-size($input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small)
    placeholder(font-size $font-size-small, line-height $line-height-small)

input-large()
    input-size($input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large)
    placeholder(font-size $font-size-large, line-height $line-height-large)

.input-small
    input-small()

.input-large
    input-large()