Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / polymer / v1_0 / components-chromium / paper-styles / demo-pages.html
blob44f22887276ae7ebcd30771cb5da677c4b4bea4c
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 -->
11 <link rel="import" href="../polymer/polymer.html">
13 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
15 <link rel="import" href="color.html">
16 <link rel="import" href="typography.html">
17 <link rel="import" href="shadow.html">
19 <style is="custom-style">
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);
29 .horizontal-section-container {
30 @apply(--layout-horizontal);
31 @apply(--layout-center-justified);
32 @apply(--layout-wrap);
35 .vertical-section-container {
36 @apply(--layout-vertical);
37 @apply(--center-justified);
40 .horizontal-section {
41 background-color: white;
42 padding: 24px;
43 margin-right: 24px;
44 min-width: 200px;
46 @apply(--shadow-elevation-2dp);
49 .vertical-section {
50 background-color: white;
51 padding: 24px;
52 margin: 0 24px 24px 24px;
54 @apply(--shadow-elevation-2dp);
57 .centered {
58 max-width: 400px;
59 margin-left: auto;
60 margin-right: auto;
63 code {
64 color: var(--google-grey-700);
67 /* TODO: remove this hack and use horizontal-section-container instead */
68 body > div.layout.horizontal.center-justified {
69 @apply(--layout-wrap);
72 </style>