ducky/web

Paddy 2015-06-04 Parent:b9d0efb44eaa Child:e9e0a28a7419

ducky/web/src/styles/onboarding.scss

Display server error messages when adding card. When adding a credit card, correctly display user-friendly messages.

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