1label, legend { 2 font-size:1em; 3 font-weight: 300; 4 margin: 0; 5 &.disabled { 6 color: $lightbg__grey; 7 } 8 .error { 9 font-size: .9em; 10 } 11} 12 13.label__helper-text { 14 color: $darkgrey; 15 line-height: 1.2; 16 font-size: 0.9em; 17 margin-bottom: 0.4em; 18} 19 20input[type='email'], 21input[type='number'], 22input[type='password'], 23input[type='search'], 24input[type='tel'], 25input[type='url'], 26input[type='text'], 27input[type='date'], 28input[type='time'], 29textarea { 30 border-radius: 0px; 31 border: 1px solid $input-border; 32 margin: 0; 33 background: $white; 34 box-shadow: 0 0 0; 35 transition: none !important; 36 max-height: 2.1em; 37 &:focus { 38 border-color: $medgrey; 39 box-shadow: 0 -3px $field__focus inset; 40 } 41 &:disabled, 42 .disabled { 43 background: $field__disabled; 44 border: 1px solid $lightbg__grey; 45 } 46 &.input__error { 47 box-shadow: 0 -5px $error-color inset; 48 color: $error-color; 49 &:focus { 50 box-shadow: 0 -5px $field__focus inset; 51 } 52 } 53} 54 55//input validation 56.ng-invalid.ng-touched { 57 box-shadow: 0 -3px $error-color inset; 58 &:focus { 59 border-color: $medgrey; 60 box-shadow: 0 -3px $error-color inset; 61 } 62} 63.submitted .ng-invalid { 64 box-shadow: 0 -3px $error-color inset; 65 &:focus { 66 border-color: $medgrey; 67 box-shadow: 0 -3px $error-color inset; 68 } 69} 70 71.form-error { 72 margin-bottom: .7em; 73 font-size: 0.8rem; 74 color: #c60f13; 75 height:1rem; 76 display: block; 77 visibility: hidden; 78 .visible { 79 visibility: visible; 80 } 81} 82//Foundation overwrite 83[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 { 84 border-color: $input-border; 85} 86 87input[readonly], 88input[readonly]:focus{ 89 box-shadow: 0 0 0; 90 background: $field__disabled; 91 border: 1px solid $lightbg__grey; 92} 93 94textarea { padding: .2em; 95 height: auto;} 96input[type="submit"], .submit { 97 margin: 1em 0; 98 width: 100%; 99} 100 101//Custom select 102select{ 103 border-radius: 0px; 104 height: auto; 105 padding-right: 0.5rem; //override inherited Foundation style 106 border-color: $input-border; 107 @include fastTransition-all; 108 @include bgImage__arrowDown-primary; 109 &:focus { 110 box-shadow: 0 0 0; 111 } 112 &[disabled] { 113 @include bgImage__arrowDown-disabled; 114 } 115} 116 117#login__form { 118 input { 119 height: 3em; 120 max-height: none; 121 } 122} 123.form__validation-message { 124 color: $error-color; 125 font-size: 0.9em; 126} 127