CODEWITHSUNDEEP
csspolymerelement
Aliaksei
Aliaksei

Reputation: 1447

Polymer extend styles

shared-styles.html

<link rel="import" href="../bower_components/polymer/lib/elements/custom-style.html">

<dom-module id="shared-styles">
  <template>
    <style>
      .content {
        background-color: white;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
        margin: 20px;
      }

      .content-center {
        display: flex;
        min-width: 100vh;
        min-height: calc(100vh - 64px);
      }
    </style>
  </template>
</dom-module>

ForgotPassView.html

<link rel="import" href="../../shared-styles.html">

<dom-module id="forgotpass-view">
  <template>
    <style include="shared-styles">
      :host {
      }
    </style>

    <content-card id="contentCard"></content-card>
  </template>

  <script>
    class ForgotPassView extends Polymer.Element {
      static get is() {
        return 'forgotpass-view';
      }
    }

    window.customElements.define(ForgotPassView.is, ForgotPassView);
  </script>
</dom-module>

Hello. Tell me how to make ForgotPassView have own styles (:host?) And so used from shared-styles

Something like mix :host{} and .content-center{}

Upvotes: 2

Views: 49

Answers (1)

Vipul Solanki
Vipul Solanki

Reputation: 49

You can import your custom CSS like this.

  <link rel="import" href="../../shared-styles.html">

<dom-module id="forgotpass-view">
  <link rel="import" href="../../custom-styles.html">

<dom-module id="forgotpass-view">
<template>
  <style include="shared-styles">
    :host {
    }
  </style>

  <content-card id="contentCard">
    <paper-fab class="my-color">Test</paper-fab>
  </content-card>
</template>

<script>
  class ForgotPassView extends Polymer.Element {
    static get is() {
      return 'forgotpass-view';
    }
  }

  window.customElements.define(ForgotPassView.is, ForgotPassView);
</script>
</dom-module>
<template>
  <style include="shared-styles">
    :host {
    }
  </style>

  <content-card id="contentCard"></content-card>
</template>

<script>
  class ForgotPassView extends Polymer.Element {
    static get is() {
      return 'forgotpass-view';
    }
  }

  window.customElements.define(ForgotPassView.is, ForgotPassView);
</script>

Upvotes: 1

Related Questions