Add shared styles

Add the new Polymer 1.1.0 share styles approach.

Remove commented css

Remove import from my-greeting.html

This import is not need because it is in elements.html.

Remove an accidentally added word
This commit is contained in:
Chuck Horton
2015-08-24 11:25:31 -07:00
parent d439e7dd4d
commit b9de6920b9
5 changed files with 22 additions and 19 deletions

View File

@@ -36,5 +36,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<!-- Add your elements here -->
<link rel="import" href="../styles/app-theme.html">
<link rel="import" href="../styles/shared-styles.html">
<link rel="import" href="my-greeting/my-greeting.html">
<link rel="import" href="my-list/my-list.html">

View File

@@ -10,20 +10,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<dom-module id="my-greeting">
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
}
.page-title {
@apply(--paper-font-display2);
}
@media (max-width: 600px) {
.page-title {
font-size: 24px!important;
}
}
</style>
<h2 class="page-title"><span>{{greeting}}</span></h2>
<span class="paper-font-body2">Update text to change the greeting.</span>
@@ -48,4 +39,3 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</script>
</dom-module>
greeting

View File

@@ -53,6 +53,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<!-- endreplace-->
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles"></style>
</head>
<body unresolved class="fullbleed layout vertical">

View File

@@ -127,10 +127,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
height: 900px;
}
.page-title {
@apply(--paper-font-display2);
}
/* Breakpoints */
/* Small */
@@ -160,10 +156,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
background: white;
}
.page-title {
font-size: 24px;
}
}
/* Tablet+ */

View File

@@ -0,0 +1,16 @@
<!-- shared-styles.html -->
<dom-module id="shared-styles">
<template>
<style>
.page-title {
@apply(--paper-font-display2);
}
@media (max-width: 600px) {
.page-title {
font-size: 24px!important;
}
}
</style>
</template>
</dom-module>