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