ducky/web

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

13:d51e39bf909c Go to Latest

ducky/web/src/styles/onboarding.scss

Update our profiles collection to use ampersand-rest-collection. Use ampersand-rest-collection instead of ampersand-collection, so we can take advantage of the excellent "getOrFetch" function to fall back on the server when looking for a member of the collection that isn't downloaded yet. Also, use the correct Authorization header when making profile collection requests. Finally, if the profile collection requests fail due to an expired access token, use the refresh token to acquire a new access token, then retry the request.

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