Skip to content

E
edx-platform
Commit 597af988 by Brian Talbot
Options

certificates: abstracting out all certificate sass vs. individual views

parent 71c9a2d4
Showing with 250 additions and 533 deletions
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
......
lms/static/certificates/sass/views/_certificate.scss 0 → 100644
.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();
}
}
}
}
}
lms/static/certificates/sass/views/_invalid.scss
// 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();
}
}
}
}
}
lms/static/certificates/sass/views/_valid.scss
// 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();
}
}
}
}
}
lms/static/certificates/sass/views/_validate.scss
// 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;
......
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