ducky/web
ducky/web/src/styles/onboarding.scss
Update to hosted URL, use oauth-refresh in profiles. When syncing the profiles, use our oauth-refresh sync helper, so it won't fail because of an expired OAuth token. Also, update our URL to use the nginx-fronted URL.
| 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 } |