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