Skip to content

E
edx-platform
Commit 71c9a2d4 by Brian Talbot
Options

certificates: moving Sass/UI naming conventions to documented standards

parent d7a5d24c
Showing with 244 additions and 245 deletions
lms/static/certificates/sass/_base.scss
......@@ -30,13 +30,13 @@ body {
// ====================
// base: view
.wrapper--view {
.wrapper-view {
background: $bg-view;
}
// ====================
[class^="content__"], [class^="content--"] {
[class^="content-"]{
a {
@extend %link-copy;
......@@ -78,6 +78,14 @@ strong {
}
// reset: lists
.list--actions, .list--docs, .list--steps, .list--controls, .list--fields, .list--help, .nav--wizard, .list--tips, .field--group {
.list-actions,
.list-docs,
.list-steps,
.list-controls,
.list-fields,
.list-help,
.nav-wizard,
.list-tips,
.field-group {
@extend %ui-no-list;
}
lms/static/certificates/sass/elements/_footer.scss
// edX: Certificates - Footer
// ====================
.wrapper--footer {
.wrapper-footer {
padding: 0 ($baseline-h*2);
background: $bg-footer-main;
color: $color-footer-main;
......@@ -15,7 +15,7 @@
}
}
.footer--app {
.footer-app {
@include outer-container;
border-top: 2px solid $gray-l5;
margin-top: $baseline-v;
......@@ -24,98 +24,98 @@
a {
@extend %link-copy;
}
}
.copyright {
@extend %t-copy-sub1;
@include span-columns(4 of 12);
.footer-app-copyright {
@extend %t-copy-sub1;
@include span-columns(4 of 12);
@include media($bp-dm) {
@include fill-parent;
margin-bottom: ($baseline-v);
}
@include media($bp-dm) {
@include fill-parent;
margin-bottom: ($baseline-v);
}
@include media($bp-ds) {
@include fill-parent;
margin-bottom: ($baseline-v);
}
@include media($bp-ds) {
@include fill-parent;
margin-bottom: ($baseline-v);
}
@include media($bp-m) {
@include fill-parent;
margin-bottom: ($baseline-v);
}
@include media($bp-m) {
@include fill-parent;
margin-bottom: ($baseline-v);
}
}
.nav--footer {
@include span-columns(8 of 12);
@include omega();
text-align: right;
.footer-app-nav {
@include span-columns(8 of 12);
@include omega();
text-align: right;
@include media($bp-dm) {
@include fill-parent;
text-align: left;
}
@include media($bp-ds) {
@include fill-parent;
text-align: left;
}
@include media($bp-m) {
@include fill-parent;
text-align: left;
}
.list {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline-h*2);
&:last-child {
margin-right: 0;
}
@include media($bp-dm) {
@include fill-parent;
margin: 0 0 $baseline-v 0;
text-align: left;
}
@include media($bp-ds) {
@include fill-parent;
margin: 0 0 $baseline-v 0;
text-align: left;
}
@include media($bp-m) {
@include fill-parent;
margin: 0 0 $baseline-v 0;
text-align: left;
}
}
.nav-item {
@extend %t-action5;
display: inline-block;
margin-right: ($baseline-h/2);
@include media($bp-dm) {
@include font-size(14);
@include lh(14);
}
.list {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline-h*2);
&:last-child {
margin-right: 0;
}
@include media($bp-dm) {
@include fill-parent;
margin: 0 0 $baseline-v 0;
text-align: left;
}
@include media($bp-ds) {
@include fill-parent;
margin: 0 0 $baseline-v 0;
text-align: left;
}
@include media($bp-m) {
@include fill-parent;
margin: 0 0 $baseline-v 0;
text-align: left;
}
@include media($bp-ds) {
@include font-size(14);
@include lh(14);
display: block;
margin: 0 0 ($baseline-v/4) 0;
}
.nav__item {
@extend %t-action5;
display: inline-block;
margin-right: ($baseline-h/2);
@include media($bp-dm) {
@include font-size(14);
@include lh(14);
}
@include media($bp-ds) {
@include font-size(14);
@include lh(14);
display: block;
margin: 0 0 ($baseline-v/4) 0;
}
@include media($bp-m) {
@include font-size(14);
@include lh(14);
display: block;
margin: 0 0 ($baseline-v/4) 0;
}
@include media($bp-m) {
@include font-size(14);
@include lh(14);
display: block;
margin: 0 0 ($baseline-v/4) 0;
}
}
}
lms/static/certificates/sass/elements/_header.scss
......@@ -2,7 +2,7 @@
// ====================
// grid/layout
.wrapper--header {
.wrapper-header {
@extend %ui-shadow-subtle-down;
margin-bottom: ($baseline-v*2);
padding: ($baseline-v) ($baseline-h*2);
......@@ -18,12 +18,12 @@
}
}
.header--app {
.header-app {
@include outer-container;
}
// masthead
.title--logo {
.title-logo {
text-align: center;
.logo {
......@@ -32,7 +32,7 @@
margin-right: ($baseline-h);
}
.title--sub {
.title-sub {
@extend %ui-text-sr;
@extend %t-title-5;
display: inline-block;
......
lms/static/certificates/sass/elements/_navigation.scss
......@@ -8,7 +8,7 @@
@extend %no-list !optional;
}
.nav__item {
.nav-item {
.action {
......@@ -17,10 +17,10 @@
}
// archetype: nav - horizontal
%nav--inline {
%nav-inline {
@extend %nav !optional;
.nav__item, .item {
.nav-item, .item {
display: inline-block;
vertical-align: middle;
......@@ -31,10 +31,10 @@
}
// archetype: nav - vertical
%nav--blocks {
%nav-blocks {
@extend %nav !optional;
.nav__item {
.nav-item {
display: block;
.action {
......@@ -44,10 +44,10 @@
}
// archetype: nav - tabs
%nav--tabs {
%nav-tabs {
@extend %nav !optional;
.nav__item {
.nav-item {
.action {
......@@ -56,10 +56,10 @@
}
// archetype: nav - pagination
%nav--pagination {
%nav-pagination {
@extend %nav !optional;
.nav__item {
.nav-item {
.action {
......@@ -68,10 +68,10 @@
}
// archetype: nav - dropdown
%nav--dropdown {
%nav-dropdown {
@extend %nav !optional;
.nav__item {
.nav-item {
.action {
......@@ -82,9 +82,9 @@
// ====================
// application: secondary navigation
%nav--secondary {
%nav-secondary {
.nav__item {
.nav-item {
.action {
......
lms/static/certificates/sass/views/_invalid.scss
// edX: Certificates - View: Invalid Certificate
// ====================
.view--invalid-certificate {
.view-invalid-certificate {
background: $bg-view;
// layout
.wrapper--view {
.wrapper-view {
background: transparent url('../images/bg-paperfibers.png') 0 0 repeat-both;
padding-bottom: ($baseline-v*3);
......@@ -17,7 +17,7 @@
}
}
.wrapper--content {
.wrapper-content {
padding: $baseline-v ($baseline-h*2);
@include media($bp-ds) {
......@@ -100,7 +100,7 @@
}
}
.feedback__lead {
.feedback-lead {
margin-bottom: ($baseline-v);
padding-bottom: ($baseline-v);
border-bottom: 1px solid $gray-l5;
......@@ -117,7 +117,7 @@
}
}
.feedback__support {
.feedback-support {
@include span-columns(6 of 12);
margin-bottom: $baseline-v;
......@@ -140,7 +140,7 @@
}
}
.feedback__warning {
.feedback-warning {
@include span-columns(6 of 12);
@include omega();
......@@ -166,7 +166,7 @@
// ====================
// supplemental content
.content--supplemental {
.content-supplemental {
@include media($bp-dm) {
}
......@@ -188,7 +188,7 @@
color: $gray-l2;
}
.list--actions {
.list-actions {
margin-top: ($baseline-v);
.action {
......@@ -212,7 +212,7 @@
}
}
.supplemental__how {
.supplemental-how {
@extend %trans-size;
@include span-columns(3 of 12);
......@@ -231,7 +231,7 @@
}
}
.supplemental__certificates {
.supplemental-certificates {
@extend %trans-size;
@include span-columns(3 of 12);
@include omega();
......@@ -249,7 +249,7 @@
}
}
.supplemental__about {
.supplemental-about {
@extend %trans-size;
@include span-columns(6 of 12);
......@@ -276,13 +276,9 @@
background: $edx-blue-l2;
}
.certificate--type {
.certificate-type {
color: $edx-blue-l2;
}
// .content--supplemental .list--actions .action {
// @extend %btn-secondary;
// }
}
// CASE: verified
......@@ -305,11 +301,11 @@
}
}
.certificate--type {
.certificate-type {
color: $edx-blue;
.wrapper--img {
.wrapper-img {
width: 200px;
border-radius: ($baseline-h*10);
padding: ($baseline-v/2) ($baseline-h/2);
......
lms/static/certificates/sass/views/_valid.scss
// edX: Certificates - View: Valid Certificate
// ====================
.view--valid-certificate {
.view-valid-certificate {
background: $bg-view;
// layout
.wrapper--view {
.wrapper-view {
background: transparent url('../images/bg-paperfibers.png') 0 0 repeat-both;
padding-bottom: ($baseline-v*3);
......@@ -17,7 +17,7 @@
}
}
.wrapper--content {
.wrapper-content {
padding: $baseline-v ($baseline-h*2);
@include media($bp-ds) {
......@@ -100,7 +100,7 @@
}
// statement
.accomplishment__statement {
.accomplishment-statement {
@extend %trans-size;
@include span-columns(8 of 12);
@include pad(0 $baseline-h 0 0);
......@@ -124,12 +124,12 @@
border-right: none;
}
[class^="copy__"] {
[class^="copy-"] {
display: block;
margin-bottom: ($baseline-v);
}
.copy__name {
.copy-name {
@extend %t-title-2;
@extend %t-weight3;
......@@ -146,7 +146,7 @@
}
}
.copy__course__org {
.copy-course-org {
@extend %t-title-5;
@extend %t-weight2;
margin-bottom: 0;
......@@ -160,7 +160,7 @@
}
}
.copy__course {
.copy-course {
@include media($bp-ds) {
margin-bottom: ($baseline-v/4);
......@@ -171,7 +171,7 @@
}
}
.copy__course__name {
.copy-course-name {
@extend %t-title-2;
@extend %t-weight3;
@include lh(36);
......@@ -189,11 +189,11 @@
}
}
.copy__recogniton {
.copy-recogniton {
@extend %t-title-2;
}
.copy__context {
.copy-context {
@extend %t-copy-lead2;
color: $gray-l2;
......@@ -210,7 +210,7 @@
}
// metadata around accomplishment
.accomplishment__details {
.accomplishment-details {
@extend %trans-size;
@include span-columns(4 of 12);
......@@ -229,7 +229,7 @@
@include fill-parent;
}
.list--metadata {
.list-metadata {
@extend %ui-no-list;
.item {
......@@ -264,7 +264,7 @@
}
// specific metadata
.certificate--type {
.certificate-type {
text-transform: uppercase;
letter-spacing: 0.1rem;
......@@ -274,7 +274,7 @@
}
}
.certificate--id {
.certificate-id {
.value {
word-wrap: break-word;
......@@ -285,7 +285,7 @@
// ====================
// supplemental content
.content--supplemental {
.content-supplemental {
@include media($bp-dm) {
}
......@@ -307,7 +307,7 @@
color: $gray-l2;
}
.list--actions {
.list-actions {
margin-top: ($baseline-v);
.action {
......@@ -331,7 +331,7 @@
}
}
.supplemental__how {
.content-supplemental-how {
@extend %trans-size;
@include span-columns(3 of 12);
......@@ -350,7 +350,7 @@
}
}
.supplemental__certificates {
.content-supplemental-certificates {
@extend %trans-size;
@include span-columns(3 of 12);
@include omega();
......@@ -368,7 +368,7 @@
}
}
.supplemental__about {
.content-supplemental-about {
@extend %trans-size;
@include span-columns(6 of 12);
......@@ -395,13 +395,9 @@
background: $edx-blue-l2;
}
.certificate--type {
.certificate-type {
color: $edx-blue-l2;
}
// .content--supplemental .list--actions .action {
// @extend %btn-secondary;
// }
}
// CASE: verified
......@@ -424,11 +420,11 @@
}
}
.certificate--type {
.certificate-type {
color: $edx-blue;
.wrapper--img {
.wrapper-img {
width: 200px;
border-radius: ($baseline-h*10);
padding: ($baseline-v/2) ($baseline-h/2);
......
lms/static/certificates/sass/views/_validate.scss
// edX: Certificates - View: DIY Validation
// ====================
.view--validate-certificate {
.view-validate-certificate {
background: $bg-view;
// layout
.wrapper--view {
.wrapper-view {
background: transparent url('../images/bg-paperfibers.png') 0 0 repeat-both;
padding-bottom: ($baseline-v*3);
......@@ -17,7 +17,7 @@
}
}
.wrapper--content {
.wrapper-content {
padding: $baseline-v ($baseline-h*2);
@include media($bp-ds) {
......@@ -37,25 +37,25 @@
@extend %link-copy;
}
.title--lvl1 {
.title-lvl1 {
@extend %t-title-3;
@extend %t-weight3;
margin-bottom: $baseline-v;
}
.title--lvl2 {
.title-lvl2 {
@extend %t-title-5;
@extend %t-weight3;
margin-bottom: ($baseline-v/2);
}
.title--lvl3 {
.title-lvl3 {
@extend %t-title-6;
@extend %t-weight3;
margin-bottom: ($baseline-v/2);
}
.title--lvl4 {
.title-lvl4 {
}
}
......@@ -106,10 +106,10 @@
}
}
.list--requirements {
.list-requirements {
@extend %ui-no-list;
@include fill-parent();
counter-reset: instructions--counter;
counter-reset: instructions-counter;
margin: $baseline-v 0;
.item {
......@@ -140,8 +140,8 @@
&:before {
@extend %t-title-6;
@extend %t-weight3;
content: counter(instructions--counter);
counter-increment: instructions--counter;
content: counter(instructions-counter);
counter-increment: instructions-counter;
display: inline-block;
vertical-align: top;
max-width: 10%;
......@@ -149,7 +149,7 @@
color: $gray-l3;
}
.requirement__label {
.requirement-label {
@extend %t-title-6;
@extend %t-weight3;
display: inline-block;
......@@ -159,7 +159,7 @@
color: $gray-d4;
}
.requirement__details {
.requirement-details {
display: block;
@include media($bp-m) {
......@@ -169,7 +169,7 @@
}
}
.requirement--allitems {
.requirement-allitems {
border-top-color: $edx-pink;
}
}
......@@ -211,9 +211,9 @@
}
}
.list--instructions {
.list-instructions {
@extend %ui-no-list;
counter-reset: instructions--counter;
counter-reset: instructions-counter;
.item {
......@@ -233,8 +233,8 @@
&:before {
@extend %t-title-6;
@extend %t-weight4;
content: counter(instructions--counter);
counter-increment: instructions--counter;
content: counter(instructions-counter);
counter-increment: instructions-counter;
display: inline-block;
vertical-align: top;
max-width: 10%;
......@@ -242,7 +242,7 @@
color: $gray-l4;
}
.instruction__details {
.instruction-details {
@extend %wipe-last-child;
display: inline-block;
vertical-align: top;
......@@ -250,7 +250,7 @@
max-width: 85%;
}
.instruction__image {
.instruction-image {
@include fill-parent();
border-radius: ($baseline-v/10);
border: 1px solid $gray-l5;
......@@ -298,7 +298,7 @@
}
}
.list--actions {
.list-actions {
margin-top: ($baseline-v);
.action {
......
lms/templates/certificates/certificate-base.html
......@@ -26,7 +26,10 @@
</head>
<body class="view-certificate view-valid-certificate ${dir_rtl} ${document_body_class_append}" data-view="valid-certificate">
${self.body()}
<div class="wrapper-view">
${self.body()}
</div>
<%include file="_assets-secondary.html" />
</body>
</html>
lms/templates/certificates/invalid.html
......@@ -4,49 +4,47 @@
<%inherit file="certificate-base.html" />
<div class="wrapper-view">
<%include file="_certificate-header.html" />
<%include file="_certificate-header.html" />
<hr class="divider" />
<hr class="divider" />
<div class="wrapper-content">
<div class="wrapper-content">
<section class="content content-main" role="main">
<div class="status status-invalid" id="validation-status">
<h2 class="title title-lvl2">${_("This is an invalid certificate number")}</h2>
</div>
<section class="content content-main" role="main">
<div class="status status-invalid" id="validation-status">
<h2 class="title title-lvl2">${_("This is an invalid certificate number")}</h2>
</div>
<div class="feedback">
<div class="feedback-lead">
<h3 class="title">${_("This Certificate Does Not Exist")}</h3>
<div class="copy">
<p>${_("We cannot find a certificate on file that matches this URL or ID number.")}</p>
</div>
</div>
<div class="feedback-support">
<h3 class="title">${_("Looking for a Particular Certificate?")}</h3>
<div class="copy">
<p>${_("Ensure that the ID number is an exact match of the ID number on the PDF or print certificate you are referencing.")}</p>
</div>
</div>
<div class="feedback-warning">
<h3 class="title">Please Note</h3>
<div class="copy">
<p>${_("If you are trying to validate a certificate with this ID number, it may be a forgery.")}</p>
</div>
</div>
<div class="feedback">
<div class="feedback-lead">
<h3 class="title">${_("This Certificate Does Not Exist")}</h3>
<div class="copy">
<p>${_("We cannot find a certificate on file that matches this URL or ID number.")}</p>
</div>
</section>
</div>
<div class="feedback-support">
<h3 class="title">${_("Looking for a Particular Certificate?")}</h3>
<hr class="divider" />
<div class="copy">
<p>${_("Ensure that the ID number is an exact match of the ID number on the PDF or print certificate you are referencing.")}</p>
</div>
</div>
<%include file="_certificate-supplemental.html" />
</div>
<div class="feedback-warning">
<h3 class="title">Please Note</h3>
<div class="copy">
<p>${_("If you are trying to validate a certificate with this ID number, it may be a forgery.")}</p>
</div>
</div>
</div>
</section>
<hr class="divider" />
<%include file="_certificate-footer.html" />
<%include file="_certificate-supplemental.html" />
</div>
<hr class="divider" />
<%include file="_certificate-footer.html" />
lms/templates/certificates/valid.html
......@@ -4,62 +4,60 @@
<%inherit file="certificate-base.html" />
<div class="wrapper--view">
<%include file="_certificate-header.html" />
<hr class="divider" />
<div class="wrapper-content">
<section class="content content-main" role="main">
<div class="status status-valid" id="validation-status">
<h2 class="title title-lvl2">
${document_banner}
<span class="sr">:</span>
</h2>
<%include file="_certificate-header.html" />
<hr class="divider" />
<div class="wrapper-content">
<section class="content content-main" role="main">
<div class="status status-valid" id="validation-status">
<h2 class="title title-lvl2">
${document_banner}
<span class="sr">:</span>
</h2>
</div>
<article class="accomplishment ${accomplishment_class_append}" id="validation-accomplishment">
<div class="accomplishment-statement">
<p class="copy">
<span class="copy-name">${accomplishment_copy_name}</span>
<span class="copy-context">${accomplishment_copy_description_full}</span>
<span class="copy-course">
<span class="copy-course-org">${accomplishment_copy_course_org}</span>
<span class="copy-course-name">${accomplishment_copy_course_name}</span>
</span>
<span class="copy-context">${accomplishment_copy_course_description}</span>
</p>
</div>
<article class="accomplishment ${accomplishment_class_append}" id="validation-accomplishment">
<div class="accomplishment-statement">
<p class="copy">
<span class="copy-name">${accomplishment_copy_name}</span>
<span class="copy-context">${accomplishment_copy_description_full}</span>
<span class="copy-course">
<span class="copy-course-org">${accomplishment_copy_course_org}</span>
<span class="copy-course-name">${accomplishment_copy_course_name}</span>
<div class="accomplishment-details">
<h3 class="title title-lvl2 sr">${accomplishment_more_title}</h3>
<ul class="list list-metadata">
<li class="item certificate-type">
<span class="label">${_("Certificate Type")}</span>
<span class="value">
${certificate_type_title}
<span class="explanation">${certificate_type_description} </span>
</span>
<span class="copy-context">${accomplishment_copy_course_description}</span>
</p>
</div>
<div class="accomplishment-details">
<h3 class="title title-lvl2 sr">${accomplishment_more_title}</h3>
<ul class="list list-metadata">
<li class="item certificate-type">
<span class="label">${_("Certificate Type")}</span>
<span class="value">
${certificate_type_title}
<span class="explanation">${certificate_type_description} </span>
</span>
</li>
<li class="item certificate-id">
<span class="label">${certificate_id_number_title}</span>
<span class="value">${certificate_id_number}</span>
</li>
<li class="item certificate-date">
<span class="label">${certificate_date_issued_title}</span>
<span class="value">${certificate_date_issued}</span>
</li>
</ul>
</div>
</article>
</section>
<hr class="divider" />
<%include file="_certificate-supplemental.html" />
</div>
</li>
<li class="item certificate-id">
<span class="label">${certificate_id_number_title}</span>
<span class="value">${certificate_id_number}</span>
</li>
<li class="item certificate-date">
<span class="label">${certificate_date_issued_title}</span>
<span class="value">${certificate_date_issued}</span>
</li>
</ul>
</div>
</article>
</section>
<hr class="divider" />
<%include file="_certificate-footer.html" />
<%include file="_certificate-supplemental.html" />
</div>
<hr class="divider" />
<%include file="_certificate-footer.html" />
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment