ducky/web

Paddy 2015-05-31 Parent:99a43a6d1d30

6:a641906b8267 Go to Latest

ducky/web/src/styles/base/_forms.scss

Enable catch-all in our ValidationError component. We're doing this an ugly, hacky way. But it works, and right now, that's what counts. To match our params/fields/headers properties on the ValidationError component, we're going to add the notParams/notFields/notHeaders properties--they match any error _not_ targeting those params/fields/headers. Basically, "any error that wouldn't be caught by these filters". Which is an ugly, but workable, solution for a catch-all ValidationError--just tell it to catch anything but the params/fields/headers that are being handled by the other ValidationErrors. Our implementation of this in the RegisterPage component validates (ha!) that it's at least workable model, if not overly pretty. Also, I anticipate some human error bugs in the future, where one of the field-specific ValidationErrors gets updated and the catch-all ValidationError does not. But whatever. For now, this is Good Enough™.

Download raw file
View source Diff to previous Annotate
History
1 fieldset {
2 background-color: lighten($base-border-color, 10%);
3 border: $base-border;
4 margin: 0 0 $small-spacing;
5 padding: $base-spacing;
6 }
7
8 input,
9 label,
10 select {
11 display: block;
12 font-family: $base-font-family;
13 font-size: $base-font-size;
14 }
15
16 label {
17 font-weight: 600;
18 margin-bottom: $small-spacing / 2;
19
20 &.required::after {
21 content: "*";
22 }
23
24 abbr {
25 display: none;
26 }
27 }
28
29 #{$all-text-inputs},
30 select[multiple=multiple],
31 textarea {
32 background-color: $base-background-color;
33 border: $base-border;
34 border-radius: $base-border-radius;
35 box-shadow: $form-box-shadow;
36 box-sizing: border-box;
37 font-family: $base-font-family;
38 font-size: $base-font-size;
39 margin-bottom: $base-spacing / 2;
40 padding: $base-spacing / 3;
41 transition: border-color;
42 width: 100%;
43
44 &:hover {
45 border-color: darken($base-border-color, 10%);
46 }
47
48 &:focus {
49 border-color: $action-color;
50 box-shadow: $form-box-shadow-focus;
51 outline: none;
52 }
53 }
54
55 textarea {
56 resize: vertical;
57 }
58
59 input[type="search"] {
60 @include appearance(none);
61 }
62
63 input[type="checkbox"],
64 input[type="radio"] {
65 display: inline;
66 margin-right: $small-spacing / 2;
67 }
68
69 input[type="file"] {
70 padding-bottom: $small-spacing;
71 width: 100%;
72 }
73
74 select {
75 margin-bottom: $base-spacing;
76 max-width: 100%;
77 width: auto;
78 }