pearson registration - revised UI states for reg form, simplified markup for form fields, synched button styles/text b/t registration form and dashboard

This commit is contained in:
Brian Talbot
2013-01-08 11:37:26 -05:00
parent b41f68c801
commit 352f284624
4 changed files with 175 additions and 59 deletions

View File

@@ -410,7 +410,7 @@
margin: 20px 0 10px;
padding: 15px 20px;
font-family: $sans-serif;
background: #fffcf0;
background: tint($yellow,70%);
border: 1px solid #ccc;
.message-copy {
@@ -498,18 +498,28 @@
}
}
.contact-button {
@include button(simple, $blue);
}
.exam-button {
@include button(simple, $pink);
}
.button {
float: right;
padding: 9px 18px 10px;
font-size: 13px;
font-weight: 400;
font-weight: bold;
letter-spacing: 0;
&:hover {
text-decoration: none;
}
}
&.is-shown {
display: block;
}

View File

@@ -71,11 +71,21 @@ $red: rgb(178, 6, 16);
@include border-radius(3px);
@include box-shadow(0 1px 2px 0 rgba(0,0,0, 0.2));
.instructions {
.instructions, .note {
margin: 0;
padding: ($baseline*1.5) ($baseline*1.5) 0 ($baseline*1.5);
font-family: $sans-serif;
font-size: 14px;
color: tint($base-font-color, 20%);
strong {
font-weight: normal;
}
.title, .indicator {
color: $base-font-color;
font-weight: 700;
}
}
fieldset {
@@ -84,11 +94,11 @@ $red: rgb(178, 6, 16);
}
.form-actions {
@include clearfix();
padding: ($baseline*1.5);
button[type="submit"] {
display: block;
width: 100%;
@include button(simple, $blue);
@include box-sizing(border-box);
@include border-radius(3px);
@@ -98,6 +108,23 @@ $red: rgb(178, 6, 16);
text-align: center;
}
.action-primary {
float: left;
width: flex-grid(5,8);
margin-right: flex-gutter(2);
}
.action-secondary {
display: block;
float: left;
width: flex-grid(2,8);
margin-top: $baseline;
padding: ($baseline/4);
font-size: 13px;
text-align: right;
text-transform: uppercase;
}
&.error {
}
@@ -224,7 +251,7 @@ $red: rgb(178, 6, 16);
display: block;
float: left;
border-bottom: none;
margin: 0 ($baseline) 0 0;
margin: 0 $baseline ($baseline/2) 0;
padding-bottom: 0;
input, textarea {
@@ -239,7 +266,7 @@ $red: rgb(178, 6, 16);
}
}
&.postal {
&.postal-2 {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
@@ -268,7 +295,6 @@ $red: rgb(178, 6, 16);
padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
font-family: $sans-serif;
font-size: 13px;
text-align: right;
&.is-hidden {
display: none;
@@ -343,7 +369,7 @@ $red: rgb(178, 6, 16);
top: 0;
right: $baseline;
margin-left: $baseline;
content: "testing";
content: "not started";
text-transform: uppercase;
font-size: 11px;
font-weight: normal;
@@ -408,6 +434,18 @@ $red: rgb(178, 6, 16);
}
}
&.status-initial {
&:before {
background: transparent;
border: 1px dotted gray;
}
.title:after {
color: gray;
}
}
&:hover {
.details, .item {
@@ -438,6 +476,10 @@ $red: rgb(178, 6, 16);
background: tint($yellow,70%);
font-size: 14px;
.title {
font-size: 14px;
}
.label, .value {
display: inline-block;
}
@@ -556,6 +598,58 @@ $red: rgb(178, 6, 16);
font-size: 14px;
}
// registration status
&.message-flash {
display: block;
@include border-radius(3px);
position: relative;
margin: 0 0 ($baseline*2) 0;
border: 1px solid #ccc;
padding-top: ($baseline*0.75);
background: tint($yellow,70%);
font-size: 14px;
.message-title, .message-copy {
font-family: $sans-serif;
font-size: 14px;
}
.message-title {
font-weight: bold;
margin: 0 0 ($baseline/4) 0;
}
.contact-button {
@include button(simple, $blue);
}
.exam-button {
@include button(simple, $pink);
}
.button {
position: absolute;
top: ($baseline/4);
right: $baseline;
margin: ($baseline/2) 0 0 0;
padding: ($baseline/2) $baseline;
font-size: 13px;
font-weight: bold;
&:hover {
text-decoration: none;
}
}
&.message-action {
.message-title, .message-copy {
width: 65%;
}
}
}
// submission error
&.submission-error {
border: 1px solid tint($red,85%);