diff --git a/common/static/pattern-library/fonts b/common/static/pattern-library/fonts
new file mode 120000
index 0000000000..8da17c1b1f
--- /dev/null
+++ b/common/static/pattern-library/fonts
@@ -0,0 +1 @@
+../../../node_modules/edx-pattern-library/pattern-library/fonts
\ No newline at end of file
diff --git a/common/static/pattern-library/js b/common/static/pattern-library/js
new file mode 120000
index 0000000000..49d5a2e738
--- /dev/null
+++ b/common/static/pattern-library/js
@@ -0,0 +1 @@
+../../../node_modules/edx-pattern-library/pattern-library/js
\ No newline at end of file
diff --git a/lms/envs/common.py b/lms/envs/common.py
index 291099f246..38ea097a8f 100644
--- a/lms/envs/common.py
+++ b/lms/envs/common.py
@@ -1236,9 +1236,9 @@ main_vendor_js = base_vendor_js + [
'js/vendor/jquery-ui.min.js',
'js/vendor/jquery.qtip.min.js',
'js/vendor/jquery.ba-bbq.min.js',
- 'js/vendor/afontgarde/modernizr.fontface-generatedcontent.js',
- 'js/vendor/afontgarde/afontgarde.js',
- 'js/vendor/afontgarde/edx-icons.js'
+ 'pattern-library/js/modernizr.custom.js',
+ 'pattern-library/js/afontgarde.js',
+ 'pattern-library/js/edx-icons.js'
]
# Common files used by both RequireJS code and non-RequireJS code
diff --git a/lms/static/certificates/sass/_build.scss b/lms/static/certificates/sass/_build.scss
index 3f76048e8e..c97b1b0c37 100644
--- a/lms/static/certificates/sass/_build.scss
+++ b/lms/static/certificates/sass/_build.scss
@@ -3,51 +3,21 @@
// About: Sass compile for Open edX Certificates elements that are shared between LTR and RTL UI. Configuration and vendor specific imports happen before this shared set of imports are compiled in the main-*.scss files.
-// ------------------------------
-// #UTILITIES
-// ------------------------------
-@import '../../../../static/pattern-library/sass/utilities/functions';
-@import '../../../../static/pattern-library/sass/utilities/variables';
-@import '../../../../static/pattern-library/sass/utilities/mixins';
-@import '../../../../static/pattern-library/sass/utilities/helpers';
+// ------------------------------
+// #CONFIG + LIB
+// ------------------------------
+@import 'lib';
+@import 'config';
+@import '../../../../node_modules/edx-pattern-library/pattern-library/sass/edx-pattern-library';
+
+// ------------------------------
+// #EXTENSIONS
+// ------------------------------
@import 'utilities';
-
-// ------------------------------
-// #BASE
-// ------------------------------
-@import '../../../../static/pattern-library/sass/base/normalize';
-@import '../../../../static/pattern-library/sass/base/reset';
-@import '../../../../static/pattern-library/sass/base/typography';
-
@import 'base';
-
-// ------------------------------
-// #COMPONENTS
-// ------------------------------
-@import '../../../../static/pattern-library/sass/components/colors';
-@import '../../../../static/pattern-library/sass/components/buttons';
-@import '../../../../static/pattern-library/sass/components/headings';
-@import '../../../../static/pattern-library/sass/components/copy';
-
@import 'components';
-
-// ------------------------------
-// #LAYOUTS
-// ------------------------------
@import 'layouts';
-
-// ------------------------------
-// #VIEWS
-// ------------------------------
@import 'views';
-
-// ------------------------------
-// #CONTEXTS
-// ------------------------------
@import 'print';
-
-// ------------------------------
-// #SHAME
-// ------------------------------
@import 'overrides';
diff --git a/lms/static/certificates/sass/_components.scss b/lms/static/certificates/sass/_components.scss
index 4f92a6f77e..de80d4ce50 100644
--- a/lms/static/certificates/sass/_components.scss
+++ b/lms/static/certificates/sass/_components.scss
@@ -82,9 +82,6 @@
.header-app {
- .logo {
- @extend %reset-link;
- }
}
// ------------------------------
@@ -116,9 +113,15 @@
.message-actions .action {
+ // STATE: hover, active, focus
+ &:hover, &:active, &:focus {
+ // customizations from UXPL
+ color: palette(grayscale-cool, x-dark);
+ }
+
.icon {
@include margin-right(spacing-horizontal(x-small));
- font-size: font-size(mid-large);
+ font-size: font-size(large);
}
// CASE: icon display only
@@ -464,7 +467,7 @@
}
.accomplishment-main {
- background: transparentize($cert-base-color, 0.9);
+ background: transparentize(palette(grayscale-cool, dark), 0.9);
}
.accomplishment-rendering {
@@ -489,7 +492,7 @@
}
.accomplishment-main {
- background: transparentize($cert-distinguished-color, 0.9);
+ background: transparentize(palette(primary, accent), 0.9);
}
.accomplishment-rendering {
diff --git a/lms/static/certificates/sass/_config.scss b/lms/static/certificates/sass/_config.scss
new file mode 100644
index 0000000000..99bf24e3d9
--- /dev/null
+++ b/lms/static/certificates/sass/_config.scss
@@ -0,0 +1,37 @@
+// ------------------------------
+// Open edX Certificates: Config
+
+// About: variable and configuration overrides
+
+// #VARIABLES
+
+// ------------------------------
+// #VARIABLES
+// ------------------------------
+$pattern-library-path: '../../pattern-library' !default;
+
+// certificate characteristics
+$cert-base-color: palette(grayscale-cool, dark);
+$cert-distinguished-color: palette(primary, accent);
+
+$cert-decorative-color: palette(grayscale-cool, light);
+$cert-decorative-color-de-emphasized: palette(grayscale-cool, x-trans);
+$cert-decorative-color-emphasized: palette(grayscale-cool, mid-light);
+
+// typography: config
+@include font-face(
+ 'Domine',
+ '../../certificates/fonts/Domine/Domine-Regular-webfont',
+ 400,
+ $file-formats: woff woff2 ttf
+);
+
+@include font-face(
+ 'Domine',
+ '../../certificates/fonts/Domine/Domine-Bold-webfont',
+ 700,
+ $file-formats: woff woff2 ttf
+);
+
+// typography: config - stacks
+$font-family-serif: 'Domine', serif;
diff --git a/lms/static/certificates/sass/_layouts.scss b/lms/static/certificates/sass/_layouts.scss
index 9a2c66aaf3..4d6d8aac71 100644
--- a/lms/static/certificates/sass/_layouts.scss
+++ b/lms/static/certificates/sass/_layouts.scss
@@ -13,7 +13,7 @@
margin-bottom: spacing-vertical(base);
padding: 0 (gutter()*2);
- @include susy-breakpoint($bp-medium, $susy) {
+ @include susy-breakpoint($bp-screen-md, $susy) {
padding: 0 gutter();
}
}
@@ -68,7 +68,7 @@
.banner-user {
@include text-align(center);
- @include susy-breakpoint($bp-large, $susy) {
+ @include susy-breakpoint($bp-screen-lg, $susy) {
@include text-align(left);
}
@@ -91,7 +91,7 @@
// CASE: icon display only
&.icon-only {
- @include susy-breakpoint($bp-medium, $susy) {
+ @include susy-breakpoint($bp-screen-md, $susy) {
padding: spacing-vertical(x-small) spacing-horizontal(base);
.icon {
@@ -100,7 +100,7 @@
}
}
- @include susy-breakpoint($bp-medium, $susy) {
+ @include susy-breakpoint($bp-screen-md, $susy) {
display: inline-block;
vertical-align: middle;
width: auto;
@@ -126,7 +126,7 @@
.footer-app-copyright {
- @include susy-breakpoint($bp-medium, $susy) {
+ @include susy-breakpoint($bp-screen-md, $susy) {
@include span(6 first);
margin-bottom: 0;
}
@@ -134,7 +134,7 @@
.footer-app-nav {
- @include susy-breakpoint($bp-medium, $susy) {
+ @include susy-breakpoint($bp-screen-md, $susy) {
@include span(6 last);
}
@@ -144,7 +144,7 @@
display: block;
margin-bottom: spacing-vertical(x-small);
- @include susy-breakpoint($bp-medium, $susy) {
+ @include susy-breakpoint($bp-screen-md, $susy) {
display: inline-block;
vertical-align: middle;
@include margin-right(spacing-horizontal(base));
@@ -155,7 +155,7 @@
.list-legal {
- @include susy-breakpoint($bp-medium, $susy) {
+ @include susy-breakpoint($bp-screen-md, $susy) {
@include text-align(right);
}
}
@@ -189,7 +189,7 @@
.accomplishment-recipient {
width: span(12);
- @include susy-breakpoint($bp-large, $susy) {
+ @include susy-breakpoint($bp-screen-lg, $susy) {
width: span(10);
}
}
@@ -198,7 +198,7 @@
.accomplishment-statement-detail {
width: span(12);
- @include susy-breakpoint($bp-large, $susy) {
+ @include susy-breakpoint($bp-screen-lg, $susy) {
width: span(8);
}
}
@@ -222,15 +222,15 @@
@include margin-right(0);
}
- @include susy-breakpoint($bp-medium, $susy) {
+ @include susy-breakpoint($bp-screen-md, $susy) {
width: span(3);
}
- @include susy-breakpoint($bp-large, $susy) {
+ @include susy-breakpoint($bp-screen-lg, $susy) {
width: span(2);
}
- @include susy-breakpoint($bp-huge, $susy) {
+ @include susy-breakpoint($bp-screen-xl, $susy) {
width: span(2);
}
}
@@ -261,15 +261,15 @@
vertical-align: middle;
width: span(12);
- @include susy-breakpoint($bp-medium, $susy) {
+ @include susy-breakpoint($bp-screen-md, $susy) {
width: span(4);
}
- @include susy-breakpoint($bp-large, $susy) {
+ @include susy-breakpoint($bp-screen-lg, $susy) {
width: span(3);
}
- @include susy-breakpoint($bp-huge, $susy) {
+ @include susy-breakpoint($bp-screen-xl, $susy) {
width: span(3);
}
@@ -300,7 +300,7 @@
padding-bottom: 0;
}
- @include susy-breakpoint($bp-medium, $susy) {
+ @include susy-breakpoint($bp-screen-md, $susy) {
@include gallery(4);
border-bottom: none;
padding-bottom: 0;
@@ -318,7 +318,7 @@
.accomplishment-brief {
margin-bottom: spacing-vertical(small);
- @include susy-breakpoint($bp-medium, $susy) {
+ @include susy-breakpoint($bp-screen-md, $susy) {
@include gallery(6);
}
@@ -343,7 +343,7 @@
margin-bottom: 0;
}
- @include susy-breakpoint($bp-medium, $susy) {
+ @include susy-breakpoint($bp-screen-md, $susy) {
@include gallery(6);
margin-bottom: 0;
}
diff --git a/lms/static/certificates/sass/_lib.scss b/lms/static/certificates/sass/_lib.scss
new file mode 100644
index 0000000000..83b0a55882
--- /dev/null
+++ b/lms/static/certificates/sass/_lib.scss
@@ -0,0 +1,9 @@
+// ------------------------------
+// Open edX Certificates: Main Style Compile
+
+// About: third party libraries and dependencies import
+
+
+@import '../../../../node_modules/edx-pattern-library/node_modules/bourbon/app/assets/stylesheets/bourbon';
+@import '../../../../node_modules/edx-pattern-library/node_modules/susy/sass/susy';
+@import '../../../../node_modules/edx-pattern-library/node_modules/breakpoint-sass/stylesheets/breakpoint';
diff --git a/lms/static/certificates/sass/_ltr.scss b/lms/static/certificates/sass/_ltr.scss
new file mode 100644
index 0000000000..392f53d3dd
--- /dev/null
+++ b/lms/static/certificates/sass/_ltr.scss
@@ -0,0 +1,23 @@
+// ------------------------------
+// Open edX Certificates: Main Style Compile
+
+// About: Sass partial for defining settings and utilities for LTR-centric layouts.
+
+// #SETTINGS
+// #LIB
+
+
+// ----------------------------
+// #SETTINGS
+// ----------------------------
+$layout-direction: ltr;
+
+// currently needed since platform Sass won't obey https://github.com/edx/ux-pattern-library/blob/master/pattern-library/sass/patterns/_grid.scss#L23
+$grid-direction-default: ltr;
+$grid-direction-reversed: ltr;
+
+
+// ----------------------------
+// #LIB
+// ----------------------------
+@import '../../../../node_modules/edx-pattern-library/node_modules/bi-app-sass/bi-app/bi-app-ltr';
diff --git a/lms/static/certificates/sass/_print.scss b/lms/static/certificates/sass/_print.scss
index 73608ed305..5a1707a93f 100644
--- a/lms/static/certificates/sass/_print.scss
+++ b/lms/static/certificates/sass/_print.scss
@@ -134,8 +134,8 @@
}
.hd-3 {
- font-size: font-size(mid-large);
- line-height: line-height(mid-large);
+ font-size: font-size(large);
+ line-height: line-height(large);
}
.hd-4 {
@@ -144,18 +144,18 @@
}
.hd-5 {
- font-size: font-size(mid-small);
- line-height: line-height(mid-small);
- }
-
- .hd-6 {
font-size: font-size(small);
line-height: line-height(small);
}
- .hd-7 {
+ .hd-6 {
font-size: font-size(x-small);
- line-height: line-height(small);
+ line-height: line-height(x-small);
+ }
+
+ .hd-7 {
+ font-size: font-size(xx-small);
+ line-height: line-height(x-small);
}
// copy
diff --git a/lms/static/certificates/sass/_rtl.scss b/lms/static/certificates/sass/_rtl.scss
new file mode 100644
index 0000000000..ba219f69f8
--- /dev/null
+++ b/lms/static/certificates/sass/_rtl.scss
@@ -0,0 +1,23 @@
+// ------------------------------
+// Open edX Certificates: Main Style Compile
+
+// About: Sass partial for defining settings and utilities for LTR-centric layouts.
+
+// #SETTINGS
+// #LIB
+
+
+// ----------------------------
+// #SETTINGS
+// ----------------------------
+$layout-direction: rtl;
+
+// currently needed since platform Sass won't obey https://github.com/edx/ux-pattern-library/blob/master/pattern-library/sass/patterns/_grid.scss#L23
+$grid-direction-default: rtl;
+$grid-direction-reversed: ltr;
+
+
+// ----------------------------
+// #LIB
+// ----------------------------
+@import '../../../../node_modules/edx-pattern-library/node_modules/bi-app-sass/bi-app/bi-app-rtl';
diff --git a/lms/static/certificates/sass/_utilities.scss b/lms/static/certificates/sass/_utilities.scss
index c2a9afdc4a..ae695cf4f4 100644
--- a/lms/static/certificates/sass/_utilities.scss
+++ b/lms/static/certificates/sass/_utilities.scss
@@ -1,44 +1,12 @@
// ------------------------------
-// // Open edX Certificates: Utilities
+// Open edX Certificates: Utilities
// About: configuration, functions, variables, mixins, and general helpers for rendering.
-// #VARIABLES
// #FUNCTIONS
// #MIXINS
// #HELPERS
-// ------------------------------
-// #VARIABLES
-// ------------------------------
-$em-base: 16; // deliberately sets bourbon-based em-base (http://bourbon.io/docs/#em-base)
-
-// certificate characteristics
-$cert-base-color: palette(grayscale-cool, dark);
-$cert-distinguished-color: palette(primary, accent);
-
-$cert-decorative-color: palette(grayscale-cool, light);
-$cert-decorative-color-de-emphasized: palette(grayscale-cool, x-trans);
-$cert-decorative-color-emphasized: palette(grayscale-cool, mid-light);
-
-// typography: config
-@include font-face(
- 'Domine',
- '../../certificates/fonts/Domine/Domine-Regular-webfont',
- 400,
- $file-formats: woff woff2 ttf
-);
-
-@include font-face(
- 'Domine',
- '../../certificates/fonts/Domine/Domine-Bold-webfont',
- 700,
- $file-formats: woff woff2 ttf
-);
-
-// typography: config - stacks
-$font-family-serif: 'Domine', serif;
-
// ------------------------------
// #FUNCTIONS
// ------------------------------
@@ -50,16 +18,6 @@ $font-family-serif: 'Domine', serif;
// ------------------------------
// #HELPERS
// ------------------------------
-// don't link style me, bro!
-%reset-link {
- border-bottom: none;
- padding: 0;
-
- &:hover, &:focus, &:active {
- border-bottom: 0;
- }
-}
-
// visual dividers
%divider-1 {
border-bottom-width: rem(4);
diff --git a/lms/static/certificates/sass/_views.scss b/lms/static/certificates/sass/_views.scss
index e4766a53a9..b8fa91dabd 100644
--- a/lms/static/certificates/sass/_views.scss
+++ b/lms/static/certificates/sass/_views.scss
@@ -7,6 +7,7 @@
// #BASE CERT
// ------------------------------
+
// ------------------------------
// #DISTINCTION CERT
// ------------------------------
@@ -15,7 +16,6 @@
// ------------------------------
// #INVALID
// ------------------------------
-
.wrapper-content.status-invalid {
@extend %layout-wrapper;
@@ -26,14 +26,14 @@
.content-main {
margin-bottom: spacing-vertical(base);
- @include susy-breakpoint($bp-medium, $susy) {
+ @include susy-breakpoint($bp-screen-md, $susy) {
@include span(9 of 12 first);
}
}
.content-secondary {
- @include susy-breakpoint($bp-medium, $susy) {
+ @include susy-breakpoint($bp-screen-md, $susy) {
@include span(3 of 12 last);
}
}
diff --git a/lms/static/certificates/sass/main-ltr.scss b/lms/static/certificates/sass/main-ltr.scss
index 5c5ee41fe8..db0e51c41e 100644
--- a/lms/static/certificates/sass/main-ltr.scss
+++ b/lms/static/certificates/sass/main-ltr.scss
@@ -5,20 +5,14 @@
// NOTE: This is the left to right (LTR) configured style compile. It should mirror main-rtl w/ the exception of bi-app references.
-// ------------------------------
-// #VENDOR
-// ------------------------------
-@import '../../../../static/vendor/bourbon/bourbon';
-@import '../../../../static/vendor/susy/susy';
-@import '../../../../static/vendor/breakpoint/breakpoint';
-@import '../../../../static/vendor/bi-app/bi-app-ltr'; // LTR support
// ------------------------------
-// #UTILITIES
+// #CONFIG - layout direction
// ------------------------------
-@import '../../../../static/pattern-library/sass/utilities/variables-ltr';
+@import 'ltr'; // LTR-specifc settings and utilities
+
// ------------------------------
// #BUILD
// ------------------------------
-@import 'build'; // shared compile/build order for both LTR and RTL UI
+@import 'build'; // shared compile/build order for both LTR and RTL UI
diff --git a/lms/static/certificates/sass/main-rtl.scss b/lms/static/certificates/sass/main-rtl.scss
index 99168d87ef..54a6ec443c 100644
--- a/lms/static/certificates/sass/main-rtl.scss
+++ b/lms/static/certificates/sass/main-rtl.scss
@@ -5,20 +5,14 @@
// NOTE: This is the right to left (RTL) configured style compile. It should mirror main-ltr w/ the exception of bi-app references.
-// ------------------------------
-// #VENDOR
-// ------------------------------
-@import '../../../../static/vendor/bourbon/bourbon';
-@import '../../../../static/vendor/susy/susy';
-@import '../../../../static/vendor/breakpoint/breakpoint';
-@import '../../../../static/vendor/bi-app/bi-app-rtl'; // RTL support
// ------------------------------
-// #UTILITIES
+// #CONFIG - layout direction
// ------------------------------
-@import '../../../../static/pattern-library/sass/utilities/variables-rtl';
+@import 'rtl'; // RTL-specifc settings and utilities
+
// ------------------------------
// #BUILD
// ------------------------------
-@import 'build'; // shared compile/build order for both LTR and RTL UI
+@import 'build'; // shared compile/build order for both LTR and RTL UI
diff --git a/lms/templates/certificates/_accomplishment-banner.html b/lms/templates/certificates/_accomplishment-banner.html
index e674f8a153..2ca86733c3 100644
--- a/lms/templates/certificates/_accomplishment-banner.html
+++ b/lms/templates/certificates/_accomplishment-banner.html
@@ -46,7 +46,7 @@ from django.template.defaultfilters import escapejs
${_("Print or share your certificate:")}
% if facebook_share_enabled:
-