refinements on the verification html and sass
This commit is contained in:
@@ -8,6 +8,16 @@ body.register.verification {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
dt {
|
||||
margin-bottom: ($baseline*.75);
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.content-wrapper {
|
||||
background: none repeat scroll 0 0 #F7F7F7;
|
||||
}
|
||||
@@ -79,49 +89,6 @@ body.register.verification {
|
||||
|
||||
&.block-cert {
|
||||
border-top: 5px solid #008801;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
background-color: $light-gray;
|
||||
padding: ($baseline/2) ($baseline*.75);
|
||||
margin-right: ($baseline/4);
|
||||
vertical-align: middle;
|
||||
|
||||
label {
|
||||
font-style: normal;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.other1 {
|
||||
margin-right: -($baseline/4);
|
||||
padding-right: ($baseline/4);
|
||||
}
|
||||
&.other2 {
|
||||
padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0;
|
||||
}
|
||||
|
||||
input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
dt {
|
||||
margin-bottom: ($baseline*.75);
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -160,10 +127,43 @@ body.register.verification {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.pay-options {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
background-color: $light-gray;
|
||||
padding: ($baseline/2) ($baseline*.75);
|
||||
margin-right: ($baseline/4);
|
||||
vertical-align: middle;
|
||||
|
||||
label {
|
||||
font-style: normal;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.other1 {
|
||||
margin-right: -($baseline/4);
|
||||
padding-right: ($baseline/4);
|
||||
}
|
||||
&.other2 {
|
||||
padding: ($baseline/4) ($baseline*.75) ($baseline/4) 0;
|
||||
}
|
||||
|
||||
input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.m-btn-primary {
|
||||
|
||||
a {
|
||||
|
||||
@@ -37,7 +37,7 @@ $(document).ready(function() {
|
||||
|
||||
|
||||
<section class="wrapper carousel" data-transition="slide">
|
||||
<div id="wrapper-facephoto" class="block-photo">
|
||||
<div id="wrapper-facephoto" class="block block-photo">
|
||||
<h3 class="title">Take Your Photo</h3>
|
||||
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
|
||||
|
||||
@@ -93,7 +93,9 @@ $(document).ready(function() {
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li class="action action-next">
|
||||
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
|
||||
<p class="m-btn-primary">
|
||||
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
|
||||
</p>
|
||||
<p class="tips">Once you verify your photo looks good, you can move on to step 2.</p>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -104,7 +106,7 @@ $(document).ready(function() {
|
||||
|
||||
|
||||
|
||||
<div id="wrapper-idphoto" class="block-photo">
|
||||
<div id="wrapper-idphoto" class="block block-photo">
|
||||
<h3 class="title">Take Your Photo</h3>
|
||||
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
|
||||
|
||||
@@ -163,7 +165,9 @@ $(document).ready(function() {
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li class="action action-next">
|
||||
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
|
||||
<p class="m-btn-primary">
|
||||
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
|
||||
</p>
|
||||
<p class="tips">Once you verify your ID photo looks good, you can move on to step 3.</p>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -174,7 +178,7 @@ $(document).ready(function() {
|
||||
|
||||
|
||||
|
||||
<div id="wrapper-review" class="block-photo">
|
||||
<div id="wrapper-review" class="block block-photo">
|
||||
<h3 class="title">Verify Your Submission</h3>
|
||||
<p>Make sure we can verify your identity with the photos and information below.</p>
|
||||
|
||||
@@ -219,24 +223,24 @@ $(document).ready(function() {
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
The contribution you selected for this course is (in USD):
|
||||
Select your contribution for this course:
|
||||
</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<ul class="pay-options">
|
||||
<li>
|
||||
<input type="radio" name="contribution-25" id="contribution"> <label for="contribution-25">$25</label>
|
||||
<input type="radio" id="contribution-25" name="contribution"> <label for="contribution-25">$25 USD</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="contribution-50" id="contribution"> <label for="contribution-50">$50</label>
|
||||
<input type="radio" id="contribution-50" name="contribution"> <label for="contribution-50">$50 USD</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="contribution-100" id="contribution"> <label for="contribution-100">$100</label>
|
||||
<input type="radio" id="contribution-100" name="contribution"> <label for="contribution-100">$100 USD</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="contribution-other" id="contribution"> <label for="contribution-other">Other</label>
|
||||
<li class="other1">
|
||||
<input type="radio" id="contribution-other" name="contribution"> <label for="contribution-other"><span class="sr">Other</span></label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="contribution-other-amt">Other Amount</label> <input type="text" name="contribution-other" id="contribution-other-amt">
|
||||
<li class="other2">
|
||||
<label for="contribution-other-amt"><span class="sr">Other Amount</span> $</label> <input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt">
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
@@ -254,7 +258,7 @@ $(document).ready(function() {
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li class="action action-next">
|
||||
<a href="#">Go to Step 4: Secure Payment</a>
|
||||
<p class="m-btn-primary"><a href="#">Go to Step 4: Secure Payment</a></p>
|
||||
<p class="tips">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</p>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -265,8 +269,8 @@ $(document).ready(function() {
|
||||
|
||||
|
||||
<section class="support">
|
||||
<p>More questions? <a rel="external" href="">Check out our FAQs.</a></p>
|
||||
<p>Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
|
||||
<p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p>
|
||||
<p class="tip">Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
@@ -59,7 +59,7 @@ $(document).ready(function() {
|
||||
Select your contribution for this course:
|
||||
</dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<ul class="pay-options">
|
||||
<li>
|
||||
<input type="radio" id="contribution-25" name="contribution"> <label for="contribution-25">$25 USD</label>
|
||||
</li>
|
||||
|
||||
@@ -79,8 +79,8 @@
|
||||
</section>
|
||||
|
||||
<section class="support">
|
||||
<p>More questions? <a rel="external" href="">Check out our FAQs.</a></p>
|
||||
<p>Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
|
||||
<p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p>
|
||||
<p class="tip">Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user