Merge pull request #532 from hannu/change-css-order

Change CSS order to prevent leakages when not using encapsulation
SC5 · Mar 27, 2015 · 019c4cb · 019c4cb
2 parents fe143b9 + ca29c30
commit 019c4cb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/lib/app/index.html b/lib/app/index.html
@@ -4,8 +4,6 @@
   <meta charset="UTF-8">
   <link rel="icon" href="assets/img/favicon.ico">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" type="text/css" data-noreload href="{{{appRoot}}}/css/app.css">
-  <link rel="stylesheet" type="text/css" href="{{{appRoot}}}/styleguide_at_rules.css">
   <script>
     (function() {
       'use strict';
@@ -16,17 +14,23 @@
         ],
         head = document.querySelector('head');
 
-      function addCssLink(href) {
+      function addCssLink(href, options) {
         var link = document.createElement('link');
         link.setAttribute('rel', 'stylesheet');
         link.setAttribute('type', 'text/css');
         link.setAttribute('href', href);
+        if (options && options.noReload) {
+          link.setAttribute('data-noreload', true);
+        }
         head.appendChild(link);
       }
 
       if (typeof head.createShadowRoot !== 'function') {
         userStyleFiles.forEach(addCssLink);
       }
+
+      addCssLink('{{{appRoot}}}/styleguide_at_rules.css');
+      addCssLink('{{{appRoot}}}/css/app.css', {noReload: true});
     }());
   </script>
   <script type="text/ng-template" id="userStyles.html">

diff --git a/lib/app/sass/app.scss b/lib/app/sass/app.scss
@@ -94,7 +94,8 @@ h4.sg,
 h5.sg {
   @include default-font;
   font-family: $primary-font;
-  font-weight: inherit;
+  font-weight: normal;
+  font-style: normal;
   line-height: 1.2;
   margin: 1.414em 0 .5em;
   color: #444;
@@ -398,6 +399,7 @@ $mobile: new-breakpoint(max-width 768px);
 
     h1 {
       font-family: $secondary-font;
+      font-style: normal;
       font-size: 1.8em;
       font-weight: 100;
       line-height: $header-height;
@@ -516,6 +518,7 @@ $mobile: new-breakpoint(max-width 768px);
 
 .sg.side-nav-toggle {
   font-family: $secondary-font;
+  font-style: normal;
 
   position: absolute;
   top: 2.0em;