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