ducky/web
ducky/web/src/styles/onboarding.scss
Update our profile model to use our refresh helper. Update our profile model to send the correct authorization header when making requests, and if the request fails because the OAuth token has expired, try to use the refresh token to obtain a new access token, then retry the request.
| 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@9 | 21 #{$all-text-inputs}, label, select { |
| 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@9 | 29 #{$all-text-inputs}, select { |
| paddy@0 | 30 width: 65%; |
| paddy@0 | 31 } |
| paddy@0 | 32 |
| paddy@0 | 33 &.register { |
| paddy@9 | 34 #{$all-text-inputs}, select { |
| 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@9 | 50 #{$all-text-inputs}, select { |
| paddy@2 | 51 width: 60%; |
| paddy@2 | 52 } |
| paddy@2 | 53 |
| paddy@9 | 54 select { |
| paddy@9 | 55 font-size: 1.5em; |
| paddy@9 | 56 } |
| paddy@9 | 57 |
| paddy@2 | 58 input.expiration { |
| paddy@2 | 59 width: 10%; |
| paddy@2 | 60 } |
| paddy@2 | 61 |
| paddy@2 | 62 label.expiration { |
| paddy@2 | 63 max-width: 20%; |
| paddy@2 | 64 margin-left: 2%; |
| paddy@2 | 65 margin-right: 2%; |
| paddy@2 | 66 } |
| paddy@2 | 67 |
| paddy@2 | 68 input.month { |
| paddy@2 | 69 margin-right: 1%; |
| paddy@2 | 70 } |
| paddy@2 | 71 |
| paddy@2 | 72 input.year { |
| paddy@2 | 73 margin-left: 1%; |
| paddy@2 | 74 } |
| paddy@2 | 75 |
| paddy@2 | 76 input.cvc { |
| paddy@2 | 77 width: 13%; |
| paddy@2 | 78 } |
| paddy@2 | 79 |
| paddy@2 | 80 label { |
| paddy@2 | 81 width: 35%; |
| paddy@2 | 82 text-align: right; |
| paddy@2 | 83 padding-right: 1em; |
| paddy@2 | 84 } |
| paddy@2 | 85 |
| paddy@9 | 86 select.plan { |
| paddy@9 | 87 margin-bottom: 0.5em; |
| paddy@9 | 88 } |
| paddy@9 | 89 |
| paddy@2 | 90 form { |
| paddy@2 | 91 font-size: 75%; |
| paddy@2 | 92 margin: 0px auto; |
| paddy@2 | 93 } |
| paddy@2 | 94 } |
| paddy@0 | 95 &.login { |
| paddy@0 | 96 label { |
| paddy@0 | 97 width: 25%; |
| paddy@0 | 98 text-align: right; |
| paddy@0 | 99 padding-right: 1em; |
| paddy@0 | 100 } |
| paddy@0 | 101 |
| paddy@0 | 102 form { |
| paddy@0 | 103 font-size: 85%; |
| paddy@0 | 104 margin: 0px auto; |
| paddy@0 | 105 } |
| paddy@0 | 106 } |
| paddy@0 | 107 } |
| paddy@0 | 108 |
| paddy@0 | 109 .hero img.settings-toggle { |
| paddy@0 | 110 width: 1.25em; |
| paddy@0 | 111 top: 0px; |
| paddy@0 | 112 float: right; |
| paddy@0 | 113 margin: 1em; |
| paddy@0 | 114 cursor: pointer; |
| paddy@0 | 115 } |
| paddy@0 | 116 |
| paddy@0 | 117 .actionbuttons { |
| paddy@0 | 118 padding-top: 1em; |
| paddy@0 | 119 text-align: center; |
| paddy@0 | 120 max-width: 400px; |
| paddy@0 | 121 margin: 0px auto; |
| paddy@0 | 122 |
| paddy@0 | 123 button { |
| paddy@0 | 124 min-width: 48%; |
| paddy@0 | 125 margin: 0px 1%; |
| paddy@0 | 126 } |
| paddy@0 | 127 |
| paddy@0 | 128 button:focus { |
| paddy@0 | 129 outline: none; |
| paddy@0 | 130 } |
| paddy@0 | 131 } |