Merge branch 'feature/christina/metadata-ui' of github.com:edx/edx-platform into feature/christina/metadata-ui

cms/static/sass/_base.scss

@@ -801,7 +801,8 @@ hr.divide {
 }
 
 .tooltip {
-  @extend .t-copy-sub2;
+  @include font-size(12);
+  @include transition(opacity 0.1s ease-out);
   position: absolute;
   top: 0;
   left: 0;
@@ -811,10 +812,9 @@ hr.divide {
   background: rgba(0, 0, 0, 0.85);
   font-weight: normal;
   line-height: 26px;
-  color: #fff;
+  color: $white;
   pointer-events: none;
   opacity: 0;
-  @include transition(opacity 0.1s ease-out);
 
   &:after {
     content: '▾';

cms/static/sass/_variables.scss

@@ -184,6 +184,6 @@ $lightBluishGrey2: rgb(213, 220, 228);
 $error-red: rgb(253, 87, 87);
 
 // type
-$sans-serif: $f-serif;
+$sans-serif: $f-sans-serif;
 $body-line-height: golden-ratio(.875em, 1);
 

cms/static/sass/assets/_fonts.scss

@@ -1,8 +1,49 @@
 // studio - assets - fonts
+// NOTE: Sass currently can't process the standard Google Web Font import method, so a @font-face with src declaration of the .woff file that the Google @import method uses is needed :/
 // ====================
 
-// import from google fonts - Open Sans
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300);
+// Open Sans - http://www.google.com/fonts/specimen/Open+Sans
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxhbnBKKEOwRKgsHDreGcocg.woff) format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxvR_54zmj3SbGZQh3vCOwvY.woff) format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBrrIa-7acMAeDBVuclsi6Gc.woff) format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
+}
 
-// import from google fonts - Bree
-@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
+// Bree Serif - http://www.google.com/fonts/specimen/Bree+Serif
+@font-face {
+  font-family: 'Bree Serif';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Bree Serif'), local('BreeSerif'), url(http://themes.googleusercontent.com/static/fonts/breeserif/v2/LQ7WLTaITDg4OSRuOZCps73hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
+}

cms/static/sass/elements/_header.scss

@@ -106,13 +106,19 @@
     width: 1px;
   }
 
-  .course-org {
-    margin-right: ($baseline/4);
-  }
-
   .course-number, .course-org {
     @include font-size(12);
     display: inline-block;
+    max-width: 70px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 1.3;
+  }
+
+  .course-org {
+    margin-right: ($baseline/4);
+    max-width: 140px;
   }
 
   .course-title {
@@ -132,9 +138,9 @@
 
 // specific elements - course nav
 .nav-course {
-  width: 285px;
+  width: 290px;
+  @extend .t-copy-sub1;
   margin-top: -($baseline/4);
-  @include font-size(14);
 
   > ol > .nav-item {
     vertical-align: bottom;
@@ -152,8 +158,8 @@
       color: $gray-d3;
 
       .label-prefix {
-        display: block;
         @include font-size(11);
+        display: block;
         font-weight: 400;
       }
     }