ducky/web
ducky/web/src/styles/_flashes.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@2 | 1 $base-spacing: 1.5em !default; |
| paddy@2 | 2 $alert-color: #fff6bf !default; |
| paddy@2 | 3 $error-color: #fbe3e4 !default; |
| paddy@2 | 4 $notice-color: #e5edf8 !default; |
| paddy@2 | 5 $success-color: #e6efc2 !default; |
| paddy@2 | 6 |
| paddy@2 | 7 @mixin flash($color) { |
| paddy@2 | 8 background-color: $color; |
| paddy@2 | 9 color: darken($color, 60%); |
| paddy@2 | 10 display: block; |
| paddy@2 | 11 font-weight: 500; |
| paddy@2 | 12 margin-bottom: $base-spacing / 2; |
| paddy@2 | 13 padding: $base-spacing / 2; |
| paddy@2 | 14 text-align: center; |
| paddy@2 | 15 |
| paddy@2 | 16 a { |
| paddy@2 | 17 color: darken($color, 70%); |
| paddy@2 | 18 text-decoration: underline; |
| paddy@2 | 19 |
| paddy@2 | 20 &:focus, |
| paddy@2 | 21 &:hover { |
| paddy@2 | 22 color: darken($color, 90%); |
| paddy@2 | 23 } |
| paddy@2 | 24 } |
| paddy@2 | 25 } |
| paddy@2 | 26 |
| paddy@2 | 27 .flash-alert { |
| paddy@2 | 28 @include flash($alert-color); |
| paddy@2 | 29 } |
| paddy@2 | 30 |
| paddy@2 | 31 .flash-error { |
| paddy@2 | 32 @include flash($error-color); |
| paddy@2 | 33 } |
| paddy@2 | 34 |
| paddy@2 | 35 .flash-notice { |
| paddy@2 | 36 @include flash($notice-color); |
| paddy@2 | 37 } |
| paddy@2 | 38 |
| paddy@2 | 39 .flash-success { |
| paddy@2 | 40 @include flash($success-color); |
| paddy@2 | 41 } |
| paddy@2 | 42 |