Skip to content

E
edx-platform
Commit 12d1992e by Brian Talbot
Options

certificates: revising breakpoint names/definitions to match current FED standards

parent 8f9b3dad
Showing with 90 additions and 103 deletions
lms/static/certificates/sass/components/_footer.scss
...@@ -6,11 +6,11 @@ ...@@ -6,11 +6,11 @@
background: $bg-footer-main; background: $bg-footer-main;
color: $color-footer-main; color: $color-footer-main;
@include media($bp-ds) { @include media($bp-medium) {
padding: 0 ($baseline-h); padding: 0 ($baseline-h);
} }
@include media($bp-m) { @include media($bp-small) {
padding: 0 ($baseline-h); padding: 0 ($baseline-h);
} }
} }
...@@ -30,17 +30,17 @@ ...@@ -30,17 +30,17 @@
@extend %t-copy-sub1; @extend %t-copy-sub1;
@include span-columns(4 of 12); @include span-columns(4 of 12);
@include media($bp-dm) { @include media($bp-large) {
@include fill-parent; @include fill-parent;
margin-bottom: ($baseline-v); margin-bottom: ($baseline-v);
} }
@include media($bp-ds) { @include media($bp-medium) {
@include fill-parent; @include fill-parent;
margin-bottom: ($baseline-v); margin-bottom: ($baseline-v);
} }
@include media($bp-m) { @include media($bp-small) {
@include fill-parent; @include fill-parent;
margin-bottom: ($baseline-v); margin-bottom: ($baseline-v);
} }
...@@ -51,17 +51,17 @@ ...@@ -51,17 +51,17 @@
@include omega(); @include omega();
text-align: right; text-align: right;
@include media($bp-dm) { @include media($bp-large) {
@include fill-parent; @include fill-parent;
text-align: left; text-align: left;
} }
@include media($bp-ds) { @include media($bp-medium) {
@include fill-parent; @include fill-parent;
text-align: left; text-align: left;
} }
@include media($bp-m) { @include media($bp-small) {
@include fill-parent; @include fill-parent;
text-align: left; text-align: left;
} }
...@@ -75,19 +75,19 @@ ...@@ -75,19 +75,19 @@
margin-right: 0; margin-right: 0;
} }
@include media($bp-dm) { @include media($bp-large) {
@include fill-parent; @include fill-parent;
margin: 0 0 $baseline-v 0; margin: 0 0 $baseline-v 0;
text-align: left; text-align: left;
} }
@include media($bp-ds) { @include media($bp-medium) {
@include fill-parent; @include fill-parent;
margin: 0 0 $baseline-v 0; margin: 0 0 $baseline-v 0;
text-align: left; text-align: left;
} }
@include media($bp-m) { @include media($bp-small) {
@include fill-parent; @include fill-parent;
margin: 0 0 $baseline-v 0; margin: 0 0 $baseline-v 0;
text-align: left; text-align: left;
...@@ -99,19 +99,19 @@ ...@@ -99,19 +99,19 @@
display: inline-block; display: inline-block;
margin-right: ($baseline-h/2); margin-right: ($baseline-h/2);
@include media($bp-dm) { @include media($bp-large) {
@include font-size(14); @include font-size(14);
@include lh(14); @include lh(14);
} }
@include media($bp-ds) { @include media($bp-medium) {
@include font-size(14); @include font-size(14);
@include lh(14); @include lh(14);
display: block; display: block;
margin: 0 0 ($baseline-v/4) 0; margin: 0 0 ($baseline-v/4) 0;
} }
@include media($bp-m) { @include media($bp-small) {
@include font-size(14); @include font-size(14);
@include lh(14); @include lh(14);
display: block; display: block;
......
lms/static/certificates/sass/components/_header.scss
...@@ -9,11 +9,11 @@ ...@@ -9,11 +9,11 @@
background: $white-t; background: $white-t;
color: $black; color: $black;
@include media($bp-ds) { @include media($bp-medium) {
padding: ($baseline-v) ($baseline-h); padding: ($baseline-v) ($baseline-h);
} }
@include media($bp-m) { @include media($bp-small) {
padding: ($baseline-v) ($baseline-h); padding: ($baseline-v) ($baseline-h);
} }
} }
......
lms/static/certificates/sass/utilities/_variables.scss
...@@ -109,10 +109,10 @@ $column: ($baseline-v*4.25); // co ...@@ -109,10 +109,10 @@ $column: ($baseline-v*4.25); // co
$gutter: $baseline-v; // gutter b/t columns $gutter: $baseline-v; // gutter b/t columns
// grid (neat-based) - responsive // grid (neat-based) - responsive
$bp-m: new-breakpoint(max-width 499px 4); // mobile devices - make grid 4 columns $bp-small: new-breakpoint(max-width 499px 4); // mobile devices - make grid 4 columns
$bp-ds: new-breakpoint(min-width 500px max-width 759px 6); // small displays - make grid 6 columns $bp-medium: new-breakpoint(min-width 500px max-width 759px 6); // small displays - make grid 6 columns
$bp-dm: new-breakpoint(min-width 760px max-width 899px 12); // medium displays - make grid 12 columns $bp-large: new-breakpoint(min-width 760px max-width 899px 12); // medium displays - make grid 12 columns
$bp-dl: new-breakpoint(min-width 900px 12); // large displays - make grid 12 columns $bp-xlarge: new-breakpoint(min-width 900px 12); // large displays - make grid 12 columns
// timing - used for animation/transition mixin syncing // timing - used for animation/transition mixin syncing
$tmg-s3: 3.0s; $tmg-s3: 3.0s;
......
lms/static/certificates/sass/views/_certificate.scss
...@@ -9,11 +9,11 @@ ...@@ -9,11 +9,11 @@
background: transparent url('../images/bg-paperfibers.png') 0 0 repeat-both; background: transparent url('../images/bg-paperfibers.png') 0 0 repeat-both;
padding-bottom: ($baseline-v*3); padding-bottom: ($baseline-v*3);
@include media($bp-ds) { @include media($bp-medium) {
padding-bottom: $baseline-h; padding-bottom: $baseline-h;
} }
@include media($bp-m) { @include media($bp-small) {
padding-bottom: $baseline-h; padding-bottom: $baseline-h;
} }
} }
...@@ -21,11 +21,11 @@ ...@@ -21,11 +21,11 @@
.wrapper-content { .wrapper-content {
padding: $baseline-v ($baseline-h*2); padding: $baseline-v ($baseline-h*2);
@include media($bp-ds) { @include media($bp-medium) {
padding: $baseline-v $baseline-h; padding: $baseline-v $baseline-h;
} }
@include media($bp-m) { @include media($bp-small) {
padding: $baseline-v $baseline-h; padding: $baseline-v $baseline-h;
} }
} }
...@@ -49,31 +49,31 @@ ...@@ -49,31 +49,31 @@
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1rem; letter-spacing: 0.1rem;
@include media($bp-ds) { @include media($bp-medium) {
padding: ($baseline-v) ($baseline-h); padding: ($baseline-v) ($baseline-h);
} }
@include media($bp-m) { @include media($bp-small) {
padding: ($baseline-v) ($baseline-h); padding: ($baseline-v) ($baseline-h);
} }
.title { .title {
@extend %t-title-6; @extend %t-title-6;
@include media($bp-dl) { @include media($bp-xlarge) {
@include span-columns(9 of 12); @include span-columns(9 of 12);
} }
@include media($bp-dm) { @include media($bp-large) {
@include span-columns(9 of 12); @include span-columns(9 of 12);
} }
@include media($bp-ds) { @include media($bp-medium) {
@include font-size(14); // can't use %t-title-8 for some reason @include font-size(14); // can't use %t-title-8 for some reason
@include lh(14); @include lh(14);
} }
@include media($bp-m) { @include media($bp-small) {
@include font-size(14); // can't use %t-title-8 for some reason @include font-size(14); // can't use %t-title-8 for some reason
@include lh(14); @include lh(14);
} }
...@@ -83,15 +83,6 @@ ...@@ -83,15 +83,6 @@
// supplemental content // supplemental content
.content-supplemental { .content-supplemental {
@include media($bp-dm) {
}
@include media($bp-ds) {
}
@include media($bp-m) {
}
.title { .title {
@extend %t-title-7; @extend %t-title-7;
@extend %t-weight3; @extend %t-weight3;
...@@ -110,16 +101,12 @@ ...@@ -110,16 +101,12 @@
@extend %t-copy-sub1; @extend %t-copy-sub1;
@extend %btn-primary; @extend %btn-primary;
@include media($bp-dm) { @include media($bp-medium) {
}
@include media($bp-ds) {
display: block; display: block;
text-align: center; text-align: center;
} }
@include media($bp-m) { @include media($bp-small) {
display: block; display: block;
text-align: center; text-align: center;
} }
...@@ -131,16 +118,16 @@ ...@@ -131,16 +118,16 @@
@extend %trans-size; @extend %trans-size;
@include span-columns(3 of 12); @include span-columns(3 of 12);
@include media($bp-dm) { @include media($bp-large) {
@include span-columns(6 of 12); @include span-columns(6 of 12);
} }
@include media($bp-ds) { @include media($bp-medium) {
@include fill-parent; @include fill-parent;
margin-bottom: ($baseline-v*2); margin-bottom: ($baseline-v*2);
} }
@include media($bp-m) { @include media($bp-small) {
@include fill-parent; @include fill-parent;
margin-bottom: ($baseline-v*2); margin-bottom: ($baseline-v*2);
} }
...@@ -151,15 +138,15 @@ ...@@ -151,15 +138,15 @@
@include span-columns(3 of 12); @include span-columns(3 of 12);
@include omega(); @include omega();
@include media($bp-dm) { @include media($bp-large) {
@include span-columns(6 of 12); @include span-columns(6 of 12);
} }
@include media($bp-ds) { @include media($bp-medium) {
@include fill-parent; @include fill-parent;
} }
@include media($bp-m) { @include media($bp-small) {
@include fill-parent; @include fill-parent;
} }
} }
...@@ -168,17 +155,17 @@ ...@@ -168,17 +155,17 @@
@extend %trans-size; @extend %trans-size;
@include span-columns(6 of 12); @include span-columns(6 of 12);
@include media($bp-dm) { @include media($bp-large) {
@include fill-parent; @include fill-parent;
margin-bottom: ($baseline-v*2); margin-bottom: ($baseline-v*2);
} }
@include media($bp-ds) { @include media($bp-medium) {
@include fill-parent; @include fill-parent;
margin-bottom: ($baseline-v*2); margin-bottom: ($baseline-v*2);
} }
@include media($bp-m) { @include media($bp-small) {
@include fill-parent; @include fill-parent;
margin-bottom: ($baseline-v*2); margin-bottom: ($baseline-v*2);
} }
...@@ -208,11 +195,11 @@ ...@@ -208,11 +195,11 @@
background: $white-t url("../images/logo-idverified-cropped.png") bottom left no-repeat; background: $white-t url("../images/logo-idverified-cropped.png") bottom left no-repeat;
background-size: 75%; background-size: 75%;
@include media($bp-ds) { @include media($bp-medium) {
background-size: 75%; background-size: 75%;
} }
@include media($bp-m) { @include media($bp-small) {
background-size: 100%; background-size: 100%;
} }
} }
...@@ -227,18 +214,18 @@ ...@@ -227,18 +214,18 @@
background: $white-t; background: $white-t;
margin: -($baseline-v*4) auto 0 auto; margin: -($baseline-v*4) auto 0 auto;
@include media($bp-dm) { @include media($bp-large) {
float: right; float: right;
margin: 0 0 $baseline-h $baseline-h; margin: 0 0 $baseline-h $baseline-h;
} }
@include media($bp-ds) { @include media($bp-medium) {
width: 150px; width: 150px;
float: right; float: right;
margin: 0 0 $baseline-h $baseline-h; margin: 0 0 $baseline-h $baseline-h;
} }
@include media($bp-m) { @include media($bp-small) {
width: 100px; width: 100px;
float: right; float: right;
margin: 0; margin: 0;
......
lms/static/certificates/sass/views/_invalid.scss
...@@ -15,11 +15,11 @@ ...@@ -15,11 +15,11 @@
border: 1px solid $gray-l5; border: 1px solid $gray-l5;
background: $white-t; background: $white-t;
@include media($bp-ds) { @include media($bp-medium) {
padding: ($baseline-v) ($baseline-h); padding: ($baseline-v) ($baseline-h);
} }
@include media($bp-m) { @include media($bp-small) {
padding: ($baseline-v) ($baseline-h); padding: ($baseline-v) ($baseline-h);
} }
} }
...@@ -45,11 +45,11 @@ ...@@ -45,11 +45,11 @@
@include span-columns(6 of 12); @include span-columns(6 of 12);
margin-bottom: $baseline-v; margin-bottom: $baseline-v;
@include media($bp-ds) { @include media($bp-medium) {
@include fill-parent; @include fill-parent;
} }
@include media($bp-m) { @include media($bp-small) {
@include fill-parent; @include fill-parent;
} }
...@@ -68,11 +68,11 @@ ...@@ -68,11 +68,11 @@
@include span-columns(6 of 12); @include span-columns(6 of 12);
@include omega(); @include omega();
@include media($bp-ds) { @include media($bp-medium) {
@include fill-parent; @include fill-parent;
} }
@include media($bp-m) { @include media($bp-small) {
@include fill-parent; @include fill-parent;
} }
......
lms/static/certificates/sass/views/_valid.scss
...@@ -14,11 +14,11 @@ ...@@ -14,11 +14,11 @@
border: 1px solid $gray-l5; border: 1px solid $gray-l5;
background: $white-t; background: $white-t;
@include media($bp-ds) { @include media($bp-medium) {
padding: ($baseline-v) ($baseline-h); padding: ($baseline-v) ($baseline-h);
} }
@include media($bp-m) { @include media($bp-small) {
padding: ($baseline-v) ($baseline-h); padding: ($baseline-v) ($baseline-h);
} }
} }
...@@ -30,19 +30,19 @@ ...@@ -30,19 +30,19 @@
@include pad(0 $baseline-h 0 0); @include pad(0 $baseline-h 0 0);
border-right: 1px solid $gray-l5; border-right: 1px solid $gray-l5;
@include media($bp-dm) { @include media($bp-large) {
@include fill-parent; @include fill-parent;
@include pad(0); @include pad(0);
border-right: none; border-right: none;
} }
@include media($bp-ds) { @include media($bp-medium) {
@include fill-parent; @include fill-parent;
@include pad(0); @include pad(0);
border-right: none; border-right: none;
} }
@include media($bp-m) { @include media($bp-small) {
@include fill-parent; @include fill-parent;
@include pad(0); @include pad(0);
border-right: none; border-right: none;
...@@ -57,13 +57,13 @@ ...@@ -57,13 +57,13 @@
@extend %t-title-2; @extend %t-title-2;
@extend %t-weight3; @extend %t-weight3;
@include media($bp-ds) { @include media($bp-medium) {
@include font-size(36); // can't use %t-title-4 for some reason @include font-size(36); // can't use %t-title-4 for some reason
@include lh(36); @include lh(36);
margin: ($baseline-v/2) 0 ($baseline-v/4) 0; margin: ($baseline-v/2) 0 ($baseline-v/4) 0;
} }
@include media($bp-m) { @include media($bp-small) {
@include font-size(24); @include font-size(24);
@include lh(24); @include lh(24);
margin: ($baseline-v/2) 0 ($baseline-v/4) 0; margin: ($baseline-v/2) 0 ($baseline-v/4) 0;
...@@ -75,21 +75,21 @@ ...@@ -75,21 +75,21 @@
@extend %t-weight2; @extend %t-weight2;
margin-bottom: 0; margin-bottom: 0;
@include media($bp-ds) { @include media($bp-medium) {
margin: ($baseline-v/2) 0 0 0; margin: ($baseline-v/2) 0 0 0;
} }
@include media($bp-m) { @include media($bp-small) {
margin: ($baseline-v/2) 0 0 0; margin: ($baseline-v/2) 0 0 0;
} }
} }
.copy-course { .copy-course {
@include media($bp-ds) { @include media($bp-medium) {
margin-bottom: ($baseline-v/4); margin-bottom: ($baseline-v/4);
} }
@include media($bp-m) { @include media($bp-small) {
margin-bottom: ($baseline-v/4); margin-bottom: ($baseline-v/4);
} }
} }
...@@ -99,13 +99,13 @@ ...@@ -99,13 +99,13 @@
@extend %t-weight3; @extend %t-weight3;
@include lh(36); @include lh(36);
@include media($bp-ds) { @include media($bp-medium) {
@include font-size(36); // can't use %t-title-4 for some reason @include font-size(36); // can't use %t-title-4 for some reason
@include lh(36); @include lh(36);
margin: 0; margin: 0;
} }
@include media($bp-m) { @include media($bp-small) {
@include font-size(24); // can't use %t-title-4 for some reason @include font-size(24); // can't use %t-title-4 for some reason
@include lh(24); @include lh(24);
margin: 0; margin: 0;
...@@ -120,12 +120,12 @@ ...@@ -120,12 +120,12 @@
@extend %t-copy-lead2; @extend %t-copy-lead2;
color: $gray-l2; color: $gray-l2;
@include media($bp-ds) { @include media($bp-medium) {
@include font-size(16); // can't use %t-copy-base for some reason @include font-size(16); // can't use %t-copy-base for some reason
@include lh(16); @include lh(16);
} }
@include media($bp-m) { @include media($bp-small) {
@include font-size(16); // can't use %t-copy-base for some reason @include font-size(16); // can't use %t-copy-base for some reason
@include lh(16); @include lh(16);
} }
...@@ -137,18 +137,18 @@ ...@@ -137,18 +137,18 @@
@extend %trans-size; @extend %trans-size;
@include span-columns(4 of 12); @include span-columns(4 of 12);
@include media($bp-dm) { @include media($bp-large) {
@include fill-parent; @include fill-parent;
margin-top: ($baseline-v); margin-top: ($baseline-v);
padding-top: ($baseline-v*2); padding-top: ($baseline-v*2);
border-top: 1px solid $gray-l5; border-top: 1px solid $gray-l5;
} }
@include media($bp-ds) { @include media($bp-medium) {
@include fill-parent; @include fill-parent;
} }
@include media($bp-m) { @include media($bp-small) {
@include fill-parent; @include fill-parent;
} }
......
lms/static/certificates/sass/views/_validate.scss
...@@ -37,17 +37,17 @@ ...@@ -37,17 +37,17 @@
@include shift(2); @include shift(2);
margin-bottom: ($baseline-v*2); margin-bottom: ($baseline-v*2);
@include media($bp-dm) { @include media($bp-large) {
@include fill-parent(); @include fill-parent();
@include shift(0); @include shift(0);
} }
@include media($bp-ds) { @include media($bp-medium) {
@include fill-parent(); @include fill-parent();
@include shift(0); @include shift(0);
} }
@include media($bp-m) { @include media($bp-small) {
@include fill-parent(); @include fill-parent();
@include shift(0); @include shift(0);
} }
...@@ -59,17 +59,17 @@ ...@@ -59,17 +59,17 @@
@include shift(2); @include shift(2);
margin-bottom: ($baseline-v*2); margin-bottom: ($baseline-v*2);
@include media($bp-dm) { @include media($bp-large) {
@include fill-parent(); @include fill-parent();
@include shift(0); @include shift(0);
} }
@include media($bp-ds) { @include media($bp-medium) {
@include fill-parent(); @include fill-parent();
@include shift(0); @include shift(0);
} }
@include media($bp-m) { @include media($bp-small) {
@include fill-parent(); @include fill-parent();
@include shift(0); @include shift(0);
} }
...@@ -93,15 +93,15 @@ ...@@ -93,15 +93,15 @@
color: $gray-l1; color: $gray-l1;
background: $gray-l5; background: $gray-l5;
@include media($bp-dm) { @include media($bp-large) {
} }
@include media($bp-ds) { @include media($bp-medium) {
@include fill-parent(); @include fill-parent();
min-height: 0; min-height: 0;
} }
@include media($bp-m) { @include media($bp-small) {
@include fill-parent(); @include fill-parent();
min-height: 0; min-height: 0;
} }
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
.requirement-details { .requirement-details {
display: block; display: block;
@include media($bp-m) { @include media($bp-small) {
@include font-size(14); // can't use %t-copy-base for some reason @include font-size(14); // can't use %t-copy-base for some reason
@include lh(14); @include lh(14);
} }
...@@ -156,17 +156,17 @@ ...@@ -156,17 +156,17 @@
border: 1px solid $gray-l5; border: 1px solid $gray-l5;
background: $white-t; background: $white-t;
@include media($bp-dm) { @include media($bp-large) {
@include fill-parent(); @include fill-parent();
@include shift(0); @include shift(0);
} }
@include media($bp-ds) { @include media($bp-medium) {
@include fill-parent(); @include fill-parent();
@include shift(0); @include shift(0);
} }
@include media($bp-m) { @include media($bp-small) {
@include fill-parent(); @include fill-parent();
@include shift(0); @include shift(0);
} }
...@@ -194,7 +194,7 @@ ...@@ -194,7 +194,7 @@
border-bottom: 1px solid $gray-l5; border-bottom: 1px solid $gray-l5;
color: $gray-l1; color: $gray-l1;
@include media($bp-m) { @include media($bp-small) {
@include font-size(16); // can't use %t-copy-base for some reason @include font-size(16); // can't use %t-copy-base for some reason
@include lh(16); @include lh(16);
} }
...@@ -244,24 +244,24 @@ ...@@ -244,24 +244,24 @@
@include span-columns(8 of 12); @include span-columns(8 of 12);
@include shift(2); @include shift(2);
@include media($bp-dm) { @include media($bp-large) {
@include fill-parent(); @include fill-parent();
@include shift(0); @include shift(0);
} }
@include media($bp-ds) { @include media($bp-medium) {
@include fill-parent(); @include fill-parent();
@include shift(0); @include shift(0);
} }
@include media($bp-m) { @include media($bp-small) {
@include fill-parent(); @include fill-parent();
@include shift(0); @include shift(0);
} }
.copy { .copy {
@include media($bp-m) { @include media($bp-small) {
@include font-size(14); // can't use %t-copy-base for some reason @include font-size(14); // can't use %t-copy-base for some reason
@include lh(14); @include lh(14);
} }
...@@ -274,12 +274,12 @@ ...@@ -274,12 +274,12 @@
@extend %t-copy-sub1; @extend %t-copy-sub1;
@extend %btn-primary; @extend %btn-primary;
@include media($bp-ds) { @include media($bp-medium) {
display: block; display: block;
text-align: center; text-align: center;
} }
@include media($bp-m) { @include media($bp-small) {
display: block; display: block;
text-align: center; text-align: center;
} }
......
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