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 <link rel="import" href="color.html">
  13 <link rel="import" href="shadow.html">
  14
  15 <style is="custom-style">
  16
  17   body {
  18     font-family: 'Roboto', 'Noto', sans-serif;
  19     font-size: 14px;
  20     margin: 0;
  21     padding: 24px;
  22     background-color: var(--paper-grey-50);
  23   }
  24
  25   .horizontal-section-container {
  26     @apply(--layout-horizontal);
  27     @apply(--layout-center-justified);
  28     @apply(--layout-wrap);
  29   }
  30
  31   .vertical-section-container {
  32     @apply(--layout-vertical);
  33     @apply(--center-justified);
  34   }
  35
  36   .horizontal-section {
  37     background-color: white;
  38     padding: 24px;
  39     margin-right: 24px;
  40     min-width: 200px;
  41
  42     @apply(--shadow-elevation-2dp);
  43   }
  44
  45   .vertical-section {
  46     background-color: white;
  47     padding: 24px;
  48     margin: 0 24px 24px 24px;
  49
  50     @apply(--shadow-elevation-2dp);
  51   }
  52
  53   .centered {
  54     max-width: 400px;
  55     margin-left: auto;
  56     margin-right: auto;
  57   }
  58
  59   /* TODO: remove this hack and use horizontal-section-container instead */
  60   body > div.layout.horizontal.center-justified {
  61     @apply(--layout-wrap);
  62   }
  63
  64 </style>