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:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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%);
|
||||
|
||||
Reference in New Issue
Block a user