chore(demo): fix style issues with ShadyCSS for Safari/IE

hotforfeature · Apr 13, 2017 · bd2186b · bd2186b
1 parent a5328e3
commit bd2186b
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 79 deletions.
diff --git a/demo/app/app.component.css b/demo/app/app.component.css
@@ -1,3 +1,47 @@
+html {
+  @apply --paper-font-body1;
+
+  --primary-color: var(--paper-deep-purple-500);
+  --primary-light-color: var(--paper-deep-purple-100);
+  --primary-dark-color: var(--paper-deep-purple-700);
+
+  --accent-color: var(--paper-amber-a200);
+  --accent-light-color: var(--paper-amber-a100);
+  --accent-dark-color: var(--paper-amber-a400);
+}
+
+[primary] {
+  color: var(--primary-color);
+}
+
+[accent] {
+  color: var(--accent-color);
+}
+
+h1 {
+  @apply --paper-font-display1;
+}
+
+h2 {
+  @apply --paper-font-headline;
+}
+
+h3 {
+  @apply --paper-font-title;
+}
+
+h4 {
+  @apply --paper-font-subhead;
+}
+
+h5 {
+  @apply --paper-font-body2;
+}
+
+h6 {
+  @apply --paper-font-caption;
+}
+
 app-header {
   @apply --shadow-elevation-4dp;
 

diff --git a/demo/app/app.component.ts b/demo/app/app.component.ts
@@ -1,29 +1,19 @@
-import { Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 
 import { CustomStyleService, PolymerProperty } from '../origami/origami';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  // styles and styleUrls both work
   styleUrls: ['./app.component.css'],
-  /*styles: [
-    `app-toolbar {
-      @apply --shadow-elevation-4dp;
-
-      background: var(--primary-color);
-      color: var(--dark-theme-text-color);
-    }`
-  ],*/
-  // encapsulation: ViewEncapsulation.Native
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent implements OnInit {
   @PolymerProperty() selectedTab: number = 1;
 
-  constructor(private elementRef: ElementRef, private customStyle: CustomStyleService) { }
+  constructor(private customStyle: CustomStyleService) { }
 
   ngOnInit() {
-    // this.elementRef is only required with ViewEncapsulation.Native
-    this.customStyle.updateCustomStyles(this.elementRef);
+    this.customStyle.updateCustomStyles();
   }
 }
diff --git a/demo/app/features/features.component.css b/demo/app/features/features.component.css
@@ -1,3 +1,7 @@
+iron-list {
+  position: relative; /* Fixes Safari/IE11 */
+}
+
 iron-icon.green {
   color: var(--paper-green-500);
 }

diff --git a/demo/assets/elements.html b/demo/assets/elements.html
@@ -1,9 +1,6 @@
 <link href="bower_components/app-layout/app-layout.html" rel="import">
 
 <link href="bower_components/iron-flex-layout/iron-flex-layout-classes.html" rel="import">
-<custom-style>
-  <style include="iron-flex iron-flex-alignment"></style>
-</custom-style>
 <link href="bower_components/iron-icons/iron-icons.html" rel="import">
 <link href="bower_components/iron-list/iron-list.html" rel="import">
 

diff --git a/demo/bower.json b/demo/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "demo",
   "dependencies": {
-    "polymer": "Polymer/polymer#2.0-preview",
+    "polymer": "Polymer/polymer#^2.0.0-rc.4",
     "paper-tabs": "PolymerElements/paper-tabs#2.0-preview",
     "app-layout": "PolymerElements/app-layout#2.0-preview",
     "paper-styles": "PolymerElements/paper-styles#2.0-preview",
@@ -11,8 +11,5 @@
     "iron-icons": "PolymerElements/iron-icons#2.0-preview",
     "paper-button": "PolymerElements/paper-button#2.0-preview",
     "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview"
-  },
-  "resolutions": {
-    "polymer": "^2.0.0-rc.1"
   }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -10,6 +10,10 @@
   <link href="assets/elements.html" rel="import">
 </head>
 <body>
+  <custom-style>
+    <style include="iron-flex iron-flex-alignment"></style>
+  </custom-style>
+
   <app-root>Loading...</app-root>
   <script>
     window.webComponentsReady = false;

diff --git a/demo/polyfills.ts b/demo/polyfills.ts
@@ -19,19 +19,19 @@
  */
 
 /** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/set';
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
 
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.

diff --git a/demo/styles.css b/demo/styles.css
@@ -1,40 +1,9 @@
-/* You can add global styles to this file, and also import other style files */
-body {
-  @apply --paper-font-body1;
-
-  --primary-color: var(--paper-deep-purple-500);
-  --primary-light-color: var(--paper-deep-purple-100);
-  --primary-dark-color: var(--paper-deep-purple-700);
-
-  --accent-color: var(--paper-amber-a200);
-  --accent-light-color: var(--paper-amber-a100);
-  --accent-dark-color: var(--paper-amber-a400);
-}
-
-h1 {
-  @apply --paper-font-display1;
-}
-
-h2 {
-  @apply --paper-font-headline;
-}
-
-h3 {
-  @apply --paper-font-title;
-}
-
-h4 {
-  @apply --paper-font-subhead;
-}
-
-h5 {
-  @apply --paper-font-body2;
-}
-
-h6 {
-  @apply --paper-font-caption;
-}
-
+/*
+Angular CLI stylesheets will be linked as external stylesheets in production builds.
+Avoid using @apply mixins (and custom CSS variables if targeting browsers that do not support them)
+in these stylesheets. They will not be <custom-style> wrapped, which means ShadyCSS will not apply
+the variables/mixins correctly.
+ */
 [padding] {
   padding: 16px;
 }
@@ -62,11 +31,3 @@ h6 {
 [padding-left] {
   padding-left: 16px;
 }
-
-[primary] {
-  color: var(--primary-color);
-}
-
-[accent] {
-  color: var(--accent-color);
-}