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