Merge pull request #11268 from edx/andya/add-pattern-library

Add edX Pattern Library to edx-platform

common/static/pattern-library/fonts

+../../../node_modules/edx-pattern-library/pattern-library/fonts
\ No newline at end of file

common/static/pattern-library/js

+../../../node_modules/edx-pattern-library/pattern-library/js
\ No newline at end of file

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

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';
-
-@import 'utilities';
 
 // ------------------------------
-// #BASE
+// #CONFIG + LIB
 // ------------------------------
-@import '../../../../static/pattern-library/sass/base/normalize';
-@import '../../../../static/pattern-library/sass/base/reset';
-@import '../../../../static/pattern-library/sass/base/typography';
-
-@import 'base';
+@import 'lib';
+@import 'config';
+@import '../../../../node_modules/edx-pattern-library/pattern-library/sass/edx-pattern-library';
 
 // ------------------------------
-// #COMPONENTS
+// #EXTENSIONS
 // ------------------------------
-@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 'utilities';
+@import 'base';
 @import 'components';
-
-// ------------------------------
-// #LAYOUTS
-// ------------------------------
 @import 'layouts';
-
-// ------------------------------
-// #VIEWS
-// ------------------------------
 @import 'views';
-
-// ------------------------------
-// #CONTEXTS
-// ------------------------------
 @import 'print';
-
-// ------------------------------
-// #SHAME
-// ------------------------------
 @import 'overrides';

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 {

lms/static/certificates/sass/_config.scss

+// ------------------------------
+// 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;

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;
             }

lms/static/certificates/sass/_lib.scss

+// ------------------------------
+// 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';

lms/static/certificates/sass/_ltr.scss

+// ------------------------------
+// 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';

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);
+        font-size: font-size(small);
+        line-height: line-height(small);
     }
 
     .hd-6 {
-        font-size: font-size(small);
-        line-height: line-height(small);
+        font-size: font-size(x-small);
+        line-height: line-height(x-small);
     }
 
     .hd-7 {
-        font-size: font-size(x-small);
-        line-height: line-height(small);
+        font-size: font-size(xx-small);
+        line-height: line-height(x-small);
     }
 
     // copy

lms/static/certificates/sass/_rtl.scss

+// ------------------------------
+// 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';

lms/static/certificates/sass/_utilities.scss

 // ------------------------------
-// // 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);

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);
     }
   }

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

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

lms/templates/certificates/_accomplishment-banner.html

@@ -46,7 +46,7 @@ from django.template.defaultfilters import escapejs
                 <div class="message-actions">
                     <h3 class="sr-only">${_("Print or share your certificate:")}</h3>
                     % if facebook_share_enabled:
-                      <button class="action action-share-facebook btn btn-overlay btn-small icon-only" id="action-share-facebook"
+                      <button class="action action-share-facebook btn-inverse btn-small icon-only" id="action-share-facebook"
                          onclick="FaceBook.share({
                           share_text: '${facebook_share_text | escapejs}',
                           share_link: '${share_url}',
@@ -59,7 +59,7 @@ from django.template.defaultfilters import escapejs
                     %endif
                     % if twitter_share_enabled:
                       <button data-tooltip="${_('Share on Twitter')}"
-                        class="action action-share-twitter btn btn-overlay btn-small icon-only"
+                        class="action action-share-twitter btn-inverse btn-small icon-only"
                         title="${_('Share on Twitter')}"
                         onclick="popupWindow('${twitter_url}', 'tweetWindow', 640, 480); return false;">
                           <i class="icon fa fa-twitter" aria-hidden="true"></i>
@@ -68,7 +68,7 @@ from django.template.defaultfilters import escapejs
                     %endif
 
                     %if linked_in_url:
-                    <button class="action action-linkedin-profile btn btn-overlay btn-small icon-only" id="action-share-linkedin" title="${_('Add to LinkedIn Profile')}" data-course-id="${course_id}" data-certificate-mode="${course_mode}">
+                    <button class="action action-linkedin-profile btn-inverse btn-small icon-only" id="action-share-linkedin" title="${_('Add to LinkedIn Profile')}" data-course-id="${course_id}" data-certificate-mode="${course_mode}">
                         <i class="icon fa fa-linkedin" aria-hidden="true"></i>
                         <span class="action-label">${_("Add to LinkedIn Profile")}</span>
                     </button>
@@ -81,7 +81,7 @@ from django.template.defaultfilters import escapejs
                     </button>
                     %endif
 
-                    <button class="action action-print btn btn-overlay btn-small" id="action-print-view">
+                    <button class="action action-print btn-inverse btn-small" id="action-print-view">
                         <i class="icon fa fa-print" aria-hidden="true"></i>
                         ${_("Print Certificate")}
                     </button>

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "dependencies": {
     "coffee-script": "1.6.1",
+    "edx-pattern-library": "0.10.4",
     "uglify-js": "2.4.24"
   },
   "devDependencies": {

static/pattern-library/sass/_build.scss

-// ------------------------------
-// edX Patern Library Elements: Shared Build Compile
-
-// About: Sass compile for the edX Patern Library 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 'utilities/functions';
-@import 'utilities/variables';
-@import 'utilities/mixins';
-@import 'utilities/helpers';
-
-// ------------------------------
-// #BASE
-// ------------------------------
-@import 'base/normalize';
-@import 'base/reset';
-@import 'base/typography';
-
-// ------------------------------
-// #COMPONENTS
-// ------------------------------
-@import 'components/headings';
-@import 'components/copy';
-@import 'components/colors';
-@import 'components/buttons';
-
-// ------------------------------
-// #LAYOUTS
-// ------------------------------
-// TBD
-
-// ------------------------------
-// #VIEWS
-// ------------------------------
-// TBD
-
-// ------------------------------
-// #SHAME
-// ------------------------------
-// TBD

static/pattern-library/sass/base/_normalize.scss

-/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
-
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- *    user zoom.
- */
-
-html {
-  font-family: sans-serif; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/**
- * Remove default margin.
- */
-
-body {
-  margin: 0;
-}
-
-/* HTML5 display definitions
-   ========================================================================== */
-
-/**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11
- * and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-
-/**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
-
-audio,
-canvas,
-progress,
-video {
-  display: inline-block; /* 1 */
-  vertical-align: baseline; /* 2 */
-}
-
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
- */
-
-[hidden],
-template {
-  display: none;
-}
-
-/* Links
-   ========================================================================== */
-
-/**
- * Remove the gray background color from active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * Improve readability when focused and also mouse hovered in all browsers.
- */
-
-a:active,
-a:hover {
-  outline: 0;
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
-
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-
-/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
-
-b,
-strong {
-  font-weight: bold;
-}
-
-/**
- * Address styling not present in Safari and Chrome.
- */
-
-dfn {
-  font-style: italic;
-}
-
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari, and Chrome.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/**
- * Address styling not present in IE 8/9.
- */
-
-mark {
-  background: #ff0;
-  color: #000;
-}
-
-/**
- * Address inconsistent and variable font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sup {
-  top: -0.5em;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove border when inside `a` element in IE 8/9/10.
- */
-
-img {
-  border: 0;
-}
-
-/**
- * Correct overflow not hidden in IE 9/10/11.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * Address margin not present in IE 8/9 and Safari.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * Address differences between Firefox and other browsers.
- */
-
-hr {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  height: 0;
-}
-
-/**
- * Contain overflow in all browsers.
- */
-
-pre {
-  overflow: auto;
-}
-
-/**
- * Address odd `em`-unit font size rendering in all browsers.
- */
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-
-/**
- * 1. Correct color not being inherited.
- *    Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit; /* 1 */
-  font: inherit; /* 2 */
-  margin: 0; /* 3 */
-}
-
-/**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
- */
-
-button {
-  overflow: visible;
-}
-
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
- */
-
-button,
-select {
-  text-transform: none;
-}
-
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- *    `input` and others.
- */
-
-button,
-html input[type="button"], /* 1 */
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-  cursor: pointer; /* 3 */
-}
-
-/**
- * Re-set default cursor for disabled elements.
- */
-
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-
-/**
- * Remove inner padding and border in Firefox 4+.
- */
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-
-input {
-  line-height: normal;
-}
-
-/**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
- *    (include `-moz` to future-proof).
- */
-
-input[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box; /* 2 */
-  box-sizing: content-box;
-}
-
-/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * Define consistent border, margin, and padding.
- */
-
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-/**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-
-legend {
-  border: 0; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Remove default vertical scrollbar in IE 8/9/10/11.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
-/* Tables
-   ========================================================================== */
-
-/**
- * Remove most spacing between table cells.
- */
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td,
-th {
-  padding: 0;
-}

static/pattern-library/sass/base/_reset.scss

-// ------------------------------
-// edX Pattern Library: Reset
-
-// About: Sass partial for resetting and setting base elements.
-
-// #GLOBAL:     Global overrides and resets
-// #BASE:       Base overrides and resets
-// #FORMS:      Form-focused overrides and resets
-// #ACTIONS:    links, buttons, controls overrides and resets
-// #MEDIA:      images, video, mutlmedia overrides and resets
-// #UTILITIES:  layout and use case utilities
-
-
-// ----------------------------
-// #GLOBAL
-// ----------------------------
-* {
-    box-sizing: border-box;
-}
-
-// ----------------------------
-// #BASE
-// ----------------------------
-html, body {
-
-}
-
-audio,
-canvas,
-iframe,
-img,
-svg,
-video {
-    vertical-align: middle;
-}
-
-body {
-    @include font-smoothing(on);
-    color: $text-base-color;
-    background: $view-bg;
-    font-size: font-size(base);
-    font-family: $font-family-sans-serif;
-}
-
-p,
-ol,
-ul,
-dl {
-    margin: 0 0 spacing-vertical(small) 0;
-}
-
-// ----------------------------
-// #FORMS
-// ----------------------------
-fieldset {
-    margin: 0;
-    border: 0;
-    padding: 0;
-}
-
-textarea {
-    resize: vertical;
-}
-
-// ----------------------------
-// #ACTIONS
-// ----------------------------
-a,
-.link {
-    @extend %link;
-}
-
-// ----------------------------
-// #MEDIA
-// ----------------------------
-figure {
-    display: inline-block;
-    margin: 0;
-    padding: 0;
-
-    img {
-        display: block;
-    }
-
-    figcaption {
-
-    }
-}
-
-// images
-.img,
-picture {
-    max-width: 100%;
-    margin: 0;
-}
-
-pre {
-    font-family: $font-family-monospace;
-    margin: 0;
-}
-
-// ----------------------------
-// #UTILITIES
-// ----------------------------
-.sr-only {
-    @extend %a11y-hide;
-}
-
-.bg-replace {
-    @extend %a11y-hide-image-text;
-}
-
-[class^='wrapper'] {
-    @extend %wrapper;
-}

static/pattern-library/sass/base/_typography.scss

-// ------------------------------
-// edX Pattern Library: Typography
-
-// About: Sass partial for basic typography rules and settings
-
-// #HEADINGS
-// #COPY
-// #METADATA
-
-
-// ----------------------------
-// #HEADINGS
-// ----------------------------
-h1, h2, h3, h4, h5, h6 {
-    @extend %reset-headings;
-}
-
-h1 {
-    font-size: font-size(xx-large);
-}
-
-h2 {
-    font-size: font-size(x-large);
-}
-
-h3 {
-    font-size: font-size(large);
-}
-
-h4 {
-    font-size: font-size(mid-large);
-}
-
-h5 {
-    font-size: font-size(base);
-}
-
-h6 {
-   font-size: font-size(small);
-}
-
-
-// ----------------------------
-// #COPY
-// ----------------------------
-.copy,
-p, ol, ul, dl, td, th {
-    @extend %reset-copy;
-}
-
-// ----------------------------
-// #METADATA
-// ----------------------------

static/pattern-library/sass/components/_buttons.scss

-// ------------------------------
-// edX Pattern Library: Components - Buttons
-
-// About: Contains base styling for demonstration and utility for buttons.
-// ----------------------------
-
-// #LAYOUT
-// #GLOBALS
-// #BASE (size)
-// #LARGE (size)
-// #SMALL (size)
-// #DEFAULT (style)
-// #PRIMARY (style)
-// #SECONDARY (style)
-// #LINK (style)
-// #ELEVATED (type)
-// #ELEVATED-ALT (type)
-// #COMBO (type)
-// #ICONS (type)
-// #OVERLAY (type)
-// ----------------------------
-
-// ----------------------------
-// #GLOBALS
-// ----------------------------
-.btn {
-    @include transition(
-        color timing(xx-fast) ease-in-out 0s,
-        border-color timing(xx-fast) ease-in-out 0s,
-        background timing(xx-fast) ease-in-out 0s,
-        box-shadow timing(xx-fast) ease-in-out 0s
-    );
-
-    // Display: inline, side-by-side
-    display: inline-block;
-    border-style: $buttons-border-style;
-    border-radius: $buttons-border-radius;
-    border-width: $buttons-border-size;
-    font-weight: $buttons-font-weight;
-
-    // Display: block, one button per line, full width
-    &.block {
-        display: block;
-        width: 100%;
-    }
-
-    // STATE: is disabled
-    &:disabled,
-    &.is-disabled {
-        @extend %state-disabled;
-    }
-}
-
-// ----------------------------
-// #BASE
-// ----------------------------
-.btn-base {
-    padding: spacing-vertical(x-small) spacing-horizontal(base);
-    font-size: font-size(base);
-}
-
-
-// ----------------------------
-// #LARGE
-// ----------------------------
-.btn-large {
-    padding: spacing-vertical(small) spacing-horizontal(mid-large);
-    font-size: font-size(mid-large);
-}
-
-
-// ----------------------------
-// #SMALL
-// ----------------------------
-.btn-small {
-    padding: spacing-vertical(x-small) spacing-horizontal(small);
-    font-size: font-size(small);
-}
-
-
-// ----------------------------
-// #DEFAULT
-// ----------------------------
-.btn-default {
-    border-color: palette(primary, base);
-    // background: palette(grayscale, white);
-    color: palette(primary, base);
-
-    // STATE: hover and focus
-    &:hover,
-    &.is-hovered,
-    &:focus,
-    &.is-focused {
-        background: palette(primary, base);
-        color: palette(grayscale, white);
-    }
-
-    // STATE: is pressed or active
-    &:active,
-    &.is-pressed,
-    &.is-active {
-        border-color: palette(primary, dark);
-        background: palette(primary, dark);
-    }
-
-    // STATE: is disabled
-    &:disabled,
-    &.is-disabled {
-        border-color: palette(grayscale, light);
-        background: palette(grayscale, white);
-        color: palette(grayscale, base);
-    }
-}
-
-// ----------------------------
-// #PRIMARY
-// ----------------------------
-.btn-primary {
-    border-color: palette(primary, base);
-    background: palette(primary, base);
-    color: palette(grayscale, white);
-
-    // STATE: hover and focus
-    &:hover,
-    &.is-hovered,
-    &:focus,
-    &.is-focused {
-        border-color: palette(primary, accent);
-        background: palette(primary, accent);
-    }
-
-    // STATE: is pressed or active
-    &:active,
-    &.is-pressed,
-    &.is-active {
-        border-color: palette(primary, base);
-        background: palette(primary, base);
-    }
-
-    // STATE: is disabled
-    &:disabled,
-    &.is-disabled {
-        border-color: palette(grayscale, light);
-        background: palette(grayscale, light);
-        color: palette(grayscale, base);
-    }
-}
-
-
-// ----------------------------
-// #SECONDARY
-// ----------------------------
-.btn-secondary {
-    border-color: $transparent;
-    background: $transparent;
-    color: palette(primary, base);
-
-    // STATE: hover and focus
-    &:hover,
-    &.is-hovered,
-    &:focus,
-    &.is-focused {
-        border-color: palette(grayscale-cool, light);
-    }
-
-    // STATE: is pressed or active
-    &:active,
-    &.is-pressed,
-    &.is-active {
-        border-color: palette(primary, base);
-        color: palette(primary, base);
-    }
-
-    // STATE: is disabled
-    &:disabled,
-    &.is-disabled {
-        border-color: palette(grayscale, light);
-        color: palette(grayscale, light);
-    }
-}
-
-
-// ----------------------------
-// #LINK
-// ----------------------------
-.btn-link {
-    @extend %link;
-
-    // reset of inherited buttons
-    border-radius: 0;
-    border-color: $transparent;
-    padding: 1px;
-    background: $transparent;
-}
-
-
-// ----------------------------
-// #ELEVATED
-// ----------------------------
-.btn-elevated {
-    border-color: palette(primary, base);
-    box-shadow: inset 0 0 -$buttons-elevated-shadow 0 0 palette(primary, dark);
-    background: palette(primary, base);
-    color: palette(grayscale, white);
-
-    // STATE: hover and focus
-    &:hover,
-    &.is-hovered,
-    &:focus,
-    &.is-focused {
-        box-shadow: inset 0 0 -$buttons-elevated-shadow 0 0 palette(primary, dark);
-        background: palette(primary, accent);
-    }
-
-    // STATE: is pressed or active
-    &:active,
-    &.is-pressed,
-    &.is-active {
-        box-shadow: inset 0 $buttons-elevated-shadow 0 0 palette(primary, x-dark);
-        background: palette(primary, dark);
-    }
-
-    // STATE: is disabled
-    &:disabled,
-    &.is-disabled {
-        border-color: palette(grayscale, x-light);
-        box-shadow: inset 0 -1px 0 palette(grayscale, light);
-        background: palette(grayscale, x-light);
-        color: palette(grayscale, base);
-    }
-}
-
-
-// ----------------------------
-// #ELEVATED-ALT
-// ----------------------------
-.btn-elevated-alt {
-    box-shadow: inset 0 0 -$buttons-elevated-shadow 0 0 palette(grayscale-cool, light);
-    border-color: palette(grayscale-cool, light);
-    background: $transparent;
-    color: palette(primary, base);
-
-    // STATE: hover and focus
-    &:hover,
-    &.is-hovered,
-    &:focus,
-    &.is-focused {
-        border-color: palette(primary, base);
-        box-shadow: inset 0 0 -$buttons-elevated-shadow 0 0 palette(primary, base);
-        color: palette(grayscale, white);
-        background: palette(primary, accent);
-    }
-
-    // STATE: is pressed or active
-    &:active,
-    &.is-pressed,
-    &.is-active {
-        box-shadow: inset 0 $buttons-elevated-shadow 0 0 palette(primary, x-dark);
-        background: palette(primary, dark);
-    }
-
-    // STATE: is disabled
-    &:disabled,
-    &.is-disabled {
-        border-color: palette(grayscale, x-light);
-        box-shadow: inset 0 -1px 0 palette(grayscale, light);
-        background: palette(grayscale, x-light);
-        color: palette(grayscale, base);
-    }
-}
-
-
-// ----------------------------
-// #COMBO
-// ----------------------------
-.btn-combo {
-    border-radius: 0;
-
-    // targets the first element in a parent container
-    &:first-of-type {
-        @include border-top-left-radius($buttons-border-radius);
-        @include border-bottom-left-radius($buttons-border-radius);
-    }
-
-    // targets the last element in a parent container
-    &:last-of-type {
-        @include border-top-right-radius($buttons-border-radius);
-        @include border-bottom-right-radius($buttons-border-radius);
-    }
-}
-
-
-// ----------------------------
-// #ICONS
-// ----------------------------
-.has-icon {
-
-}
-
-.has-icon-reverse {
-
-}
-
-
-// ----------------------------
-// #OVERLAY
-// ----------------------------
-.btn-overlay {
-    border-color: palette(grayscale, white);
-    background: $transparent;
-    color: palette(grayscale, white);
-    font-weight: font-weight(semi-bold);
-
-    // STATE: hover and focus
-    &:hover,
-    &.is-hovered,
-    &:focus,
-    &.is-focused {
-        background: palette(grayscale, white);
-        color: palette(primary, base);
-    }
-
-    // STATE: is pressed or active
-    &:active,
-    &.is-pressed,
-    &.is-active {
-        color: palette(primary, dark);
-    }
-
-    // STATE: is disabled
-    &:disabled,
-    &.is-disabled {
-        border-color: palette(grayscale, trans);
-        color: palette(grayscale, x-light);
-
-        &:hover {
-            border-color: palette(grayscale, trans);
-            background: $transparent;
-            color: palette(grayscale, x-light);
-        }
-    }
-}

static/pattern-library/sass/components/_colors.scss

-// ------------------------------
-// edX Pattern Library: Components - Colors
-
-// About: Contains base styling for demonstration and utility color palette stylng.
-// ----------------------------
-
-// #SWATCH LAYOUT
-// #SWATCH RENDERING
-// ----------------------------
-
-// ----------------------------
-// #SWATCH LAYOUT
-// ----------------------------
-.example {
-    @include transition(all timing(x-fast) ease-in-out);
-    border: 1px solid palette(grayscale, x-light);
-    border-radius: spacing-horizontal(xx-small);
-    margin-bottom: spacing-vertical(mid-small);
-    padding: spacing-vertical(x-small) spacing-horizontal(small);
-    box-shadow: 0 rem(2) rem(2) 0 palette(grayscale, xx-trans);
-    background: palette(grayscale, white);
-    color: palette(grayscale, white);
-
-    // STATE: hover, focus, and active
-    &:hover, &:focus, &:active {
-        @include transform(scale(1.05));
-        box-shadow: 0 rem(2) rem(2) 0 palette(grayscale, x-trans);
-    }
-}
-
-.swatch-color {
-    display: block;
-    margin-bottom: spacing-vertical(x-small);
-    padding: spacing-vertical(mid-large) spacing-horizontal(mid-small);
-    @include text-align(center);
-
-    .color-class {
-        font-size: font-size(small);
-        text-transform: lowercase;
-
-        // CASE: light text on dark bg
-        &.lod {
-            color: palette(grayscale, white);
-        }
-
-        // CASE: dark text on light bg
-        &.dol {
-            color: palette(grayscale, black);
-        }
-    }
-
-    // CASE: base color
-    &.base {
-
-        .color-class {
-            font-weight: font-weight(bold);
-        }
-    }
-}
-
-.swatch-meta {
-    padding: spacing-vertical(xx-small) spacing-horizontal(small);
-    white-space: nowrap;
-    font-size: font-size(small);
-    @include text-align(center);
-    color: palette(grayscale, dark);
-
-    .color-rgb {
-        @include ellipsis();
-    }
-}
-
-// ----------------------------
-// #SWATCH RENDERING
-// ----------------------------
-.brand-primary {
-
-    &.base {
-        background: palette(primary, base);
-    }
-
-    &.light {
-        background: palette(primary, light);
-    }
-
-    &.x-light {
-        background: palette(primary, x-light);
-    }
-
-    &.dark {
-        background: palette(primary, dark);
-    }
-
-    &.x-dark {
-        background: palette(primary, x-dark);
-    }
-
-    &.accent {
-        background: palette(primary, accent);
-    }
-
-    &.x-accent {
-        background: palette(primary, x-accent);
-    }
-}
-
-.brand-secondary {
-    background: palette(secondary, base);
-
-    &.base {
-        background: palette(secondary, base);
-    }
-
-    &.light {
-        background: palette(secondary, light);
-    }
-
-    &.x-light {
-        background: palette(secondary, x-light);
-    }
-
-    &.dark {
-        background: palette(secondary, dark);
-    }
-
-    &.x-dark {
-        background: palette(secondary, x-dark);
-    }
-
-    &.accent {
-        background: palette(secondary, accent);
-    }
-}
-
-.grayscale {
-    background: palette(grayscale, base);
-
-    &.base {
-        background: palette(grayscale, base);
-    }
-
-    &.light {
-        background: palette(grayscale, light);
-    }
-
-    &.x-light {
-        background: palette(grayscale, x-light);
-    }
-
-    &.white {
-        background: palette(grayscale, white);
-    }
-
-    &.white-t {
-        background: palette(grayscale, white-t);
-    }
-
-    &.dark {
-        background: palette(grayscale, dark);
-    }
-
-    &.x-dark {
-        background: palette(grayscale, x-dark);
-    }
-
-    &.black {
-        background: palette(grayscale, black);
-    }
-
-    &.black-t {
-        background: palette(grayscale, black-t);
-    }
-
-    &.trans {
-        background: palette(grayscale, trans);
-    }
-
-    &.x-trans {
-        background: palette(grayscale, x-trans);
-    }
-
-    &.xx-trans {
-        background: palette(grayscale, xx-trans);
-    }
-}
-
-.grayscale-cool {
-    background: palette(grayscale-cool, base);
-
-    &.base {
-        background: palette(grayscale-cool, base);
-    }
-
-    &.light {
-        background: palette(grayscale-cool, light);
-    }
-
-    &.x-light {
-        background: palette(grayscale-cool, x-light);
-    }
-
-    &.dark {
-        background: palette(grayscale-cool, dark);
-    }
-
-    &.x-dark {
-        background: palette(grayscale-cool, x-dark);
-    }
-
-    &.trans {
-        background: palette(grayscale-cool, trans);
-    }
-
-    &.x-trans {
-        background: palette(grayscale-cool, x-trans);
-    }
-
-    &.xx-trans {
-        background: palette(grayscale-cool, xx-trans);
-    }
-}
-
-.success {
-    background: palette(success, base);
-
-    &.base {
-        background: palette(success, base);
-    }
-
-    &.light {
-        background: palette(success, light);
-    }
-
-    &.dark {
-        background: palette(success, dark);
-    }
-}
-
-.warning {
-    background: palette(warning, base);
-
-    &.base {
-        background: palette(warning, base);
-    }
-
-    &.light {
-        background: palette(warning, light);
-    }
-
-    &.dark {
-        background: palette(warning, dark);
-    }
-}
-
-.error {
-    background: palette(error, base);
-
-    &.base {
-        background: palette(error, base);
-    }
-
-    &.light {
-        background: palette(error, light);
-    }
-
-    &.dark {
-        background: palette(error, dark);
-    }
-}

static/pattern-library/sass/components/_copy.scss

-// ------------------------------
-// edX Pattern Library: Components - Copy
-
-// About: Contains base styling for copy (general text and type used in content and functionaly).
-
-// #GLOBAL
-// #INDIVIDUAL COPY CASES
-
-// ----------------------------
-// #GLOBAL
-// ----------------------------
-.copy {
-    color: $text-base-color;
-
-    &.emphasized {
-        color: $text-emphasized-color;
-        font-weight: $text-emphasized-font-weight;
-    }
-
-    &.de-emphasized {
-        color: $text-de-emphasized-color;
-        font-weight: $text-de-emphasized-font-weight;
-    }
-}
-
-// ----------------------------
-// #INDIVIDUAL COPY CASES
-// ----------------------------
-// archetypes
-%copy-lead {
-    font-size: font-size(large);
-    line-height: line-height(mid-large);
-
-    p,
-    ol,
-    ul,
-    dl {
-        margin-bottom: spacing-vertical(mid-small);
-    }
-}
-
-%copy-large {
-    font-size: font-size(mid-large);
-    line-height: line-height(mid-large);
-
-    p,
-    ol,
-    ul,
-    dl {
-        margin-bottom: spacing-vertical(small);
-    }
-}
-
-%copy-base {
-    font-size: font-size(base);
-    line-height: line-height(mid-large);
-
-    p,
-    ol,
-    ul,
-    dl {
-        margin-bottom: spacing-vertical(small);
-    }
-}
-
-%copy-meta {
-    font-size: font-size(small);
-    line-height: line-height(mid-large);
-
-    p,
-    ol,
-    ul,
-    dl {
-        margin-bottom: spacing-vertical(small);
-    }
-}
-
-%copy-micro {
-    font-size: font-size(x-small);
-    line-height: line-height(small);
-
-    p,
-    ol,
-    ul,
-    dl {
-        margin-bottom: spacing-vertical(small);
-    }
-}
-
-// application of archetypes
-.copy-lead {
-    @extend %copy-lead;
-}
-
-.copy-large {
-   @extend %copy-large;
-}
-
-.copy-base {
-    @extend %copy-base;
-}
-
-.copy-meta {
-    @extend %copy-meta;
-}
-
-.copy-micro {
-    @extend %copy-micro;
-}
-
-

static/pattern-library/sass/components/_headings.scss

-// ------------------------------
-// edX Pattern Library: Components - Headings
-
-// About: Contains base styling for headings (leading type for sections of content and UI).
-
-// #GLOBAL
-// #INDIVIDUAL HEADINGS
-
-// ----------------------------
-// #GLOBAL
-// ----------------------------
-.hd-1,
-.hd-2,
-.hd-3,
-.hd-4,
-.hd-5,
-.hd-6 {
-    @extend %reset-headings;
-
-    &.emphasized {
-        color: $headings-primary-color;
-        font-weight: $headings-font-weight-bold;
-    }
-
-    &.de-emphasized {
-        color: $headings-secondary-color;
-    }
-}
-
-.hd-6,
-.hd-7 {
-    font-weight: $headings-font-weight-bold;
-    text-transform: uppercase;
-
-    &.emphasized {
-        font-weight: $headings-font-weight-x-bold;
-    }
-}
-
-
-// ----------------------------
-// #INDIVIDUAL HEADINGS
-// ----------------------------
-// Level one heading
-.hd-1 {
-    margin-bottom: spacing-vertical(small);
-    font-size: font-size(xxx-large);
-    line-height: line-height(xx-large);
-}
-
-
-// Level two heading
-.hd-2 {
-    margin-bottom: spacing-vertical(small);
-    font-size: font-size(xx-large);
-    line-height: line-height(x-large);
-}
-
-
-// Level three heading
-.hd-3 {
-    margin-bottom: spacing-vertical(x-small);
-    font-size: font-size(x-large);
-    line-height: line-height(large);
-
-    &.de-emphasized {
-        color: palette(grayscale, base);
-    }
-}
-
-
-// Level four heading
-.hd-4 {
-    margin-bottom: spacing-vertical(x-small);
-    font-weight: font-weight(semi-bold);
-    font-size: font-size(large);
-    line-height: line-height(mid-small);
-}
-
-
-// Level five heading
-.hd-5 {
-    margin-bottom: spacing-vertical(x-small);
-    font-weight: font-weight(bold);
-    font-size: font-size(mid-large);
-    line-height: line-height(mid-large);
-}
-
-
-// Level six heading
-.hd-6 {
-    margin-bottom: spacing-vertical(x-small);
-    font-size: font-size(small);
-    line-height: line-height(mid-small);
-}
-
-// Level seven heading
-.hd-7 {
-    margin-bottom: spacing-vertical(x-small);
-    font-size: font-size(x-small);
-    line-height: line-height(small);
-}

static/pattern-library/sass/main-ltr.scss

-// ------------------------------
-// edX Patern Library Elements: Main Style Compile
-
-// About: Sass compile for the edX Patern Library Elements. This does not contain styles for other edX products/experiences (e.g. account/onboarding), nor does it contain styling for the Pattern Library Site
-
-// 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 '../../vendor/bourbon/bourbon';
-@import '../../vendor/bi-app/bi-app-ltr';   // LTR support
-
-// ------------------------------
-// #UTILITIES
-// ------------------------------
-@import 'utilities/variables-ltr';
-
-// ------------------------------
-// #BUILD
-// ------------------------------
-@import 'build';                            // shared compile/build order for both LTR and RTL UI

static/pattern-library/sass/main-rtl.scss

-// ------------------------------
-// edX Patern Library Elements: Main Style Compile
-
-// ABOUT: Sass compile for the edX Patern Library Elements. This does not contain styles for other edX products/experiences (e.g. account/onboarding), nor does it contain styling for the Pattern Library Site
-
-// 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 '../../vendor/bourbon/bourbon';
-@import '../../vendor/bi-app/bi-app-rtl';   // RTL support
-
-// ------------------------------
-// #UTILITIES
-// ------------------------------
-@import 'utilities/variables-rtl';
-
-// ------------------------------
-// #BUILD
-// ------------------------------
-@import 'build';                            // shared compile/build order for both LTR and RTL UI

static/pattern-library/sass/utilities/_functions.scss

-// ------------------------------
-// edX Pattern Library: Functions
-
-// About: Sass partial for defining Sass helper functions.
-
-// #FUNCTIONS
-
-
-// ----------------------------
-// FUNCTIONS
-// ----------------------------
-// get colors from defined palettes map values
-@function palette($palette, $tone: 'base') {
-    @return map-get(map-get($palettes, $palette), $tone);
-}
-
-// get font sizes from defined map values
-@function font-size($key) {
-  @if map-has-key($font-sizes, $key) {
-    @return rem(map-get($font-sizes, $key));
-  }
-
-  @warn "Unknown `#{$key}` in $font-sizes.";
-  @return null;
-}
-
-// get line-heights from defined map values
-@function line-height($key) {
-  @if map-has-key($line-heights, $key) {
-    @return map-get($line-heights, $key);
-  }
-
-  @warn "Unknown `#{$key}` in $line-heights.";
-  @return null;
-}
-
-// get font sizes from defined map values
-@function font-weight($key) {
-  @if map-has-key($font-weights, $key) {
-    @return map-get($font-weights, $key);
-  }
-
-  @warn "Unknown `#{$key}` in $font-weights.";
-  @return null;
-}
-
-// get letter spacing from defined map values
-@function letter-spacing($key) {
-  @if map-has-key($letter-spacing, $key) {
-    @return map-get($letter-spacing, $key);
-  }
-
-  @warn "Unknown `#{$key}` in $letter-spacing.";
-  @return null;
-}
-
-// get z-indexes from defined map values
-@function z-index($key) {
-  @if map-has-key($z-depths, $key) {
-    @return map-get($z-depths, $key);
-  }
-
-  @warn "Unknown `#{$key}` in $z-depths.";
-  @return null;
-}
-
-// get timing from defined map values
-@function timing($key) {
-  @if map-has-key($timing, $key) {
-    @return map-get($timing, $key);
-  }
-
-  @warn "Unknown `#{$key}` in $z-depths.";
-  @return null;
-}
-
-// get vertical spacings from defined map values
-@function spacing-vertical($key) {
-  @if map-has-key($spacing-vertical, $key) {
-    @return rem(map-get($spacing-vertical, $key));
-  }
-
-  @warn "Unknown `#{$key}` in $spacing-vertical.";
-  @return null;
-}
-
-// get horizontal spacings from defined map values
-@function spacing-horizontal($key) {
-  @if map-has-key($spacing-horizontal, $key) {
-    @return rem(map-get($spacing-horizontal, $key));
-  }
-
-  @warn "Unknown `#{$key}` in $spacing-horizontal.";
-  @return null;
-}

static/pattern-library/sass/utilities/_helpers.scss

-// ------------------------------
-// edX Pattern Library: Helpers
-
-// About: Sass partial for defining extends and re-usable elements at the Sass compile level.
-
-// #UTILITIES
-// #RESETS
-
-// ----------------------------
-// #UTILITIES
-// ----------------------------
-// visual disabled
-%state-disabled {
-    pointer-events: none;
-    outline: none;
-    cursor: default;
-}
-
-// presentational wrapper
-%wrapper {
-    @include clearfix();
-    width: 100%;
-}
-
-// remove spacing from first/last children
-%clear-first-child {
-
-    &:first-child {
-        margin-top: 0;
-        padding-top: 0;
-        border-top: none;
-    }
-}
-
-%clear-last-child {
-
-    &:last-child {
-        margin-bottom: 0;
-        padding-bottom: 0;
-        border-bottom: none;
-    }
-}
-
-// accessibility
-%a11y-hide {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-%a11y-hide-image-text {
-    overflow: hidden;
-    text-indent: 100%;
-    white-space: nowrap;
-}
-
-// ----------------------------
-// #UTILITIES
-// ----------------------------
-// reset of lists
-%reset-lists {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    text-indent: 0;
-}
-
-%list-unstyled {
-    @extend %reset-lists;
-
-    li,
-    dt,
-    dd {
-        margin: 0;
-        padding: 0;
-    }
-}
-
-%list-inline {
-    @extend %list-unstyled;
-
-    li,
-    dt,
-    dd {
-        display: inline-block;
-    }
-}
-
-// reset of typography
-%reset-headings {
-    margin: 0 0 spacing-horizontal(base) 0;
-    font-family: $headings-base-font-family;
-    font-weight: $headings-base-font-weight;
-    font-size: font-size(base);
-    line-height: line-height(base);
-    color: $headings-base-color;
-}
-
-// reset of copy
-%reset-copy {
-    font-family: $text-base-font-family;
-}
-
-// reset of code
-%reset-code {
-    font-family: $font-family-monospace;
-    font-size: font-size(base);
-    line-height: line-height(large);
-    color: $text-base-color;
-}
-
-// reset of links
-%link {
-    @include transition(
-        color timing(xx-fast) ease-in-out 0s,
-        border-color timing(xx-fast) ease-in-out 0s
-    );
-
-    border-bottom: 1px solid $transparent;
-    color: palette(primary, base);
-    text-decoration: none;
-
-    // STATE: hover, active, focus
-    &:hover,
-    &:active,
-    &:focus {
-        border-bottom-color: palette(primary, accent);
-        color: palette(primary, accent);
-    }
-
-    // STATE: is disabled
-    &:disabled,
-    &.is-disabled {
-        display: none; // :)
-        color: palette(grayscale, light);
-    }
-
-    // STATE: is pressed or active
-    &:active,
-    &.is-pressed,
-    &.is-active {
-        color: palette(primary, dark);
-    }
-}

static/pattern-library/sass/utilities/_mixins.scss

-// ------------------------------
-// edX Pattern Library: Mixins
-
-// About: Sass partial containing mixins and functions for use within the application.
-
-// #MIXINS
-
-
-// ------------------------------
-// #MIXINS
-// ------------------------------
-@mixin font-smoothing($value: on) {
-    @if $value == on {
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-    }
-    @else {
-        -webkit-font-smoothing: subpixel-antialiased;
-        -moz-osx-font-smoothing: auto;
-    }
-}

static/pattern-library/sass/utilities/_variables-ltr.scss

-// ------------------------------
-// edX Pattern Library: Variables (LTR-centric)
-
-// grid - configuration (susy-based)
-$susy: (
-    flow: ltr,
-);

static/pattern-library/sass/utilities/_variables-rtl.scss

-// ------------------------------
-// edX Pattern Library: Variables (RTL-centric)
-
-// grid - configuration (susy-based)
-$susy: (
-    flow: rtl,
-);

static/pattern-library/sass/utilities/_variables.scss

-// ------------------------------
-// edX Pattern Library: Variables
-
-// About: Sass partial for defining variables used throughout the applications.
-
-// #UNITS:          Basic units of measurement
-// #GRID:           Grid and layout variables
-// #COLORS:         Base, palette and theme color definitions + application
-// #TYPOGRAPHY:     Font definitions and scales
-// #DEPTH:          Event timing variables
-// #TIMING:         Event timing variables
-// #APPLICATIONS:   Applying configuration
-
-
-// ----------------------------
-// #UNITS
-// ----------------------------
-$em-base: 16; // deliberately sets bourbon-based em-base (http://bourbon.io/docs/#em-base)
-
-$static-path: '..' !default;
-
-
-// ----------------------------
-// #GRID
-// ----------------------------
-// grid - baseline
-$baseline:               20;
-$baseline-vertical:      ($baseline*2);
-$baseline-horizontal:    $baseline;
-
-$susy: (
-    use-custom clearfix: true,
-    global-box-sizing: border-box,
-    math: fluid,
-    output: float,
-    columns: 12,
-    gutters: .5,
-    container: rem(1170),
-);
-
-// grid - breakpoints
-$bp-small:  320px;
-$bp-medium: 768px;
-$bp-large:  1024px;
-$bp-huge:   1280px;
-
-// ----------------------------
-// #COLORS
-// ----------------------------
-// color: config
-$transparent:               rgba(0, 0, 0, 0);
-
-$gray:                      rgb(167, 164, 164);
-$gray-cool:                 rgb(158, 177, 185);
-$red:                       rgb(178, 6, 16);
-$yellow:                    rgb(253, 188, 86);
-$green:                     rgb(37, 184, 90);
-$blue:                      rgb(0, 121, 188);
-$pink:                      rgb(203, 89, 141);
-
-// colors: brand
-$brand-primary:             $blue;
-$brand-primary-accent:      rgb(14, 166, 236);
-$brand-secondary:           $pink;
-$brand-secondary-accent:    rgb(242, 108, 170);
-
-// colors: utilities
-$success: $green;
-$warning: $yellow;
-$error: $red;
-
-// colors: palettes
-$palettes: (
-    primary: (
-        base:       $brand-primary,
-        light:      tint($brand-primary, 30%),
-        x-light:    tint($brand-primary, 70%),
-        dark:       shade($brand-primary, 30%),
-        x-dark:     shade($brand-primary, 55%),
-        accent:     $brand-primary-accent,
-        x-accent:   saturate($brand-primary-accent, 25%)
-    ),
-    secondary: (
-        base:       $brand-secondary,
-        light:      tint($brand-secondary, 30%),
-        x-light:    tint($brand-secondary, 70%),
-        dark:       shade($brand-secondary, 30%),
-        x-dark:     shade($brand-secondary, 55%),
-        accent:     $brand-secondary-accent
-    ),
-    grayscale: (
-        base:       $gray,
-        light:      tint($gray, 50%),
-        x-light:    tint($gray, 75%),
-        white:      tint($gray, 97%),
-        white-t:    tint($gray, 100%),
-        dark:       shade($gray, 40%),
-        x-dark:     shade($gray, 60%),
-        black:      shade($gray, 90%),
-        black-t:    shade($gray, 100%),
-        trans:      transparentize($gray, 0.50),
-        x-trans:    transparentize($gray, 0.75),
-        xx-trans:   transparentize($gray, 0.95)
-    ),
-    grayscale-cool: (
-        base:       $gray-cool,
-        light:      tint($gray-cool, 50%),
-        x-light:    tint($gray-cool, 75%),
-        dark:       shade($gray-cool, 50%),
-        x-dark:     shade($gray-cool, 75%),
-        trans:      transparentize($gray-cool, 0.50),
-        x-trans:    transparentize($gray-cool, 0.75),
-        xx-trans:   transparentize($gray-cool, 0.95)
-    ),
-    success: (
-        base:       $success,
-        light:      tint($success, 33%),
-        dark:       shade($success, 33%)
-    ),
-    error: (
-        base:       $error,
-        light:      tint($error, 33%),
-        dark:       shade($error, 33%)
-    ),
-    warning: (
-        base:       $warning,
-        light:      tint($warning, 33%),
-        dark:       shade($warning, 33%)
-    ),
-);
-
-// ----------------------------
-// #TYPOGRAPHY
-// ----------------------------
-// typography: config
-@include font-face(
-    'Open Sans',
-    '#{$static-path}/../fonts/OpenSans/OpenSans-Light-webfont',
-    300,
-    $file-formats: woff woff2 ttf
-);
-@include font-face(
-    'Open Sans',
-    '#{$static-path}/../fonts/OpenSans/OpenSans-LightItalic-webfont',
-    300,
-    italic,
-    $file-formats: woff woff2 ttf
-);
-@include font-face(
-    'Open Sans',
-    '#{$static-path}/../fonts/OpenSans/OpenSans-Regular-webfont',
-    400,
-    $file-formats: woff woff2 ttf
-);
-@include font-face(
-    'Open Sans',
-    '#{$static-path}/../fonts/OpenSans/OpenSans-Italic-webfont',
-    400,
-    italic,
-    $file-formats: woff woff2 ttf
-);
-@include font-face(
-    'Open Sans',
-    '#{$static-path}/../fonts/OpenSans/OpenSans-Semibold-webfont',
-    600,
-    $file-formats: woff woff2 ttf
-);
-@include font-face(
-    'Open Sans',
-    '#{$static-path}/../fonts/OpenSans/OpenSans-SemiboldItalic-webfont',
-    600,
-    italic,
-    $file-formats: woff woff2 ttf
-);
-@include font-face(
-    'Open Sans',
-    '#{$static-path}/../fonts/OpenSans/OpenSans-Bold-webfont',
-    700,
-    $file-formats: woff woff2 ttf
-);
-@include font-face(
-    'Open Sans',
-    '#{$static-path}/../fonts/OpenSans/OpenSans-BoldItalic-webfont',
-    700,
-    italic,
-    $file-formats: woff woff2 ttf
-);
-
-// typography: config - stacks
-$font-family-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
-$font-family-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
-
-// typography: config - scale
-$modular-scale-ratio: $perfect-fourth;
-
-// typography: sizes
-$font-sizes: (
-    xxx-large:      38,
-    xx-large:       28,
-    x-large:        24,
-    large:          21,
-    mid-large:      18,
-    base:           16,
-    small:          14,
-    x-small:        12,
-);
-
-// typography: line-height
-$line-heights: (
-    xx-large:       1.40,
-    x-large:        1.40,
-    large:          1.50,
-    mid-large:      1.60,
-    mid-small:      1.60,
-    small:          1.5,
-    base:           1.5,
-    none:           0
-);
-
-// typography: weights
-$font-weights: (
-    normal:         400,
-    light:          300,
-    x-light:        200,
-    semi-bold:      600,
-    bold:           700,
-    x-bold:         800
-);
-
-// typography: letter-spacing
-$letter-spacing: (
-    normal:         0,
-    xx-tight:       -3,
-    x-tight:        -2,
-    tight:          -.095,
-    loose:          -.075,
-    x-loose:        -.025,
-    xx-loose:       3
-);
-
-// ----------------------------
-// #DEPTH
-// ----------------------------
-$z-depths: (
-    base:           1,
-    mid-back:       -10,
-    back:           -100,
-    very-back:      -1000,
-    mid-front:      10,
-    front:          100,
-    very-front:     1000
-);
-
-$spacing-vertical: (
-    base:       $baseline-vertical,
-    mid-small:  ($baseline-vertical*0.75),
-    small:      ($baseline-vertical/2),
-    x-small:    ($baseline-vertical/4),
-    xx-small:    ($baseline-vertical/8),
-    mid-large:  ($baseline-vertical*1.5),
-    large:      ($baseline-vertical*2),
-    x-large:    ($baseline-vertical*4)
-);
-
-$spacing-horizontal: (
-    base:       $baseline-horizontal,
-    mid-small:  ($baseline-horizontal*0.75),
-    small:      ($baseline-horizontal/2),
-    x-small:    ($baseline-horizontal/4),
-    xx-small:   ($baseline-horizontal/8),
-    mid-large:  ($baseline-horizontal*1.5),
-    large:      ($baseline-horizontal*2),
-    x-large:    ($baseline-horizontal*4)
-);
-
-
-// ----------------------------
-// #TIMING
-// ----------------------------
-$timing: (
-    base:       0.75s,
-    slow:       1s,
-    x-slow:     1.5s,
-    fast:       0.5s,
-    x-fast:     0.25s,
-    xx-fast:    0.125s
-);
-
-// ----------------------------
-// #APPLICATIONS
-// ----------------------------
-// scaffolding
-$view-bg: palette(grayscale, xx-light);
-
-// base component settings
-$component-focus-color: inherit;
-$component-focus-bg: palette(primary, x-light);
-$component-active-color: palette(grayscale, white);
-$component-active-bg: palette(primary, base);
-
-// base text settings
-$text-base-font-family: $font-family-sans-serif;
-$text-base-color: palette(grayscale, dark);
-$text-base-font-weight: font-weight(normal);
-$text-base-focus-color: palette(grayscale, x-dark);
-
-$text-emphasized-color: palette(grayscale, x-dark);
-$text-emphasized-font-weight: font-weight(normal);
-
-$text-de-emphasized-color: palette(grayscale, base);
-$text-de-emphasized-font-weight: font-weight(normal);
-
-// links
-$link-color: palette(primary, base);
-$link-focus-color: palette(primary, sat);
-$link-visited-color: palette(primary, dark);
-
-// headings
-$headings-font-weight-normal: font-weight(normal);
-$headings-font-weight-bold: font-weight(semi-bold);
-$headings-font-weight-x-bold: font-weight(bold);
-
-$headings-base-font-family: $font-family-sans-serif;
-$headings-base-font-weight: $headings-font-weight-normal;
-$headings-base-color: palette(grayscale, x-dark);
-
-$headings-primary-font-family: $font-family-sans-serif;
-$headings-primary-color: palette(grayscale, black);
-
-$headings-secondary-font-family: $font-family-sans-serif;
-$headings-secondary-color: palette(grayscale, base);
-
-// buttons
-$buttons-border-style: solid;
-$buttons-border-size: 1px;
-$buttons-elevated-shadow: 3px;
-$buttons-border-radius: 3px;
-$buttons-font-weight: font-weight(semi-bold);
-
-// tables
-$table-cell-padding: spacing-vertical(small) spacing-horizontal(small);
-$table-condensed-cell-padding: spacing-vertical(x-small) spacing-horizontal(x-small);
-$table-bg: palette(grayscale, white);
-$table-accent-bg: palette(primary, accent);
-$table-focus-bg: $component-focus-bg;
-$table-active-bg: $component-active-bg;
-$table-border-color: palette(grayscale, x-light);

static/vendor/bi-app/_bi-app-ltr.scss

-// ------------------------------------------
-// left to right module
-// authors:
-// twitter.com/anasnakawa
-// twitter.com/victorzamfir
-// licensed under the MIT license
-// http://www.opensource.org/licenses/mit-license.php
-// ------------------------------------------
-
-@import 'variables-ltr';
-@import 'mixins';

static/vendor/bi-app/_bi-app-rtl.scss

-// ------------------------------------------
-// right to left module
-// authors:
-// twitter.com/anasnakawa
-// twitter.com/victorzamfir
-// licensed under the MIT license
-// http://www.opensource.org/licenses/mit-license.php
-// ------------------------------------------
-
-@import 'variables-rtl';
-@import 'mixins';

static/vendor/bi-app/_mixins.scss

-// ------------------------------------------
-// bi app mixins
-// authors:
-// twitter.com/anasnakawa
-// twitter.com/victorzamfir
-// licensed under the MIT license
-// http://www.opensource.org/licenses/mit-license.php
-// ------------------------------------------
-
-// ------------------------------------------
-// Table of contents
-// ------------------------------------------
-// padding
-// margin
-// float
-// text align
-// clear
-// left / right
-// border
-//  - width
-//  - style
-//  - color
-//  - generic
-//  - radius
-// ltr / rtl contents
-// ------------------------------------------
-
-// generic mixin for properties with values
-// (top right bottom left)
-// ------------------------------------------
-@mixin bi-app-compact($property, $top, $right, $bottom, $left) {
-  @if $bi-app-direction == ltr {
-    #{$property}: $top $right $bottom $left;
-  } @else {
-    #{$property}: $top $left $bottom $right;
-  }
-}
-
-// padding
-// ------------------------------------------
-@mixin padding-left($distance) {
-  padding-#{$bi-app-left}: $distance;
-}
-
-@mixin padding-right($distance) {
-  padding-#{$bi-app-right}: $distance;
-}
-
-@mixin padding($top, $right, $bottom, $left) {
-  @include bi-app-compact(padding, $top, $right, $bottom, $left);
-}
-
-// margin
-// ------------------------------------------
-@mixin margin-left($distance) {
-  margin-#{$bi-app-left}: $distance;
-}
-
-@mixin margin-right($distance) {
-  margin-#{$bi-app-right}: $distance;
-}
-
-@mixin margin($top, $right, $bottom, $left) {
-  @include bi-app-compact(margin, $top, $right, $bottom, $left);
-}
-
-// float
-// ------------------------------------------
-@mixin bi-app-float-left {
-  float: $bi-app-left;
-}
-
-@mixin bi-app-float-right {
-  float: $bi-app-right;
-}
-
-@mixin float($direction) {
-  @if $direction == left {
-    @include bi-app-float-left;
-  } @else if $direction == right {
-    @include bi-app-float-right;
-  } @else {
-    float: $direction;
-  }
-}
-
-// text align
-// ------------------------------------------
-@mixin bi-app-text-align-left {
-  text-align: $bi-app-left;
-}
-
-@mixin bi-app-text-align-right {
-  text-align: $bi-app-right;
-}
-
-@mixin text-align($direction) {
-  @if $direction == left {
-    @include bi-app-text-align-left;
-  } @else if $direction == right {
-    @include bi-app-text-align-right;
-  } @else {
-    text-align: $direction;
-  }
-}
-
-// clear
-// ------------------------------------------
-@mixin bi-app-clear-left {
-  clear: $bi-app-left;
-}
-
-@mixin bi-app-clear-right {
-  clear: $bi-app-right;
-}
-
-@mixin clear($direction) {
-  @if $direction == left {
-    @include bi-app-clear-left;
-  } @else if $direction == right {
-    @include bi-app-clear-right;
-  } @else {
-    clear: $direction;
-  }
-}
-
-// left / right
-// ------------------------------------------
-@mixin left($distance) {
-  @if $bi-app-direction == ltr {
-    left: $distance;
-  } @else if $bi-app-direction == rtl {
-    right: $distance;
-  }
-}
-
-@mixin right($distance) {
-  @if $bi-app-direction == ltr {
-    right: $distance;
-  } @else if $bi-app-direction == rtl {
-    left: $distance;
-  }
-}
-
-// border
-// ------------------------------------------
-
-// width
-@mixin border-left-width($width) {
-  border-#{$bi-app-left}-width: $width;
-}
-
-@mixin border-right-width($width) {
-  border-#{$bi-app-right}-width: $width;
-}
-
-@mixin border-width($top, $right, $bottom, $left) {
-  @include bi-app-compact(border-width, $top, $right, $bottom, $left);
-}
-
-// style
-@mixin border-left-style($style) {
-  border-#{$bi-app-left}-style: $style;
-}
-
-@mixin border-right-style($style) {
-  border-#{$bi-app-right}-style: $style;
-}
-
-@mixin border-style($top, $right, $bottom, $left) {
-  @include bi-app-compact(border-style, $top, $right, $bottom, $left);
-}
-
-// color
-@mixin border-left-color($color) {
-  border-#{$bi-app-left}-color: $color;
-}
-
-@mixin border-right-color($color) {
-  border-#{$bi-app-right}-color: $color;
-}
-
-@mixin border-color($top, $right, $bottom, $left) {
-  @include bi-app-compact(border-color, $top, $right, $bottom, $left);
-}
-
-// generic
-@mixin border-left($border-style) {
-  border-#{$bi-app-left}: $border-style;
-}
-
-@mixin border-right($border-style) {
-  border-#{$bi-app-right}: $border-style;
-}
-
-// radius
-@mixin border-top-left-radius($radius) {
-  -webkit-border-top-#{$bi-app-left}-radius: $radius;
-     -moz-border-top#{$bi-app-left}-radius: $radius;
-          border-top-#{$bi-app-left}-radius: $radius;
-}
-
-@mixin border-top-right-radius($radius) {
-  -webkit-border-top-#{$bi-app-right}-radius: $radius;
-     -moz-border-top#{$bi-app-right}-radius: $radius;
-          border-top-#{$bi-app-right}-radius: $radius;
-}
-
-@mixin border-bottom-left-radius($radius) {
-  -webkit-border-bottom-#{$bi-app-left}-radius: $radius;
-     -moz-border-bottom#{$bi-app-left}-radius: $radius;
-          border-bottom-#{$bi-app-left}-radius: $radius;
-}
-
-@mixin border-bottom-right-radius($radius) {
-  -webkit-border-bottom-#{$bi-app-right}-radius: $radius;
-     -moz-border-bottom#{$bi-app-right}-radius: $radius;
-          border-bottom-#{$bi-app-right}-radius: $radius;
-}
-
-@mixin border-right-radius($radius) {
-  @include border-top-right-radius($radius);
-  @include border-bottom-right-radius($radius);
-}
-
-@mixin border-left-radius($radius) {
-  @include border-top-left-radius($radius);
-  @include border-bottom-left-radius($radius);
-}
-
-@mixin border-top-radius($radius) {
-  @include border-top-left-radius($radius);
-  @include border-top-right-radius($radius);
-}
-
-@mixin border-bottom-radius($radius) {
-  @include border-bottom-left-radius($radius);
-  @include border-bottom-right-radius($radius);
-}
-
-@mixin border-radius($topLeft, $topRight: null, $bottomRight: null, $bottomLeft: null) {
-  @if $topRight != null {
-    @include border-top-left-radius($topLeft);
-    @include border-top-right-radius($topRight);
-    @include border-bottom-right-radius($bottomRight);
-    @include border-bottom-left-radius($bottomLeft);
-  } @else {
-    -webkit-border-radius: $topLeft;
-       -moz-border-radius: $topLeft;
-        -ms-border-radius: $topLeft;
-         -o-border-radius: $topLeft;
-            border-radius: $topLeft;
-  }
-}
-
-// Returns "en" or "ar", useful for image suffixes.
-// Usage: background-image: url(/img/header-#{lang()}.png);
-@function lang() {
-  @if $bi-app-direction == ltr {
-    @return 'en';
-  } @else {
-    @return 'ar';
-  }
-}
-
-// Support for "direction" declaration (renders ltr/rtl).
-// Useful for form elements as they swap the text-indent property and align the text accordingly.
-@mixin direction {
-  direction: $bi-app-direction;
-}
-
-// Inverts a percentage value. Example: 97% becames 3%.
-// Useful for background-position.
-@function bi-app-invert-percentage($percentage) {
-  @if $bi-app-direction == rtl {
-    @return 100% - $percentage;
-  } @else {
-    @return $percentage;
-  }
-}
-
-// ltr / rtl contents
-// ------------------------------------------
-@mixin ltr {
-  @if $bi-app-direction == ltr {
-    @content;
-  }
-}
-
-@mixin rtl {
-  @if $bi-app-direction == rtl {
-    @content;
-  }
-}

static/vendor/bi-app/_variables-ltr.scss

-// ------------------------------------------
-// left to right variables to be used by bi-app mixins
-// authors:
-// twitter.com/anasnakawa
-// twitter.com/victorzamfir
-// licensed under the MIT license
-// http://www.opensource.org/licenses/mit-license.php
-// ------------------------------------------
-
-// namespacing variables with bi-app to
-// avoid conflicting with other global variables
-$bi-app-left            : left;
-$bi-app-right           : right;
-$bi-app-direction       : ltr;
-$bi-app-invert-direction: rtl;

static/vendor/bi-app/_variables-rtl.scss

-// ------------------------------------------
-// right to left variables to be used by bi-app mixins
-// authors:
-// twitter.com/anasnakawa
-// twitter.com/victorzamfir
-// licensed under the MIT license
-// http://www.opensource.org/licenses/mit-license.php
-// ------------------------------------------
-
-// namespacing variables with bi-app to
-// avoid conflicting with other global variables
-$bi-app-left            : right;
-$bi-app-right           : left;
-$bi-app-direction       : rtl;
-$bi-app-invert-direction: ltr;

static/vendor/bourbon/_bourbon.scss

-// Bourbon 4.2.1
-// http://bourbon.io
-// Copyright 2011-2015 thoughtbot, inc.
-// MIT License
-
-@import "settings/prefixer";
-@import "settings/px-to-em";
-@import "settings/asset-pipeline";
-
-@import "functions/assign-inputs";
-@import "functions/contains";
-@import "functions/contains-falsy";
-@import "functions/is-length";
-@import "functions/is-light";
-@import "functions/is-number";
-@import "functions/is-size";
-@import "functions/px-to-em";
-@import "functions/px-to-rem";
-@import "functions/shade";
-@import "functions/strip-units";
-@import "functions/tint";
-@import "functions/transition-property-name";
-@import "functions/unpack";
-@import "functions/modular-scale";
-
-@import "helpers/convert-units";
-@import "helpers/directional-values";
-@import "helpers/font-source-declaration";
-@import "helpers/gradient-positions-parser";
-@import "helpers/linear-angle-parser";
-@import "helpers/linear-gradient-parser";
-@import "helpers/linear-positions-parser";
-@import "helpers/linear-side-corner-parser";
-@import "helpers/radial-arg-parser";
-@import "helpers/radial-positions-parser";
-@import "helpers/radial-gradient-parser";
-@import "helpers/render-gradients";
-@import "helpers/shape-size-stripper";
-@import "helpers/str-to-num";
-
-@import "css3/animation";
-@import "css3/appearance";
-@import "css3/backface-visibility";
-@import "css3/background";
-@import "css3/background-image";
-@import "css3/border-image";
-@import "css3/calc";
-@import "css3/columns";
-@import "css3/filter";
-@import "css3/flex-box";
-@import "css3/font-face";
-@import "css3/font-feature-settings";
-@import "css3/hidpi-media-query";
-@import "css3/hyphens";
-@import "css3/image-rendering";
-@import "css3/keyframes";
-@import "css3/linear-gradient";
-@import "css3/perspective";
-@import "css3/placeholder";
-@import "css3/radial-gradient";
-@import "css3/selection";
-@import "css3/text-decoration";
-@import "css3/transform";
-@import "css3/transition";
-@import "css3/user-select";
-
-@import "addons/border-color";
-@import "addons/border-radius";
-@import "addons/border-style";
-@import "addons/border-width";
-@import "addons/buttons";
-@import "addons/clearfix";
-@import "addons/ellipsis";
-@import "addons/font-stacks";
-@import "addons/hide-text";
-@import "addons/margin";
-@import "addons/padding";
-@import "addons/position";
-@import "addons/prefixer";
-@import "addons/retina-image";
-@import "addons/size";
-@import "addons/text-inputs";
-@import "addons/timing-functions";
-@import "addons/triangle";
-@import "addons/word-wrap";
-
-@import "bourbon-deprecated-upcoming";

static/vendor/bourbon/addons/_border-color.scss

-@charset "UTF-8";
-
-/// Provides a quick method for targeting `border-color` on specific sides of a box. Use a `null` value to “skip” a side.
-///
-/// @param {Arglist} $vals
-///   List of arguments
-///
-/// @example scss - Usage
-///   .element {
-///     @include border-color(#a60b55 #76cd9c null #e8ae1a);
-///   }
-///
-/// @example css - CSS Output
-///   .element {
-///     border-left-color: #e8ae1a;
-///     border-right-color: #76cd9c;
-///     border-top-color: #a60b55;
-///   }
-///
-/// @require {mixin} directional-property
-///
-/// @output `border-color`
-
-@mixin border-color($vals...) {
-  @include directional-property(border, color, $vals...);
-}

static/vendor/bourbon/addons/_border-radius.scss

-@charset "UTF-8";
-
-/// Provides a quick method for targeting `border-radius` on both corners on the side of a box.
-///
-/// @param {Number} $radii
-///   List of arguments
-///
-/// @example scss - Usage
-///   .element-one {
-///     @include border-top-radius(5px);
-///   }
-///
-///   .element-two {
-///     @include border-left-radius(3px);
-///   }
-///
-/// @example css - CSS Output
-///   .element-one {
-///     border-top-left-radius: 5px;
-///     border-top-right-radius: 5px;
-///   }
-///
-///   .element-two {
-///     border-bottom-left-radius: 3px;
-///     border-top-left-radius: 3px;
-///   }
-///
-/// @output `border-radius`
-
-@mixin border-top-radius($radii) {
-  border-top-left-radius: $radii;
-  border-top-right-radius: $radii;
-}
-
-@mixin border-right-radius($radii) {
-  border-bottom-right-radius: $radii;
-  border-top-right-radius: $radii;
-}
-
-@mixin border-bottom-radius($radii) {
-  border-bottom-left-radius: $radii;
-  border-bottom-right-radius: $radii;
-}
-
-@mixin border-left-radius($radii) {
-  border-bottom-left-radius: $radii;
-  border-top-left-radius: $radii;
-}

static/vendor/bourbon/addons/_border-style.scss

-@charset "UTF-8";
-
-/// Provides a quick method for targeting `border-style` on specific sides of a box. Use a `null` value to “skip” a side.
-///
-/// @param {Arglist} $vals
-///   List of arguments
-///
-/// @example scss - Usage
-///   .element {
-///     @include border-style(dashed null solid);
-///   }
-///
-/// @example css - CSS Output
-///   .element {
-///     border-bottom-style: solid;
-///     border-top-style: dashed;
-///   }
-///
-/// @require {mixin} directional-property
-///
-/// @output `border-style`
-
-@mixin border-style($vals...) {
-  @include directional-property(border, style, $vals...);
-}

static/vendor/bourbon/addons/_border-width.scss

-@charset "UTF-8";
-
-/// Provides a quick method for targeting `border-width` on specific sides of a box. Use a `null` value to “skip” a side.
-///
-/// @param {Arglist} $vals
-///   List of arguments
-///
-/// @example scss - Usage
-///   .element {
-///     @include border-width(1em null 20px);
-///   }
-///
-/// @example css - CSS Output
-///   .element {
-///     border-bottom-width: 20px;
-///     border-top-width: 1em;
-///   }
-///
-/// @require {mixin} directional-property
-///
-/// @output `border-width`
-
-@mixin border-width($vals...) {
-  @include directional-property(border, width, $vals...);
-}

static/vendor/bourbon/addons/_buttons.scss

-@charset "UTF-8";
-
-/// Generates variables for all buttons. Please note that you must use interpolation on the variable: `#{$all-buttons}`.
-///
-/// @example scss - Usage
-///   #{$all-buttons} {
-///     background-color: #f00;
-///   }
-///
-///   #{$all-buttons-focus},
-///   #{$all-buttons-hover} {
-///     background-color: #0f0;
-///   }
-///
-///   #{$all-buttons-active} {
-///     background-color: #00f;
-///   }
-///
-/// @example css - CSS Output
-///   button,
-///   input[type="button"],
-///   input[type="reset"],
-///   input[type="submit"] {
-///     background-color: #f00;
-///   }
-///
-///   button:focus,
-///   input[type="button"]:focus,
-///   input[type="reset"]:focus,
-///   input[type="submit"]:focus,
-///   button:hover,
-///   input[type="button"]:hover,
-///   input[type="reset"]:hover,
-///   input[type="submit"]:hover {
-///     background-color: #0f0;
-///   }
-///
-///   button:active,
-///   input[type="button"]:active,
-///   input[type="reset"]:active,
-///   input[type="submit"]:active {
-///     background-color: #00f;
-///   }
-///
-/// @require assign-inputs
-///
-/// @type List
-///
-/// @todo Remove double assigned variables (Lines 59–62) in v5.0.0
-
-$buttons-list: 'button',
-               'input[type="button"]',
-               'input[type="reset"]',
-               'input[type="submit"]';
-
-$all-buttons:        assign-inputs($buttons-list);
-$all-buttons-active: assign-inputs($buttons-list, active);
-$all-buttons-focus:  assign-inputs($buttons-list, focus);
-$all-buttons-hover:  assign-inputs($buttons-list, hover);
-
-$all-button-inputs:        $all-buttons;
-$all-button-inputs-active: $all-buttons-active;
-$all-button-inputs-focus:  $all-buttons-focus;
-$all-button-inputs-hover:  $all-buttons-hover;

static/vendor/bourbon/addons/_clearfix.scss

-@charset "UTF-8";
-
-/// Provides an easy way to include a clearfix for containing floats.
-///
-/// @link http://cssmojo.com/latest_new_clearfix_so_far/
-///
-/// @example scss - Usage
-///   .element {
-///     @include clearfix;
-///   }
-///
-/// @example css - CSS Output
-///   .element::after {
-///     clear: both;
-///     content: "";
-///     display: table;
-///   }
-
-@mixin clearfix {
-  &::after {
-    clear: both;
-    content: "";
-    display: table;
-  }
-}

static/vendor/bourbon/addons/_ellipsis.scss

-@charset "UTF-8";
-
-/// Truncates text and adds an ellipsis to represent overflow.
-///
-/// @param {Number} $width [100%]
-///   Max-width for the string to respect before being truncated
-///
-/// @example scss - Usage
-///   .element {
-///     @include ellipsis;
-///   }
-///
-/// @example css - CSS Output
-///   .element {
-///     display: inline-block;
-///     max-width: 100%;
-///     overflow: hidden;
-///     text-overflow: ellipsis;
-///     white-space: nowrap;
-///     word-wrap: normal;
-///   }
-
-@mixin ellipsis($width: 100%) {
-  display: inline-block;
-  max-width: $width;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: normal;
-}

static/vendor/bourbon/addons/_font-stacks.scss

-@charset "UTF-8";
-
-/// Georgia font stack.
-///
-/// @type List
-
-$georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif;
-
-/// Helvetica font stack.
-///
-/// @type List
-
-$helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
-
-/// Lucida Grande font stack.
-///
-/// @type List
-
-$lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
-
-/// Monospace font stack.
-///
-/// @type List
-
-$monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
-
-/// Verdana font stack.
-///
-/// @type List
-
-$verdana: "Verdana", "Geneva", sans-serif;

static/vendor/bourbon/addons/_hide-text.scss

-/// Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied.
-///
-/// @link http://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
-///
-/// @example scss - Usage
-///   .element {
-///     @include hide-text;
-///   }
-///
-/// @example css - CSS Output
-///   .element {
-///     overflow: hidden;
-///     text-indent: 101%;
-///     white-space: nowrap;
-///   }
-///
-/// @todo Remove height argument in v5.0.0
-
-@mixin hide-text($height: null) {
-  overflow: hidden;
-  text-indent: 101%;
-  white-space: nowrap;
-
-  @if $height {
-    @warn "The `hide-text` mixin has changed and no longer requires a height. The height argument will no longer be accepted in v5.0.0";
-  }
-}