ducky/web

Paddy 2015-05-31 Parent:b9d0efb44eaa Child:e9e0a28a7419

6:a641906b8267 Go to Latest

ducky/web/src/styles/onboarding.scss

Enable catch-all in our ValidationError component. We're doing this an ugly, hacky way. But it works, and right now, that's what counts. To match our params/fields/headers properties on the ValidationError component, we're going to add the notParams/notFields/notHeaders properties--they match any error _not_ targeting those params/fields/headers. Basically, "any error that wouldn't be caught by these filters". Which is an ugly, but workable, solution for a catch-all ValidationError--just tell it to catch anything but the params/fields/headers that are being handled by the other ValidationErrors. Our implementation of this in the RegisterPage component validates (ha!) that it's at least workable model, if not overly pretty. Also, I anticipate some human error bugs in the future, where one of the field-specific ValidationErrors gets updated and the catch-all ValidationError does not. But whatever. For now, this is Good Enough™.

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 {
22 display: inline-block;
23 }
24
25 label {
26 max-width: 35%;
27 }
28
29 #{$all-text-inputs} {
30 width: 65%;
31 }
32
33 &.register {
34 #{$all-text-inputs} {
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} {
51 width: 60%;
52 }
53
54 input.expiration {
55 width: 10%;
56 }
57
58 label.expiration {
59 max-width: 20%;
60 margin-left: 2%;
61 margin-right: 2%;
62 }
63
64 input.month {
65 margin-right: 1%;
66 }
67
68 input.year {
69 margin-left: 1%;
70 }
71
72 input.cvc {
73 width: 13%;
74 }
75
76 label {
77 width: 35%;
78 text-align: right;
79 padding-right: 1em;
80 }
81
82 form {
83 font-size: 75%;
84 margin: 0px auto;
85 }
86 }
87 &.login {
88 label {
89 width: 25%;
90 text-align: right;
91 padding-right: 1em;
92 }
93
94 form {
95 font-size: 85%;
96 margin: 0px auto;
97 }
98 }
99 }
100
101 .hero img.settings-toggle {
102 width: 1.25em;
103 top: 0px;
104 float: right;
105 margin: 1em;
106 cursor: pointer;
107 }
108
109 .actionbuttons {
110 padding-top: 1em;
111 text-align: center;
112 max-width: 400px;
113 margin: 0px auto;
114
115 button {
116 min-width: 48%;
117 margin: 0px 1%;
118 }
119
120 button:focus {
121 outline: none;
122 }
123 }