diff --git a/lms/static/certificates/css/style-application.css b/lms/static/certificates/css/style-application.css index eeef0a9823..c764351024 100644 --- a/lms/static/certificates/css/style-application.css +++ b/lms/static/certificates/css/style-application.css @@ -62,7 +62,7 @@ position: absolute; width: 1px; } -.view-valid-certificate .accomplishment, .view-valid-certificate .accomplishment-statement, .view-valid-certificate .accomplishment-details, .view-valid-certificate .content-supplemental-how, .view-valid-certificate .content-supplemental-certificates, .view-valid-certificate .content-supplemental-about, .view-invalid-certificate .feedback, .view-invalid-certificate .supplemental-how, .view-invalid-certificate .supplemental-certificates, .view-invalid-certificate .supplemental-about { +.view-certificate .content-supplemental-how, .view-certificate .content-supplemental-certificates, .view-certificate .content-supplemental-about, .view-valid-certificate .accomplishment, .view-valid-certificate .accomplishment-statement, .view-valid-certificate .accomplishment-details, .view-invalid-certificate .feedback { -webkit-transition: width 0.25s ease-in-out, height 0.25s ease-in-out; -moz-transition: width 0.25s ease-in-out, height 0.25s ease-in-out; transition: width 0.25s ease-in-out, height 0.25s ease-in-out; } @@ -621,13 +621,13 @@ time, mark, audio, video { .view-valid-certificate .accomplishment-statement .copy-course-org, .view-valid-certificate .accomplishment-details .value { font-weight: 500; } -strong, .view-valid-certificate .content-supplemental .list-actions .action, .view-invalid-certificate .content-supplemental .list-actions .action, .view-validate-certificate .support .list-actions .action, .view-valid-certificate .accomplishment-statement .copy-name, .view-valid-certificate .accomplishment-statement .copy-course-name, .view-valid-certificate .accomplishment-details .label, .view-valid-certificate .content-supplemental .title, .view-invalid-certificate .feedback-lead .title, .view-invalid-certificate .feedback-support .title, .view-invalid-certificate .feedback-warning .title, .view-invalid-certificate .content-supplemental .title, .view-validate-certificate .content .title-lvl1, .view-validate-certificate .content .title-lvl2, .view-validate-certificate .content .title-lvl3, .view-validate-certificate .list-requirements .item:before, .view-validate-certificate .list-requirements .item .requirement-label, .view-validate-certificate .instructions .title { +strong, .view-certificate .content-supplemental .list-actions .action, .view-validate-certificate .support .list-actions .action, .view-certificate .content-supplemental .title, .view-valid-certificate .accomplishment-statement .copy-name, .view-valid-certificate .accomplishment-statement .copy-course-name, .view-valid-certificate .accomplishment-details .label, .view-invalid-certificate .feedback-lead .title, .view-invalid-certificate .feedback-support .title, .view-invalid-certificate .feedback-warning .title, .view-validate-certificate .content .title-lvl1, .view-validate-certificate .content .title-lvl2, .view-validate-certificate .content .title-lvl3, .view-validate-certificate .list-requirements .item:before, .view-validate-certificate .list-requirements .item .requirement-label, .view-validate-certificate .instructions .title { font-weight: 600; } .view-validate-certificate .list-instructions .item:before { font-weight: 700; } -.view-valid-certificate .accomplishment-statement .copy-name, .view-valid-certificate .accomplishment-statement .copy-course-name, .view-valid-certificate .accomplishment-statement .copy-recogniton, .view-validate-certificate .instructions .title, .view-invalid-certificate .feedback-lead .title, .view-validate-certificate .content .title-lvl1, .title-logo .title-sub, .view-valid-certificate .accomplishment-statement .copy-course-org, .view-validate-certificate .content .title-lvl2, .title-logo .title-sub, .view-valid-certificate .accomplishment-statement .copy-course-org, .view-validate-certificate .content .title-lvl2, .view-valid-certificate .status .title, .view-valid-certificate .accomplishment-details .value, .view-invalid-certificate .status .title, .view-invalid-certificate .feedback-support .title, .view-invalid-certificate .feedback-warning .title, .view-validate-certificate .content .title-lvl3, .view-validate-certificate .list-requirements .item:before, .view-validate-certificate .list-requirements .item .requirement-label, .view-validate-certificate .list-instructions .item:before, .view-valid-certificate .content-supplemental .title, .view-invalid-certificate .content-supplemental .title { +.view-valid-certificate .accomplishment-statement .copy-name, .view-valid-certificate .accomplishment-statement .copy-course-name, .view-valid-certificate .accomplishment-statement .copy-recogniton, .view-validate-certificate .instructions .title, .view-invalid-certificate .feedback-lead .title, .view-validate-certificate .content .title-lvl1, .title-logo .title-sub, .view-valid-certificate .accomplishment-statement .copy-course-org, .view-validate-certificate .content .title-lvl2, .title-logo .title-sub, .view-valid-certificate .accomplishment-statement .copy-course-org, .view-validate-certificate .content .title-lvl2, .view-certificate .status .title, .view-valid-certificate .accomplishment-details .value, .view-invalid-certificate .feedback-support .title, .view-invalid-certificate .feedback-warning .title, .view-validate-certificate .content .title-lvl3, .view-validate-certificate .list-requirements .item:before, .view-validate-certificate .list-requirements .item .requirement-label, .view-validate-certificate .list-instructions .item:before, .view-certificate .content-supplemental .title { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .view-valid-certificate .accomplishment-statement .copy-name, .view-valid-certificate .accomplishment-statement .copy-course-name, .view-valid-certificate .accomplishment-statement .copy-recogniton, .view-validate-certificate .instructions .title { @@ -648,19 +648,19 @@ strong, .view-valid-certificate .content-supplemental .list-actions .action, .vi line-height: 31px; line-height: 3.1rem; } -.view-valid-certificate .status .title, .view-valid-certificate .accomplishment-details .value, .view-invalid-certificate .status .title, .view-invalid-certificate .feedback-support .title, .view-invalid-certificate .feedback-warning .title, .view-validate-certificate .content .title-lvl3, .view-validate-certificate .list-requirements .item:before, .view-validate-certificate .list-requirements .item .requirement-label, .view-validate-certificate .list-instructions .item:before { +.view-certificate .status .title, .view-valid-certificate .accomplishment-details .value, .view-invalid-certificate .feedback-support .title, .view-invalid-certificate .feedback-warning .title, .view-validate-certificate .content .title-lvl3, .view-validate-certificate .list-requirements .item:before, .view-validate-certificate .list-requirements .item .requirement-label, .view-validate-certificate .list-instructions .item:before { font-size: 18px; font-size: 1.8rem; line-height: 27.9px; line-height: 2.79rem; } -.view-valid-certificate .content-supplemental .title, .view-invalid-certificate .content-supplemental .title { +.view-certificate .content-supplemental .title { font-size: 16px; font-size: 1.6rem; line-height: 24.8px; line-height: 2.48rem; } -body, .view-validate-certificate .list-requirements .item, .view-validate-certificate .list-instructions .item, .view-valid-certificate .accomplishment-statement .copy-context, .view-invalid-certificate .feedback-lead .copy, .footer-app-copyright, .view-valid-certificate .accomplishment-details .explanation, .view-valid-certificate .content-supplemental .copy, .view-valid-certificate .content-supplemental .list-actions .action, .view-invalid-certificate .content-supplemental .copy, .view-invalid-certificate .content-supplemental .list-actions .action, .view-validate-certificate .support .list-actions .action, .view-valid-certificate .accomplishment-details .label { +body, .view-validate-certificate .list-requirements .item, .view-validate-certificate .list-instructions .item, .view-valid-certificate .accomplishment-statement .copy-context, .view-invalid-certificate .feedback-lead .copy, .footer-app-copyright, .view-certificate .content-supplemental .copy, .view-certificate .content-supplemental .list-actions .action, .view-valid-certificate .accomplishment-details .explanation, .view-validate-certificate .support .list-actions .action, .view-valid-certificate .accomplishment-details .label { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } body, .view-validate-certificate .list-requirements .item, .view-validate-certificate .list-instructions .item { @@ -675,7 +675,7 @@ body, .view-validate-certificate .list-requirements .item, .view-validate-certif line-height: 31px; line-height: 3.1rem; } -.footer-app-copyright, .view-valid-certificate .accomplishment-details .explanation, .view-valid-certificate .content-supplemental .copy, .view-valid-certificate .content-supplemental .list-actions .action, .view-invalid-certificate .content-supplemental .copy, .view-invalid-certificate .content-supplemental .list-actions .action, .view-validate-certificate .support .list-actions .action { +.footer-app-copyright, .view-certificate .content-supplemental .copy, .view-certificate .content-supplemental .list-actions .action, .view-valid-certificate .accomplishment-details .explanation, .view-validate-certificate .support .list-actions .action { font-size: 14px; font-size: 1.4rem; line-height: 21.7px; @@ -693,7 +693,7 @@ body, .view-validate-certificate .list-requirements .item, .view-validate-certif line-height: 18.6px; line-height: 1.86rem; } -.view-valid-certificate .content-supplemental .list-actions .action, .view-invalid-certificate .content-supplemental .list-actions .action, .view-validate-certificate .support .list-actions .action { +.view-certificate .content-supplemental .list-actions .action, .view-validate-certificate .support .list-actions .action { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -703,35 +703,35 @@ body, .view-validate-certificate .list-requirements .item, .view-validate-certif display: inline-block; cursor: pointer; text-decoration: none; } - .view-valid-certificate .content-supplemental .list-actions .action:hover, .view-invalid-certificate .content-supplemental .list-actions .action:hover, .view-validate-certificate .support .list-actions .action:hover, .view-valid-certificate .content-supplemental .list-actions .action:active, .view-invalid-certificate .content-supplemental .list-actions .action:active, .view-validate-certificate .support .list-actions .action:active, .view-valid-certificate .content-supplemental .list-actions .action:focus, .view-invalid-certificate .content-supplemental .list-actions .action:focus, .view-validate-certificate .support .list-actions .action:focus { + .view-certificate .content-supplemental .list-actions .action:hover, .view-validate-certificate .support .list-actions .action:hover, .view-certificate .content-supplemental .list-actions .action:active, .view-validate-certificate .support .list-actions .action:active, .view-certificate .content-supplemental .list-actions .action:focus, .view-validate-certificate .support .list-actions .action:focus { text-decoration: none; } - .view-valid-certificate .content-supplemental .list-actions .disabled.action, .view-invalid-certificate .content-supplemental .list-actions .disabled.action, .view-validate-certificate .support .list-actions .disabled.action, .view-valid-certificate .content-supplemental .list-actions [disabled].action, .view-invalid-certificate .content-supplemental .list-actions [disabled].action, .view-validate-certificate .support .list-actions [disabled].action { + .view-certificate .content-supplemental .list-actions .disabled.action, .view-validate-certificate .support .list-actions .disabled.action, .view-certificate .content-supplemental .list-actions [disabled].action, .view-validate-certificate .support .list-actions [disabled].action { cursor: default; pointer-events: none; } -.view-valid-certificate .content-supplemental .list-actions .action, .view-invalid-certificate .content-supplemental .list-actions .action, .view-validate-certificate .support .list-actions .action { +.view-certificate .content-supplemental .list-actions .action, .view-validate-certificate .support .list-actions .action { border-radius: 2px; } -.view-valid-certificate .content-supplemental .list-actions .action, .view-invalid-certificate .content-supplemental .list-actions .action, .view-validate-certificate .support .list-actions .action { +.view-certificate .content-supplemental .list-actions .action, .view-validate-certificate .support .list-actions .action { padding: 10px 20px; background: #2e81b3; border-color: #1d85c4; color: #eaf2f7; } - .view-valid-certificate .content-supplemental .list-actions .action:hover, .view-invalid-certificate .content-supplemental .list-actions .action:hover, .view-validate-certificate .support .list-actions .action:hover, .view-valid-certificate .content-supplemental .list-actions .action:active, .view-invalid-certificate .content-supplemental .list-actions .action:active, .view-validate-certificate .support .list-actions .action:active, .view-valid-certificate .content-supplemental .list-actions .action:focus, .view-invalid-certificate .content-supplemental .list-actions .action:focus, .view-validate-certificate .support .list-actions .action:focus { + .view-certificate .content-supplemental .list-actions .action:hover, .view-validate-certificate .support .list-actions .action:hover, .view-certificate .content-supplemental .list-actions .action:active, .view-validate-certificate .support .list-actions .action:active, .view-certificate .content-supplemental .list-actions .action:focus, .view-validate-certificate .support .list-actions .action:focus { background: #078bda; border-color: #078bda; color: #f4f8fb; } - .view-valid-certificate .content-supplemental .list-actions .disabled.action, .view-invalid-certificate .content-supplemental .list-actions .disabled.action, .view-validate-certificate .support .list-actions .disabled.action, .view-valid-certificate .content-supplemental .list-actions .is-disabled.action, .view-invalid-certificate .content-supplemental .list-actions .is-disabled.action, .view-validate-certificate .support .list-actions .is-disabled.action, .view-valid-certificate .content-supplemental .list-actions [disabled].action, .view-invalid-certificate .content-supplemental .list-actions [disabled].action, .view-validate-certificate .support .list-actions [disabled].action { + .view-certificate .content-supplemental .list-actions .disabled.action, .view-validate-certificate .support .list-actions .disabled.action, .view-certificate .content-supplemental .list-actions .is-disabled.action, .view-validate-certificate .support .list-actions .is-disabled.action, .view-certificate .content-supplemental .list-actions [disabled].action, .view-validate-certificate .support .list-actions [disabled].action { opacity: 0.5; } -[class^="content-"] a, .footer-app a, .view-valid-certificate .content a, .view-invalid-certificate .content a, .view-validate-certificate .content a { +[class^="content-"] a, .footer-app a, .view-certificate .content a { -webkit-transition: color 0.5s ease-in-out, border 0.5s ease-in-out; -moz-transition: color 0.5s ease-in-out, border 0.5s ease-in-out; transition: color 0.5s ease-in-out, border 0.5s ease-in-out; border-bottom: 1px solid transparent; color: #2e81b3; text-decoration: none; } - [class^="content-"] a:hover, .footer-app a:hover, .view-valid-certificate .content a:hover, .view-invalid-certificate .content a:hover, .view-validate-certificate .content a:hover, [class^="content-"] a:focus, .footer-app a:focus, .view-valid-certificate .content a:focus, .view-invalid-certificate .content a:focus, .view-validate-certificate .content a:focus, [class^="content-"] a:active, .footer-app a:active, .view-valid-certificate .content a:active, .view-invalid-certificate .content a:active, .view-validate-certificate .content a:active { + [class^="content-"] a:hover, .footer-app a:hover, .view-certificate .content a:hover, [class^="content-"] a:focus, .footer-app a:focus, .view-certificate .content a:focus, [class^="content-"] a:active, .footer-app a:active, .view-certificate .content a:active { color: #3aa2e0; border-color: #3aa2e0; } @@ -879,34 +879,34 @@ body, .view-validate-certificate .list-requirements .item, .view-validate-certif display: block; margin: 0 0 5px 0; } } -.view-valid-certificate { +.view-certificate { background: #f4f5f5; } - .view-valid-certificate .wrapper-view { + .view-certificate .wrapper-view { background: transparent url("../images/bg-paperfibers.png") 0 0 repeat-both; padding-bottom: 60px; } @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate .wrapper-view { + .view-certificate .wrapper-view { padding-bottom: 20px; } } @media screen and (max-width: 499px) { - .view-valid-certificate .wrapper-view { + .view-certificate .wrapper-view { padding-bottom: 20px; } } - .view-valid-certificate .wrapper-content { + .view-certificate .wrapper-content { padding: 20px 40px; } @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate .wrapper-content { + .view-certificate .wrapper-content { padding: 20px 20px; } } @media screen and (max-width: 499px) { - .view-valid-certificate .wrapper-content { + .view-certificate .wrapper-content { padding: 20px 20px; } } - .view-valid-certificate .content { + .view-certificate .content { max-width: 1280px; margin-left: auto; margin-right: auto; } - .view-valid-certificate .content:after { + .view-certificate .content:after { content: ""; display: table; clear: both; } - .view-valid-certificate .status { + .view-certificate .status { display: block; padding: 20px 40px; border-top-radius: 2px; @@ -915,793 +915,576 @@ body, .view-validate-certificate .list-requirements .item, .view-validate-certif color: white; text-transform: uppercase; letter-spacing: 0.1rem; } - .view-valid-certificate .status:after { + .view-certificate .status:after { content: ""; display: table; clear: both; } @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate .status { + .view-certificate .status { padding: 20px 20px; } } @media screen and (max-width: 499px) { - .view-valid-certificate .status { + .view-certificate .status { padding: 20px 20px; } } @media screen and (min-width: 900px) { - .view-valid-certificate .status .title { + .view-certificate .status .title { float: left; display: block; margin-right: 2.3576515979%; width: 74.4105871005%; } - .view-valid-certificate .status .title:last-child { + .view-certificate .status .title:last-child { margin-right: 0; } } @media screen and (min-width: 760px) and (max-width: 899px) { - .view-valid-certificate .status .title { + .view-certificate .status .title { float: left; display: block; margin-right: 2.3576515979%; width: 74.4105871005%; } - .view-valid-certificate .status .title:last-child { + .view-certificate .status .title:last-child { margin-right: 0; } } @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate .status .title { + .view-certificate .status .title { font-size: 14px; font-size: 1.4rem; line-height: 21.7px; line-height: 2.17rem; } } @media screen and (max-width: 499px) { - .view-valid-certificate .status .title { + .view-certificate .status .title { font-size: 14px; font-size: 1.4rem; line-height: 21.7px; line-height: 2.17rem; } } - .view-valid-certificate .accomplishment { - padding: 40px 40px 60px 40px; - margin-bottom: 40px; - border-radius: 2px; - border: 1px solid #eaebeb; - background: white; } - .view-valid-certificate .accomplishment:after { - content: ""; - display: table; - clear: both; } + .view-certificate .content-supplemental .title { + margin-bottom: 10px; } + .view-certificate .content-supplemental .copy { + color: #85888a; } + .view-certificate .content-supplemental .list-actions { + margin-top: 20px; } @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate .accomplishment { - padding: 20px 20px; } } + .view-certificate .content-supplemental .list-actions .action { + display: block; + text-align: center; } } @media screen and (max-width: 499px) { - .view-valid-certificate .accomplishment { - padding: 20px 20px; } } - .view-valid-certificate .accomplishment-statement { + .view-certificate .content-supplemental .list-actions .action { + display: block; + text-align: center; } } + .view-certificate .content-supplemental-how { float: left; display: block; margin-right: 2.3576515979%; - width: 65.8807828007%; - padding: 0 20px 0 0; - border-right: 1px solid #eaebeb; } - .view-valid-certificate .accomplishment-statement:last-child { + width: 23.2317613015%; } + .view-certificate .content-supplemental-how:last-child { margin-right: 0; } @media screen and (min-width: 760px) and (max-width: 899px) { - .view-valid-certificate .accomplishment-statement { - width: 100%; - padding: 0; - border-right: none; } } + .view-certificate .content-supplemental-how { + float: left; + display: block; + margin-right: 2.3576515979%; + width: 48.821174201%; } + .view-certificate .content-supplemental-how:last-child { + margin-right: 0; } } @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate .accomplishment-statement { + .view-certificate .content-supplemental-how { width: 100%; - padding: 0; - border-right: none; } } + margin-bottom: 40px; } } @media screen and (max-width: 499px) { - .view-valid-certificate .accomplishment-statement { + .view-certificate .content-supplemental-how { width: 100%; - padding: 0; - border-right: none; } } - .view-valid-certificate .accomplishment-statement [class^="copy-"] { - display: block; - margin-bottom: 20px; } + margin-bottom: 40px; } } + .view-certificate .content-supplemental-certificates { + float: left; + display: block; + margin-right: 2.3576515979%; + width: 23.2317613015%; + margin-right: 0; } + .view-certificate .content-supplemental-certificates:last-child { + margin-right: 0; } + @media screen and (min-width: 760px) and (max-width: 899px) { + .view-certificate .content-supplemental-certificates { + float: left; + display: block; + margin-right: 2.3576515979%; + width: 48.821174201%; } + .view-certificate .content-supplemental-certificates:last-child { + margin-right: 0; } } @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate .accomplishment-statement .copy-name { + .view-certificate .content-supplemental-certificates { + width: 100%; } } + @media screen and (max-width: 499px) { + .view-certificate .content-supplemental-certificates { + width: 100%; } } + .view-certificate .content-supplemental-about { + float: left; + display: block; + margin-right: 2.3576515979%; + width: 48.821174201%; } + .view-certificate .content-supplemental-about:last-child { + margin-right: 0; } + @media screen and (min-width: 760px) and (max-width: 899px) { + .view-certificate .content-supplemental-about { + width: 100%; + margin-bottom: 40px; } } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-certificate .content-supplemental-about { + width: 100%; + margin-bottom: 40px; } } + @media screen and (max-width: 499px) { + .view-certificate .content-supplemental-about { + width: 100%; + margin-bottom: 40px; } } + .view-certificate.is-honorcode .status { + background: #88c7ec; } + .view-certificate.is-honorcode .certificate-type { + color: #88c7ec; } + .view-certificate.is-idverified .status { + background: #3aa2e0; } + .view-certificate.is-idverified .accomplishment { + background: white url("../images/logo-idverified-cropped.png") bottom left no-repeat; + background-size: 75%; } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-certificate.is-idverified .accomplishment { + background-size: 75%; } } + @media screen and (max-width: 499px) { + .view-certificate.is-idverified .accomplishment { + background-size: 100%; } } + .view-certificate.is-idverified .certificate-type { + color: #3aa2e0; } + .view-certificate.is-idverified .certificate-type .wrapper-img { + width: 200px; + border-radius: 200px; + padding: 10px 10px; + background: white; + margin: -80px auto 0 auto; } + @media screen and (min-width: 760px) and (max-width: 899px) { + .view-certificate.is-idverified .certificate-type .wrapper-img { + float: right; + margin: 0 0 20px 20px; } } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-certificate.is-idverified .certificate-type .wrapper-img { + width: 150px; + float: right; + margin: 0 0 20px 20px; } } + @media screen and (max-width: 499px) { + .view-certificate.is-idverified .certificate-type .wrapper-img { + width: 100px; + float: right; + margin: 0; } } + .view-certificate.is-idverified .certificate-type .wrapper-img img { + width: 100%; } + +.view-valid-certificate .accomplishment { + padding: 40px 40px 60px 40px; + margin-bottom: 40px; + border-radius: 2px; + border: 1px solid #eaebeb; + background: white; } + .view-valid-certificate .accomplishment:after { + content: ""; + display: table; + clear: both; } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-valid-certificate .accomplishment { + padding: 20px 20px; } } + @media screen and (max-width: 499px) { + .view-valid-certificate .accomplishment { + padding: 20px 20px; } } +.view-valid-certificate .accomplishment-statement { + float: left; + display: block; + margin-right: 2.3576515979%; + width: 65.8807828007%; + padding: 0 20px 0 0; + border-right: 1px solid #eaebeb; } + .view-valid-certificate .accomplishment-statement:last-child { + margin-right: 0; } + @media screen and (min-width: 760px) and (max-width: 899px) { + .view-valid-certificate .accomplishment-statement { + width: 100%; + padding: 0; + border-right: none; } } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-valid-certificate .accomplishment-statement { + width: 100%; + padding: 0; + border-right: none; } } + @media screen and (max-width: 499px) { + .view-valid-certificate .accomplishment-statement { + width: 100%; + padding: 0; + border-right: none; } } + .view-valid-certificate .accomplishment-statement [class^="copy-"] { + display: block; + margin-bottom: 20px; } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-valid-certificate .accomplishment-statement .copy-name { + font-size: 36px; + font-size: 3.6rem; + line-height: 55.8px; + line-height: 5.58rem; + margin: 10px 0 5px 0; } } + @media screen and (max-width: 499px) { + .view-valid-certificate .accomplishment-statement .copy-name { + font-size: 24px; + font-size: 2.4rem; + line-height: 37.2px; + line-height: 3.72rem; + margin: 10px 0 5px 0; } } + .view-valid-certificate .accomplishment-statement .copy-course-org { + margin-bottom: 0; } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-valid-certificate .accomplishment-statement .copy-course-org { + margin: 10px 0 0 0; } } + @media screen and (max-width: 499px) { + .view-valid-certificate .accomplishment-statement .copy-course-org { + margin: 10px 0 0 0; } } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-valid-certificate .accomplishment-statement .copy-course { + margin-bottom: 5px; } } + @media screen and (max-width: 499px) { + .view-valid-certificate .accomplishment-statement .copy-course { + margin-bottom: 5px; } } + .view-valid-certificate .accomplishment-statement .copy-course-name { + line-height: 55.8px; + line-height: 5.58rem; } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-valid-certificate .accomplishment-statement .copy-course-name { font-size: 36px; font-size: 3.6rem; line-height: 55.8px; line-height: 5.58rem; - margin: 10px 0 5px 0; } } + margin: 0; } } @media screen and (max-width: 499px) { - .view-valid-certificate .accomplishment-statement .copy-name { + .view-valid-certificate .accomplishment-statement .copy-course-name { font-size: 24px; font-size: 2.4rem; line-height: 37.2px; line-height: 3.72rem; - margin: 10px 0 5px 0; } } - .view-valid-certificate .accomplishment-statement .copy-course-org { - margin-bottom: 0; } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate .accomplishment-statement .copy-course-org { - margin: 10px 0 0 0; } } - @media screen and (max-width: 499px) { - .view-valid-certificate .accomplishment-statement .copy-course-org { - margin: 10px 0 0 0; } } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate .accomplishment-statement .copy-course { - margin-bottom: 5px; } } - @media screen and (max-width: 499px) { - .view-valid-certificate .accomplishment-statement .copy-course { - margin-bottom: 5px; } } - .view-valid-certificate .accomplishment-statement .copy-course-name { - line-height: 55.8px; - line-height: 5.58rem; } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate .accomplishment-statement .copy-course-name { - font-size: 36px; - font-size: 3.6rem; - line-height: 55.8px; - line-height: 5.58rem; - margin: 0; } } - @media screen and (max-width: 499px) { - .view-valid-certificate .accomplishment-statement .copy-course-name { - font-size: 24px; - font-size: 2.4rem; - line-height: 37.2px; - line-height: 3.72rem; - margin: 0; } } - .view-valid-certificate .accomplishment-statement .copy-context { - color: #85888a; } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate .accomplishment-statement .copy-context { - font-size: 16px; - font-size: 1.6rem; - line-height: 24.8px; - line-height: 2.48rem; } } - @media screen and (max-width: 499px) { - .view-valid-certificate .accomplishment-statement .copy-context { - font-size: 16px; - font-size: 1.6rem; - line-height: 24.8px; - line-height: 2.48rem; } } - .view-valid-certificate .accomplishment-details { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 31.7615656014%; } - .view-valid-certificate .accomplishment-details:last-child { - margin-right: 0; } - @media screen and (min-width: 760px) and (max-width: 899px) { - .view-valid-certificate .accomplishment-details { - width: 100%; - margin-top: 20px; - padding-top: 40px; - border-top: 1px solid #eaebeb; } } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate .accomplishment-details { - width: 100%; } } - @media screen and (max-width: 499px) { - .view-valid-certificate .accomplishment-details { - width: 100%; } } - .view-valid-certificate .accomplishment-details .list-metadata .item { - margin-bottom: 20px; - padding-bottom: 20px; - border-bottom: 1px solid #eaebeb; } - .view-valid-certificate .accomplishment-details .label { - display: block; - margin-bottom: 5px; - text-transform: uppercase; - color: #aeb0b1; - letter-spacing: 0.1rem; } - .view-valid-certificate .accomplishment-details .value { - display: block; } - .view-valid-certificate .accomplishment-details .explanation { - display: block; - margin-top: 10px; - color: #aeb0b1; } - .view-valid-certificate .accomplishment-details .certificate-type { - text-transform: uppercase; - letter-spacing: 0.1rem; } - .view-valid-certificate .accomplishment-details .certificate-type .explanation { - text-transform: none; - letter-spacing: 0; } - .view-valid-certificate .accomplishment-details .certificate-id .value { - word-wrap: break-word; } - .view-valid-certificate .content-supplemental .title { - margin-bottom: 10px; } - .view-valid-certificate .content-supplemental .copy { + margin: 0; } } + .view-valid-certificate .accomplishment-statement .copy-context { color: #85888a; } - .view-valid-certificate .content-supplemental .list-actions { - margin-top: 20px; } @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate .content-supplemental .list-actions .action { - display: block; - text-align: center; } } + .view-valid-certificate .accomplishment-statement .copy-context { + font-size: 16px; + font-size: 1.6rem; + line-height: 24.8px; + line-height: 2.48rem; } } @media screen and (max-width: 499px) { - .view-valid-certificate .content-supplemental .list-actions .action { - display: block; - text-align: center; } } - .view-valid-certificate .content-supplemental-how { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 23.2317613015%; } - .view-valid-certificate .content-supplemental-how:last-child { - margin-right: 0; } - @media screen and (min-width: 760px) and (max-width: 899px) { - .view-valid-certificate .content-supplemental-how { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 48.821174201%; } - .view-valid-certificate .content-supplemental-how:last-child { - margin-right: 0; } } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate .content-supplemental-how { - width: 100%; - margin-bottom: 40px; } } - @media screen and (max-width: 499px) { - .view-valid-certificate .content-supplemental-how { - width: 100%; - margin-bottom: 40px; } } - .view-valid-certificate .content-supplemental-certificates { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 23.2317613015%; + .view-valid-certificate .accomplishment-statement .copy-context { + font-size: 16px; + font-size: 1.6rem; + line-height: 24.8px; + line-height: 2.48rem; } } +.view-valid-certificate .accomplishment-details { + float: left; + display: block; + margin-right: 2.3576515979%; + width: 31.7615656014%; } + .view-valid-certificate .accomplishment-details:last-child { margin-right: 0; } - .view-valid-certificate .content-supplemental-certificates:last-child { - margin-right: 0; } - @media screen and (min-width: 760px) and (max-width: 899px) { - .view-valid-certificate .content-supplemental-certificates { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 48.821174201%; } - .view-valid-certificate .content-supplemental-certificates:last-child { - margin-right: 0; } } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate .content-supplemental-certificates { - width: 100%; } } - @media screen and (max-width: 499px) { - .view-valid-certificate .content-supplemental-certificates { - width: 100%; } } - .view-valid-certificate .content-supplemental-about { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 48.821174201%; } - .view-valid-certificate .content-supplemental-about:last-child { - margin-right: 0; } - @media screen and (min-width: 760px) and (max-width: 899px) { - .view-valid-certificate .content-supplemental-about { - width: 100%; - margin-bottom: 40px; } } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate .content-supplemental-about { - width: 100%; - margin-bottom: 40px; } } - @media screen and (max-width: 499px) { - .view-valid-certificate .content-supplemental-about { - width: 100%; - margin-bottom: 40px; } } - .view-valid-certificate.is-honorcode .status { - background: #88c7ec; } - .view-valid-certificate.is-honorcode .certificate-type { - color: #88c7ec; } - .view-valid-certificate.is-idverified .status { - background: #3aa2e0; } - .view-valid-certificate.is-idverified .accomplishment { - background: white url("../images/logo-idverified-cropped.png") bottom left no-repeat; - background-size: 75%; } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate.is-idverified .accomplishment { - background-size: 75%; } } - @media screen and (max-width: 499px) { - .view-valid-certificate.is-idverified .accomplishment { - background-size: 100%; } } - .view-valid-certificate.is-idverified .certificate-type { - color: #3aa2e0; } - .view-valid-certificate.is-idverified .certificate-type .wrapper-img { - width: 200px; - border-radius: 200px; - padding: 10px 10px; - background: white; - margin: -80px auto 0 auto; } - @media screen and (min-width: 760px) and (max-width: 899px) { - .view-valid-certificate.is-idverified .certificate-type .wrapper-img { - float: right; - margin: 0 0 20px 20px; } } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-valid-certificate.is-idverified .certificate-type .wrapper-img { - width: 150px; - float: right; - margin: 0 0 20px 20px; } } - @media screen and (max-width: 499px) { - .view-valid-certificate.is-idverified .certificate-type .wrapper-img { - width: 100px; - float: right; - margin: 0; } } - .view-valid-certificate.is-idverified .certificate-type .wrapper-img img { - width: 100%; } - -.view-invalid-certificate { - background: #f4f5f5; } - .view-invalid-certificate .wrapper-view { - background: transparent url("../images/bg-paperfibers.png") 0 0 repeat-both; - padding-bottom: 60px; } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-invalid-certificate .wrapper-view { - padding-bottom: 20px; } } - @media screen and (max-width: 499px) { - .view-invalid-certificate .wrapper-view { - padding-bottom: 20px; } } - .view-invalid-certificate .wrapper-content { - padding: 20px 40px; } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-invalid-certificate .wrapper-content { - padding: 20px 20px; } } - @media screen and (max-width: 499px) { - .view-invalid-certificate .wrapper-content { - padding: 20px 20px; } } - .view-invalid-certificate .content { - max-width: 1280px; - margin-left: auto; - margin-right: auto; } - .view-invalid-certificate .content:after { - content: ""; - display: table; - clear: both; } - .view-invalid-certificate .status { - display: block; - padding: 20px 40px; - border-top-radius: 2px; - box-shadow: inset 0 -2px 2px 0 rgba(0, 0, 0, 0.05); - background: #b62568; - color: white; - text-transform: uppercase; - letter-spacing: 0.1rem; } - .view-invalid-certificate .status:after { - content: ""; - display: table; - clear: both; } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-invalid-certificate .status { - padding: 20px 20px; } } - @media screen and (max-width: 499px) { - .view-invalid-certificate .status { - padding: 20px 20px; } } - @media screen and (min-width: 900px) { - .view-invalid-certificate .status .title { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 74.4105871005%; } - .view-invalid-certificate .status .title:last-child { - margin-right: 0; } } - @media screen and (min-width: 760px) and (max-width: 899px) { - .view-invalid-certificate .status .title { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 74.4105871005%; } - .view-invalid-certificate .status .title:last-child { - margin-right: 0; } } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-invalid-certificate .status .title { - font-size: 14px; - font-size: 1.4rem; - line-height: 21.7px; - line-height: 2.17rem; } } - @media screen and (max-width: 499px) { - .view-invalid-certificate .status .title { - font-size: 14px; - font-size: 1.4rem; - line-height: 21.7px; - line-height: 2.17rem; } } - .view-invalid-certificate .feedback { - display: block; - padding: 40px 40px 60px 40px; - margin-bottom: 40px; - border-radius: 2px; - border: 1px solid #eaebeb; - background: white; } - .view-invalid-certificate .feedback:after { - content: ""; - display: table; - clear: both; } - .view-invalid-certificate .feedback:after { - content: ""; - display: table; - clear: both; } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-invalid-certificate .feedback { - padding: 20px 20px; } } - @media screen and (max-width: 499px) { - .view-invalid-certificate .feedback { - padding: 20px 20px; } } - .view-invalid-certificate .feedback-lead { + @media screen and (min-width: 760px) and (max-width: 899px) { + .view-valid-certificate .accomplishment-details { + width: 100%; + margin-top: 20px; + padding-top: 40px; + border-top: 1px solid #eaebeb; } } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-valid-certificate .accomplishment-details { + width: 100%; } } + @media screen and (max-width: 499px) { + .view-valid-certificate .accomplishment-details { + width: 100%; } } + .view-valid-certificate .accomplishment-details .list-metadata .item { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eaebeb; } - .view-invalid-certificate .feedback-lead .title { - margin-bottom: 10px; } - .view-invalid-certificate .feedback-lead .copy { - color: #b62568; } - .view-invalid-certificate .feedback-support { - float: left; + .view-valid-certificate .accomplishment-details .label { display: block; - margin-right: 2.3576515979%; - width: 48.821174201%; - margin-bottom: 20px; } - .view-invalid-certificate .feedback-support:last-child { - margin-right: 0; } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-invalid-certificate .feedback-support { - width: 100%; } } - @media screen and (max-width: 499px) { - .view-invalid-certificate .feedback-support { - width: 100%; } } - .view-invalid-certificate .feedback-support .title { - margin-bottom: 10px; } - .view-invalid-certificate .feedback-support .copy { - color: #85888a; } - .view-invalid-certificate .feedback-warning { - float: left; + margin-bottom: 5px; + text-transform: uppercase; + color: #aeb0b1; + letter-spacing: 0.1rem; } + .view-valid-certificate .accomplishment-details .value { + display: block; } + .view-valid-certificate .accomplishment-details .explanation { display: block; - margin-right: 2.3576515979%; - width: 48.821174201%; - margin-right: 0; } - .view-invalid-certificate .feedback-warning:last-child { - margin-right: 0; } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-invalid-certificate .feedback-warning { - width: 100%; } } - @media screen and (max-width: 499px) { - .view-invalid-certificate .feedback-warning { - width: 100%; } } - .view-invalid-certificate .feedback-warning .title { - margin-bottom: 10px; } - .view-invalid-certificate .feedback-warning .copy { - color: #85888a; } - .view-invalid-certificate .content-supplemental .title { + margin-top: 10px; + color: #aeb0b1; } + .view-valid-certificate .accomplishment-details .certificate-type { + text-transform: uppercase; + letter-spacing: 0.1rem; } + .view-valid-certificate .accomplishment-details .certificate-type .explanation { + text-transform: none; + letter-spacing: 0; } + .view-valid-certificate .accomplishment-details .certificate-id .value { + word-wrap: break-word; } + +.view-invalid-certificate .feedback { + display: block; + padding: 40px 40px 60px 40px; + margin-bottom: 40px; + border-radius: 2px; + border: 1px solid #eaebeb; + background: white; } + .view-invalid-certificate .feedback:after { + content: ""; + display: table; + clear: both; } + .view-invalid-certificate .feedback:after { + content: ""; + display: table; + clear: both; } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-invalid-certificate .feedback { + padding: 20px 20px; } } + @media screen and (max-width: 499px) { + .view-invalid-certificate .feedback { + padding: 20px 20px; } } +.view-invalid-certificate .feedback-lead { + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px solid #eaebeb; } + .view-invalid-certificate .feedback-lead .title { margin-bottom: 10px; } - .view-invalid-certificate .content-supplemental .copy { + .view-invalid-certificate .feedback-lead .copy { + color: #b62568; } +.view-invalid-certificate .feedback-support { + float: left; + display: block; + margin-right: 2.3576515979%; + width: 48.821174201%; + margin-bottom: 20px; } + .view-invalid-certificate .feedback-support:last-child { + margin-right: 0; } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-invalid-certificate .feedback-support { + width: 100%; } } + @media screen and (max-width: 499px) { + .view-invalid-certificate .feedback-support { + width: 100%; } } + .view-invalid-certificate .feedback-support .title { + margin-bottom: 10px; } + .view-invalid-certificate .feedback-support .copy { color: #85888a; } - .view-invalid-certificate .content-supplemental .list-actions { +.view-invalid-certificate .feedback-warning { + float: left; + display: block; + margin-right: 2.3576515979%; + width: 48.821174201%; + margin-right: 0; } + .view-invalid-certificate .feedback-warning:last-child { + margin-right: 0; } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-invalid-certificate .feedback-warning { + width: 100%; } } + @media screen and (max-width: 499px) { + .view-invalid-certificate .feedback-warning { + width: 100%; } } + .view-invalid-certificate .feedback-warning .title { + margin-bottom: 10px; } + .view-invalid-certificate .feedback-warning .copy { + color: #85888a; } + +.view-validate-certificate .content .title-lvl1 { + margin-bottom: 20px; } +.view-validate-certificate .content .title-lvl2 { + margin-bottom: 10px; } +.view-validate-certificate .content .title-lvl3 { + margin-bottom: 10px; } +.view-validate-certificate .introduction { + float: left; + display: block; + margin-right: 2.3576515979%; + width: 65.8807828007%; + margin-left: 17.0596085997%; + margin-bottom: 40px; } + .view-validate-certificate .introduction:last-child { + margin-right: 0; } + @media screen and (min-width: 760px) and (max-width: 899px) { + .view-validate-certificate .introduction { + width: 100%; + margin-left: 0%; } } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-validate-certificate .introduction { + width: 100%; + margin-left: 0%; } } + @media screen and (max-width: 499px) { + .view-validate-certificate .introduction { + width: 100%; + margin-left: 0%; } } +.view-validate-certificate .requirements { + float: left; + display: block; + margin-right: 2.3576515979%; + width: 65.8807828007%; + margin-left: 17.0596085997%; + margin-bottom: 40px; } + .view-validate-certificate .requirements:last-child { + margin-right: 0; } + @media screen and (min-width: 760px) and (max-width: 899px) { + .view-validate-certificate .requirements { + width: 100%; + margin-left: 0%; } } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-validate-certificate .requirements { + width: 100%; + margin-left: 0%; } } + @media screen and (max-width: 499px) { + .view-validate-certificate .requirements { + width: 100%; + margin-left: 0%; } } +.view-validate-certificate .list-requirements { + width: 100%; + counter-reset: instructions-counter; + margin: 20px 0; } + .view-validate-certificate .list-requirements .item { + float: left; + display: block; + margin-right: 3.5786636068%; + width: 48.2106681966%; + min-height: 160px; + margin-bottom: 20px; + border-radius: 2px; + border-top: 4px solid #29a6f1; + padding: 20px 20px; + color: #5d6163; + background: #eaebeb; } + .view-validate-certificate .list-requirements .item:last-child { + margin-right: 0; } + .view-validate-certificate .list-requirements .item:nth-child(2n) { + margin-right: 0; } + .view-validate-certificate .list-requirements .item:nth-child(2n+1) { + clear: left; } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-validate-certificate .list-requirements .item { + width: 100%; + min-height: 0; } } + @media screen and (max-width: 499px) { + .view-validate-certificate .list-requirements .item { + width: 100%; + min-height: 0; } } + .view-validate-certificate .list-requirements .item:before { + content: counter(instructions-counter); + counter-increment: instructions-counter; + display: inline-block; + vertical-align: top; + max-width: 10%; + margin-right: 10px; + color: #aeb0b1; } + .view-validate-certificate .list-requirements .item .requirement-label { + display: inline-block; + vertical-align: top; + margin-bottom: 5px; + max-width: 85%; + color: #0a0b0c; } + .view-validate-certificate .list-requirements .item .requirement-details { + display: block; } + @media screen and (max-width: 499px) { + .view-validate-certificate .list-requirements .item .requirement-details { + font-size: 14px; + font-size: 1.4rem; + line-height: 21.7px; + line-height: 2.17rem; } } + .view-validate-certificate .list-requirements .requirement-allitems { + border-top-color: #b62568; } +.view-validate-certificate .instructions { + float: left; + display: block; + margin-right: 2.3576515979%; + width: 65.8807828007%; + margin-left: 17.0596085997%; + padding: 20px 20px; + margin-bottom: 40px; + border-radius: 2px; + border: 1px solid #eaebeb; + background: white; } + .view-validate-certificate .instructions:last-child { + margin-right: 0; } + @media screen and (min-width: 760px) and (max-width: 899px) { + .view-validate-certificate .instructions { + width: 100%; + margin-left: 0%; } } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-validate-certificate .instructions { + width: 100%; + margin-left: 0%; } } + @media screen and (max-width: 499px) { + .view-validate-certificate .instructions { + width: 100%; + margin-left: 0%; } } + .view-validate-certificate .instructions .title { + margin-bottom: 20px; + padding-bottom: 10px; + border-bottom: 3px solid #eaebeb; } +.view-validate-certificate .list-instructions { + counter-reset: instructions-counter; } + .view-validate-certificate .list-instructions .item { + display: block; + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px solid #eaebeb; + color: #5d6163; } + @media screen and (max-width: 499px) { + .view-validate-certificate .list-instructions .item { + font-size: 16px; + font-size: 1.6rem; + line-height: 24.8px; + line-height: 2.48rem; } } + .view-validate-certificate .list-instructions .item:before { + content: counter(instructions-counter); + counter-increment: instructions-counter; + display: inline-block; + vertical-align: top; + max-width: 10%; + margin-right: 10px; + color: #d6d7d8; } + .view-validate-certificate .list-instructions .item .instruction-details { + display: inline-block; + vertical-align: top; + margin-bottom: 20px; + max-width: 85%; } + .view-validate-certificate .list-instructions .item .instruction-image { + width: 100%; + border-radius: 2px; + border: 1px solid #eaebeb; + padding: 10px 10px; + background: #f4f5f5; } + .view-validate-certificate .list-instructions .item .instruction-image img { + width: 100%; + display: block; } +.view-validate-certificate .support { + float: left; + display: block; + margin-right: 2.3576515979%; + width: 65.8807828007%; + margin-left: 17.0596085997%; } + .view-validate-certificate .support:last-child { + margin-right: 0; } + @media screen and (min-width: 760px) and (max-width: 899px) { + .view-validate-certificate .support { + width: 100%; + margin-left: 0%; } } + @media screen and (min-width: 500px) and (max-width: 759px) { + .view-validate-certificate .support { + width: 100%; + margin-left: 0%; } } + @media screen and (max-width: 499px) { + .view-validate-certificate .support { + width: 100%; + margin-left: 0%; } } + @media screen and (max-width: 499px) { + .view-validate-certificate .support .copy { + font-size: 14px; + font-size: 1.4rem; + line-height: 21.7px; + line-height: 2.17rem; } } + .view-validate-certificate .support .list-actions { margin-top: 20px; } @media screen and (min-width: 500px) and (max-width: 759px) { - .view-invalid-certificate .content-supplemental .list-actions .action { + .view-validate-certificate .support .list-actions .action { display: block; text-align: center; } } @media screen and (max-width: 499px) { - .view-invalid-certificate .content-supplemental .list-actions .action { + .view-validate-certificate .support .list-actions .action { display: block; text-align: center; } } - .view-invalid-certificate .supplemental-how { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 23.2317613015%; } - .view-invalid-certificate .supplemental-how:last-child { - margin-right: 0; } - @media screen and (min-width: 760px) and (max-width: 899px) { - .view-invalid-certificate .supplemental-how { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 48.821174201%; } - .view-invalid-certificate .supplemental-how:last-child { - margin-right: 0; } } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-invalid-certificate .supplemental-how { - width: 100%; - margin-bottom: 40px; } } - @media screen and (max-width: 499px) { - .view-invalid-certificate .supplemental-how { - width: 100%; - margin-bottom: 40px; } } - .view-invalid-certificate .supplemental-certificates { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 23.2317613015%; - margin-right: 0; } - .view-invalid-certificate .supplemental-certificates:last-child { - margin-right: 0; } - @media screen and (min-width: 760px) and (max-width: 899px) { - .view-invalid-certificate .supplemental-certificates { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 48.821174201%; } - .view-invalid-certificate .supplemental-certificates:last-child { - margin-right: 0; } } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-invalid-certificate .supplemental-certificates { - width: 100%; } } - @media screen and (max-width: 499px) { - .view-invalid-certificate .supplemental-certificates { - width: 100%; } } - .view-invalid-certificate .supplemental-about { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 48.821174201%; } - .view-invalid-certificate .supplemental-about:last-child { - margin-right: 0; } - @media screen and (min-width: 760px) and (max-width: 899px) { - .view-invalid-certificate .supplemental-about { - width: 100%; - margin-bottom: 40px; } } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-invalid-certificate .supplemental-about { - width: 100%; - margin-bottom: 40px; } } - @media screen and (max-width: 499px) { - .view-invalid-certificate .supplemental-about { - width: 100%; - margin-bottom: 40px; } } - .view-invalid-certificate.is-honorcode .status { - background: #88c7ec; } - .view-invalid-certificate.is-honorcode .certificate-type { - color: #88c7ec; } - .view-invalid-certificate.is-idverified .status { - background: #3aa2e0; } - .view-invalid-certificate.is-idverified .accomplishment { - background: white url("../images/logo-idverified-cropped.png") bottom left no-repeat; - background-size: 75%; } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-invalid-certificate.is-idverified .accomplishment { - background-size: 75%; } } - @media screen and (max-width: 499px) { - .view-invalid-certificate.is-idverified .accomplishment { - background-size: 100%; } } - .view-invalid-certificate.is-idverified .certificate-type { - color: #3aa2e0; } - .view-invalid-certificate.is-idverified .certificate-type .wrapper-img { - width: 200px; - border-radius: 200px; - padding: 10px 10px; - background: white; - margin: -80px auto 0 auto; } - @media screen and (min-width: 760px) and (max-width: 899px) { - .view-invalid-certificate.is-idverified .certificate-type .wrapper-img { - float: right; - margin: 0 0 20px 20px; } } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-invalid-certificate.is-idverified .certificate-type .wrapper-img { - width: 150px; - float: right; - margin: 0 0 20px 20px; } } - @media screen and (max-width: 499px) { - .view-invalid-certificate.is-idverified .certificate-type .wrapper-img { - width: 100px; - float: right; - margin: 0; } } - .view-invalid-certificate.is-idverified .certificate-type .wrapper-img img { - width: 100%; } - -.view-validate-certificate { - background: #f4f5f5; } - .view-validate-certificate .wrapper-view { - background: transparent url("../images/bg-paperfibers.png") 0 0 repeat-both; - padding-bottom: 60px; } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-validate-certificate .wrapper-view { - padding-bottom: 20px; } } - @media screen and (max-width: 499px) { - .view-validate-certificate .wrapper-view { - padding-bottom: 20px; } } - .view-validate-certificate .wrapper-content { - padding: 20px 40px; } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-validate-certificate .wrapper-content { - padding: 20px 20px; } } - @media screen and (max-width: 499px) { - .view-validate-certificate .wrapper-content { - padding: 20px 20px; } } - .view-validate-certificate .content { - max-width: 1280px; - margin-left: auto; - margin-right: auto; } - .view-validate-certificate .content:after { - content: ""; - display: table; - clear: both; } - .view-validate-certificate .content .title-lvl1 { - margin-bottom: 20px; } - .view-validate-certificate .content .title-lvl2 { - margin-bottom: 10px; } - .view-validate-certificate .content .title-lvl3 { - margin-bottom: 10px; } - .view-validate-certificate .introduction { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 65.8807828007%; - margin-left: 17.0596085997%; - margin-bottom: 40px; } - .view-validate-certificate .introduction:last-child { - margin-right: 0; } - @media screen and (min-width: 760px) and (max-width: 899px) { - .view-validate-certificate .introduction { - width: 100%; - margin-left: 0%; } } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-validate-certificate .introduction { - width: 100%; - margin-left: 0%; } } - @media screen and (max-width: 499px) { - .view-validate-certificate .introduction { - width: 100%; - margin-left: 0%; } } - .view-validate-certificate .requirements { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 65.8807828007%; - margin-left: 17.0596085997%; - margin-bottom: 40px; } - .view-validate-certificate .requirements:last-child { - margin-right: 0; } - @media screen and (min-width: 760px) and (max-width: 899px) { - .view-validate-certificate .requirements { - width: 100%; - margin-left: 0%; } } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-validate-certificate .requirements { - width: 100%; - margin-left: 0%; } } - @media screen and (max-width: 499px) { - .view-validate-certificate .requirements { - width: 100%; - margin-left: 0%; } } - .view-validate-certificate .list-requirements { - width: 100%; - counter-reset: instructions-counter; - margin: 20px 0; } - .view-validate-certificate .list-requirements .item { - float: left; - display: block; - margin-right: 3.5786636068%; - width: 48.2106681966%; - min-height: 160px; - margin-bottom: 20px; - border-radius: 2px; - border-top: 4px solid #29a6f1; - padding: 20px 20px; - color: #5d6163; - background: #eaebeb; } - .view-validate-certificate .list-requirements .item:last-child { - margin-right: 0; } - .view-validate-certificate .list-requirements .item:nth-child(2n) { - margin-right: 0; } - .view-validate-certificate .list-requirements .item:nth-child(2n+1) { - clear: left; } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-validate-certificate .list-requirements .item { - width: 100%; - min-height: 0; } } - @media screen and (max-width: 499px) { - .view-validate-certificate .list-requirements .item { - width: 100%; - min-height: 0; } } - .view-validate-certificate .list-requirements .item:before { - content: counter(instructions-counter); - counter-increment: instructions-counter; - display: inline-block; - vertical-align: top; - max-width: 10%; - margin-right: 10px; - color: #aeb0b1; } - .view-validate-certificate .list-requirements .item .requirement-label { - display: inline-block; - vertical-align: top; - margin-bottom: 5px; - max-width: 85%; - color: #0a0b0c; } - .view-validate-certificate .list-requirements .item .requirement-details { - display: block; } - @media screen and (max-width: 499px) { - .view-validate-certificate .list-requirements .item .requirement-details { - font-size: 14px; - font-size: 1.4rem; - line-height: 21.7px; - line-height: 2.17rem; } } - .view-validate-certificate .list-requirements .requirement-allitems { - border-top-color: #b62568; } - .view-validate-certificate .instructions { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 65.8807828007%; - margin-left: 17.0596085997%; - padding: 20px 20px; - margin-bottom: 40px; - border-radius: 2px; - border: 1px solid #eaebeb; - background: white; } - .view-validate-certificate .instructions:last-child { - margin-right: 0; } - @media screen and (min-width: 760px) and (max-width: 899px) { - .view-validate-certificate .instructions { - width: 100%; - margin-left: 0%; } } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-validate-certificate .instructions { - width: 100%; - margin-left: 0%; } } - @media screen and (max-width: 499px) { - .view-validate-certificate .instructions { - width: 100%; - margin-left: 0%; } } - .view-validate-certificate .instructions .title { - margin-bottom: 20px; - padding-bottom: 10px; - border-bottom: 3px solid #eaebeb; } - .view-validate-certificate .list-instructions { - counter-reset: instructions-counter; } - .view-validate-certificate .list-instructions .item { - display: block; - margin-bottom: 20px; - padding-bottom: 20px; - border-bottom: 1px solid #eaebeb; - color: #5d6163; } - @media screen and (max-width: 499px) { - .view-validate-certificate .list-instructions .item { - font-size: 16px; - font-size: 1.6rem; - line-height: 24.8px; - line-height: 2.48rem; } } - .view-validate-certificate .list-instructions .item:before { - content: counter(instructions-counter); - counter-increment: instructions-counter; - display: inline-block; - vertical-align: top; - max-width: 10%; - margin-right: 10px; - color: #d6d7d8; } - .view-validate-certificate .list-instructions .item .instruction-details { - display: inline-block; - vertical-align: top; - margin-bottom: 20px; - max-width: 85%; } - .view-validate-certificate .list-instructions .item .instruction-image { - width: 100%; - border-radius: 2px; - border: 1px solid #eaebeb; - padding: 10px 10px; - background: #f4f5f5; } - .view-validate-certificate .list-instructions .item .instruction-image img { - width: 100%; - display: block; } - .view-validate-certificate .support { - float: left; - display: block; - margin-right: 2.3576515979%; - width: 65.8807828007%; - margin-left: 17.0596085997%; } - .view-validate-certificate .support:last-child { - margin-right: 0; } - @media screen and (min-width: 760px) and (max-width: 899px) { - .view-validate-certificate .support { - width: 100%; - margin-left: 0%; } } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-validate-certificate .support { - width: 100%; - margin-left: 0%; } } - @media screen and (max-width: 499px) { - .view-validate-certificate .support { - width: 100%; - margin-left: 0%; } } - @media screen and (max-width: 499px) { - .view-validate-certificate .support .copy { - font-size: 14px; - font-size: 1.4rem; - line-height: 21.7px; - line-height: 2.17rem; } } - .view-validate-certificate .support .list-actions { - margin-top: 20px; } - @media screen and (min-width: 500px) and (max-width: 759px) { - .view-validate-certificate .support .list-actions .action { - display: block; - text-align: center; } } - @media screen and (max-width: 499px) { - .view-validate-certificate .support .list-actions .action { - display: block; - text-align: center; } } /*# sourceMappingURL=style-application.css.map */ diff --git a/lms/static/certificates/sass/style-application.scss b/lms/static/certificates/sass/style-application.scss index 3d04411b7d..6ba00f2dc0 100644 --- a/lms/static/certificates/sass/style-application.scss +++ b/lms/static/certificates/sass/style-application.scss @@ -31,6 +31,7 @@ @import 'elements/footer'; // view/app footers // BASE - specific views/areas of app +@import 'views/certificate'; // certificate/achievement view @import 'views/valid'; // valid certificate/achievement view @import 'views/invalid'; // invvalid certificate view @import 'views/validate'; // DIY validation diff --git a/lms/static/certificates/sass/views/_certificate.scss b/lms/static/certificates/sass/views/_certificate.scss new file mode 100644 index 0000000000..d60a6f4131 --- /dev/null +++ b/lms/static/certificates/sass/views/_certificate.scss @@ -0,0 +1,249 @@ +.view-certificate { + background: $bg-view; + + // layout + .wrapper-view { + background: transparent url('../images/bg-paperfibers.png') 0 0 repeat-both; + padding-bottom: ($baseline-v*3); + + @include media($bp-ds) { + padding-bottom: $baseline-h; + } + + @include media($bp-m) { + padding-bottom: $baseline-h; + } + } + + .wrapper-content { + padding: $baseline-v ($baseline-h*2); + + @include media($bp-ds) { + padding: $baseline-v $baseline-h; + } + + @include media($bp-m) { + padding: $baseline-v $baseline-h; + } + } + + .content { + @include outer-container; + + a { + @extend %link-copy; + } + } + + // status + .status { + @include row(); + padding: $baseline-v ($baseline-h*2); + border-top-radius: ($baseline-v/10); + box-shadow: inset 0 -2px 2px 0 $shadow-l2; + background: $gray-l4; + color: $white-t; + text-transform: uppercase; + letter-spacing: 0.1rem; + + @include media($bp-ds) { + padding: ($baseline-v) ($baseline-h); + } + + @include media($bp-m) { + padding: ($baseline-v) ($baseline-h); + } + + .title { + @extend %t-title-6; + + @include media($bp-dl) { + @include span-columns(9 of 12); + } + + @include media($bp-dm) { + @include span-columns(9 of 12); + } + + @include media($bp-ds) { + @include font-size(14); // can't use %t-title-8 for some reason + @include lh(14); + } + + @include media($bp-m) { + @include font-size(14); // can't use %t-title-8 for some reason + @include lh(14); + } + } + } + + // supplemental content + .content-supplemental { + + @include media($bp-dm) { + } + + @include media($bp-ds) { + } + + @include media($bp-m) { + } + + .title { + @extend %t-title-7; + @extend %t-weight3; + margin-bottom: ($baseline-v/2); + } + + .copy { + @extend %t-copy-sub1; + color: $gray-l2; + } + + .list-actions { + margin-top: ($baseline-v); + + .action { + @extend %t-copy-sub1; + @extend %btn-primary; + + @include media($bp-dm) { + + } + + @include media($bp-ds) { + display: block; + text-align: center; + } + + @include media($bp-m) { + display: block; + text-align: center; + } + } + } + } + + .content-supplemental-how { + @extend %trans-size; + @include span-columns(3 of 12); + + @include media($bp-dm) { + @include span-columns(6 of 12); + } + + @include media($bp-ds) { + @include fill-parent; + margin-bottom: ($baseline-v*2); + } + + @include media($bp-m) { + @include fill-parent; + margin-bottom: ($baseline-v*2); + } + } + + .content-supplemental-certificates { + @extend %trans-size; + @include span-columns(3 of 12); + @include omega(); + + @include media($bp-dm) { + @include span-columns(6 of 12); + } + + @include media($bp-ds) { + @include fill-parent; + } + + @include media($bp-m) { + @include fill-parent; + } + } + + .content-supplemental-about { + @extend %trans-size; + @include span-columns(6 of 12); + + @include media($bp-dm) { + @include fill-parent; + margin-bottom: ($baseline-v*2); + } + + @include media($bp-ds) { + @include fill-parent; + margin-bottom: ($baseline-v*2); + } + + @include media($bp-m) { + @include fill-parent; + margin-bottom: ($baseline-v*2); + } + } + + // CASE: honor code + &.is-honorcode { + + .status { + background: $edx-blue-l2; + } + + .certificate-type { + color: $edx-blue-l2; + } + } + + // CASE: verified + &.is-idverified { + + .status { + background: $edx-blue; + } + + .accomplishment { + background: $white-t url("../images/logo-idverified-cropped.png") bottom left no-repeat; + background-size: 75%; + + @include media($bp-ds) { + background-size: 75%; + } + + @include media($bp-m) { + background-size: 100%; + } + } + + .certificate-type { + color: $edx-blue; + + .wrapper-img { + width: 200px; + border-radius: ($baseline-h*10); + padding: ($baseline-v/2) ($baseline-h/2); + background: $white-t; + margin: -($baseline-v*4) auto 0 auto; + + @include media($bp-dm) { + float: right; + margin: 0 0 $baseline-h $baseline-h; + } + + @include media($bp-ds) { + width: 150px; + float: right; + margin: 0 0 $baseline-h $baseline-h; + } + + @include media($bp-m) { + width: 100px; + float: right; + margin: 0; + } + + img { + @include fill-parent(); + } + } + } + } +} diff --git a/lms/static/certificates/sass/views/_invalid.scss b/lms/static/certificates/sass/views/_invalid.scss index 28f5555e14..802346b8d9 100644 --- a/lms/static/certificates/sass/views/_invalid.scss +++ b/lms/static/certificates/sass/views/_invalid.scss @@ -1,83 +1,6 @@ // edX: Certificates - View: Invalid Certificate // ==================== .view-invalid-certificate { - background: $bg-view; - - // layout - .wrapper-view { - background: transparent url('../images/bg-paperfibers.png') 0 0 repeat-both; - padding-bottom: ($baseline-v*3); - - @include media($bp-ds) { - padding-bottom: $baseline-h; - } - - @include media($bp-m) { - padding-bottom: $baseline-h; - } - } - - .wrapper-content { - padding: $baseline-v ($baseline-h*2); - - @include media($bp-ds) { - padding: $baseline-v $baseline-h; - } - - @include media($bp-m) { - padding: $baseline-v $baseline-h; - } - } - - .content { - @include outer-container; - - a { - @extend %link-copy; - } - } - - // status - .status { - @include row(); - padding: $baseline-v ($baseline-h*2); - border-top-radius: ($baseline-v/10); - box-shadow: inset 0 -2px 2px 0 $shadow-l2; - background: $edx-pink; - color: $white-t; - text-transform: uppercase; - letter-spacing: 0.1rem; - - @include media($bp-ds) { - padding: ($baseline-v) ($baseline-h); - } - - @include media($bp-m) { - padding: ($baseline-v) ($baseline-h); - } - - .title { - @extend %t-title-6; - - @include media($bp-dl) { - @include span-columns(9 of 12); - } - - @include media($bp-dm) { - @include span-columns(9 of 12); - } - - @include media($bp-ds) { - @include font-size(14); // can't use %t-title-8 for some reason - @include lh(14); - } - - @include media($bp-m) { - @include font-size(14); // can't use %t-title-8 for some reason - @include lh(14); - } - } - } // accomplishment .feedback { @@ -162,177 +85,4 @@ color: $gray-l2; } } - - // ==================== - - // supplemental content - .content-supplemental { - - @include media($bp-dm) { - } - - @include media($bp-ds) { - } - - @include media($bp-m) { - } - - .title { - @extend %t-title-7; - @extend %t-weight3; - margin-bottom: ($baseline-v/2); - } - - .copy { - @extend %t-copy-sub1; - color: $gray-l2; - } - - .list-actions { - margin-top: ($baseline-v); - - .action { - @extend %t-copy-sub1; - @extend %btn-primary; - - @include media($bp-dm) { - - } - - @include media($bp-ds) { - display: block; - text-align: center; - } - - @include media($bp-m) { - display: block; - text-align: center; - } - } - } - } - - .supplemental-how { - @extend %trans-size; - @include span-columns(3 of 12); - - @include media($bp-dm) { - @include span-columns(6 of 12); - } - - @include media($bp-ds) { - @include fill-parent; - margin-bottom: ($baseline-v*2); - } - - @include media($bp-m) { - @include fill-parent; - margin-bottom: ($baseline-v*2); - } - } - - .supplemental-certificates { - @extend %trans-size; - @include span-columns(3 of 12); - @include omega(); - - @include media($bp-dm) { - @include span-columns(6 of 12); - } - - @include media($bp-ds) { - @include fill-parent; - } - - @include media($bp-m) { - @include fill-parent; - } - } - - .supplemental-about { - @extend %trans-size; - @include span-columns(6 of 12); - - @include media($bp-dm) { - @include fill-parent; - margin-bottom: ($baseline-v*2); - } - - @include media($bp-ds) { - @include fill-parent; - margin-bottom: ($baseline-v*2); - } - - @include media($bp-m) { - @include fill-parent; - margin-bottom: ($baseline-v*2); - } - } - - // CASE: honor code - &.is-honorcode { - - .status { - background: $edx-blue-l2; - } - - .certificate-type { - color: $edx-blue-l2; - } - } - - // CASE: verified - &.is-idverified { - - .status { - background: $edx-blue; - } - - .accomplishment { - background: $white-t url("../images/logo-idverified-cropped.png") bottom left no-repeat; - background-size: 75%; - - @include media($bp-ds) { - background-size: 75%; - } - - @include media($bp-m) { - background-size: 100%; - } - } - - .certificate-type { - color: $edx-blue; - - - .wrapper-img { - width: 200px; - border-radius: ($baseline-h*10); - padding: ($baseline-v/2) ($baseline-h/2); - background: $white-t; - margin: -($baseline-v*4) auto 0 auto; - - @include media($bp-dm) { - float: right; - margin: 0 0 $baseline-h $baseline-h; - } - - @include media($bp-ds) { - width: 150px; - float: right; - margin: 0 0 $baseline-h $baseline-h; - } - - @include media($bp-m) { - width: 100px; - float: right; - margin: 0; - } - - img { - @include fill-parent(); - } - } - } - } } diff --git a/lms/static/certificates/sass/views/_valid.scss b/lms/static/certificates/sass/views/_valid.scss index f66a9854e7..5826a1c075 100644 --- a/lms/static/certificates/sass/views/_valid.scss +++ b/lms/static/certificates/sass/views/_valid.scss @@ -1,83 +1,6 @@ // edX: Certificates - View: Valid Certificate // ==================== .view-valid-certificate { - background: $bg-view; - - // layout - .wrapper-view { - background: transparent url('../images/bg-paperfibers.png') 0 0 repeat-both; - padding-bottom: ($baseline-v*3); - - @include media($bp-ds) { - padding-bottom: $baseline-h; - } - - @include media($bp-m) { - padding-bottom: $baseline-h; - } - } - - .wrapper-content { - padding: $baseline-v ($baseline-h*2); - - @include media($bp-ds) { - padding: $baseline-v $baseline-h; - } - - @include media($bp-m) { - padding: $baseline-v $baseline-h; - } - } - - .content { - @include outer-container; - - a { - @extend %link-copy; - } - } - - // status - .status { - @include row(); - padding: $baseline-v ($baseline-h*2); - border-top-radius: ($baseline-v/10); - box-shadow: inset 0 -2px 2px 0 $shadow-l2; - background: $gray-l4; - color: $white-t; - text-transform: uppercase; - letter-spacing: 0.1rem; - - @include media($bp-ds) { - padding: ($baseline-v) ($baseline-h); - } - - @include media($bp-m) { - padding: ($baseline-v) ($baseline-h); - } - - .title { - @extend %t-title-6; - - @include media($bp-dl) { - @include span-columns(9 of 12); - } - - @include media($bp-dm) { - @include span-columns(9 of 12); - } - - @include media($bp-ds) { - @include font-size(14); // can't use %t-title-8 for some reason - @include lh(14); - } - - @include media($bp-m) { - @include font-size(14); // can't use %t-title-8 for some reason - @include lh(14); - } - } - } // accomplishment .accomplishment { @@ -161,7 +84,6 @@ } .copy-course { - @include media($bp-ds) { margin-bottom: ($baseline-v/4); } @@ -281,177 +203,4 @@ } } } - - // ==================== - - // supplemental content - .content-supplemental { - - @include media($bp-dm) { - } - - @include media($bp-ds) { - } - - @include media($bp-m) { - } - - .title { - @extend %t-title-7; - @extend %t-weight3; - margin-bottom: ($baseline-v/2); - } - - .copy { - @extend %t-copy-sub1; - color: $gray-l2; - } - - .list-actions { - margin-top: ($baseline-v); - - .action { - @extend %t-copy-sub1; - @extend %btn-primary; - - @include media($bp-dm) { - - } - - @include media($bp-ds) { - display: block; - text-align: center; - } - - @include media($bp-m) { - display: block; - text-align: center; - } - } - } - } - - .content-supplemental-how { - @extend %trans-size; - @include span-columns(3 of 12); - - @include media($bp-dm) { - @include span-columns(6 of 12); - } - - @include media($bp-ds) { - @include fill-parent; - margin-bottom: ($baseline-v*2); - } - - @include media($bp-m) { - @include fill-parent; - margin-bottom: ($baseline-v*2); - } - } - - .content-supplemental-certificates { - @extend %trans-size; - @include span-columns(3 of 12); - @include omega(); - - @include media($bp-dm) { - @include span-columns(6 of 12); - } - - @include media($bp-ds) { - @include fill-parent; - } - - @include media($bp-m) { - @include fill-parent; - } - } - - .content-supplemental-about { - @extend %trans-size; - @include span-columns(6 of 12); - - @include media($bp-dm) { - @include fill-parent; - margin-bottom: ($baseline-v*2); - } - - @include media($bp-ds) { - @include fill-parent; - margin-bottom: ($baseline-v*2); - } - - @include media($bp-m) { - @include fill-parent; - margin-bottom: ($baseline-v*2); - } - } - - // CASE: honor code - &.is-honorcode { - - .status { - background: $edx-blue-l2; - } - - .certificate-type { - color: $edx-blue-l2; - } - } - - // CASE: verified - &.is-idverified { - - .status { - background: $edx-blue; - } - - .accomplishment { - background: $white-t url("../images/logo-idverified-cropped.png") bottom left no-repeat; - background-size: 75%; - - @include media($bp-ds) { - background-size: 75%; - } - - @include media($bp-m) { - background-size: 100%; - } - } - - .certificate-type { - color: $edx-blue; - - - .wrapper-img { - width: 200px; - border-radius: ($baseline-h*10); - padding: ($baseline-v/2) ($baseline-h/2); - background: $white-t; - margin: -($baseline-v*4) auto 0 auto; - - @include media($bp-dm) { - float: right; - margin: 0 0 $baseline-h $baseline-h; - } - - @include media($bp-ds) { - width: 150px; - float: right; - margin: 0 0 $baseline-h $baseline-h; - } - - @include media($bp-m) { - width: 100px; - float: right; - margin: 0; - } - - img { - @include fill-parent(); - } - } - } - } } diff --git a/lms/static/certificates/sass/views/_validate.scss b/lms/static/certificates/sass/views/_validate.scss index 497d94b41e..078360d118 100644 --- a/lms/static/certificates/sass/views/_validate.scss +++ b/lms/static/certificates/sass/views/_validate.scss @@ -1,41 +1,9 @@ // edX: Certificates - View: DIY Validation // ==================== .view-validate-certificate { - background: $bg-view; - - // layout - .wrapper-view { - background: transparent url('../images/bg-paperfibers.png') 0 0 repeat-both; - padding-bottom: ($baseline-v*3); - - @include media($bp-ds) { - padding-bottom: $baseline-h; - } - - @include media($bp-m) { - padding-bottom: $baseline-h; - } - } - - .wrapper-content { - padding: $baseline-v ($baseline-h*2); - - @include media($bp-ds) { - padding: $baseline-v $baseline-h; - } - - @include media($bp-m) { - padding: $baseline-v $baseline-h; - } - } // general .content { - @include outer-container; - - a { - @extend %link-copy; - } .title-lvl1 { @extend %t-title-3;