ducky/web
ducky/web/src/styles/base/_typography.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 body { |
| paddy@0 | 2 @include font-feature-settings("kern", "liga", "pnum"); |
| paddy@0 | 3 -webkit-font-smoothing: antialiased; |
| paddy@0 | 4 color: $base-font-color; |
| paddy@0 | 5 font-family: $base-font-family; |
| paddy@0 | 6 font-size: $base-font-size; |
| paddy@0 | 7 line-height: $base-line-height; |
| paddy@0 | 8 } |
| paddy@0 | 9 |
| paddy@0 | 10 h1, |
| paddy@0 | 11 h2, |
| paddy@0 | 12 h3, |
| paddy@0 | 13 h4, |
| paddy@0 | 14 h5, |
| paddy@0 | 15 h6 { |
| paddy@0 | 16 font-family: $heading-font-family; |
| paddy@0 | 17 font-size: $base-font-size; |
| paddy@0 | 18 line-height: $heading-line-height; |
| paddy@0 | 19 margin: 0 0 $small-spacing; |
| paddy@0 | 20 } |
| paddy@0 | 21 |
| paddy@0 | 22 p { |
| paddy@0 | 23 margin: 0 0 $small-spacing; |
| paddy@0 | 24 } |
| paddy@0 | 25 |
| paddy@0 | 26 a { |
| paddy@0 | 27 color: $action-color; |
| paddy@0 | 28 text-decoration: none; |
| paddy@0 | 29 transition: color 0.1s linear; |
| paddy@0 | 30 |
| paddy@0 | 31 &:active, |
| paddy@0 | 32 &:focus, |
| paddy@0 | 33 &:hover { |
| paddy@0 | 34 color: darken($action-color, 15%); |
| paddy@0 | 35 } |
| paddy@0 | 36 |
| paddy@0 | 37 &:active, |
| paddy@0 | 38 &:focus { |
| paddy@0 | 39 outline: none; |
| paddy@0 | 40 } |
| paddy@0 | 41 } |
| paddy@0 | 42 |
| paddy@0 | 43 hr { |
| paddy@0 | 44 border-bottom: $base-border; |
| paddy@0 | 45 border-left: none; |
| paddy@0 | 46 border-right: none; |
| paddy@0 | 47 border-top: none; |
| paddy@0 | 48 margin: $base-spacing 0; |
| paddy@0 | 49 } |
| paddy@0 | 50 |
| paddy@0 | 51 img, |
| paddy@0 | 52 picture { |
| paddy@0 | 53 margin: 0; |
| paddy@0 | 54 max-width: 100%; |
| paddy@0 | 55 } |