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