import shared styles BEFORE element styles

UCDavisLibrary · Mar 12, 2021 · 801b7ff · 801b7ff
1 parent 9dcdbe5
commit 801b7ff
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 14 deletions.
diff --git a/services/ucd-lib-client/client/public/elements/pages/components/app-components.js b/services/ucd-lib-client/client/public/elements/pages/components/app-components.js
@@ -1,6 +1,5 @@
 import { LitElement } from 'lit-element';
 import render from "./app-components.tpl.js";
-import { sharedStyles } from "../../styles/shared-styles";
 
 import "../../components/graphics/dams-watercolor";
 import "../../components/graphics/dams-watercolor-overlay";
@@ -23,10 +22,6 @@ export default class AppComponents extends LitElement {
     };
   }
 
-  static get styles() {
-    return [sharedStyles];
-  }
-
   constructor() {
     super();
     this.render = render.bind(this);

diff --git a/services/ucd-lib-client/client/public/elements/pages/components/app-components.tpl.js b/services/ucd-lib-client/client/public/elements/pages/components/app-components.tpl.js
@@ -1,10 +1,12 @@
 import { html } from 'lit-element';
+import { sharedStyles } from "../../styles/shared-styles";
 import SharedHtml from '../../utils/shared-html';
 
 export default function render() { 
 return html`
 
 <style>
+  ${sharedStyles}
   :host {
     display: block;
     background-color: var(--color-white);
@@ -72,6 +74,7 @@ return html`
   <section>
     <h2>Collections Preview Card</h2>
     ${ SharedHtml.headerDots() }
+    <p>Use the <code>.collection</code> property to populate the card.</p>
     <div class="collection-cards">
       <dams-collection-card
         href="https://google.com"

diff --git a/services/ucd-lib-client/client/public/elements/pages/home/app-home.js b/services/ucd-lib-client/client/public/elements/pages/home/app-home.js
@@ -12,14 +12,11 @@ import "../../components/filterButton";
 import "../../components/cards/dams-collection-card";
 
 import render from './app-home.tpl.js';
-//import "../../styles/shared-styles";
 
 import RecordInterface from "../../interfaces/RecordInterface"; 
 import AppStateInterface from "../../interfaces/AppStateInterface";
 import CollectionInterface from "../../interfaces/CollectionInterface";
 
-import { sharedStyles } from "../../styles/shared-styles";
-
 /**
  * @class AppHome
  * @description home page is rendered to the DAMS v2
@@ -49,10 +46,6 @@ class AppHome extends Mixin(LitElement)
     // console.log(this.FcAppConfigModel.getFeaturedImages());
   }
 
-  static get styles() {
-    return [sharedStyles];
-  }
-
   /**
    * @method ready
    * @description It gets the model information for the Collections when 

diff --git a/services/ucd-lib-client/client/public/elements/pages/home/app-home.tpl.js b/services/ucd-lib-client/client/public/elements/pages/home/app-home.tpl.js
@@ -1,10 +1,12 @@
 import { html } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { styleMap } from 'lit-html/directives/style-map';
+import { sharedStyles } from "../../styles/shared-styles";
 
 export default function render() { 
 return html`
 <style>
+  ${sharedStyles}
   :host {
     display: block;
     position: relative;

diff --git a/services/ucd-lib-client/client/public/elements/styles/shared-styles.js b/services/ucd-lib-client/client/public/elements/styles/shared-styles.js
@@ -1,4 +1,3 @@
-import { css, unsafeCSS } from 'lit-element';
 import ucdCssProps from "./campus-theme-properties.css";
 import ucdCss from "./campus-theme.css";
 import damsCssProps from "./dams-styles-properties.css";
@@ -17,4 +16,4 @@ dmEle.id = 'shared-styles';
 dmEle.appendChild(templateEle);
 document.head.appendChild(dmEle);
 
-export const sharedStyles = css`${unsafeCSS(ucdCss + damsCss)}`;
+export const sharedStyles = `${ucdCss + damsCss}`;