// PLACEHOLDERS %inline-label display: inline-block color: #404040 font: 200 1.0rem $default vertical-align: top font-size: 2.1em .inline-label @extend %inline-label // GENERIC FORM CLASSES .hidden display: none .not-visible visibility: hidden // fieldset border: none legend font: 700 1.4em $default text-transform: uppercase color: $primaryColor margin-left: -20px .field width: 100% float: left clear: both margin: 3px 0 30px padding: 0 20px 0 0 %generic-input width: 100% line-height: 2.5em font-size: 1.6em padding: 0 0 0 10px border-radius: 2px background: #f9f9f9 box-shadow: darken( #f9f9f9, 10% ) 0 1px 6px 0 inset border: 1px solid darken( #f9f9f9, 15% ) &:focus outline-color: $primaryColor &::-webkit-input-placeholder color: transparent &:-moz-placeholder color: transparent &::-moz-placeholder color: transparent &:-ms-input-placeholder color: transparent // BASIC FORM STYLING label color: #444 display: block font: 700 1.6em $default & + span, & + p display: inline-block margin: 0 0 0 6px font-size: 1.4em line-height: 1.2em em color: #666 input, select font: 400 1.3em $default & + label @extend %inline-label &.text, &.number, &.email, &.phone, &.date, &.password @extend %generic-input .checkbox, .radio & + label, & + span font-weight: 200 margin-right: 15px margin-left: 10px .file display: inline-block max-width: 50% padding: 8px 0 0 font-size: 1.4em vertical-align: top .color background: #2f2f2f border: none cursor: pointer select width: 100% margin: 8px 0 0 textarea font: 200 1.4em $default line-height: 1.6em padding: 6px +constant-width( 100% ) +variable-height( 160px, 260px) border: 1px solid darken( #f9f9f9, 15% ) border-radius: 2px &:focus outline-color: $primaryColor &::-webkit-input-placeholder color: transparent &:-moz-placeholder color: transparent &::-moz-placeholder color: transparent &:-ms-input-placeholder color: transparent // Errors .field_with_errors display: inline label font-weight: 300 input border-color: $yellow box-shadow: $yellow 0 0 4px 0 background: lighten($yellow, 50%) & + label @extend %inline-label margin: 0 15px 0 0