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