diff options
Diffstat (limited to 'app/common/styles/base')
-rw-r--r-- | app/common/styles/base/colors.scss | 1 | ||||
-rw-r--r-- | app/common/styles/base/forms.scss | 31 | ||||
-rw-r--r-- | app/common/styles/base/foundation.scss | 25 |
3 files changed, 30 insertions, 27 deletions
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss index 46285c8..405dad4 100644 --- a/app/common/styles/base/colors.scss +++ b/app/common/styles/base/colors.scss @@ -52,6 +52,7 @@ $status-warn: #ffb000; $alert__error: rgb(230, 35, 37); $alert__warning: rgb(255, 127, 0); $alert__message: rgb(203, 221, 235); +$alert__danger: #fad3D3; // Severity $critical-lightbg: #e62325; diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss index 0957609..73c25c1 100644 --- a/app/common/styles/base/forms.scss +++ b/app/common/styles/base/forms.scss @@ -21,13 +21,13 @@ textarea { border-radius: 0px; border: 1px solid $input-border; height: 3.1em; - margin: 0 0 1em 0; + margin: 0; background: $white; box-shadow: 0 0 0; transition: none !important; &:focus { border-color: $medgrey; - box-shadow: 0 -5px $field__focus inset; + box-shadow: 0 -3px $field__focus inset; } &:disabled, .disabled { @@ -43,6 +43,33 @@ textarea { } } +//input validation +.ng-invalid.ng-touched { + box-shadow: 0 -3px $error-color inset; + &:focus { + border-color: $medgrey; + box-shadow: 0 -3px $error-color inset; + } +} +.submitted .ng-invalid { + box-shadow: 0 -3px $error-color inset; + &:focus { + border-color: $medgrey; + box-shadow: 0 -3px $error-color inset; + } +} + +.form-error { + margin-bottom: .7em; + font-size: 0.8rem; + color: #c60f13; + height:1rem; + display: block; + visibility: hidden; + .visible { + visibility: visible; + } +} //Foundation overwrite [type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea { border-color: $input-border; diff --git a/app/common/styles/base/foundation.scss b/app/common/styles/base/foundation.scss index f1bcb2f..a422dec 100644 --- a/app/common/styles/base/foundation.scss +++ b/app/common/styles/base/foundation.scss @@ -705,31 +705,6 @@ select[multiple] { height: auto; background-image: none; } -.is-invalid-input:not(:focus) { - border-color: #c60f13; - background-color: #f8e6e7; } -.is-invalid-input:not(:focus)::-webkit-input-placeholder { - color: #c60f13; } -.is-invalid-input:not(:focus)::-moz-placeholder { - color: #c60f13; } -.is-invalid-input:not(:focus):-ms-input-placeholder { - color: #c60f13; } -.is-invalid-input:not(:focus)::placeholder { - color: #c60f13; } - -.is-invalid-label { - color: #c60f13; } - -.form-error { - display: none; - margin-top: -0.5rem; - margin-bottom: 1rem; - font-size: 0.75rem; - font-weight: bold; - color: #c60f13; } -.form-error.is-visible { - display: block; } - .hide { display: none !important; } |