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 13input[type='email'], 14input[type='number'], 15input[type='password'], 16input[type='search'], 17input[type='tel'], 18input[type='url'], 19input[type='text'], 20textarea { 21 border-radius: 0px; 22 border: 1px solid $input-border; 23 height: 3.1em; 24 margin: 0; 25 background: $white; 26 box-shadow: 0 0 0; 27 transition: none !important; 28 &:focus { 29 border-color: $medgrey; 30 box-shadow: 0 -3px $field__focus inset; 31 } 32 &:disabled, 33 .disabled { 34 background: $field__disabled; 35 border: 1px solid $lightbg__grey; 36 } 37 &.input__error { 38 box-shadow: 0 -5px $error-color inset; 39 color: $error-color; 40 &:focus { 41 box-shadow: 0 -5px $field__focus inset; 42 } 43 } 44} 45 46//input validation 47.ng-invalid.ng-touched { 48 box-shadow: 0 -3px $error-color inset; 49 &:focus { 50 border-color: $medgrey; 51 box-shadow: 0 -3px $error-color inset; 52 } 53} 54.submitted .ng-invalid { 55 box-shadow: 0 -3px $error-color inset; 56 &:focus { 57 border-color: $medgrey; 58 box-shadow: 0 -3px $error-color inset; 59 } 60} 61 62.form-error { 63 margin-bottom: .7em; 64 font-size: 0.8rem; 65 color: #c60f13; 66 height:1rem; 67 display: block; 68 visibility: hidden; 69 .visible { 70 visibility: visible; 71 } 72} 73//Foundation overwrite 74[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 { 75 border-color: $input-border; 76} 77 78input[readonly], 79input[readonly]:focus{ 80 box-shadow: 0 0 0; 81 background: $field__disabled; 82 border: 1px solid $lightbg__grey; 83} 84 85textarea { padding: .2em; 86 height: auto;} 87input[type="submit"], .submit { 88 margin: 1em 0; 89 width: 100%; 90} 91 92//Custom select 93select{ 94 border-radius: 0px; 95 height:auto; 96 @include fastTransition-all; 97 @include bgImage__arrowDown-primary; 98 &:focus { 99 border-color: $lightbg__accent; 100 @include bgImage__arrowDown-accent; 101 box-shadow: 0 0 0; 102 } 103} 104