update polymer

This commit is contained in:
Luke Pulverenti 2015-10-27 10:58:38 -04:00
parent 6825ae319e
commit 2d53ff29c5
106 changed files with 3070 additions and 1567 deletions

View file

@ -1,6 +1,6 @@
{
"name": "paper-styles",
"version": "1.0.11",
"version": "1.0.12",
"description": "Common (global) styles for Material Design elements.",
"authors": [
"The Polymer Authors"
@ -26,13 +26,14 @@
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0"
},
"_release": "1.0.11",
"_release": "1.0.12",
"_resolution": {
"type": "version",
"tag": "v1.0.11",
"commit": "347542e9ebe3e6e5f0830ee10e1c20c12956ff2c"
"tag": "v1.0.12",
"commit": "8ac5128a38249982982b3a1b3533d417d2dd7f18"
},
"_source": "git://github.com/PolymerElements/paper-styles.git",
"_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{
"name": "paper-styles",
"version": "1.0.11",
"version": "1.0.12",
"description": "Common (global) styles for Material Design elements.",
"authors": [
"The Polymer Authors"
@ -26,6 +26,7 @@
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0"
}
}

View file

@ -22,271 +22,246 @@
<link rel="import" href="../paper-styles.html">
<link rel="import" href="../demo-pages.html">
<style>
.redlines {
background: linear-gradient(0deg, transparent, transparent 3.5px, rgba(255,0,0,0.2) 3.5px, rgba(255,0,0,0.2) 4px);
background-size: 100% 4px;
}
.paragraph {
margin-bottom: 20px;
}
</style>
</head>
<style>
.redlines {
background: linear-gradient(0deg, transparent, transparent 3.5px, rgba(255,0,0,0.2) 3.5px, rgba(255,0,0,0.2) 4px);
background-size: 100% 4px;
}
.paragraph {
margin-bottom: 20px;
}
</style>
<style is="custom-style">
.paper-font-display4 {
@apply(--paper-font-display4);
}
.paper-font-display3 {
@apply(--paper-font-display3);
}
.paper-font-display2 {
@apply(--paper-font-display2);
}
.paper-font-display1 {
@apply(--paper-font-display1);
}
.paper-font-headline {
@apply(--paper-font-headline);
}
.paper-font-title {
@apply(--paper-font-title);
}
.paper-font-subhead {
@apply(--paper-font-subhead);
}
.paper-font-body2 {
@apply(--paper-font-body2);
}
.paper-font-body1 {
@apply(--paper-font-body1);
}
.paper-font-caption {
@apply(--paper-font-caption);
}
.paper-font-menu {
@apply(--paper-font-menu);
}
.paper-font-button {
@apply(--paper-font-button);
}
.mobile-app {
max-width: 320px;
}
.toolbar {
height: 144px;
padding: 16px;
background: var(--default-primary-color);
color: var(--text-primary-color);
@apply(--paper-font-display1);
}
.item, .disabled-item {
position: relative;
padding: 8px;
border: 1px solid;
border-color: var(--divider-color);
border-top: 0;
}
.item .primary {
color: var(--primary-text-color);
@apply(--paper-font-body2);
}
.item .secondary {
color: var(--secondary-text-color);
@apply(--paper-font-body1);
}
.disabled-item {
color: var(--disabled-text-color);
@apply(--paper-font-body2);
}
.fab {
position: absolute;
box-sizing: border-box;
padding: 8px;
width: 56px;
height: 56px;
right: 16px;
top: -28px;
border-radius: 50%;
text-align: center;
background: var(--accent-color);
color: var(--text-primary-color);
@apply(--paper-font-display1);
}
.shadow {
display: inline-block;
padding: 8px;
margin: 16px;
height: 50px;
width: 50px;
}
.shadow-2dp {
@apply(--shadow-elevation-2dp);
}
.shadow-3dp {
@apply(--shadow-elevation-3dp);
}
.shadow-4dp {
@apply(--shadow-elevation-4dp);
}
.shadow-6dp {
@apply(--shadow-elevation-6dp);
}
.shadow-8dp {
@apply(--shadow-elevation-8dp);
}
.shadow-16dp {
@apply(--shadow-elevation-16dp);
}
</style>
<body unresolved>
<h1>paper-styles</h1>
<!-- FIXME remove when https://github.com/Polymer/polymer/issues/1415 is resolved -->
<dom-module id="x-demo">
<section id="default-theme">
<h2>default-theme.html</h2>
<style>
<section class="mobile-app">
<div class="toolbar">
Title
</div>
<div class="item">
<div class="fab">+</div>
<div class="primary">Primary text</div>
<div class="secondary">Secondary text</div>
</div>
<div class="disabled-item">
Disabled
</div>
</section>
</section>
.paper-font-display4 {
@apply(--paper-font-display4);
}
<section id="typography">
<h2>typography.html</h2>
<p>
Grumpy wizards make toxic brew for the evil Queen and Jack.
</p>
<section class="redlines paragraph">
<div class="paper-font-display4">Display 4</div>
<div class="paper-font-display3">Display 3</div>
<div class="paper-font-display2">Display 2</div>
<div class="paper-font-display1">Display 1</div>
<div class="paper-font-headline">Headline</div>
<div class="paper-font-title">Title</div>
<div class="paper-font-subhead">Subhead</div>
<div class="paper-font-body2">Body 2</div>
<div class="paper-font-body1">Body 1</div>
<div class="paper-font-caption">Caption</div>
<div class="paper-font-menu">Menu</div>
<div class="paper-font-button">Button</div>
</section>
.paper-font-display3 {
@apply(--paper-font-display3);
}
<h3>Paragraphs</h3>
.paper-font-display2 {
@apply(--paper-font-display2);
}
<h4>body2</h4>
<section class="paper-font-body2 redlines">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
tincidunt dui sit amet mi auctor, ac gravida magna aliquam. Fusce quis
purus elementum, tempus nisi vel, volutpat nulla. Vestibulum mollis
dictum tellus, vulputate porttitor arcu. Curabitur imperdiet risus id
egestas accumsan. Donec lectus felis, dignissim id iaculis sit amet,
faucibus in leo.
</p>
<p>
Mauris id urna ac ante ultrices commodo a imperdiet elit. Vivamus
interdum neque magna, eget dapibus est auctor et. Donec accumsan
libero nec augue scelerisque, ac egestas ante tincidunt. Proin
sollicitudin, mi eget sagittis mollis, arcu orci scelerisque turpis, a
sollicitudin tellus quam non sapien.
</p>
</section>
.paper-font-display1 {
@apply(--paper-font-display1);
}
<h4>body1</h4>
<section class="paper-font-body1 redlines">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
tincidunt dui sit amet mi auctor, ac gravida magna aliquam. Fusce quis
purus elementum, tempus nisi vel, volutpat nulla. Vestibulum mollis
dictum tellus, vulputate porttitor arcu. Curabitur imperdiet risus id
egestas accumsan. Donec lectus felis, dignissim id iaculis sit amet,
faucibus in leo.
</p>
<p>
Mauris id urna ac ante ultrices commodo a imperdiet elit. Vivamus
interdum neque magna, eget dapibus est auctor et. Donec accumsan
libero nec augue scelerisque, ac egestas ante tincidunt. Proin
sollicitudin, mi eget sagittis mollis, arcu orci scelerisque turpis, a
sollicitudin tellus quam non sapien.
</p>
</section>
</section>
.paper-font-headline {
@apply(--paper-font-headline);
}
.paper-font-title {
@apply(--paper-font-title);
}
.paper-font-subhead {
@apply(--paper-font-subhead);
}
.paper-font-body2 {
@apply(--paper-font-body1);
}
.paper-font-body1 {
@apply(--paper-font-body1);
}
.paper-font-caption {
@apply(--paper-font-caption);
}
.paper-font-menu {
@apply(--paper-font-menu);
}
.paper-font-button {
@apply(--paper-font-button);
}
.mobile-app {
max-width: 320px;
}
.toolbar {
height: 144px;
padding: 16px;
background: var(--default-primary-color);
color: var(--text-primary-color);
@apply(--paper-font-display1);
}
.item, .disabled-item {
position: relative;
padding: 8px;
border: 1px solid;
border-color: var(--divider-color);
border-top: 0;
}
.item .primary {
color: var(--primary-text-color);
@apply(--paper-font-body2);
}
.item .secondary {
color: var(--secondary-text-color);
@apply(--paper-font-body1);
}
.disabled-item {
color: var(--disabled-text-color);
@apply(--paper-font-body2);
}
.fab {
position: absolute;
box-sizing: border-box;
padding: 8px;
width: 56px;
height: 56px;
right: 16px;
top: -28px;
border-radius: 50%;
text-align: center;
background: var(--accent-color);
color: var(--text-primary-color);
@apply(--paper-font-display1);
}
.shadow {
display: inline-block;
padding: 8px;
margin: 16px;
height: 50px;
width: 50px;
}
.shadow-2dp {
@apply(--shadow-elevation-2dp);
}
.shadow-3dp {
@apply(--shadow-elevation-3dp);
}
.shadow-4dp {
@apply(--shadow-elevation-4dp);
}
.shadow-6dp {
@apply(--shadow-elevation-6dp);
}
.shadow-8dp {
@apply(--shadow-elevation-8dp);
}
.shadow-16dp {
@apply(--shadow-elevation-16dp);
}
</style>
<template>
<h1>paper-styles</h1>
<section id="default-theme">
<h2>default-theme.html</h2>
<section class="mobile-app">
<div class="toolbar">
Title
</div>
<div class="item">
<div class="fab">+</div>
<div class="primary">Primary text</div>
<div class="secondary">Secondary text</div>
</div>
<div class="disabled-item">
Disabled
</div>
</section>
</section>
<section id="typography">
<h2>typography.html</h2>
<p>
Grumpy wizards make toxic brew for the evil Queen and Jack.
</p>
<section class="redlines paragraph">
<div class="paper-font-display4">Display 4</div>
<div class="paper-font-display3">Display 3</div>
<div class="paper-font-display2">Display 2</div>
<div class="paper-font-display1">Display 1</div>
<div class="paper-font-headline">Headline</div>
<div class="paper-font-title">Title</div>
<div class="paper-font-subhead">Subhead</div>
<div class="paper-font-body2">Body 2</div>
<div class="paper-font-body1">Body 1</div>
<div class="paper-font-caption">Caption</div>
<div class="paper-font-menu">Menu</div>
<div class="paper-font-button">Button</div>
</section>
<h3>Paragraphs</h3>
<h4>body2</h4>
<section class="paper-font-body2 redlines">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
tincidunt dui sit amet mi auctor, ac gravida magna aliquam. Fusce quis
purus elementum, tempus nisi vel, volutpat nulla. Vestibulum mollis
dictum tellus, vulputate porttitor arcu. Curabitur imperdiet risus id
egestas accumsan. Donec lectus felis, dignissim id iaculis sit amet,
faucibus in leo.
</p>
<p>
Mauris id urna ac ante ultrices commodo a imperdiet elit. Vivamus
interdum neque magna, eget dapibus est auctor et. Donec accumsan
libero nec augue scelerisque, ac egestas ante tincidunt. Proin
sollicitudin, mi eget sagittis mollis, arcu orci scelerisque turpis, a
sollicitudin tellus quam non sapien.
</p>
</section>
<h4>body1</h4>
<section class="paper-font-body1 redlines">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
tincidunt dui sit amet mi auctor, ac gravida magna aliquam. Fusce quis
purus elementum, tempus nisi vel, volutpat nulla. Vestibulum mollis
dictum tellus, vulputate porttitor arcu. Curabitur imperdiet risus id
egestas accumsan. Donec lectus felis, dignissim id iaculis sit amet,
faucibus in leo.
</p>
<p>
Mauris id urna ac ante ultrices commodo a imperdiet elit. Vivamus
interdum neque magna, eget dapibus est auctor et. Donec accumsan
libero nec augue scelerisque, ac egestas ante tincidunt. Proin
sollicitudin, mi eget sagittis mollis, arcu orci scelerisque turpis, a
sollicitudin tellus quam non sapien.
</p>
</section>
</section>
<section id="shadow">
<h2>shadow.html</h2>
<div class="shadow shadow-2dp">2dp</div>
<div class="shadow shadow-3dp">3dp</div>
<div class="shadow shadow-4dp">4dp</div>
<div class="shadow shadow-6dp">6dp</div>
<div class="shadow shadow-8dp">8dp</div>
<div class="shadow shadow-16dp">16dp</div>
</section>
</template>
</dom-module>
<script>
document.addEventListener('HTMLImportsLoaded', function() {
Polymer({
is: 'x-demo',
enableCustomStyleProperties: true
});
});
</script>
<x-demo></x-demo>
<section id="shadow">
<h2>shadow.html</h2>
<div class="shadow shadow-2dp">2dp</div>
<div class="shadow shadow-3dp">3dp</div>
<div class="shadow shadow-4dp">4dp</div>
<div class="shadow shadow-6dp">6dp</div>
<div class="shadow shadow-8dp">8dp</div>
<div class="shadow shadow-16dp">16dp</div>
</section>
<section id="demo-page">
<h2>demo-pages.html</h2>
@ -351,7 +326,6 @@
<div>Calcium</div>
</div>
</div>
</section>
</body>

View file

@ -0,0 +1,24 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->
<html>
<head>
<title>paper-styles</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

View file

@ -11,6 +11,30 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
<!--
The `<paper-styles>` component provides simple ways to use Material Design CSS styles
in your application. The following imports are available:
1. [color.html](https://github.com/PolymerElements/paper-styles/blob/master/color.html):
a complete list of the colors defined in the Material Design [palette](https://www.google.com/design/spec/style/color.html)
2. [default-theme.html](https://github.com/PolymerElements/paper-styles/blob/master/default-theme.html): text,
background and accent colors that match the default Material Design theme
3. [shadow.html](https://github.com/PolymerElements/paper-styles/blob/master/shadow.html): Material Design
[elevation](https://www.google.com/design/spec/what-is-material/elevation-shadows.html) and shadow styles
4. [typography.html](https://github.com/PolymerElements/paper-styles/blob/master/typography.html):
Material Design [font](http://www.google.com/design/spec/style/typography.html#typography-styles) styles and sizes
5. [demo-pages.html](https://github.com/PolymerElements/paper-styles/blob/master/demo-pages.html): generic styles
used in the PolymerElements demo pages
@group Iron Elements
@pseudoElement paper-styles
@demo demo/index.html
-->
<link rel="import" href="color.html">
<link rel="import" href="default-theme.html">
<link rel="import" href="shadow.html">

View file

@ -47,8 +47,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
/* @apply(--paper-font-common-nowrap); */
white-space: nowrap;
overflow: hidden;
@ -64,8 +63,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
/* @apply(--paper-font-common-nowrap); */
white-space: nowrap;
overflow: hidden;
@ -81,8 +79,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
font-size: 45px;
font-weight: 400;
@ -94,8 +91,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
font-size: 34px;
font-weight: 400;
@ -107,8 +103,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
font-size: 24px;
font-weight: 400;
@ -120,8 +115,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
/* @apply(--paper-font-common-nowrap); */
white-space: nowrap;
overflow: hidden;
@ -136,8 +130,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
font-size: 16px;
font-weight: 400;
@ -183,8 +176,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
/* @apply(--paper-font-common-nowrap); */
white-space: nowrap;
overflow: hidden;
@ -199,8 +191,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/* @apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* @apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
/* @apply(--paper-font-common-nowrap); */
white-space: nowrap;
overflow: hidden;