1label,
2legend {
3  margin: 0;
4  color: $text-02;
5  text-transform: uppercase;
6  font-weight: 700;
7  font-size: 0.75em;
8  margin-bottom: 0;
9  line-height: 2.2;
10  .error {
11    font-size: 0.9em;
12  }
13}
14
15// TODO: Start replacing use of label__helper-text
16.label__helper-text,
17.form__helper-text {
18  color: $text-02;
19  line-height: 1.2;
20  font-size: 0.9em;
21  margin-bottom: 0.4em;
22}
23
24input[type="email"],
25input[type="number"],
26input[type="password"],
27input[type="search"],
28input[type="tel"],
29input[type="url"],
30input[type="text"],
31input[type="date"],
32input[type="time"],
33textarea {
34  border-radius: 0px;
35  border: 1px solid $border-color-02;
36  margin: 0;
37  background: $primary-light;
38  box-shadow: 0 0 0;
39  transition: none !important;
40  max-height: 2.1em;
41  &:focus {
42    border-color: $border-color-01;
43    box-shadow: 0 -3px $primary-accent inset;
44  }
45  &:disabled,
46  .disabled {
47    background: $background-03;
48    border: 1px solid $border-color-02;
49  }
50  &.input__error {
51    box-shadow: 0 -5px $status-error inset;
52    color: $status-error;
53    &:focus {
54      box-shadow: 0 -5px $primary-accent inset;
55    }
56  }
57}
58
59//input validation
60.ng-invalid.ng-touched {
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.submitted .ng-invalid {
68  box-shadow: 0 -3px $status-error inset;
69  &:focus {
70    border-color: $border-color-01;
71    box-shadow: 0 -3px $status-error inset;
72  }
73}
74
75.form-error {
76  margin-bottom: 0.7em;
77  font-size: 0.8rem;
78  color: $status-error;
79  height: 1rem;
80  display: block;
81  visibility: hidden;
82  // TODO: Create state rulesets rather than relying on one off solutions
83  .visible {
84    visibility: visible;
85  }
86}
87//Foundation overwrite
88[type="color"],
89[type="date"],
90[type="datetime-local"],
91[type="datetime"],
92[type="email"],
93[type="month"],
94[type="number"],
95[type="password"],
96[type="search"],
97[type="tel"],
98[type="text"],
99[type="time"],
100[type="url"],
101[type="week"],
102textarea {
103  border-color: $border-color-02;
104}
105
106input[readonly],
107input[readonly]:focus {
108  box-shadow: 0 0 0;
109  background: $background-03;
110  border: 1px solid $border-color-02;
111}
112
113textarea {
114  padding: 0.2em;
115  height: auto;
116}
117
118input[type="submit"],
119.submit {
120  margin: 1em 0;
121  width: 100%;
122}
123
124// Custom select
125select {
126  border-radius: 0px;
127  height: auto;
128  padding-right: 0.5rem; //override inherited Foundation style
129  border-color: $border-color-02;
130  @include fastTransition-all;
131  @include bgImage__arrowDown-primary;
132  &:focus {
133    box-shadow: 0 0 0;
134  }
135  &[disabled] {
136    @include bgImage__arrowDown-disabled;
137  }
138}
139
140#login__form {
141  input {
142    height: 3em;
143    max-height: none;
144  }
145}
146.form__validation-message {
147  color: $status-error;
148  font-size: 0.8em;
149  line-height: 1.1;
150  padding-top: 2px;
151}
152
153.radio-label {
154  text-transform: none;
155  font-weight: normal;
156  font-size: 0.9em;
157  line-height: 1.2;
158  margin: 0.8em 0;
159  color: $text-01;
160  input[type=radio] {
161    margin-bottom: 0;
162  }
163}
164
165/**
166 * Used for basic vertically stacked forms
167 * that do not need a grid for layout
168 * Should only wrap form elements and label
169 * Helper text shoul not be wrapped in the
170 * form-field container
171 * EX: Manage Power Usage
172 * Markup
173    <div class="section-content">
174      <p class="form__helper-text">Some helper text</p>
175      <div class=" form__field">
176        <label for="power-cap" class="content-label">POWER CAP VALUE IN WATTS</label>
177        <input id="power-cap type="number" />
178      </div>
179    </div>
180  */
181
182.form__field {
183  min-width: 150px;
184  max-width: 240px;
185}
186
187.form__field--large {
188  max-width: 330px;
189}
190
191// TODO Replace form-actions with form__actions. see below
192.form-actions {
193  width: 100%;
194  margin-top: 3rem;
195  padding-top: 1rem;
196  border-top: 1px solid $border-color-01;
197
198  button {
199    display: block;
200    float: right;
201    margin: 0.5em 0 0 1em;
202  }
203}
204
205/**
206 * Use to wrap the cancel and submit buttons on
207 * a form to create the top border and white space
208 * Markup
209  <div class="form-actions">
210    <button type="submit" class="btn-primary" ng-click="setPowerCap()">
211      Save settings
212    </button>
213    <button type="button" class="btn btn-secondary" ng-click="refresh()">
214      Cancel
215    </button>
216  </div>
217 */
218
219.form__actions {
220  margin-top: 3rem;
221  padding-top: 1rem;
222  border-top: 1px solid $border-color-01;
223  display: flex;
224  justify-content: flex-end;
225
226  button:first-of-type {
227    order: 1;
228    margin-left: 1rem;
229  }
230}
231
232.radio-option__input-field-group {
233  margin-left: 1.5em;
234}
235
236.field-group-container {
237  margin-bottom: 30px;
238  position: relative;
239  &:last-child {
240    margin-bottom: 12px;
241  }
242
243  input + .form__validation-message {
244    position: absolute;
245  }
246}
247