spincycle/lib/spin/src/bower_components/iron-demo-helpers/demo-pages-shared-styles.html

A reactive message router and object manager that lets clients subscribe to object property changes on the server

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="../paper-styles/shadow.html">

<dom-module id="demo-pages-shared-styles">
  <template>
    <style>
      body {
        font-family: 'Roboto', 'Noto', sans-serif;
        font-size: 14px;
        margin: 0;
        padding: 24px;
        background-color: var(--paper-grey-50);
      }

      .horizontal-section-container {
        @apply(--layout-horizontal);
        @apply(--layout-center-justified);
        @apply(--layout-wrap);
      }

      .vertical-section-container {
        @apply(--layout-vertical);
        @apply(--center-justified);
      }

      .horizontal-section {
        background-color: white;
        padding: 24px;
        margin-right: 24px;
        min-width: 200px;

        @apply(--shadow-elevation-2dp);
      }

      .vertical-section {
        background-color: white;
        padding: 24px;
        margin: 0 24px 24px 24px;

        @apply(--shadow-elevation-2dp);
      }

      .centered {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
      }

      code {
        color: var(--google-grey-700);
      }
  
      demo-snippet {
        margin-bottom: 40px;
      }
      
      demo-snippet.centered-demo {
        --demo-snippet-demo: {
          @apply(--layout-horizontal);
          @apply(--layout-wrap);
          @apply(--layout-center-justified);
        }
      }
    </style>
  </template>
</dom-module>