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