Studio: resolves IE notifications display issue and abstracts CSS to avoid IE selector/rule limit

STUD-815

cms/envs/common.py

@@ -258,6 +258,12 @@ PIPELINE_CSS = {
         ],
         'output_filename': 'css/cms-style-app.css',
     },
+    'style-app-extend1': {
+        'source_filenames': [
+            'sass/style-app-extend1.css',
+        ],
+        'output_filename': 'css/cms-style-app-extend1.css',
+    },
     'style-xmodule': {
         'source_filenames': [
             'sass/style-xmodule.css',

cms/static/sass/contexts/_ie.scss

@@ -4,6 +4,13 @@
 // CASE: less than or equal to IE9
 .lte9 {
 
+  // CASE: IE9 doesn't support css animations and negative positioning
+  .wrapper-notification {
+
+    &.is-shown {
+      bottom: 0;
+    }
+  }
 }
 
 // ====================

cms/static/sass/style-app-extend1.scss

@@ -0,0 +1,54 @@
+// studio - css architecture
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+
+// VENDOR + REBASE *referenced/used vendor presentation and reset*
+// ====================
+@import 'reset';
+
+// BASE  *default edX offerings*
+// ====================
+// base - utilities
+@import 'variables';
+@import 'mixins';
+@import 'mixins-inherited';
+
+// base - assets
+@import 'assets/fonts';
+@import 'assets/graphics'; // sprites, basic img/figure/svg styling
+@import 'assets/anims'; // animations
+
+// base - starter
+@import 'base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/icons'; // references to icons used
+@import 'elements/controls'; // buttons, link styles, sliders, etc.
+
+// base - specific views
+@import 'views/account';
+@import 'views/assets';
+@import 'views/updates';
+@import 'views/dashboard';
+@import 'views/export';
+@import 'views/index';
+@import 'views/import';
+@import 'views/outline';
+@import 'views/settings';
+@import 'views/static-pages';
+@import 'views/subsection';
+@import 'views/unit';
+@import 'views/users';
+@import 'views/checklists';
+@import 'views/textbooks';
+
+// base - contexts
+@import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs)
+
+// temp - inherited
+@import 'assets/content-types';
+
+@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/)

cms/static/sass/style-app.scss

@@ -38,28 +38,3 @@
 @import 'elements/modal'; // interstitial UI, dialogs, modal windows
 @import 'elements/vendor'; // overrides to vendor-provided styling
 @import 'elements/uploads';
-
-// base - specific views
-@import 'views/account';
-@import 'views/assets';
-@import 'views/updates';
-@import 'views/dashboard';
-@import 'views/export';
-@import 'views/index';
-@import 'views/import';
-@import 'views/outline';
-@import 'views/settings';
-@import 'views/static-pages';
-@import 'views/subsection';
-@import 'views/unit';
-@import 'views/users';
-@import 'views/checklists';
-@import 'views/textbooks';
-
-// base - contexts
-@import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs)
-
-// temp - inherited
-@import 'assets/content-types';
-
-@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/)

cms/templates/base.html

@@ -24,6 +24,7 @@
 
     <%static:css group='style-vendor'/>
     <%static:css group='style-app'/>
+    <%static:css group='style-app-extend1'/>
     <%static:css group='style-xmodule'/>
 
     <%include file="widgets/segment-io.html" />