| label, legend { |
| font-size:1em; |
| font-weight: 300; |
| margin: 0; |
| &.disabled { |
| color: $lightbg__grey; |
| } |
| .error { |
| font-size: .9em; |
| } |
| } |
| |
| input[type='email'], |
| input[type='number'], |
| input[type='password'], |
| input[type='search'], |
| input[type='tel'], |
| input[type='url'], |
| input[type='text'], |
| textarea { |
| border-radius: 0px; |
| border: 1px solid $lightgrey; |
| height: 3.1em; |
| margin: 0 0 1em 0; |
| background: $white; |
| box-shadow: 0 0 0; |
| transition: none !important; |
| &:focus { |
| border-color: $lightbg__accent; |
| border-bottom: 5px solid $lightbg__primary; |
| } |
| &:disabled, .disabled { |
| background: $field__disabled; |
| border: 1px solid $lightbg__grey; |
| } |
| &.input__error { |
| border-color: $error-color; |
| } |
| } |
| |
| textarea { padding: .2em; |
| height: auto;} |
| input[type="submit"] { |
| margin: 1em 0; |
| width: 100%; |
| } |
| |
| //Custom select |
| select{ |
| border-radius: 0px; |
| height:auto; |
| @include fastTransition-all; |
| @include bgImage__arrowDown-primary; |
| &:focus { |
| border-color: $lightbg__accent; |
| @include bgImage__arrowDown-accent; |
| box-shadow: 0 0 0; |
| } |
| } |
| |
| //Custom Checkbox and Radio |
| .checkbox-custom, |
| .radio-custom { |
| opacity: 0; |
| position: absolute; |
| } |
| |
| .checkbox-custom, .checkbox-custom-label, |
| .radio-custom, |
| .radio-custom-label { |
| display: inline-block; |
| vertical-align: middle; |
| margin: .1em 0 .1em -.5em; |
| padding: .5em; |
| cursor: pointer; |
| } |
| |
| .checkbox-custom-label, .radio-custom-label { |
| position: relative; |
| padding-left: 2em; |
| |
| } |
| |
| .checkbox-custom + .checkbox-custom-label:before, |
| .radio-custom + .radio-custom-label:before { |
| content: ''; |
| background: #fff; |
| border: 1px solid $lightbg__grey; |
| display: inline-block; |
| vertical-align: middle; |
| width: 16px; |
| height: 16px; |
| margin-right: 10px; |
| margin-top: -3px; |
| text-align: center; |
| position: absolute; |
| left: 9px; |
| top: 15px; |
| } |
| |
| .checkbox-custom:checked + .checkbox-custom-label:after { |
| content: '\2713'; |
| position: absolute; |
| left: 10px; |
| top: 3px; |
| font-size: 1em; |
| padding: 4px 0 0 2px; |
| color: $white; |
| } |
| |
| .checkbox-custom:checked + .checkbox-custom-label:before { |
| background: $lightbg__primary; |
| @include fastTransition-all; |
| } |
| |
| .radio-custom + .radio-custom-label:before { |
| border-radius: 50%; |
| } |
| |
| .radio-custom:checked + .radio-custom-label:before { |
| background: $lightbg__primary; |
| @include fastTransition-all; |
| box-shadow: inset 0px 0px 0px 2px #fff; |
| } |
| |
| |
| .checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label { |
| outline: 1px solid $lightbg__grey; /* focus style */ |
| } |