ducky/web
ducky/web/src/styles/onboarding.scss
Update our ValidationError component to accept arrays. Allow our ValidationError component to match an array of fields, headers, or params. This is for components that may address multiple inputs (e.g., month/year inputs) but also lays the ground work for inverse-matching. Ideally, inverse-matching and matching ValidationErrors should mirror each other, logically, so the syntax is identical. But we also should have the common use case easily supported, so if you use field instead of fields (or header/headers, param/params) we'll automatically turn that into an array.
| 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 } |