ducky/web
ducky/web/src/styles/onboarding.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 @import "bourbon"; |
| paddy@0 | 2 @Import "neat"; |
| paddy@0 | 3 @import "base/base"; |
| paddy@0 | 4 @import "hero"; |
| paddy@0 | 5 @import "button"; |
| paddy@0 | 6 |
| paddy@0 | 7 .onboarding { |
| paddy@0 | 8 $content-max-width: 600px; |
| paddy@0 | 9 $content-width: 100%; |
| paddy@0 | 10 |
| paddy@0 | 11 padding: 1.5em; |
| paddy@0 | 12 font-size: 1.25em; |
| paddy@0 | 13 max-width: $content-max-width; |
| paddy@0 | 14 width: $content-width; |
| paddy@0 | 15 margin: 0px auto; |
| paddy@0 | 16 |
| paddy@0 | 17 ul, ol { |
| paddy@0 | 18 list-style-type: square; |
| paddy@0 | 19 } |
| paddy@0 | 20 |
| paddy@0 | 21 #{$all-text-inputs}, label { |
| paddy@0 | 22 display: inline-block; |
| paddy@0 | 23 } |
| paddy@0 | 24 |
| paddy@0 | 25 label { |
| paddy@0 | 26 max-width: 35%; |
| paddy@0 | 27 } |
| paddy@0 | 28 |
| paddy@0 | 29 #{$all-text-inputs} { |
| paddy@0 | 30 width: 65%; |
| paddy@0 | 31 } |
| paddy@0 | 32 |
| paddy@0 | 33 &.register { |
| paddy@0 | 34 #{$all-text-inputs} { |
| paddy@0 | 35 width: 60%; |
| paddy@0 | 36 } |
| paddy@0 | 37 |
| paddy@0 | 38 label { |
| paddy@0 | 39 width: 35%; |
| paddy@0 | 40 text-align: right; |
| paddy@0 | 41 padding-right: 1em; |
| paddy@0 | 42 } |
| paddy@0 | 43 |
| paddy@0 | 44 form { |
| paddy@0 | 45 font-size: 75%; |
| paddy@0 | 46 margin: 0px auto; |
| paddy@0 | 47 } |
| paddy@0 | 48 } |
| paddy@2 | 49 &.payment { |
| paddy@2 | 50 #{$all-text-inputs} { |
| paddy@2 | 51 width: 60%; |
| paddy@2 | 52 } |
| paddy@2 | 53 |
| paddy@2 | 54 input.expiration { |
| paddy@2 | 55 width: 10%; |
| paddy@2 | 56 } |
| paddy@2 | 57 |
| paddy@2 | 58 label.expiration { |
| paddy@2 | 59 max-width: 20%; |
| paddy@2 | 60 margin-left: 2%; |
| paddy@2 | 61 margin-right: 2%; |
| paddy@2 | 62 } |
| paddy@2 | 63 |
| paddy@2 | 64 input.month { |
| paddy@2 | 65 margin-right: 1%; |
| paddy@2 | 66 } |
| paddy@2 | 67 |
| paddy@2 | 68 input.year { |
| paddy@2 | 69 margin-left: 1%; |
| paddy@2 | 70 } |
| paddy@2 | 71 |
| paddy@2 | 72 input.cvc { |
| paddy@2 | 73 width: 13%; |
| paddy@2 | 74 } |
| paddy@2 | 75 |
| paddy@2 | 76 label { |
| paddy@2 | 77 width: 35%; |
| paddy@2 | 78 text-align: right; |
| paddy@2 | 79 padding-right: 1em; |
| paddy@2 | 80 } |
| paddy@2 | 81 |
| paddy@2 | 82 form { |
| paddy@2 | 83 font-size: 75%; |
| paddy@2 | 84 margin: 0px auto; |
| paddy@2 | 85 } |
| paddy@2 | 86 } |
| paddy@0 | 87 &.login { |
| paddy@0 | 88 label { |
| paddy@0 | 89 width: 25%; |
| paddy@0 | 90 text-align: right; |
| paddy@0 | 91 padding-right: 1em; |
| paddy@0 | 92 } |
| paddy@0 | 93 |
| paddy@0 | 94 form { |
| paddy@0 | 95 font-size: 85%; |
| paddy@0 | 96 margin: 0px auto; |
| paddy@0 | 97 } |
| paddy@0 | 98 } |
| paddy@0 | 99 } |
| paddy@0 | 100 |
| paddy@0 | 101 .hero img.settings-toggle { |
| paddy@0 | 102 width: 1.25em; |
| paddy@0 | 103 top: 0px; |
| paddy@0 | 104 float: right; |
| paddy@0 | 105 margin: 1em; |
| paddy@0 | 106 cursor: pointer; |
| paddy@0 | 107 } |
| paddy@0 | 108 |
| paddy@0 | 109 .actionbuttons { |
| paddy@0 | 110 padding-top: 1em; |
| paddy@0 | 111 text-align: center; |
| paddy@0 | 112 max-width: 400px; |
| paddy@0 | 113 margin: 0px auto; |
| paddy@0 | 114 |
| paddy@0 | 115 button { |
| paddy@0 | 116 min-width: 48%; |
| paddy@0 | 117 margin: 0px 1%; |
| paddy@0 | 118 } |
| paddy@0 | 119 |
| paddy@0 | 120 button:focus { |
| paddy@0 | 121 outline: none; |
| paddy@0 | 122 } |
| paddy@0 | 123 } |