diff options
Diffstat (limited to 'app/common/styles/base/forms.scss')
-rw-r--r-- | app/common/styles/base/forms.scss | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss new file mode 100644 index 0000000..f899e0c --- /dev/null +++ b/app/common/styles/base/forms.scss @@ -0,0 +1,129 @@ +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"], .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 */ +} |