I_changed_another_theme

This commit is contained in:
2016-08-16 20:03:40 -04:00
parent 23434adfb0
commit 3d1bca5d8b
345 changed files with 47813 additions and 2571 deletions
+48
View File
@@ -0,0 +1,48 @@
{
"name": "paper-fab",
"version": "1.0.2",
"description": "A material design floating action button",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"button"
],
"main": "paper-fab.html",
"ignore": [],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-fab"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/paper-fab",
"dependencies": {
"paper-ripple": "polymerelements/paper-ripple#^1.0.0",
"paper-material": "polymerelements/paper-material#^1.0.0",
"paper-behaviors": "polymerelements/paper-behaviors#^1.0.0",
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-icon": "polymerelements/iron-icon#^1.0.0",
"iron-icons": "polymerelements/iron-icons#^1.0.0",
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.2",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "59d2f77f456271f1ae4059b92d83ba7655fb1580"
},
"_source": "git://github.com/PolymerElements/paper-fab.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/paper-fab"
}
+1
View File
@@ -0,0 +1 @@
bower_components
+44
View File
@@ -0,0 +1,44 @@
paper-fab
=========
Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Button</a>
`paper-fab` is a floating action button. It contains an image placed in the center and
comes in two sizes: regular size and a smaller size by applying the attribute `mini`. When
the user touches the button, a ripple effect emanates from the center of the button.
You may import `iron-icons` to use with this element, or provide a URL to a custom icon.
See `iron-iconset` for more information about how to use a custom icon set.
Example:
```html
<link href="path/to/iron-icons/iron-icons.html" rel="import">
<paper-fab icon="add"></paper-fab>
<paper-fab mini icon="favorite"></paper-fab>
<paper-fab src="star.png"></paper-fab>
```
Styling
-------
Style the button with CSS as you would a normal DOM element. If you are using the icons
provided by `iron-icons`, the icon will inherit the foreground color of the button.
```html
<!-- make a blue "cloud" button -->
<paper-fab icon="cloud" style="color: blue;"></paper-fab>
```
By default, the ripple is the same color as the foreground at 25% opacity. You may
customize the color using this selector:
```css
/* make #my-button use a blue ripple instead of foreground color */
#my-button::shadow #ripple {
color: blue;
}
```
The opacity of the ripple is not customizable via CSS.
+39
View File
@@ -0,0 +1,39 @@
{
"name": "paper-fab",
"version": "1.0.2",
"description": "A material design floating action button",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"polymer",
"button"
],
"main": "paper-fab.html",
"ignore": [],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-fab"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/paper-fab",
"dependencies": {
"paper-ripple": "polymerelements/paper-ripple#^1.0.0",
"paper-material": "polymerelements/paper-material#^1.0.0",
"paper-behaviors": "polymerelements/paper-behaviors#^1.0.0",
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-icon": "polymerelements/iron-icon#^1.0.0",
"iron-icons": "polymerelements/iron-icons#^1.0.0",
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"paper-styles": "polymerelements/paper-styles#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}
+97
View File
@@ -0,0 +1,97 @@
<!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>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>paper-fab demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../paper-fab.html">
<style is="custom-style">
.horizontal-section {
min-width: 200px;
}
paper-fab {
display: block;
margin-bottom:24px;
margin-left: auto;
margin-right: auto;
}
paper-fab.blue {
--paper-fab-background: var(--paper-light-blue-500);
--paper-fab-keyboard-focus-background: var(--paper-light-blue-900);
}
paper-fab.red {
--paper-fab-background: var(--paper-red-500);
--paper-fab-keyboard-focus-background: var(--paper-red-900);
}
paper-fab.green {
--paper-fab-background: var(--paper-green-500);
--paper-fab-keyboard-focus-background: var(--paper-green-900);
}
paper-fab.orange {
--paper-fab-background: var(--paper-orange-500);
--paper-fab-keyboard-focus-background: var(--paper-orange-900);
}
</style>
</head>
<body>
<div class="horizontal center-justified layout">
<div>
<h4>Enabled</h4>
<div class="horizontal-section">
<paper-fab icon="arrow-forward" title="arrow-forward" tabindex="0"></paper-fab>
<paper-fab icon="create" title="create" tabindex="0"></paper-fab>
<paper-fab icon="favorite" title="heart" tabindex="0"></paper-fab>
<paper-fab mini icon="done" title="done" tabindex="0"></paper-fab>
<paper-fab mini icon="reply" title="reply" tabindex="0"></paper-fab>
</div>
</div>
<div>
<h4>Disabled</h4>
<div class="horizontal-section">
<paper-fab disabled icon="arrow-forward" title="arrow-forward" tabindex="0"></paper-fab>
<paper-fab disabled icon="create" title="create" tabindex="0"></paper-fab>
<paper-fab disabled icon="favorite" title="heart" tabindex="0"></paper-fab>
<paper-fab disabled mini icon="done" title="done" tabindex="0"></paper-fab>
<paper-fab disabled mini icon="reply" title="reply" tabindex="0"></paper-fab>
</div>
</div>
<div>
<h4>Colors</h4>
<div class="horizontal-section">
<paper-fab icon="arrow-forward" title="arrow-forward" tabindex="0" class="blue"></paper-fab>
<paper-fab icon="create" title="create" tabindex="0" class="red"></paper-fab>
<paper-fab icon="favorite" title="heart" tabindex="0" class="orange"></paper-fab>
<paper-fab mini icon="done" title="done" tabindex="0" class="green"></paper-fab>
<paper-fab mini icon="reply" title="reply" tabindex="0" class="blue"></paper-fab>
</div>
</div>
</div>
</body>
</html>
+24
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-fab</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>
+175
View File
@@ -0,0 +1,175 @@
<!--
@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.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
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.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
<!--
Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Button</a>
`paper-fab` is a floating action button. It contains an image placed in the center and
comes in two sizes: regular size and a smaller size by applying the attribute `mini`. When
the user touches the button, a ripple effect emanates from the center of the button.
You may import `iron-icons` to use with this element, or provide a URL to a custom icon.
See `iron-iconset` for more information about how to use a custom icon set.
Example:
<link href="path/to/iron-icons/iron-icons.html" rel="import">
<paper-fab icon="add"></paper-fab>
<paper-fab mini icon="favorite"></paper-fab>
<paper-fab src="star.png"></paper-fab>
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-fab-background` | The background color of the button | `--accent-color`
`--paper-fab-keyboard-focus-background` | The background color of the button when focused | `--paper-pink-900`
`--paper-fab-disabled-background` | The background color of the button when it's disabled | `--paper-grey-300`
`--paper-fab-disabled-text` | The text color of the button when it's disabled | `--paper-grey-500`
`--paper-fab` | Mixin applied to the button | `{}`
`--paper-fab-mini` | Mixin applied to a mini button | `{}`
`--paper-fab-disabled` | Mixin applied to a disabled button | `{}`
@group Paper Elements
@demo demo/index.html
-->
<dom-module id="paper-fab">
<style>
:host {
display: inline-block;
position: relative;
outline: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
box-sizing: border-box;
min-width: 0;
width: 56px;
height: 56px;
background: var(--paper-fab-background, --accent-color);
color: var(--text-primary-color);
border-radius: 50%;
padding: 16px;
z-index: 0;
@apply(--paper-fab);
}
:host([mini]) {
width: 40px;
height: 40px;
padding: 8px;
@apply(--paper-fab-mini);
}
:host([disabled]) {
color: var(--paper-fab-disabled-text, --paper-grey-500);
background: var(--paper-fab-disabled-background, --paper-grey-300);
@apply(--paper-fab-disabled);
}
paper-material {
border-radius: inherit;
@apply(--layout-fit);
@apply(--layout-vertical);
@apply(--layout-center-center);
}
.keyboard-focus {
background: var(--paper-fab-keyboard-focus-background, --paper-pink-900);
}
</style>
<template>
<paper-ripple></paper-ripple>
<paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated>
<iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>
</paper-material>
</template>
</dom-module>
<script>
Polymer({
is: 'paper-fab',
behaviors: [
Polymer.PaperButtonBehavior
],
properties: {
/**
* The URL of an image for the icon. If the src property is specified,
* the icon property should not be.
*
* @attribute src
* @type string
* @default ''
*/
src: {
type: String,
value: ''
},
/**
* Specifies the icon name or index in the set of icons available in
* the icon's icon set. If the icon property is specified,
* the src property should not be.
*
* @attribute icon
* @type string
* @default ''
*/
icon: {
type: String,
value: ''
},
/**
* Set this to true to style this is a "mini" FAB.
*
* @attribute mini
* @type boolean
* @default false
*/
mini: {
type: Boolean,
value: false
}
},
_computeContentClass: function(receivedFocusFromKeyboard) {
var className = 'content';
if (receivedFocusFromKeyboard) {
className += ' keyboard-focus';
}
return className;
}
});
</script>
+71
View File
@@ -0,0 +1,71 @@
<!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.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
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.txt
-->
<html>
<head>
<meta charset="UTF-8">
<title>paper-fab a11y tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../core-icons/core-icons.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../paper-fab.html">
</head>
<body>
<test-fixture id="A11yFabs">
<template>
<paper-fab id="fab1" icon="add"></paper-fab>
<paper-fab id="fab2" icon="add" disabled></paper-fab>
<paper-fab id="fab3" icon="add" aria-label="custom"></paper-fab>
</template>
</test-fixture>
<script>
var f1;
var f2;
var f3;
setup(function() {
var fabs = fixture('A11yFabs');
f1 = fabs[0];
f2 = fabs[1];
f3 = fabs[2];
});
test('aria role is a button', function() {
assert.strictEqual(f1.getAttribute('role'), 'button');
});
test('aria-disabled is set', function() {
assert.ok(f2.hasAttribute('aria-disabled'));
f2.removeAttribute('disabled');
assert.strictEqual(f2.getAttribute('aria-disabled'), 'false');
});
test('aria-label is set');
test('user-defined aria-label is preserved', function() {
assert.strictEqual(f3.getAttribute('aria-label'), 'custom');
f3.icon = 'arrow-forward';
assert.strictEqual(f3.getAttribute('aria-label'), 'custom');
});
</script>
</body>
</html>
+76
View File
@@ -0,0 +1,76 @@
<!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.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
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.txt
-->
<html>
<head>
<meta charset="UTF-8">
<title>paper-fab basic tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../paper-fab.html">
</head>
<body>
<test-fixture id="TrivialFab">
<template>
<div style="line-height:30px;">
<paper-fab id="fab1" icon="add"></paper-fab>
</div>
</template>
</test-fixture>
<test-fixture id="SrcFab">
<template>
<paper-fab src="add.png"></paper-fab>
</template>
</test-fixture>
<script>
var f1;
var f2;
function centerOf(element) {
var rect = element.getBoundingClientRect();
return {left: rect.left + rect.width / 2, top: rect.top + rect.height / 2};
}
function approxEqual(p1, p2) {
return Math.round(p1.left) == Math.round(p2.left) && Math.round(p1.top) == Math.round(p2.top);
}
setup(function() {
f1 = fixture('TrivialFab').querySelector('#fab1');
f2 = fixture('SrcFab');
});
test('applies an icon specified by the `icon` attribute', function() {
assert.strictEqual(!!f1.$.icon.usesSrcAttribute, false);
assert.ok(Polymer.dom(f1.$.icon.root).querySelector('svg'));
});
test('applies an icon specified by the `src` attribute', function() {
assert.strictEqual(f2.$.icon._usesIconset(), false);
assert.ok(f2.$.icon._img);
});
test('renders correctly independent of line height', function() {
assert.ok(approxEqual(centerOf(f1.$.icon), centerOf(f1)));
});
</script>
</body>
</html>
+26
View File
@@ -0,0 +1,26 @@
<!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.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
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.txt
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>paper-fab tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'basic.html',
'a11y.html'
]);
</script>
</body>
</html>