ducky/web

Paddy 2015-06-30 Parent:b9d0efb44eaa Child:21f80f56cda9

9:e9e0a28a7419 Go to Latest

ducky/web/src/styles/onboarding.scss

Update to use plans instead of PWYW. If we're going to lean on Stripe for most of our subscription processing, we need to use plans, instead of pay what you want. This updates the page to replace our amount input with a plan select box. It also removes the nonsense about finding your first charge date, because Stripe forced us into a simpler, but harder to predict, billing model. We also updated our CSS to work with select boxes, as well as text inputs.

Download raw file
View source Diff to previous Annotate
History
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 }