LMS: Revised CSS Architecture (resolves LMS_1020)

.gitignore

@@ -51,6 +51,8 @@ node_modules
 *.scssc
 lms/static/sass/*.css
 lms/static/sass/application.scss
+lms/static/sass/application-extend1.scss
+lms/static/sass/application-extend2.scss
 lms/static/sass/course.scss
 cms/static/sass/*.css
 

lms/envs/common.py

@@ -587,7 +587,7 @@
 
     # catches any uncaught RateLimitExceptions and returns a 403 instead of a 500
     'ratelimitbackend.middleware.RateLimitMiddleware',
-    
+
     # For A/B testing
     'waffle.middleware.WaffleMiddleware',
 )
@@ -628,25 +628,49 @@
 notes_js = sorted(rooted_glob(PROJECT_ROOT / 'static', 'coffee/src/notes/**/*.coffee'))
 
 PIPELINE_CSS = {
-    'application': {
-        'source_filenames': ['sass/application.css'],
-        'output_filename': 'css/lms-application.css',
+    'style-vendor': {
+        'source_filenames': [
+            'css/vendor/font-awesome.css',
+            'css/vendor/jquery.qtip.min.css',
+            'css/vendor/responsive-carousel/responsive-carousel',
+            'css/vendor/responsive-carousel/responsive-carousel.slide',
+        ],
+        'output_filename': 'css/lms-style-vendor.css',
     },
-    'course': {
+    'style-app': {
+        'source_filenames': [
+            'sass/application.css',
+            'sass/ie.css'
+        ],
+        'output_filename': 'css/lms-style-app.css',
+    },
+    'style-app-extend1': {
+        'source_filenames': [
+            'sass/application-extend1.css',
+        ],
+        'output_filename': 'css/lms-style-app-extend1.css',
+    },
+    'style-app-extend2': {
+        'source_filenames': [
+            'sass/application-extend2.css',
+        ],
+        'output_filename': 'css/lms-style-app-extend2.css',
+    },
+    'style-course-vendor': {
         'source_filenames': [
             'js/vendor/CodeMirror/codemirror.css',
             'css/vendor/jquery.treeview.css',
             'css/vendor/ui-lightness/jquery-ui-1.8.22.custom.css',
-            'css/vendor/jquery.qtip.min.css',
             'css/vendor/annotator.min.css',
+        ],
+        'output_filename': 'css/lms-style-course-vendor.css',
+    },
+    'style-course': {
+        'source_filenames': [
             'sass/course.css',
             'xmodule/modules.css',
         ],
-        'output_filename': 'css/lms-course.css',
-    },
-    'ie-fixes': {
-        'source_filenames': ['sass/ie.css'],
-        'output_filename': 'css/lms-ie.css',
+        'output_filename': 'css/lms-style-course.css',
     },
 }
 

lms/static/sass/_shame.scss

@@ -230,3 +230,10 @@
 footer .references {
   @include footer_references_style;
 }
+
+// ====================
+
+// poor cascade made worse by CSS splitting requires us to redefine the dashboard views' visual top padding
+.dashboard {
+  padding-top: 60px;
+}

lms/static/sass/application-extend1.scss.mako

@@ -0,0 +1,62 @@
+## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
+
+
+// lms - css application architecture (platform)
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+
+// BASE  *default edX offerings*
+// ====================
+
+// base - utilities
+@import 'base/reset';
+@import 'base/mixins';
+@import 'base/variables';
+
+## THEMING
+## -------
+## Set up this file to import an edX theme library if the environment
+## indicates that a theme should be used. The assumption is that the
+## theme resides outside of this main edX repository, in a directory
+## called themes/<theme-name>/, with its base Sass file in
+## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
+## point can be used to @import in as many other things as needed.
+% if env.get('THEME_NAME') is not None:
+  // import theme's Sass overrides
+  @import '${env.get('THEME_NAME')}';
+% endif
+
+@import 'base/base';
+
+// base - assets
+@import 'base/font_face';
+@import 'base/extends';
+@import 'base/animations';
+
+// base - starter
+@import 'base/base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/controls';
+
+// shared - platform
+@import 'multicourse/home';
+@import 'multicourse/dashboard';
+@import 'multicourse/account';
+@import 'multicourse/testcenter-register';
+@import 'multicourse/courses';
+@import 'multicourse/course_about';
+@import 'multicourse/jobs';
+@import 'multicourse/media-kit';
+@import 'multicourse/about_pages';
+@import 'multicourse/press_release';
+@import 'multicourse/password_reset';
+@import 'multicourse/error-pages';
+@import 'multicourse/help';
+@import 'multicourse/edge';
+
+## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution
+@import 'shame'; // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)

lms/static/sass/application-extend2.scss.mako

@@ -0,0 +1,54 @@
+## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
+
+
+// lms - css application architecture (platform)
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+
+// BASE  *default edX offerings*
+// ====================
+
+// base - utilities
+@import 'base/reset';
+@import 'base/mixins';
+@import 'base/variables';
+
+## THEMING
+## -------
+## Set up this file to import an edX theme library if the environment
+## indicates that a theme should be used. The assumption is that the
+## theme resides outside of this main edX repository, in a directory
+## called themes/<theme-name>/, with its base Sass file in
+## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
+## point can be used to @import in as many other things as needed.
+% if env.get('THEME_NAME') is not None:
+  // import theme's Sass overrides
+  @import '${env.get('THEME_NAME')}';
+% endif
+
+@import 'base/base';
+
+// base - assets
+@import 'base/font_face';
+@import 'base/extends';
+@import 'base/animations';
+
+// base - starter
+@import 'base/base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/controls';
+
+// base - specific views
+@import 'views/verification';
+@import 'views/shoppingcart';
+
+// applications
+@import 'discussion';
+@import 'news';
+
+## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution
+@import 'shame'; // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)

lms/static/sass/application.scss.mako

@@ -1,21 +1,16 @@
+## Note: This Sass infrastructure is repeated in application-extend1 and application-extend2, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
+
 // lms - css application architecture
 // ====================
 
 // libs and resets *do not edit*
 @import 'bourbon/bourbon'; // lib - bourbon
 
-// VENDOR + REBASE *referenced/used vendor presentation and reset*
-// ====================
-
-@import 'base/reset';
-@import 'vendor/font-awesome';
-@import 'vendor/responsive-carousel/responsive-carousel';
-@import 'vendor/responsive-carousel/responsive-carousel.slide';
-
 // BASE  *default edX offerings*
 // ====================
-// base - utilities
 
+// base - utilities
+@import 'base/reset';
 @import 'base/mixins';
 @import 'base/variables';
 
@@ -46,10 +41,6 @@
 @import 'elements/typography';
 @import 'elements/controls';
 
-// base - specific views
-@import 'views/verification';
-@import 'views/shoppingcart';
-
 // shared - course
 @import 'shared/forms';
 @import 'shared/footer';
@@ -60,24 +51,5 @@
 @import 'shared/activation_messages';
 @import 'shared/unsubscribe';
 
-// shared - platform
-@import 'multicourse/home';
-@import 'multicourse/dashboard';
-@import 'multicourse/account';
-@import 'multicourse/testcenter-register';
-@import 'multicourse/courses';
-@import 'multicourse/course_about';
-@import 'multicourse/jobs';
-@import 'multicourse/media-kit';
-@import 'multicourse/about_pages';
-@import 'multicourse/press_release';
-@import 'multicourse/password_reset';
-@import 'multicourse/error-pages';
-@import 'multicourse/help';
-@import 'multicourse/edge';
-
-// applications
-@import 'discussion';
-@import 'news';
-
+## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution
 @import 'shame'; // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)

lms/static/sass/elements/_typography.scss

@@ -194,3 +194,92 @@
 %t-weight5 {
   font-weight: 700;
 }
+
+// ====================
+
+// MISC: extends - type
+// application: canned headings
+%hd-lv1 {
+  @extend %t-title1;
+  @extend %t-weight1;
+  color: $m-gray-d4;
+  margin: 0 0 ($baseline*2) 0;
+}
+
+%hd-lv2 {
+  @extend %t-title4;
+  @extend %t-weight1;
+  margin: 0 0 ($baseline*0.75) 0;
+  border-bottom: 1px solid $m-gray-l3;
+  padding-bottom: ($baseline/2);
+  color: $m-gray-d4;
+}
+
+%hd-lv3 {
+  @extend %t-title6;
+  @extend %t-weight4;
+  margin: 0 0 ($baseline/4) 0;
+  color: $m-gray-d4;
+}
+
+%hd-lv4 {
+  @extend %t-title6;
+  @extend %t-weight2;
+  margin: 0 0 $baseline 0;
+  color: $m-gray-d4;
+}
+
+%hd-lv5 {
+  @extend %t-title7;
+  @extend %t-weight4;
+  margin: 0 0 ($baseline/4) 0;
+  color: $m-gray-d4;
+}
+
+// application: canned copy
+%copy-base {
+  @extend %t-copy-base;
+  color: $m-gray-d2;
+}
+
+%copy-lead1 {
+  @extend %t-copy-lead2;
+  color: $m-gray;
+}
+
+%copy-detail {
+  @extend %t-copy-sub1;
+  @extend %t-weight3;
+  color: $m-gray-d1;
+}
+
+%copy-metadata {
+  @extend %t-copy-sub2;
+  color: $m-gray-d1;
+
+
+  %copy-metadata-value {
+    @extend %t-weight2;
+  }
+
+  %copy-metadata-value {
+    @extend %t-weight4;
+  }
+}
+
+// application: canned links
+%copy-link {
+  border-bottom: 1px dotted transparent;
+
+  &:hover, &:active {
+    border-color: $link-color-d1;
+  }
+}
+
+%copy-badge {
+  @extend %t-title8;
+  @extend %t-weight5;
+  border-radius: ($baseline/5);
+  padding: ($baseline/2) $baseline;
+  text-transform: uppercase;
+}