1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | import '@polymer/polymer/polymer-legacy.js';
|
13 | import '@polymer/iron-flex-layout/iron-flex-layout.js';
|
14 | import '@polymer/font-roboto/roboto.js';
|
15 | import {html} from '@polymer/polymer/lib/utils/html-tag.js';
|
16 |
|
17 | const template = html`
|
18 | <dom-module id="demo-pages-shared-styles">
|
19 | <template>
|
20 | <style>
|
21 | body {
|
22 | font-family: 'Roboto', 'Noto', sans-serif;
|
23 | font-size: 14px;
|
24 | margin: 0;
|
25 | padding: 24px;
|
26 | background-color: #fafafa;
|
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 | .centered {
|
41 | max-width: 600px;
|
42 | margin-left: auto;
|
43 | margin-right: auto;
|
44 | }
|
45 |
|
46 | demo-snippet.centered-demo {
|
47 | --demo-snippet-demo: {
|
48 | @apply --layout-horizontal;
|
49 | @apply --layout-wrap;
|
50 | @apply --layout-center-justified;
|
51 | };
|
52 | }
|
53 | </style>
|
54 | </template>
|
55 | </dom-module>
|
56 | `;
|
57 |
|
58 | template.setAttribute('style', 'display: none;');
|
59 | document.head.appendChild(template.content);
|