third_party/polymer/v1_0/components-chromium/paper-styles/demo-pages.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10
  11 <link rel="import" href="../polymer/polymer.html">
  12
  13 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
  14
  15 <link rel="import" href="color.html">
  16 <link rel="import" href="typography.html">
  17 <link rel="import" href="shadow.html">
  18
  19 <style is="custom-style">
  20
  21   body {
  22     font-family: 'Roboto', 'Noto', sans-serif;
  23     font-size: 14px;
  24     margin: 0;
  25     padding: 24px;
  26     background-color: var(--paper-grey-50);
  27   }
  28
  29   .horizontal-section-container {
  30     @apply(--layout-horizontal);
  31     @apply(--layout-center-justified);
  32     @apply(--layout-wrap);
  33   }
  34
  35   .vertical-section-container {
  36     @apply(--layout-vertical);
  37     @apply(--center-justified);
  38   }
  39
  40   .horizontal-section {
  41     background-color: white;
  42     padding: 24px;
  43     margin-right: 24px;
  44     min-width: 200px;
  45
  46     @apply(--shadow-elevation-2dp);
  47   }
  48
  49   .vertical-section {
  50     background-color: white;
  51     padding: 24px;
  52     margin: 0 24px 24px 24px;
  53
  54     @apply(--shadow-elevation-2dp);
  55   }
  56
  57   .centered {
  58     max-width: 400px;
  59     margin-left: auto;
  60     margin-right: auto;
  61   }
  62
  63   code {
  64     color: var(--google-grey-700);
  65   }
  66
  67   /* TODO: remove this hack and use horizontal-section-container instead */
  68   body > div.layout.horizontal.center-justified {
  69     @apply(--layout-wrap);
  70   }
  71
  72 </style>