javascript 聚合物的常见款式

Posted 2021-05-03

import '@polymer/polymer/polymer-element.js';
import '@polymer/paper-styles/paper-styles.js';

const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<dom-module id="global">
  <template>
    <style>
      .card {
        margin: 24px;
        padding: 16px;
        color: var(--paper-grey-600);
        border-radius: 5px;
        background-color: var(--paper-grey-50);
        @apply --shadow-elevation-8dp;
      }
      
      .horizontal {
        @apply --layout-horizontal;
      }
      
      .vertical {
        @apply --layout-vertical;
      }
      
      .start {
        @apply --layout-start-justified;
      }
      
      .end {
        @apply --layout-end-justified;
      }
      
      .center {
        @apply --layout-center-justified;
      }
      
      .justified {
        @apply --layout-justified;
      }
      
      .wrap {
        @apply --layout-wrap;
      }
      
      .title {
        @apply --paper-font-title;
        color: var(--paper-grey-900);
      }
        
      .subtitle {
        @apply --paper-font-subtitle;
        color: var(--paper-grey-700);
      }
        
      .description {
        @apply --paper-font-body1;
        color: var(--paper-grey-500);
      }
      
      .capitalize {
        text-transform: capitalize;
      }
    </style>
  </template>
</dom-module>`;

document.head.appendChild($_documentContainer.content);