polymer-neon-rails 1.0.0.pre.rc.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (154) hide show
  1. checksums.yaml +7 -0
  2. data/README.md +39 -0
  3. data/Rakefile +1 -0
  4. data/app/assets/components/iron-flex-layout/README.md +4 -0
  5. data/app/assets/components/iron-flex-layout/bower.json +21 -0
  6. data/app/assets/components/iron-flex-layout/classes/iron-flex-layout.html +307 -0
  7. data/app/assets/components/iron-flex-layout/classes/iron-shadow-flex-layout.html +302 -0
  8. data/app/assets/components/iron-flex-layout/demo/index.html +40 -0
  9. data/app/assets/components/iron-flex-layout/demo/x-app.html +106 -0
  10. data/app/assets/components/iron-flex-layout/iron-flex-layout.html +313 -0
  11. data/app/assets/components/iron-meta/README.md +46 -0
  12. data/app/assets/components/iron-meta/bower.json +28 -0
  13. data/app/assets/components/iron-meta/demo/index.html +45 -0
  14. data/app/assets/components/iron-meta/hero.svg +33 -0
  15. data/app/assets/components/iron-meta/index.html +27 -0
  16. data/app/assets/components/iron-meta/iron-meta.html +352 -0
  17. data/app/assets/components/iron-meta/test/basic.html +48 -0
  18. data/app/assets/components/iron-meta/test/index.html +30 -0
  19. data/app/assets/components/iron-meta/test/iron-meta.html +186 -0
  20. data/app/assets/components/iron-resizable-behavior/README.md +16 -0
  21. data/app/assets/components/iron-resizable-behavior/bower.json +26 -0
  22. data/app/assets/components/iron-resizable-behavior/demo/index.html +29 -0
  23. data/app/assets/components/iron-resizable-behavior/demo/src/x-app.html +114 -0
  24. data/app/assets/components/iron-resizable-behavior/index.html +25 -0
  25. data/app/assets/components/iron-resizable-behavior/iron-resizable-behavior.html +139 -0
  26. data/app/assets/components/iron-resizable-behavior/test/basic.html +263 -0
  27. data/app/assets/components/iron-resizable-behavior/test/index.html +31 -0
  28. data/app/assets/components/iron-resizable-behavior/test/test-elements.html +143 -0
  29. data/app/assets/components/iron-selector/README.md +50 -0
  30. data/app/assets/components/iron-selector/bower.json +31 -0
  31. data/app/assets/components/iron-selector/demo/index.html +66 -0
  32. data/app/assets/components/iron-selector/index.html +28 -0
  33. data/app/assets/components/iron-selector/iron-multi-selectable.html +120 -0
  34. data/app/assets/components/iron-selector/iron-selectable.html +307 -0
  35. data/app/assets/components/iron-selector/iron-selection.html +115 -0
  36. data/app/assets/components/iron-selector/iron-selector.html +71 -0
  37. data/app/assets/components/iron-selector/test/activate-event.html +138 -0
  38. data/app/assets/components/iron-selector/test/basic.html +150 -0
  39. data/app/assets/components/iron-selector/test/content-element.html +43 -0
  40. data/app/assets/components/iron-selector/test/content.html +168 -0
  41. data/app/assets/components/iron-selector/test/index.html +36 -0
  42. data/app/assets/components/iron-selector/test/multi.html +135 -0
  43. data/app/assets/components/iron-selector/test/next-previous.html +134 -0
  44. data/app/assets/components/iron-selector/test/selected-attribute.html +72 -0
  45. data/app/assets/components/iron-selector/test/template-repeat.html +110 -0
  46. data/app/assets/components/neon-animation/README.md +304 -0
  47. data/app/assets/components/neon-animation/animations/cascaded-animation.html +84 -0
  48. data/app/assets/components/neon-animation/animations/fade-in-animation.html +49 -0
  49. data/app/assets/components/neon-animation/animations/fade-out-animation.html +49 -0
  50. data/app/assets/components/neon-animation/animations/hero-animation.html +83 -0
  51. data/app/assets/components/neon-animation/animations/opaque-animation.html +46 -0
  52. data/app/assets/components/neon-animation/animations/ripple-animation.html +92 -0
  53. data/app/assets/components/neon-animation/animations/scale-down-animation.html +65 -0
  54. data/app/assets/components/neon-animation/animations/scale-up-animation.html +58 -0
  55. data/app/assets/components/neon-animation/animations/slide-down-animation.html +59 -0
  56. data/app/assets/components/neon-animation/animations/slide-from-left-animation.html +60 -0
  57. data/app/assets/components/neon-animation/animations/slide-from-right-animation.html +60 -0
  58. data/app/assets/components/neon-animation/animations/slide-left-animation.html +59 -0
  59. data/app/assets/components/neon-animation/animations/slide-right-animation.html +59 -0
  60. data/app/assets/components/neon-animation/animations/slide-up-animation.html +59 -0
  61. data/app/assets/components/neon-animation/animations/transform-animation.html +61 -0
  62. data/app/assets/components/neon-animation/bower.json +51 -0
  63. data/app/assets/components/neon-animation/demo/declarative/index.html +108 -0
  64. data/app/assets/components/neon-animation/demo/doc/basic.html +47 -0
  65. data/app/assets/components/neon-animation/demo/doc/my-animatable.html +73 -0
  66. data/app/assets/components/neon-animation/demo/doc/my-dialog.html +97 -0
  67. data/app/assets/components/neon-animation/demo/doc/types.html +53 -0
  68. data/app/assets/components/neon-animation/demo/dropdown/animated-dropdown.html +97 -0
  69. data/app/assets/components/neon-animation/demo/dropdown/index.html +54 -0
  70. data/app/assets/components/neon-animation/demo/grid/animated-grid.html +166 -0
  71. data/app/assets/components/neon-animation/demo/grid/fullsize-page-with-card.html +124 -0
  72. data/app/assets/components/neon-animation/demo/grid/index.html +70 -0
  73. data/app/assets/components/neon-animation/demo/index.html +6 -0
  74. data/app/assets/components/neon-animation/demo/list/full-view.html +122 -0
  75. data/app/assets/components/neon-animation/demo/list/index.html +29 -0
  76. data/app/assets/components/neon-animation/demo/list/list-demo.html +112 -0
  77. data/app/assets/components/neon-animation/demo/list/list-view.html +127 -0
  78. data/app/assets/components/neon-animation/demo/load/animated-grid.html +147 -0
  79. data/app/assets/components/neon-animation/demo/load/full-page.html +86 -0
  80. data/app/assets/components/neon-animation/demo/load/index.html +45 -0
  81. data/app/assets/components/neon-animation/demo/reprojection/animated-grid.html +166 -0
  82. data/app/assets/components/neon-animation/demo/reprojection/fullsize-page-with-card.html +124 -0
  83. data/app/assets/components/neon-animation/demo/reprojection/index.html +66 -0
  84. data/app/assets/components/neon-animation/demo/reprojection/reprojected-pages.html +42 -0
  85. data/app/assets/components/neon-animation/demo/shared.css +40 -0
  86. data/app/assets/components/neon-animation/demo/tiles/circles-page.html +110 -0
  87. data/app/assets/components/neon-animation/demo/tiles/index.html +77 -0
  88. data/app/assets/components/neon-animation/demo/tiles/squares-page.html +104 -0
  89. data/app/assets/components/neon-animation/guides/neon-animation.md +313 -0
  90. data/app/assets/components/neon-animation/index.html +30 -0
  91. data/app/assets/components/neon-animation/neon-animatable-behavior.html +156 -0
  92. data/app/assets/components/neon-animation/neon-animatable.html +54 -0
  93. data/app/assets/components/neon-animation/neon-animated-pages.html +208 -0
  94. data/app/assets/components/neon-animation/neon-animation-behavior.html +88 -0
  95. data/app/assets/components/neon-animation/neon-animation-runner-behavior.html +110 -0
  96. data/app/assets/components/neon-animation/neon-animation.html +17 -0
  97. data/app/assets/components/neon-animation/neon-animations.html +25 -0
  98. data/app/assets/components/neon-animation/neon-shared-element-animatable-behavior.html +37 -0
  99. data/app/assets/components/neon-animation/neon-shared-element-animation-behavior.html +66 -0
  100. data/app/assets/components/neon-animation/web-animations.html +11 -0
  101. data/app/assets/components/neon-elements/README.md +19 -0
  102. data/app/assets/components/neon-elements/bower.json +26 -0
  103. data/app/assets/components/paper-styles/README.md +3 -0
  104. data/app/assets/components/paper-styles/bower.json +27 -0
  105. data/app/assets/components/paper-styles/classes/global.html +96 -0
  106. data/app/assets/components/paper-styles/classes/shadow-layout.html +302 -0
  107. data/app/assets/components/paper-styles/classes/shadow.html +39 -0
  108. data/app/assets/components/paper-styles/classes/typography.html +171 -0
  109. data/app/assets/components/paper-styles/color.html +333 -0
  110. data/app/assets/components/paper-styles/default-theme.html +39 -0
  111. data/app/assets/components/paper-styles/demo-pages.html +72 -0
  112. data/app/assets/components/paper-styles/demo.css +25 -0
  113. data/app/assets/components/paper-styles/paper-styles-classes.html +14 -0
  114. data/app/assets/components/paper-styles/paper-styles.html +17 -0
  115. data/app/assets/components/paper-styles/shadow.html +61 -0
  116. data/app/assets/components/paper-styles/typography.html +240 -0
  117. data/app/assets/components/polymer/LICENSE.txt +27 -0
  118. data/app/assets/components/polymer/bower.json +26 -0
  119. data/app/assets/components/polymer/build.log +27 -0
  120. data/app/assets/components/polymer/polymer-micro.html +523 -0
  121. data/app/assets/components/polymer/polymer-mini.html +1368 -0
  122. data/app/assets/components/polymer/polymer.html +3768 -0
  123. data/app/assets/components/web-animations-js/COPYING +202 -0
  124. data/app/assets/components/web-animations-js/History.md +108 -0
  125. data/app/assets/components/web-animations-js/README.md +161 -0
  126. data/app/assets/components/web-animations-js/bower.json +31 -0
  127. data/app/assets/components/web-animations-js/web-animations-next-lite.min.js +17 -0
  128. data/app/assets/components/web-animations-js/web-animations-next-lite.min.js.map +1 -0
  129. data/app/assets/components/web-animations-js/web-animations-next.min.js +17 -0
  130. data/app/assets/components/web-animations-js/web-animations-next.min.js.map +1 -0
  131. data/app/assets/components/web-animations-js/web-animations.html +50 -0
  132. data/app/assets/components/web-animations-js/web-animations.min.js +17 -0
  133. data/app/assets/components/web-animations-js/web-animations.min.js.gz +0 -0
  134. data/app/assets/components/web-animations-js/web-animations.min.js.map +1 -0
  135. data/app/assets/components/webcomponentsjs/CustomElements.js +956 -0
  136. data/app/assets/components/webcomponentsjs/CustomElements.min.js +11 -0
  137. data/app/assets/components/webcomponentsjs/HTMLImports.js +1078 -0
  138. data/app/assets/components/webcomponentsjs/HTMLImports.min.js +11 -0
  139. data/app/assets/components/webcomponentsjs/MutationObserver.js +344 -0
  140. data/app/assets/components/webcomponentsjs/MutationObserver.min.js +11 -0
  141. data/app/assets/components/webcomponentsjs/README.md +125 -0
  142. data/app/assets/components/webcomponentsjs/ShadowDOM.js +4414 -0
  143. data/app/assets/components/webcomponentsjs/ShadowDOM.min.js +15 -0
  144. data/app/assets/components/webcomponentsjs/bower.json +14 -0
  145. data/app/assets/components/webcomponentsjs/build.log +33 -0
  146. data/app/assets/components/webcomponentsjs/package.json +31 -0
  147. data/app/assets/components/webcomponentsjs/webcomponents-lite.js +2300 -0
  148. data/app/assets/components/webcomponentsjs/webcomponents-lite.min.js +13 -0
  149. data/app/assets/components/webcomponentsjs/webcomponents.js +7112 -0
  150. data/app/assets/components/webcomponentsjs/webcomponents.min.js +15 -0
  151. data/lib/polymer-neon-rails.rb +2 -0
  152. data/lib/polymer-neon-rails/engine.rb +4 -0
  153. data/lib/polymer-neon-rails/version.rb +3 -0
  154. metadata +264 -0
@@ -0,0 +1,302 @@
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
+ <style>
11
+
12
+ /*******************************
13
+ Flex Layout
14
+ *******************************/
15
+
16
+ html /deep/ .layout.horizontal,
17
+ html /deep/ .layout.horizontal-reverse,
18
+ html /deep/ .layout.vertical,
19
+ html /deep/ .layout.vertical-reverse {
20
+ display: -ms-flexbox;
21
+ display: -webkit-flex;
22
+ display: flex;
23
+ }
24
+
25
+ html /deep/ .layout.inline {
26
+ display: -ms-inline-flexbox;
27
+ display: -webkit-inline-flex;
28
+ display: inline-flex;
29
+ }
30
+
31
+ html /deep/ .layout.horizontal {
32
+ -ms-flex-direction: row;
33
+ -webkit-flex-direction: row;
34
+ flex-direction: row;
35
+ }
36
+
37
+ html /deep/ .layout.horizontal-reverse {
38
+ -ms-flex-direction: row-reverse;
39
+ -webkit-flex-direction: row-reverse;
40
+ flex-direction: row-reverse;
41
+ }
42
+
43
+ html /deep/ .layout.vertical {
44
+ -ms-flex-direction: column;
45
+ -webkit-flex-direction: column;
46
+ flex-direction: column;
47
+ }
48
+
49
+ html /deep/ .layout.vertical-reverse {
50
+ -ms-flex-direction: column-reverse;
51
+ -webkit-flex-direction: column-reverse;
52
+ flex-direction: column-reverse;
53
+ }
54
+
55
+ html /deep/ .layout.wrap {
56
+ -ms-flex-wrap: wrap;
57
+ -webkit-flex-wrap: wrap;
58
+ flex-wrap: wrap;
59
+ }
60
+
61
+ html /deep/ .layout.wrap-reverse {
62
+ -ms-flex-wrap: wrap-reverse;
63
+ -webkit-flex-wrap: wrap-reverse;
64
+ flex-wrap: wrap-reverse;
65
+ }
66
+
67
+ html /deep/ .flex-auto {
68
+ -ms-flex: 1 1 auto;
69
+ -webkit-flex: 1 1 auto;
70
+ flex: 1 1 auto;
71
+ }
72
+
73
+ html /deep/ .flex-none {
74
+ -ms-flex: none;
75
+ -webkit-flex: none;
76
+ flex: none;
77
+ }
78
+
79
+ html /deep/ .flex,
80
+ html /deep/ .flex-1 {
81
+ -ms-flex: 1;
82
+ -webkit-flex: 1;
83
+ flex: 1;
84
+ }
85
+
86
+ html /deep/ .flex-2 {
87
+ -ms-flex: 2;
88
+ -webkit-flex: 2;
89
+ flex: 2;
90
+ }
91
+
92
+ html /deep/ .flex-3 {
93
+ -ms-flex: 3;
94
+ -webkit-flex: 3;
95
+ flex: 3;
96
+ }
97
+
98
+ html /deep/ .flex-4 {
99
+ -ms-flex: 4;
100
+ -webkit-flex: 4;
101
+ flex: 4;
102
+ }
103
+
104
+ html /deep/ .flex-5 {
105
+ -ms-flex: 5;
106
+ -webkit-flex: 5;
107
+ flex: 5;
108
+ }
109
+
110
+ html /deep/ .flex-6 {
111
+ -ms-flex: 6;
112
+ -webkit-flex: 6;
113
+ flex: 6;
114
+ }
115
+
116
+ html /deep/ .flex-7 {
117
+ -ms-flex: 7;
118
+ -webkit-flex: 7;
119
+ flex: 7;
120
+ }
121
+
122
+ html /deep/ .flex-8 {
123
+ -ms-flex: 8;
124
+ -webkit-flex: 8;
125
+ flex: 8;
126
+ }
127
+
128
+ html /deep/ .flex-9 {
129
+ -ms-flex: 9;
130
+ -webkit-flex: 9;
131
+ flex: 9;
132
+ }
133
+
134
+ html /deep/ .flex-10 {
135
+ -ms-flex: 10;
136
+ -webkit-flex: 10;
137
+ flex: 10;
138
+ }
139
+
140
+ html /deep/ .flex-11 {
141
+ -ms-flex: 11;
142
+ -webkit-flex: 11;
143
+ flex: 11;
144
+ }
145
+
146
+ html /deep/ .flex-12 {
147
+ -ms-flex: 12;
148
+ -webkit-flex: 12;
149
+ flex: 12;
150
+ }
151
+
152
+ /* alignment in cross axis */
153
+
154
+ html /deep/ .layout.start {
155
+ -ms-flex-align: start;
156
+ -webkit-align-items: flex-start;
157
+ align-items: flex-start;
158
+ }
159
+
160
+ html /deep/ .layout.center,
161
+ html /deep/ .layout.center-center {
162
+ -ms-flex-align: center;
163
+ -webkit-align-items: center;
164
+ align-items: center;
165
+ }
166
+
167
+ html /deep/ .layout.end {
168
+ -ms-flex-align: end;
169
+ -webkit-align-items: flex-end;
170
+ align-items: flex-end;
171
+ }
172
+
173
+ /* alignment in main axis */
174
+
175
+ html /deep/ .layout.start-justified {
176
+ -ms-flex-pack: start;
177
+ -webkit-justify-content: flex-start;
178
+ justify-content: flex-start;
179
+ }
180
+
181
+ html /deep/ .layout.center-justified,
182
+ html /deep/ .layout.center-center {
183
+ -ms-flex-pack: center;
184
+ -webkit-justify-content: center;
185
+ justify-content: center;
186
+ }
187
+
188
+ html /deep/ .layout.end-justified {
189
+ -ms-flex-pack: end;
190
+ -webkit-justify-content: flex-end;
191
+ justify-content: flex-end;
192
+ }
193
+
194
+ html /deep/ .layout.around-justified {
195
+ -ms-flex-pack: around;
196
+ -webkit-justify-content: space-around;
197
+ justify-content: space-around;
198
+ }
199
+
200
+ html /deep/ .layout.justified {
201
+ -ms-flex-pack: justify;
202
+ -webkit-justify-content: space-between;
203
+ justify-content: space-between;
204
+ }
205
+
206
+ /* self alignment */
207
+
208
+ html /deep/ .self-start {
209
+ -ms-align-self: flex-start;
210
+ -webkit-align-self: flex-start;
211
+ align-self: flex-start;
212
+ }
213
+
214
+ html /deep/ .self-center {
215
+ -ms-align-self: center;
216
+ -webkit-align-self: center;
217
+ align-self: center;
218
+ }
219
+
220
+ html /deep/ .self-end {
221
+ -ms-align-self: flex-end;
222
+ -webkit-align-self: flex-end;
223
+ align-self: flex-end;
224
+ }
225
+
226
+ html /deep/ .self-stretch {
227
+ -ms-align-self: stretch;
228
+ -webkit-align-self: stretch;
229
+ align-self: stretch;
230
+ }
231
+
232
+ /*******************************
233
+ Other Layout
234
+ *******************************/
235
+
236
+ html /deep/ .block {
237
+ display: block;
238
+ }
239
+
240
+ /* IE 10 support for HTML5 hidden attr */
241
+ html /deep/ [hidden] {
242
+ display: none !important;
243
+ }
244
+
245
+ html /deep/ .invisible {
246
+ visibility: hidden !important;
247
+ }
248
+
249
+ html /deep/ .relative {
250
+ position: relative;
251
+ }
252
+
253
+ html /deep/ .fit {
254
+ position: absolute;
255
+ top: 0;
256
+ right: 0;
257
+ bottom: 0;
258
+ left: 0;
259
+ }
260
+
261
+ body.fullbleed {
262
+ margin: 0;
263
+ height: 100vh;
264
+ }
265
+
266
+ html /deep/ .scroll {
267
+ -webkit-overflow-scrolling: touch;
268
+ overflow: auto;
269
+ }
270
+
271
+ .fixed-bottom,
272
+ .fixed-left,
273
+ .fixed-right,
274
+ .fixed-top {
275
+ position: fixed;
276
+ }
277
+
278
+ html /deep/ .fixed-top {
279
+ top: 0;
280
+ left: 0;
281
+ right: 0;
282
+ }
283
+
284
+ html /deep/ .fixed-right {
285
+ top: 0;
286
+ right: 0;
287
+ botttom: 0;
288
+ }
289
+
290
+ html /deep/ .fixed-bottom {
291
+ right: 0;
292
+ bottom: 0;
293
+ left: 0;
294
+ }
295
+
296
+ html /deep/ .fixed-left {
297
+ top: 0;
298
+ botttom: 0;
299
+ left: 0;
300
+ }
301
+
302
+ </style>
@@ -0,0 +1,39 @@
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
+ <style>
12
+ .shadow-transition {
13
+ transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
14
+ }
15
+
16
+ .shadow-elevation-1 {
17
+ box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
18
+ }
19
+
20
+ .shadow-elevation-2 {
21
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2),
22
+ 0 6px 10px 0 rgba(0, 0, 0, 0.3);
23
+ }
24
+
25
+ .shadow-elevation-3 {
26
+ box-shadow: 0 11px 7px 0 rgba(0, 0, 0, 0.19),
27
+ 0 13px 25px 0 rgba(0, 0, 0, 0.3);
28
+ }
29
+
30
+ .shadow-elevation-4 {
31
+ box-shadow: 0 14px 12px 0 rgba(0, 0, 0, 0.17),
32
+ 0 20px 40px 0 rgba(0, 0, 0, 0.3);
33
+ }
34
+
35
+ .shadow-elevation-5 {
36
+ box-shadow: 0 17px 17px 0 rgba(0, 0, 0, 0.15),
37
+ 0 27px 55px 0 rgba(0, 0, 0, 0.3);
38
+ }
39
+ </style>
@@ -0,0 +1,171 @@
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
+ <!-- TODO(nevir): Should we upgrade Polymer/font-roboto to the final font? -->
11
+ <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
12
+ <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Inconsolata:400,700">
13
+
14
+ <!--
15
+ Typographic styles are provided matching the Material Design standard styles:
16
+ http://www.google.com/design/spec/style/typography.html#typography-standard-styles
17
+
18
+ To make use of them, apply a `paper-font-<style>` class to elements, matching
19
+ the font style you wish it to inherit.
20
+
21
+ <header class="paper-font-display2">Hey there!</header>
22
+
23
+ Note that these are English/Latin centric styles. You may need to further adjust
24
+ line heights and weights for CJK typesetting. See the notes in the Material
25
+ Design typography section.
26
+ -->
27
+ <style>
28
+
29
+ .paper-font-display4,
30
+ .paper-font-display3,
31
+ .paper-font-display2,
32
+ .paper-font-display1,
33
+ .paper-font-headline,
34
+ .paper-font-title,
35
+ .paper-font-subhead,
36
+ .paper-font-body2,
37
+ .paper-font-body1,
38
+ .paper-font-caption,
39
+ .paper-font-menu,
40
+ .paper-font-button {
41
+ font-family: 'Roboto', 'Noto', sans-serif;
42
+ -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
43
+ }
44
+
45
+ .paper-font-code2,
46
+ .paper-font-code1 {
47
+ font-family: 'Inconsolata', 'Consolas', 'Source Code Pro', 'Monaco', 'Menlo', monospace;
48
+ -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
49
+ }
50
+
51
+ /* Opt for better kerning for headers & other short labels. */
52
+ .paper-font-display4,
53
+ .paper-font-display3,
54
+ .paper-font-display2,
55
+ .paper-font-display1,
56
+ .paper-font-headline,
57
+ .paper-font-title,
58
+ .paper-font-subhead,
59
+ .paper-font-menu,
60
+ .paper-font-button {
61
+ text-rendering: optimizeLegibility;
62
+ }
63
+
64
+ /*
65
+ "Line wrapping only applies to Body, Subhead, Headline, and the smaller Display
66
+ styles. All other styles should exist as single lines."
67
+ */
68
+ .paper-font-display4,
69
+ .paper-font-display3,
70
+ .paper-font-title,
71
+ .paper-font-caption,
72
+ .paper-font-menu,
73
+ .paper-font-button {
74
+ white-space: nowrap;
75
+ overflow: hidden;
76
+ text-overflow: ellipsis;
77
+ }
78
+
79
+ .paper-font-display4 {
80
+ font-size: 112px;
81
+ font-weight: 300;
82
+ letter-spacing: -.044em;
83
+ line-height: 120px;
84
+ }
85
+
86
+ .paper-font-display3 {
87
+ font-size: 56px;
88
+ font-weight: 400;
89
+ letter-spacing: -.026em;
90
+ line-height: 60px;
91
+ }
92
+
93
+ .paper-font-display2 {
94
+ font-size: 45px;
95
+ font-weight: 400;
96
+ letter-spacing: -.018em;
97
+ line-height: 48px;
98
+ }
99
+
100
+ .paper-font-display1 {
101
+ font-size: 34px;
102
+ font-weight: 400;
103
+ letter-spacing: -.01em;
104
+ line-height: 40px;
105
+ }
106
+
107
+ .paper-font-headline {
108
+ font-size: 24px;
109
+ font-weight: 400;
110
+ letter-spacing: -.012em;
111
+ line-height: 32px;
112
+ }
113
+
114
+ .paper-font-title {
115
+ font-size: 20px;
116
+ font-weight: 500;
117
+ line-height: 28px;
118
+ }
119
+
120
+ .paper-font-subhead {
121
+ font-size: 16px;
122
+ font-weight: 400;
123
+ line-height: 24px;
124
+ }
125
+
126
+ .paper-font-body2 {
127
+ font-size: 14px;
128
+ font-weight: 500;
129
+ line-height: 24px;
130
+ }
131
+
132
+ .paper-font-body1 {
133
+ font-size: 14px;
134
+ font-weight: 400;
135
+ line-height: 20px;
136
+ }
137
+
138
+ .paper-font-caption {
139
+ font-size: 12px;
140
+ font-weight: 400;
141
+ letter-spacing: 0.011em;
142
+ line-height: 20px;
143
+ }
144
+
145
+ .paper-font-menu {
146
+ font-size: 13px;
147
+ font-weight: 500;
148
+ line-height: 24px;
149
+ }
150
+
151
+ .paper-font-button {
152
+ font-size: 14px;
153
+ font-weight: 500;
154
+ letter-spacing: 0.018em;
155
+ line-height: 24px;
156
+ text-transform: uppercase;
157
+ }
158
+
159
+ .paper-font-code2 {
160
+ font-size: 14px;
161
+ font-weight: 700;
162
+ line-height: 20px;
163
+ }
164
+
165
+ .paper-font-code1 {
166
+ font-size: 14px;
167
+ font-weight: 700;
168
+ line-height: 20px;
169
+ }
170
+
171
+ </style>