From e7b06c1a339349ee193802e9526e1378bdb96462 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Thu, 22 Aug 2013 22:33:27 -0400 Subject: [PATCH] almost all of the styling for the select page of verification --- lms/static/sass/views/_verification.scss | 148 +++++++++++++++++- lms/templates/verify_student/face_upload.html | 29 ++++ .../verify_student/photo_id_upload.html | 105 ++++++++++--- 3 files changed, 249 insertions(+), 33 deletions(-) diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index 691652063c..7deafa1deb 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -2,19 +2,39 @@ // ==================== body.register.verification { + font-family: 'Open Sans', sans-serif; + + h1, h2, h3, h4, h5, h6, p { font-family: 'Open Sans', sans-serif; + } - h1, h2, h3, h4, h5, h6, p { - font-family: 'Open Sans', sans-serif; - } + .content-wrapper { + background: none repeat scroll 0 0 #F7F7F7; + } + .container { + background-color: #fff; + padding: ($baseline*1.5); + } + + .tip { + @include transition(color 0.15s ease-in-out 0s); + display: block; + margin-top: ($baseline/4); + color: $lighter-base-font-color; + font-size: em(13); + } .page-header { .title { - @extend .t-title5; + @include font-size(18); margin-bottom: $baseline; - font-weight: bold; + border-bottom: 1px solid #ccc; + padding-bottom: 20px; + color: #2F73BC; + font-weight: 300; + text-transform: uppercase; } } @@ -27,23 +47,137 @@ body.register.verification { .select { @include clearfix(); + .divider { + display: block; + clear: both; + width: 60%; + margin: $baseline $baseline 0 $baseline; + border-top: 2px solid #ddd; + + p { + position: relative; + top: -$baseline; + width: 40px; + margin: 0 auto; + padding: 0 $baseline; + background-color: #fff; + font-size: 24px; + color: #aaa; + text-align: center; + } + } .block { + position: relative; float: left; - margin: 0 $baseline $baseline 0; + margin: 0 $baseline ($baseline*1.5) 0; + border-top: 5px solid #32A5D9; background-color: #eee; - padding: $baseline; + padding: $baseline ($baseline*1.5) ($baseline*2) ($baseline*1.5); width: 60%; + + &.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; + } + + } + + + p, li, dl { + color: $lighter-base-font-color; + } + + .wrap-copy { + width: 60%; + display: inline-block; + vertical-align: middle; + } + .title { @extend .t-title7; } + .m-btn-primary { + position: absolute; + bottom: ($baseline*1.5); + right: ($baseline*1.5); + + a { + color: $very-light-text; + + &:hover { + text-decoration: none; + border: none; + } + } + + &.green { + box-shadow: 0 2px 1px rgba(2,100,2,1); + background-color: rgba(0,136,1,1); + + &:hover { + box-shadow: 0 2px 1px rgba(2,100,2,1); + background-color: #029D03; + } + + } + } + + } + + hr { + margin: 1em 0 2em 0; } .tips { float: right; width: 32%; + + p { + font-size: 14px; + } } } diff --git a/lms/templates/verify_student/face_upload.html b/lms/templates/verify_student/face_upload.html index 42328eba0a..3427b82d3b 100644 --- a/lms/templates/verify_student/face_upload.html +++ b/lms/templates/verify_student/face_upload.html @@ -216,6 +216,35 @@ $(document).ready(function() { +
+

Check Your Contribution

+ +
+
+ The contribution you selected for this course is (in USD): +
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+