mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update tv config
This commit is contained in:
Luke Pulverenti
parent
66d87717d9
commit
74fad00abe
37 changed files with 1783 additions and 71 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-pages",
|
"name": "iron-pages",
|
||||||
"version": "1.0.2",
|
"version": "1.0.3",
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
"description": "Organizes a set of pages and shows one at a time",
|
"description": "Organizes a set of pages and shows one at a time",
|
||||||
"main": "iron-pages.html",
|
"main": "iron-pages.html",
|
||||||
|
|
@ -30,14 +30,13 @@
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/PolymerElements/iron-pages",
|
"homepage": "https://github.com/PolymerElements/iron-pages",
|
||||||
"_release": "1.0.2",
|
"_release": "1.0.3",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.2",
|
"tag": "v1.0.3",
|
||||||
"commit": "061e9ea95b58880f0f992b081c52a06665b553c9"
|
"commit": "ca6e7892786d60d8cb6935d8376b27c3851fdbf5"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/iron-pages.git",
|
"_source": "git://github.com/PolymerElements/iron-pages.git",
|
||||||
"_target": "~1.0.2",
|
"_target": "~1.0.2",
|
||||||
"_originalSource": "PolymerElements/iron-pages",
|
"_originalSource": "PolymerElements/iron-pages"
|
||||||
"_direct": true
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-pages",
|
"name": "iron-pages",
|
||||||
"version": "1.0.2",
|
"version": "1.0.3",
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
"description": "Organizes a set of pages and shows one at a time",
|
"description": "Organizes a set of pages and shows one at a time",
|
||||||
"main": "iron-pages.html",
|
"main": "iron-pages.html",
|
||||||
|
|
|
||||||
|
|
@ -78,6 +78,7 @@ Example:
|
||||||
// handler attempts to change the page and the activateEvent
|
// handler attempts to change the page and the activateEvent
|
||||||
// handler immediately changes it back
|
// handler immediately changes it back
|
||||||
activateEvent: {
|
activateEvent: {
|
||||||
|
type: String,
|
||||||
value: null
|
value: null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -27,14 +27,14 @@
|
||||||
"web-component-tester": "*",
|
"web-component-tester": "*",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/polymerelements/iron-resizable-behavior",
|
"homepage": "https://github.com/PolymerElements/iron-resizable-behavior",
|
||||||
"_release": "1.0.2",
|
"_release": "1.0.2",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.2",
|
"tag": "v1.0.2",
|
||||||
"commit": "85de8ba28be2bf17c81d6436ef1119022b003674"
|
"commit": "85de8ba28be2bf17c81d6436ef1119022b003674"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/iron-resizable-behavior.git",
|
"_source": "git://github.com/PolymerElements/iron-resizable-behavior.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "polymerelements/iron-resizable-behavior"
|
"_originalSource": "PolymerElements/iron-resizable-behavior"
|
||||||
}
|
}
|
||||||
|
|
@ -28,14 +28,14 @@
|
||||||
"web-component-tester": "*",
|
"web-component-tester": "*",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/polymerelements/iron-selector",
|
"homepage": "https://github.com/PolymerElements/iron-selector",
|
||||||
"_release": "1.0.2",
|
"_release": "1.0.2",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.2",
|
"tag": "v1.0.2",
|
||||||
"commit": "ea22d91d11ba6f72c01faa952d5e600f9d1773cf"
|
"commit": "ea22d91d11ba6f72c01faa952d5e600f9d1773cf"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/iron-selector.git",
|
"_source": "git://github.com/PolymerElements/iron-selector.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "polymerelements/iron-selector"
|
"_originalSource": "PolymerElements/iron-selector"
|
||||||
}
|
}
|
||||||
47
dashboard-ui/bower_components/paper-checkbox/.bower.json
vendored
Normal file
47
dashboard-ui/bower_components/paper-checkbox/.bower.json
vendored
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
{
|
||||||
|
"name": "paper-checkbox",
|
||||||
|
"version": "1.0.5",
|
||||||
|
"description": "A material design checkbox",
|
||||||
|
"authors": [
|
||||||
|
"The Polymer Authors"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"web-components",
|
||||||
|
"polymer",
|
||||||
|
"paper",
|
||||||
|
"checkbox",
|
||||||
|
"control"
|
||||||
|
],
|
||||||
|
"private": true,
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git://github.com/PolymerElements/paper-checkbox"
|
||||||
|
},
|
||||||
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
|
"homepage": "https://github.com/PolymerElements/paper-checkbox",
|
||||||
|
"ignore": [],
|
||||||
|
"devDependencies": {
|
||||||
|
"web-component-tester": "*",
|
||||||
|
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||||
|
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||||
|
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||||
|
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||||
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
|
||||||
|
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||||
|
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
|
||||||
|
"polymer": "Polymer/polymer#^1.0.0"
|
||||||
|
},
|
||||||
|
"_release": "1.0.5",
|
||||||
|
"_resolution": {
|
||||||
|
"type": "version",
|
||||||
|
"tag": "v1.0.5",
|
||||||
|
"commit": "af864401daab761d2fb7e6eadddb3cd659be8f85"
|
||||||
|
},
|
||||||
|
"_source": "git://github.com/PolymerElements/paper-checkbox.git",
|
||||||
|
"_target": "~1.0.5",
|
||||||
|
"_originalSource": "PolymerElements/paper-checkbox",
|
||||||
|
"_direct": true
|
||||||
|
}
|
||||||
1
dashboard-ui/bower_components/paper-checkbox/.gitignore
vendored
Normal file
1
dashboard-ui/bower_components/paper-checkbox/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
bower_components
|
||||||
37
dashboard-ui/bower_components/paper-checkbox/bower.json
vendored
Normal file
37
dashboard-ui/bower_components/paper-checkbox/bower.json
vendored
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
{
|
||||||
|
"name": "paper-checkbox",
|
||||||
|
"version": "1.0.5",
|
||||||
|
"description": "A material design checkbox",
|
||||||
|
"authors": [
|
||||||
|
"The Polymer Authors"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"web-components",
|
||||||
|
"polymer",
|
||||||
|
"paper",
|
||||||
|
"checkbox",
|
||||||
|
"control"
|
||||||
|
],
|
||||||
|
"private": true,
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git://github.com/PolymerElements/paper-checkbox"
|
||||||
|
},
|
||||||
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
|
"homepage": "https://github.com/PolymerElements/paper-checkbox",
|
||||||
|
"ignore": [],
|
||||||
|
"devDependencies": {
|
||||||
|
"web-component-tester": "*",
|
||||||
|
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||||
|
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||||
|
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||||
|
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||||
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
|
||||||
|
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||||
|
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
|
||||||
|
"polymer": "Polymer/polymer#^1.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
93
dashboard-ui/bower_components/paper-checkbox/demo/index.html
vendored
Normal file
93
dashboard-ui/bower_components/paper-checkbox/demo/index.html
vendored
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
<!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>
|
||||||
|
<title>paper-checkbox demo</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||||
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
|
||||||
|
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||||
|
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||||
|
<link rel="import" href="../paper-checkbox.html">
|
||||||
|
|
||||||
|
<style is="custom-style">
|
||||||
|
|
||||||
|
paper-checkbox {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-checkbox.blue {
|
||||||
|
--paper-checkbox-checked-color: var(--paper-light-blue-500);
|
||||||
|
--paper-checkbox-checked-ink-color: var(--paper-light-blue-500);
|
||||||
|
--paper-checkbox-unchecked-color: var(--paper-light-blue-900);
|
||||||
|
--paper-checkbox-unchecked-ink-color: var(--paper-light-blue-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-checkbox.red {
|
||||||
|
--paper-checkbox-checked-color: var(--paper-red-500);
|
||||||
|
--paper-checkbox-checked-ink-color: var(--paper-red-500);
|
||||||
|
--paper-checkbox-unchecked-color: var(--paper-red-900);
|
||||||
|
--paper-checkbox-unchecked-ink-color: var(--paper-red-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-checkbox.green {
|
||||||
|
--paper-checkbox-checked-color: var(--paper-green-500);
|
||||||
|
--paper-checkbox-checked-ink-color: var(--paper-green-500);
|
||||||
|
--paper-checkbox-unchecked-color: var(--paper-green-900);
|
||||||
|
--paper-checkbox-unchecked-ink-color: var(--paper-green-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-checkbox.orange {
|
||||||
|
--paper-checkbox-checked-color: var(--paper-orange-500);
|
||||||
|
--paper-checkbox-checked-ink-color: var(--paper-orange-500);
|
||||||
|
--paper-checkbox-unchecked-color: var(--paper-orange-900);
|
||||||
|
--paper-checkbox-unchecked-ink-color: var(--paper-orange-900);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body unresolved>
|
||||||
|
<div class="horizontal-section-container">
|
||||||
|
<div>
|
||||||
|
<h4>Enabled</h4>
|
||||||
|
<div class="horizontal-section">
|
||||||
|
<paper-checkbox>Oxygen</paper-checkbox>
|
||||||
|
<paper-checkbox>Carbon</paper-checkbox>
|
||||||
|
<paper-checkbox checked>Hydrogen</paper-checkbox>
|
||||||
|
<paper-checkbox checked>Nitrogen</paper-checkbox>
|
||||||
|
<paper-checkbox checked>Calcium</paper-checkbox>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Disabled</h4>
|
||||||
|
<div class="horizontal-section">
|
||||||
|
<paper-checkbox disabled>Oxygen</paper-checkbox>
|
||||||
|
<paper-checkbox disabled>Carbon</paper-checkbox>
|
||||||
|
<paper-checkbox checked disabled>Hydrogen</paper-checkbox>
|
||||||
|
<paper-checkbox checked disabled>Nitrogen</paper-checkbox>
|
||||||
|
<paper-checkbox checked disabled>Calcium</paper-checkbox>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Color</h4>
|
||||||
|
<div class="horizontal-section">
|
||||||
|
<paper-checkbox class="blue" checked>Oxygen</paper-checkbox>
|
||||||
|
<paper-checkbox class="red" checked>Carbon</paper-checkbox>
|
||||||
|
<paper-checkbox class="orange" checked>Hydrogen</paper-checkbox>
|
||||||
|
<paper-checkbox class="green" checked>Nitrogen</paper-checkbox>
|
||||||
|
<paper-checkbox class="blue" checked>Calcium</paper-checkbox>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
30
dashboard-ui/bower_components/paper-checkbox/index.html
vendored
Normal file
30
dashboard-ui/bower_components/paper-checkbox/index.html
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!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-checkbox</title>
|
||||||
|
|
||||||
|
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||||
|
|
||||||
|
<link rel="import" href="../polymer/polymer.html">
|
||||||
|
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<iron-component-page></iron-component-page>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
17
dashboard-ui/bower_components/paper-checkbox/metadata.html
vendored
Normal file
17
dashboard-ui/bower_components/paper-checkbox/metadata.html
vendored
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!--
|
||||||
|
@license
|
||||||
|
Copyright (c) 2014 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
|
||||||
|
-->
|
||||||
|
<x-meta id="paper-checkbox" label="Checkbox" group="Paper">
|
||||||
|
<template>
|
||||||
|
<paper-checkbox label="click me"></paper-checkbox>
|
||||||
|
</template>
|
||||||
|
<template id="imports">
|
||||||
|
<link rel="import" href="paper-checkbox.html">
|
||||||
|
</template>
|
||||||
|
</x-meta>
|
||||||
151
dashboard-ui/bower_components/paper-checkbox/paper-checkbox.css
vendored
Normal file
151
dashboard-ui/bower_components/paper-checkbox/paper-checkbox.css
vendored
Normal file
|
|
@ -0,0 +1,151 @@
|
||||||
|
/*
|
||||||
|
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
|
||||||
|
*/
|
||||||
|
|
||||||
|
:host {
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(:focus) {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#checkboxContainer {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-transform: translateZ(0);
|
||||||
|
transform: translateZ(0);
|
||||||
|
vertical-align: middle;
|
||||||
|
background-color: var(--paper-checkbox-unchecked-background-color, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host #ink {
|
||||||
|
position: absolute;
|
||||||
|
top: -15px;
|
||||||
|
left: -15px;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color);
|
||||||
|
opacity: 0.6;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host #ink[checked] {
|
||||||
|
color: var(--paper-checkbox-checked-ink-color, --default-primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host #checkbox {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
border: solid 2px;
|
||||||
|
border-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
|
||||||
|
border-radius: 2px;
|
||||||
|
pointer-events: none;
|
||||||
|
-webkit-transition: background-color 140ms, border-color 140ms;
|
||||||
|
transition: background-color 140ms, border-color 140ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* checkbox checked animations */
|
||||||
|
#checkbox.checked #checkmark {
|
||||||
|
-webkit-animation: checkmark-expand 140ms ease-out forwards;
|
||||||
|
animation: checkmark-expand 140ms ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes checkmark-expand {
|
||||||
|
0% {
|
||||||
|
top: 9px;
|
||||||
|
left: 6px;
|
||||||
|
width: 0px;
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: -1px;
|
||||||
|
left: 4px;
|
||||||
|
width: 5px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes checkmark-expand {
|
||||||
|
0% {
|
||||||
|
top: 9px;
|
||||||
|
left: 6px;
|
||||||
|
width: 0px;
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: -1px;
|
||||||
|
left: 4px;
|
||||||
|
width: 5px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:host #checkbox.checked {
|
||||||
|
background-color: var(--paper-checkbox-checked-color, --default-primary-color);
|
||||||
|
border-color: var(--paper-checkbox-checked-color, --default-primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host #checkmark {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
left: 4px;
|
||||||
|
width: 5px;
|
||||||
|
height: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-top: none;
|
||||||
|
border-left: none;
|
||||||
|
border-right-width: 2px;
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
border-color: var(--paper-checkbox-checkmark-color, white);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* label */
|
||||||
|
#checkboxLabel {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding-left: 8px;
|
||||||
|
white-space: normal;
|
||||||
|
pointer-events: none;
|
||||||
|
color: var(--paper-checkbox-label-color, --primary-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#checkboxLabel[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* disabled state */
|
||||||
|
:host([disabled]) {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([disabled]) #checkbox {
|
||||||
|
opacity: 0.5;
|
||||||
|
border-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([disabled][checked]) #checkbox {
|
||||||
|
background-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([disabled]) #checkboxLabel {
|
||||||
|
opacity: 0.65;
|
||||||
|
}
|
||||||
153
dashboard-ui/bower_components/paper-checkbox/paper-checkbox.html
vendored
Normal file
153
dashboard-ui/bower_components/paper-checkbox/paper-checkbox.html
vendored
Normal file
|
|
@ -0,0 +1,153 @@
|
||||||
|
<!--
|
||||||
|
@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="../paper-ripple/paper-ripple.html">
|
||||||
|
<link rel="import" href="../paper-styles/default-theme.html">
|
||||||
|
<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
`paper-checkbox` is a button that can be either checked or unchecked. User
|
||||||
|
can tap the checkbox to check or uncheck it. Usually you use checkboxes
|
||||||
|
to allow user to select multiple options from a set. If you have a single
|
||||||
|
ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
|
||||||
|
instead.
|
||||||
|
|
||||||
|
Example:
|
||||||
|
|
||||||
|
<paper-checkbox>label</paper-checkbox>
|
||||||
|
|
||||||
|
<paper-checkbox checked> label</paper-checkbox>
|
||||||
|
|
||||||
|
### Styling
|
||||||
|
|
||||||
|
The following custom properties and mixins are available for styling:
|
||||||
|
|
||||||
|
Custom property | Description | Default
|
||||||
|
----------------|-------------|----------
|
||||||
|
`--paper-checkbox-unchecked-background-color` | Checkbox background color when the input is not checked | `transparent`
|
||||||
|
`--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color`
|
||||||
|
`--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--primary-text-color`
|
||||||
|
`--paper-checkbox-checked-color` | Checkbox color when the input is checked | `--default-primary-color`
|
||||||
|
`--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the input is checked | `--default-primary-color`
|
||||||
|
`--paper-checkbox-checkmark-color` | Checkmark color | `white`
|
||||||
|
`--paper-checkbox-label-color` | Label color | `--primary-text-color`
|
||||||
|
|
||||||
|
@demo demo/index.html
|
||||||
|
-->
|
||||||
|
|
||||||
|
<dom-module id="paper-checkbox">
|
||||||
|
<link rel="import" type="css" href="paper-checkbox.css">
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<div id="checkboxContainer">
|
||||||
|
<paper-ripple id="ink" class="circle" center checked$="[[checked]]"></paper-ripple>
|
||||||
|
<div id="checkbox" class$="[[_computeCheckboxClass(checked)]]">
|
||||||
|
<div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="checkboxLabel" aria-hidden="true"><content></content></div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
Polymer({
|
||||||
|
is: 'paper-checkbox',
|
||||||
|
|
||||||
|
behaviors: [
|
||||||
|
Polymer.PaperInkyFocusBehavior
|
||||||
|
],
|
||||||
|
|
||||||
|
hostAttributes: {
|
||||||
|
role: 'checkbox',
|
||||||
|
'aria-checked': false,
|
||||||
|
tabindex: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
properties: {
|
||||||
|
/**
|
||||||
|
* Fired when the checked state changes due to user interaction.
|
||||||
|
*
|
||||||
|
* @event change
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fired when the checked state changes.
|
||||||
|
*
|
||||||
|
* @event iron-change
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets or sets the state, `true` is checked and `false` is unchecked.
|
||||||
|
*/
|
||||||
|
checked: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
reflectToAttribute: true,
|
||||||
|
notify: true,
|
||||||
|
observer: '_checkedChanged'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If true, the button toggles the active state with each tap or press
|
||||||
|
* of the spacebar.
|
||||||
|
*/
|
||||||
|
toggles: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
|
reflectToAttribute: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
ready: function() {
|
||||||
|
if (Polymer.dom(this).textContent == '') {
|
||||||
|
this.$.checkboxLabel.hidden = true;
|
||||||
|
} else {
|
||||||
|
this.setAttribute('aria-label', Polymer.dom(this).textContent);
|
||||||
|
}
|
||||||
|
this._isReady = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// button-behavior hook
|
||||||
|
_buttonStateChanged: function() {
|
||||||
|
if (this.disabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this._isReady) {
|
||||||
|
this.checked = this.active;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_checkedChanged: function(checked) {
|
||||||
|
this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
|
||||||
|
this.active = this.checked;
|
||||||
|
this.fire('iron-change');
|
||||||
|
},
|
||||||
|
|
||||||
|
_computeCheckboxClass: function(checked) {
|
||||||
|
if (checked) {
|
||||||
|
return 'checked';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
|
||||||
|
_computeCheckmarkClass: function(checked) {
|
||||||
|
if (!checked) {
|
||||||
|
return 'hidden';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</dom-module>
|
||||||
99
dashboard-ui/bower_components/paper-checkbox/test/basic.html
vendored
Normal file
99
dashboard-ui/bower_components/paper-checkbox/test/basic.html
vendored
Normal file
|
|
@ -0,0 +1,99 @@
|
||||||
|
<!doctype html>
|
||||||
|
<!--
|
||||||
|
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-checkbox 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>
|
||||||
|
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||||
|
|
||||||
|
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||||
|
<link rel="import" href="../paper-checkbox.html">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<test-fixture id="NoLabel">
|
||||||
|
<template>
|
||||||
|
<paper-checkbox id="check1"></paper-checkbox>
|
||||||
|
</template>
|
||||||
|
</test-fixture>
|
||||||
|
|
||||||
|
<test-fixture id="WithLabel">
|
||||||
|
<template>
|
||||||
|
<paper-checkbox id="check2">Batman</paper-checkbox>
|
||||||
|
</template>
|
||||||
|
</test-fixture>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
suite('defaults', function() {
|
||||||
|
var c1;
|
||||||
|
|
||||||
|
setup(function() {
|
||||||
|
c1 = fixture('NoLabel');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('check checkbox via click', function() {
|
||||||
|
c1.addEventListener('click', function() {
|
||||||
|
assert.isTrue(c1.getAttribute('aria-checked') == 'true');
|
||||||
|
assert.isTrue(c1.checked);
|
||||||
|
});
|
||||||
|
MockInteractions.tap(c1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('toggle checkbox via click', function() {
|
||||||
|
c1.checked = true;
|
||||||
|
c1.addEventListener('click', function() {
|
||||||
|
assert.isFalse(c1.getAttribute('aria-checked') != 'false');
|
||||||
|
assert.isFalse(c1.checked);
|
||||||
|
});
|
||||||
|
MockInteractions.tap(c1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('disabled checkbox cannot be clicked', function() {
|
||||||
|
c1.disabled = true;
|
||||||
|
c1.checked = true;
|
||||||
|
c1.addEventListener('click', function() {
|
||||||
|
assert.isTrue(c1.getAttribute('aria-checked') == 'true');
|
||||||
|
assert.isTrue(c1.checked);
|
||||||
|
});
|
||||||
|
MockInteractions.tap(c1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
suite('a11y', function() {
|
||||||
|
var c1;
|
||||||
|
var c2;
|
||||||
|
|
||||||
|
setup(function() {
|
||||||
|
c1 = fixture('NoLabel');
|
||||||
|
c2 = fixture('WithLabel');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('has aria role "checkbox"', function() {
|
||||||
|
assert.isTrue(c1.getAttribute('role') == 'checkbox');
|
||||||
|
assert.isTrue(c2.getAttribute('role') == 'checkbox');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('checkbox with no label has no aria label', function() {
|
||||||
|
assert.isTrue(!c1.getAttribute('aria-label'));
|
||||||
|
});
|
||||||
|
|
||||||
|
test('checkbox with a label sets an aria label', function() {
|
||||||
|
assert.isTrue(c2.getAttribute('aria-label') == "Batman");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
24
dashboard-ui/bower_components/paper-checkbox/test/index.html
vendored
Normal file
24
dashboard-ui/bower_components/paper-checkbox/test/index.html
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<!doctype html>
|
||||||
|
<!--
|
||||||
|
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-checkbox tests</title>
|
||||||
|
<script src="../../web-component-tester/browser.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
WCT.loadSuites([
|
||||||
|
'basic.html'
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-progress",
|
"name": "paper-progress",
|
||||||
"version": "1.0.1",
|
"version": "1.0.2",
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
"description": "A material design progress bar",
|
"description": "A material design progress bar",
|
||||||
"authors": "The Polymer Authors",
|
"authors": "The Polymer Authors",
|
||||||
|
|
@ -29,11 +29,11 @@
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/PolymerElements/paper-progress",
|
"homepage": "https://github.com/PolymerElements/paper-progress",
|
||||||
"_release": "1.0.1",
|
"_release": "1.0.2",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.1",
|
"tag": "v1.0.2",
|
||||||
"commit": "5171a785bd63e9687473d4b708f1b82137d4d9a5"
|
"commit": "f4db2254c41f21d7df2bd8533d16f929507f823e"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/paper-progress.git",
|
"_source": "git://github.com/PolymerElements/paper-progress.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-progress",
|
"name": "paper-progress",
|
||||||
"version": "1.0.1",
|
"version": "1.0.2",
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
"description": "A material design progress bar",
|
"description": "A material design progress bar",
|
||||||
"authors": "The Polymer Authors",
|
"authors": "The Polymer Authors",
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ Example:
|
||||||
|
|
||||||
<paper-progress value="10" secondary-progress="30"></paper-progress>
|
<paper-progress value="10" secondary-progress="30"></paper-progress>
|
||||||
|
|
||||||
Styling progress bar:
|
### Styling progress bar:
|
||||||
|
|
||||||
To change the active progress bar color:
|
To change the active progress bar color:
|
||||||
|
|
||||||
|
|
@ -49,6 +49,26 @@ To change the progress bar background color:
|
||||||
--paper-progress-container-color: #64ffda;
|
--paper-progress-container-color: #64ffda;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Add the class `transiting` to a paper-progress to animate the progress bar when
|
||||||
|
the value changed. You can also customize the transition:
|
||||||
|
|
||||||
|
paper-progress {
|
||||||
|
--paper-progress-transition-duration: 0.08s;
|
||||||
|
--paper-progress-transition-timing-function: ease;
|
||||||
|
--paper-progress-transition-transition-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
The following mixins are available for styling:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Custom property | Description | Default
|
||||||
|
----------------|-------------|----------
|
||||||
|
`--paper-progress-container` | Mixin applied to container | `{}`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@group Paper Elements
|
@group Paper Elements
|
||||||
@element paper-progress
|
@element paper-progress
|
||||||
@hero hero.svg
|
@hero hero.svg
|
||||||
|
|
@ -63,11 +83,33 @@ To change the progress bar background color:
|
||||||
height: 4px;
|
height: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host(.transiting) #activeProgress,
|
||||||
|
:host(.transiting) #secondaryProgress {
|
||||||
|
-webkit-transition-property: -webkit-transform;
|
||||||
|
transition-property: transform;
|
||||||
|
|
||||||
|
/* Duration */
|
||||||
|
-webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s);
|
||||||
|
transition-duration: var(--paper-progress-transition-duration, 0.08s);
|
||||||
|
|
||||||
|
/* Timing function */
|
||||||
|
-webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease);
|
||||||
|
transition-timing-function: var(--paper-progress-transition-timing-function, ease);
|
||||||
|
|
||||||
|
/* Delay */
|
||||||
|
-webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
|
||||||
|
transition-delay: var(--paper-progress-transition-delay, 0s);
|
||||||
|
}
|
||||||
|
|
||||||
#progressContainer {
|
#progressContainer {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: var(--paper-progress-container-color, --google-grey-300);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@apply(--paper-progress-container);
|
||||||
|
}
|
||||||
|
|
||||||
|
#progressContainer, #indeterminateSplitter {
|
||||||
|
background-color: var(--paper-progress-container-color, --google-grey-300);
|
||||||
}
|
}
|
||||||
|
|
||||||
#activeProgress,
|
#activeProgress,
|
||||||
|
|
@ -86,34 +128,86 @@ To change the progress bar background color:
|
||||||
background-color: var(--paper-progress-secondary-color, --google-green-100);
|
background-color: var(--paper-progress-secondary-color, --google-green-100);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#indeterminateSplitter {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
#activeProgress.indeterminate {
|
#activeProgress.indeterminate {
|
||||||
|
-webkit-transform-origin: right center;
|
||||||
|
transform-origin: right center;
|
||||||
|
-webkit-animation: indeterminate-bar 2s linear infinite;
|
||||||
|
animation: indeterminate-bar 2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
#indeterminateSplitter.indeterminate {
|
||||||
|
display: block;
|
||||||
-webkit-transform-origin: center center;
|
-webkit-transform-origin: center center;
|
||||||
transform-origin: center center;
|
transform-origin: center center;
|
||||||
-webkit-animation: indeterminate-bar 1s linear infinite;
|
-webkit-animation: indeterminate-splitter 2s linear infinite;
|
||||||
animation: indeterminate-bar 1s linear infinite;
|
animation: indeterminate-splitter 2s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes indeterminate-bar {
|
@-webkit-keyframes indeterminate-bar {
|
||||||
0% {
|
0% {
|
||||||
-webkit-transform: translate(-50%) scaleX(0);
|
-webkit-transform: scaleX(1) translateX(-100%);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
-webkit-transform: translate(0%) scaleX(0.3);
|
-webkit-transform: scaleX(1) translateX(0%);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: scaleX(1) translateX(0%);
|
||||||
|
-webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
-webkit-transform: translate(50%) scaleX(0);
|
-webkit-transform: scaleX(0) translateX(0%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes indeterminate-splitter {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scaleX(.75) translateX(-125%);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
-webkit-transform: scaleX(.75) translateX(-125%);
|
||||||
|
-webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
-webkit-transform: scaleX(.75) translateX(125%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scaleX(.75) translateX(125%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes indeterminate-bar {
|
@keyframes indeterminate-bar {
|
||||||
0% {
|
0% {
|
||||||
transform: translate(-50%) scaleX(0);
|
transform: scaleX(1) translateX(-100%);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
transform: translate(0%) scaleX(0.3);
|
transform: scaleX(1) translateX(0%);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scaleX(1) translateX(0%);
|
||||||
|
animation-timing-function: cubic-bezier(.28,.62,.37,.91);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translate(50%) scaleX(0);
|
transform: scaleX(0) translateX(0%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes indeterminate-splitter {
|
||||||
|
0% {
|
||||||
|
transform: scaleX(.75) translateX(-125%);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
transform: scaleX(.75) translateX(-125%);
|
||||||
|
animation-timing-function: cubic-bezier(.42,0,.6,.8);
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
transform: scaleX(.75) translateX(125%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scaleX(.75) translateX(125%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -121,6 +215,7 @@ To change the progress bar background color:
|
||||||
<div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
|
<div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
|
||||||
<div id="secondaryProgress" class="fit"></div>
|
<div id="secondaryProgress" class="fit"></div>
|
||||||
<div id="activeProgress" class="fit"></div>
|
<div id="activeProgress" class="fit"></div>
|
||||||
|
<div id="indeterminateSplitter" class="fit"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
|
@ -175,6 +270,7 @@ To change the progress bar background color:
|
||||||
// If we use attribute/class binding, the animation sometimes doesn't translate properly
|
// If we use attribute/class binding, the animation sometimes doesn't translate properly
|
||||||
// on Safari 7.1. So instead, we toggle the class here in the update method.
|
// on Safari 7.1. So instead, we toggle the class here in the update method.
|
||||||
this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgress);
|
this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgress);
|
||||||
|
this.toggleClass('indeterminate', this.indeterminate, this.$.indeterminateSplitter);
|
||||||
},
|
},
|
||||||
|
|
||||||
_transformProgress: function(progress, ratio) {
|
_transformProgress: function(progress, ratio) {
|
||||||
|
|
|
||||||
46
dashboard-ui/bower_components/paper-toggle-button/.bower.json
vendored
Normal file
46
dashboard-ui/bower_components/paper-toggle-button/.bower.json
vendored
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
{
|
||||||
|
"name": "paper-toggle-button",
|
||||||
|
"version": "1.0.5",
|
||||||
|
"description": "A material design toggle button control",
|
||||||
|
"authors": [
|
||||||
|
"The Polymer Authors"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"web-components",
|
||||||
|
"polymer",
|
||||||
|
"toggle",
|
||||||
|
"control"
|
||||||
|
],
|
||||||
|
"private": true,
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git://github.com/PolymerElements/paper-toggle-button"
|
||||||
|
},
|
||||||
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
|
"homepage": "https://github.com/PolymerElements/paper-toggle-button",
|
||||||
|
"ignore": [],
|
||||||
|
"dependencies": {
|
||||||
|
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
|
||||||
|
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||||
|
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
|
||||||
|
"polymer": "Polymer/polymer#^1.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"web-component-tester": "*",
|
||||||
|
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||||
|
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||||
|
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||||
|
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||||
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
|
},
|
||||||
|
"_release": "1.0.5",
|
||||||
|
"_resolution": {
|
||||||
|
"type": "version",
|
||||||
|
"tag": "v1.0.5",
|
||||||
|
"commit": "9891ee6a4af756b198290c14137498f78d97593d"
|
||||||
|
},
|
||||||
|
"_source": "git://github.com/PolymerElements/paper-toggle-button.git",
|
||||||
|
"_target": "~1.0.5",
|
||||||
|
"_originalSource": "PolymerElements/paper-toggle-button",
|
||||||
|
"_direct": true
|
||||||
|
}
|
||||||
1
dashboard-ui/bower_components/paper-toggle-button/.gitignore
vendored
Normal file
1
dashboard-ui/bower_components/paper-toggle-button/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
bower_components
|
||||||
36
dashboard-ui/bower_components/paper-toggle-button/bower.json
vendored
Normal file
36
dashboard-ui/bower_components/paper-toggle-button/bower.json
vendored
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
{
|
||||||
|
"name": "paper-toggle-button",
|
||||||
|
"version": "1.0.5",
|
||||||
|
"description": "A material design toggle button control",
|
||||||
|
"authors": [
|
||||||
|
"The Polymer Authors"
|
||||||
|
],
|
||||||
|
"keywords": [
|
||||||
|
"web-components",
|
||||||
|
"polymer",
|
||||||
|
"toggle",
|
||||||
|
"control"
|
||||||
|
],
|
||||||
|
"private": true,
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git://github.com/PolymerElements/paper-toggle-button"
|
||||||
|
},
|
||||||
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
|
"homepage": "https://github.com/PolymerElements/paper-toggle-button",
|
||||||
|
"ignore": [],
|
||||||
|
"dependencies": {
|
||||||
|
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
|
||||||
|
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||||
|
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
|
||||||
|
"polymer": "Polymer/polymer#^1.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"web-component-tester": "*",
|
||||||
|
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||||
|
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||||
|
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||||
|
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||||
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
105
dashboard-ui/bower_components/paper-toggle-button/demo/index.html
vendored
Normal file
105
dashboard-ui/bower_components/paper-toggle-button/demo/index.html
vendored
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
<!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>
|
||||||
|
<title>paper-toggle-button demo</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||||
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
|
||||||
|
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||||
|
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||||
|
<link rel="import" href="../paper-toggle-button.html">
|
||||||
|
|
||||||
|
<style is="custom-style">
|
||||||
|
.line {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line span {
|
||||||
|
margin-left: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-toggle-button.blue {
|
||||||
|
--paper-toggle-button-checked-bar-color: var(--paper-light-blue-500);
|
||||||
|
--paper-toggle-button-checked-button-color: var(--paper-light-blue-500);
|
||||||
|
--paper-toggle-button-checked-ink-color: var(--paper-light-blue-500);
|
||||||
|
--paper-toggle-button-unchecked-bar-color: var(--paper-light-blue-900);
|
||||||
|
--paper-toggle-button-unchecked-button-color: var(--paper-light-blue-900);
|
||||||
|
--paper-toggle-button-unchecked-ink-color: var(--paper-light-blue-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-toggle-button.red {
|
||||||
|
--paper-toggle-button-checked-bar-color: var(--paper-red-500);
|
||||||
|
--paper-toggle-button-checked-button-color: var(--paper-red-500);
|
||||||
|
--paper-toggle-button-checked-ink-color: var(--paper-red-500);
|
||||||
|
--paper-toggle-button-unchecked-bar-color: var(--paper-red-900);
|
||||||
|
--paper-toggle-button-unchecked-button-color: var(--paper-red-900);
|
||||||
|
--paper-toggle-button-unchecked-ink-color: var(--paper-red-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-toggle-button.green {
|
||||||
|
--paper-toggle-button-checked-bar-color: var(--paper-green-500);
|
||||||
|
--paper-toggle-button-checked-button-color: var(--paper-green-500);
|
||||||
|
--paper-toggle-button-checked-ink-color: var(--paper-green-500);
|
||||||
|
--paper-toggle-button-unchecked-bar-color: var(--paper-green-900);
|
||||||
|
--paper-toggle-button-unchecked-button-color: var(--paper-green-900);
|
||||||
|
--paper-toggle-button-unchecked-ink-color: var(--paper-green-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-toggle-button.orange {
|
||||||
|
--paper-toggle-button-checked-bar-color: var(--paper-orange-500);
|
||||||
|
--paper-toggle-button-checked-button-color: var(--paper-orange-500);
|
||||||
|
--paper-toggle-button-checked-ink-color: var(--paper-orange-500);
|
||||||
|
--paper-toggle-button-unchecked-bar-color: var(--paper-orange-900);
|
||||||
|
--paper-toggle-button-unchecked-button-color: var(--paper-orange-900);
|
||||||
|
--paper-toggle-button-unchecked-ink-color: var(--paper-orange-900);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body unresolved>
|
||||||
|
<div class="horizontal-section-container">
|
||||||
|
<div>
|
||||||
|
<h4>Enabled</h4>
|
||||||
|
<div class="horizontal-section">
|
||||||
|
<div class="line"><paper-toggle-button></paper-toggle-button><span>Oxygen</span></div>
|
||||||
|
<div class="line"><paper-toggle-button></paper-toggle-button><span>Carbon</span></div>
|
||||||
|
<div class="line"><paper-toggle-button checked></paper-toggle-button><span>Hydrogen</span></div>
|
||||||
|
<div class="line"><paper-toggle-button checked></paper-toggle-button><span>Nitrogen</span></div>
|
||||||
|
<div class="line"><paper-toggle-button checked></paper-toggle-button><span>Calcium</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4>Disabled</h4>
|
||||||
|
<div class="horizontal-section">
|
||||||
|
<div class="line"><paper-toggle-button disabled></paper-toggle-button><span>Oxygen</span></div>
|
||||||
|
<div class="line"><paper-toggle-button disabled></paper-toggle-button><span>Carbon</span></div>
|
||||||
|
<div class="line"><paper-toggle-button checked disabled></paper-toggle-button><span>Hydrogen</span></div>
|
||||||
|
<div class="line"><paper-toggle-button checked disabled></paper-toggle-button><span>Nitrogen</span></div>
|
||||||
|
<div class="line"><paper-toggle-button checked disabled></paper-toggle-button><span>Calcium</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4>Color</h4>
|
||||||
|
<div class="horizontal-section">
|
||||||
|
<div class="line"><paper-toggle-button class="blue"></paper-toggle-button><span>Oxygen</span></div>
|
||||||
|
<div class="line"><paper-toggle-button class="red"></paper-toggle-button><span>Carbon</span></div>
|
||||||
|
<div class="line"><paper-toggle-button checked class="orange"></paper-toggle-button><span>Hydrogen</span></div>
|
||||||
|
<div class="line"><paper-toggle-button checked class="green"></paper-toggle-button><span>Nitrogen</span></div>
|
||||||
|
<div class="line"><paper-toggle-button checked class="blue"></paper-toggle-button><span>Calcium</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
22
dashboard-ui/bower_components/paper-toggle-button/hero.svg
vendored
Normal file
22
dashboard-ui/bower_components/paper-toggle-button/hero.svg
vendored
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
|
||||||
|
<g id="background" display="none">
|
||||||
|
<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
|
||||||
|
</g>
|
||||||
|
<g id="label">
|
||||||
|
</g>
|
||||||
|
<g id="art">
|
||||||
|
<g>
|
||||||
|
<circle cx="123.8" cy="63" r="15.7"/>
|
||||||
|
<path d="M123,77H98.5c-7.7,0-14-6.3-14-14s6.3-14,14-14H123c7.7,0,14,6.3,14,14S130.7,77,123,77z M98.5,51c-6.6,0-12,5.4-12,12
|
||||||
|
s5.4,12,12,12H123c6.6,0,12-5.4,12-12s-5.4-12-12-12H98.5z"/>
|
||||||
|
</g>
|
||||||
|
<g id="ic_x5F_add_x0D_">
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="Guides">
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 872 B |
26
dashboard-ui/bower_components/paper-toggle-button/index.html
vendored
Normal file
26
dashboard-ui/bower_components/paper-toggle-button/index.html
vendored
Normal 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
|
||||||
|
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 name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<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>
|
||||||
109
dashboard-ui/bower_components/paper-toggle-button/paper-toggle-button.css
vendored
Normal file
109
dashboard-ui/bower_components/paper-toggle-button/paper-toggle-button.css
vendored
Normal file
|
|
@ -0,0 +1,109 @@
|
||||||
|
/*
|
||||||
|
@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
|
||||||
|
*/
|
||||||
|
|
||||||
|
:host {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([disabled]) {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(:focus) {
|
||||||
|
outline:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host .toggle-bar {
|
||||||
|
background-color: var(--paper-toggle-button-unchecked-bar-color, #000000);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host .toggle-button {
|
||||||
|
background-color: var(--paper-toggle-button-unchecked-button-color, --paper-grey-50);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([checked]) .toggle-bar {
|
||||||
|
background-color: var(--paper-toggle-button-checked-bar-color, --google-green-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([checked]) .toggle-button {
|
||||||
|
background-color: var(--paper-toggle-button-checked-button-color, --google-green-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host .toggle-ink {
|
||||||
|
color: var(--paper-toggle-button-unchecked-ink-color, --primary-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([checked]) .toggle-ink {
|
||||||
|
color: var(--paper-toggle-button-checked-ink-color, --google-green-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ID selectors should not be overriden by users. */
|
||||||
|
|
||||||
|
#toggleContainer {
|
||||||
|
position: relative;
|
||||||
|
width: 36px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggleBar {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.4;
|
||||||
|
transition: background-color linear .08s;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([checked]) #toggleBar {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([disabled]) #toggleBar {
|
||||||
|
background-color: #000;
|
||||||
|
opacity: 0.12;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggleButton {
|
||||||
|
position: absolute;
|
||||||
|
top: -3px;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
|
||||||
|
transition: -webkit-transform linear .08s, background-color linear .08s;
|
||||||
|
transition: transform linear .08s, background-color linear .08s;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggleButton.dragging {
|
||||||
|
-webkit-transition: none;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([checked]) #toggleButton {
|
||||||
|
-webkit-transform: translate(16px, 0);
|
||||||
|
transform: translate(16px, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([disabled]) #toggleButton {
|
||||||
|
background-color: #bdbdbd;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ink {
|
||||||
|
position: absolute;
|
||||||
|
top: -14px;
|
||||||
|
left: -14px;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
opacity: 0.5;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
174
dashboard-ui/bower_components/paper-toggle-button/paper-toggle-button.html
vendored
Normal file
174
dashboard-ui/bower_components/paper-toggle-button/paper-toggle-button.html
vendored
Normal file
|
|
@ -0,0 +1,174 @@
|
||||||
|
<!--
|
||||||
|
@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="../paper-styles/color.html">
|
||||||
|
<link rel="import" href="../paper-styles/default-theme.html">
|
||||||
|
<link rel="import" href="../paper-ripple/paper-ripple.html">
|
||||||
|
<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
|
||||||
|
|
||||||
|
<!--
|
||||||
|
`paper-toggle-button` provides a ON/OFF switch that user can toggle the state
|
||||||
|
by tapping or by dragging the switch.
|
||||||
|
|
||||||
|
Example:
|
||||||
|
|
||||||
|
<paper-toggle-button></paper-toggle-button>
|
||||||
|
|
||||||
|
### Styling
|
||||||
|
|
||||||
|
The following custom properties and mixins are available for styling:
|
||||||
|
|
||||||
|
Custom property | Description | Default
|
||||||
|
----------------|-------------|----------
|
||||||
|
`--paper-toggle-button-unchecked-bar-color` | Slider color when the input is not checked | `#000000`
|
||||||
|
`--paper-toggle-button-unchecked-button-color` | Button color when the input is not checked | `--paper-grey-50`
|
||||||
|
`--paper-toggle-button-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--dark-primary-color`
|
||||||
|
`--paper-toggle-button-checked-bar-color` | Slider button color when the input is checked | `--google-green-500`
|
||||||
|
`--paper-toggle-button-checked-button-color` | Button color when the input is checked | `--google-green-500`
|
||||||
|
`--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--google-green-500`
|
||||||
|
|
||||||
|
@group Paper Elements
|
||||||
|
@element paper-toggle-button
|
||||||
|
@hero hero.svg
|
||||||
|
@demo demo/index.html
|
||||||
|
-->
|
||||||
|
|
||||||
|
<dom-module id="paper-toggle-button">
|
||||||
|
|
||||||
|
<link rel="import" type="css" href="paper-toggle-button.css">
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<div id="toggleContainer">
|
||||||
|
<div id="toggleBar" class="toggle-bar"></div>
|
||||||
|
<div id="toggleButton" class="toggle-button">
|
||||||
|
<paper-ripple id="ink" class="toggle-ink circle" recenters></paper-ripple>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
Polymer({
|
||||||
|
is: 'paper-toggle-button',
|
||||||
|
|
||||||
|
behaviors: [
|
||||||
|
Polymer.PaperInkyFocusBehavior
|
||||||
|
],
|
||||||
|
|
||||||
|
hostAttributes: {
|
||||||
|
role: 'button',
|
||||||
|
'aria-pressed': 'false',
|
||||||
|
tabindex: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
properties: {
|
||||||
|
/**
|
||||||
|
* Fired when the checked state changes due to user interaction.
|
||||||
|
*
|
||||||
|
* @event change
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* Fired when the checked state changes.
|
||||||
|
*
|
||||||
|
* @event iron-change
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* Gets or sets the state, `true` is checked and `false` is unchecked.
|
||||||
|
*
|
||||||
|
* @attribute checked
|
||||||
|
* @type boolean
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
checked: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
reflectToAttribute: true,
|
||||||
|
notify: true,
|
||||||
|
observer: '_checkedChanged'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If true, the button toggles the active state with each tap or press
|
||||||
|
* of the spacebar.
|
||||||
|
*
|
||||||
|
* @attribute toggles
|
||||||
|
* @type boolean
|
||||||
|
* @default true
|
||||||
|
*/
|
||||||
|
toggles: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
|
reflectToAttribute: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
listeners: {
|
||||||
|
track: '_ontrack'
|
||||||
|
},
|
||||||
|
|
||||||
|
ready: function() {
|
||||||
|
this._isReady = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// button-behavior hook
|
||||||
|
_buttonStateChanged: function() {
|
||||||
|
if (this.disabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this._isReady) {
|
||||||
|
this.checked = this.active;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_checkedChanged: function(checked) {
|
||||||
|
this.active = this.checked;
|
||||||
|
this.fire('iron-change');
|
||||||
|
},
|
||||||
|
|
||||||
|
_ontrack: function(event) {
|
||||||
|
var track = event.detail;
|
||||||
|
if (track.state === 'start') {
|
||||||
|
this._trackStart(track);
|
||||||
|
} else if (track.state === 'track') {
|
||||||
|
this._trackMove(track);
|
||||||
|
} else if (track.state === 'end') {
|
||||||
|
this._trackEnd(track);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_trackStart: function(track) {
|
||||||
|
this._width = this.$.toggleBar.offsetWidth / 2;
|
||||||
|
/*
|
||||||
|
* keep an track-only check state to keep the dragging behavior smooth
|
||||||
|
* while toggling activations
|
||||||
|
*/
|
||||||
|
this._trackChecked = this.checked;
|
||||||
|
this.$.toggleButton.classList.add('dragging');
|
||||||
|
},
|
||||||
|
|
||||||
|
_trackMove: function(track) {
|
||||||
|
var dx = track.dx;
|
||||||
|
this._x = Math.min(this._width,
|
||||||
|
Math.max(0, this._trackChecked ? this._width + dx : dx));
|
||||||
|
this.translate3d(this._x + 'px', 0, 0, this.$.toggleButton);
|
||||||
|
this._userActivate(this._x > (this._width / 2));
|
||||||
|
},
|
||||||
|
|
||||||
|
_trackEnd: function(track) {
|
||||||
|
this.$.toggleButton.classList.remove('dragging');
|
||||||
|
this.transform('', this.$.toggleButton);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</dom-module>
|
||||||
86
dashboard-ui/bower_components/paper-toggle-button/test/basic.html
vendored
Normal file
86
dashboard-ui/bower_components/paper-toggle-button/test/basic.html
vendored
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
<!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-toggle-button 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>
|
||||||
|
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||||
|
|
||||||
|
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||||
|
<link rel="import" href="../paper-toggle-button.html">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<test-fixture id="Basic">
|
||||||
|
<template>
|
||||||
|
<paper-toggle-button id="button"></paper-toggle-button>
|
||||||
|
</template>
|
||||||
|
</test-fixture>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
suite('defaults', function() {
|
||||||
|
var b1;
|
||||||
|
|
||||||
|
setup(function() {
|
||||||
|
b1 = fixture('Basic');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('check button via click', function() {
|
||||||
|
b1.addEventListener('click', function() {
|
||||||
|
assert.isTrue(b1.getAttribute('aria-checked'));
|
||||||
|
assert.isTrue(b1.checked);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
MockInteractions.down(b1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('toggle button via click', function() {
|
||||||
|
b1.checked = true;
|
||||||
|
b1.addEventListener('click', function() {
|
||||||
|
assert.isFalse(b1.getAttribute('aria-checked'));
|
||||||
|
assert.isFalse(b1.checked);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
MockInteractions.down(b1);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('disabled button cannot be clicked', function() {
|
||||||
|
b1.disabled = true;
|
||||||
|
b1.addEventListener('click', function() {
|
||||||
|
assert.isTrue(b1.getAttribute('aria-checked'));
|
||||||
|
assert.isTrue(b1.checked);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
MockInteractions.down(b1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
suite('a11y', function() {
|
||||||
|
var b1;
|
||||||
|
|
||||||
|
setup(function() {
|
||||||
|
b1 = fixture('Basic');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('has aria role "button"', function() {
|
||||||
|
console.log(b1.getAttribute('role'));
|
||||||
|
assert.isTrue(b1.getAttribute('role') == 'button');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
25
dashboard-ui/bower_components/paper-toggle-button/test/index.html
vendored
Normal file
25
dashboard-ui/bower_components/paper-toggle-button/test/index.html
vendored
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<!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-toggle-button tests</title>
|
||||||
|
<script src="../../web-component-tester/browser.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
WCT.loadSuites([
|
||||||
|
'basic.html'
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -657,6 +657,11 @@ h1 .imageLink {
|
||||||
white-space: normal !important;
|
white-space: normal !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.paperCheckboxFieldDescription {
|
||||||
|
padding-left: 30px;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
.warningFieldDescription {
|
.warningFieldDescription {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border: 1px solid #f4c63f;
|
border: 1px solid #f4c63f;
|
||||||
|
|
|
||||||
|
|
@ -26,14 +26,10 @@
|
||||||
<form class="formLogin">
|
<form class="formLogin">
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<br />
|
<paper-input class="txtUser" label="${LabelUsername}" required="required" autocomplete="off"></paper-input>
|
||||||
<label for="txtUser">${LabelUsername}</label>
|
|
||||||
<input type="text" id="txtUser" required="required" autocomplete="off" />
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<br />
|
<paper-input class="txtPass" label="${LabelPassword}" required="required" autocomplete="off" type="password"></paper-input>
|
||||||
<label for="txtPass">${LabelPassword}</label>
|
|
||||||
<input type="password" id="txtPass" required="required" autocomplete="off" />
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<button type="submit" data-role="none" class="clearButton">
|
<button type="submit" data-role="none" class="clearButton">
|
||||||
|
|
@ -60,9 +56,7 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<br />
|
<paper-input class="txtZipCode" label="${LabelZipCode}" required="required"></paper-input>
|
||||||
<label for="txtZipCode">${LabelZipCode}</label>
|
|
||||||
<input type="text" id="txtZipCode" required="required" />
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<br />
|
<br />
|
||||||
|
|
|
||||||
|
|
@ -22,15 +22,12 @@
|
||||||
<form>
|
<form>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<br />
|
<paper-input class="txtDevicePath" label="${LabelPath}" required="required"></paper-input>
|
||||||
<label for="txtDevicePath">${LabelTunerIpAddress}</label>
|
|
||||||
<input type="text" id="txtDevicePath" required="required" />
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<br />
|
<br />
|
||||||
<label for="chkFavorite">${LabelImportOnlyFavoriteChannels}</label>
|
<paper-checkbox class="chkFavorite">${LabelImportOnlyFavoriteChannels}</paper-checkbox>
|
||||||
<input type="checkbox" id="chkFavorite" data-mini="true" />
|
<div class="fieldDescription paperCheckboxFieldDescription">${ImportFavoriteChannelsHelp}</div>
|
||||||
<div class="fieldDescription">${ImportFavoriteChannelsHelp}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
<div>
|
<div>
|
||||||
|
|
|
||||||
|
|
@ -22,9 +22,7 @@
|
||||||
<form>
|
<form>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<br />
|
<paper-input class="txtDevicePath" label="${LabelPath}" required="required"></paper-input>
|
||||||
<label for="txtDevicePath">${LabelPath}</label>
|
|
||||||
<input type="text" id="txtDevicePath" required="required" />
|
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
<div>
|
<div>
|
||||||
|
|
|
||||||
|
|
@ -13,8 +13,10 @@
|
||||||
listingsId = info.ListingsId;
|
listingsId = info.ListingsId;
|
||||||
$('#selectListing', page).val(info.ListingsId || '').selectmenu('refresh');
|
$('#selectListing', page).val(info.ListingsId || '').selectmenu('refresh');
|
||||||
$('#selectCountry', page).val(info.Country || '').selectmenu('refresh');
|
$('#selectCountry', page).val(info.Country || '').selectmenu('refresh');
|
||||||
$('#txtZipCode', page).val(info.ZipCode || '').trigger('change');
|
page.querySelector('.txtZipCode').value = info.ZipCode || '';
|
||||||
$('#txtUser', page).val(info.Username || '');
|
$(page.querySelector('.txtZipCode')).trigger('change');
|
||||||
|
page.querySelector('.txtUser').value = info.Username || '';
|
||||||
|
page.querySelector('.txtPass').value = info.Username || '';
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -25,8 +27,8 @@
|
||||||
|
|
||||||
var info = {
|
var info = {
|
||||||
Type: 'SchedulesDirect',
|
Type: 'SchedulesDirect',
|
||||||
Username: $('#txtUser', page).val(),
|
Username: page.querySelector('.txtUser').value,
|
||||||
Password: CryptoJS.SHA1($('#txtPass', page).val()).toString()
|
Password: CryptoJS.SHA1(page.querySelector('.txtPass').value).toString()
|
||||||
};
|
};
|
||||||
|
|
||||||
var providerId = getParameterByName('id');
|
var providerId = getParameterByName('id');
|
||||||
|
|
@ -79,7 +81,7 @@
|
||||||
return i.Id == id;
|
return i.Id == id;
|
||||||
})[0];
|
})[0];
|
||||||
|
|
||||||
info.ZipCode = $('#txtZipCode', page).val();
|
info.ZipCode = page.querySelector('.txtZipCode').value;
|
||||||
info.Country = $('#selectCountry', page).val();
|
info.Country = $('#selectCountry', page).val();
|
||||||
info.ListingsId = selectedListingsId;
|
info.ListingsId = selectedListingsId;
|
||||||
|
|
||||||
|
|
@ -164,7 +166,7 @@
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#txtZipCode', page).on('change', function () {
|
$('.txtZipCode', page).on('change', function () {
|
||||||
refreshListings(page, this.value);
|
refreshListings(page, this.value);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,8 @@
|
||||||
|
|
||||||
function reload(page, providerId) {
|
function reload(page, providerId) {
|
||||||
|
|
||||||
$('#txtDevicePath', page).val('');
|
page.querySelector('.txtDevicePath').value = '';
|
||||||
$('#chkFavorite', page).checked(false).checkboxradio('refresh');
|
page.querySelector('.chkFavorite').checked = false;
|
||||||
|
|
||||||
if (providerId) {
|
if (providerId) {
|
||||||
ApiClient.getNamedConfiguration("livetv").done(function (config) {
|
ApiClient.getNamedConfiguration("livetv").done(function (config) {
|
||||||
|
|
@ -12,8 +12,8 @@
|
||||||
return i.Id == providerId;
|
return i.Id == providerId;
|
||||||
})[0];
|
})[0];
|
||||||
|
|
||||||
$('#txtDevicePath', page).val(info.Url || '');
|
page.querySelector('.txtDevicePath').value = info.Url || '';
|
||||||
$('#chkFavorite', page).checked(info.ImportFavoritesOnly).checkboxradio('refresh');
|
page.querySelector('.chkFavorite').checked = info.ImportFavoritesOnly;
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -25,8 +25,8 @@
|
||||||
|
|
||||||
var info = {
|
var info = {
|
||||||
Type: 'hdhomerun',
|
Type: 'hdhomerun',
|
||||||
Url: $('#txtDevicePath', page).val(),
|
Url: page.querySelector('.txtDevicePath').value,
|
||||||
ImportFavoritesOnly: $('#chkFavorite', page).checked()
|
ImportFavoritesOnly: page.querySelector('.chkFavorite').checked
|
||||||
};
|
};
|
||||||
|
|
||||||
var id = getParameterByName('id');
|
var id = getParameterByName('id');
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
function reload(page, providerId) {
|
function reload(page, providerId) {
|
||||||
|
|
||||||
$('#txtDevicePath', page).val('');
|
page.querySelector('.txtDevicePath').value = '';
|
||||||
|
|
||||||
if (providerId) {
|
if (providerId) {
|
||||||
ApiClient.getNamedConfiguration("livetv").done(function (config) {
|
ApiClient.getNamedConfiguration("livetv").done(function (config) {
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
return i.Id == providerId;
|
return i.Id == providerId;
|
||||||
})[0];
|
})[0];
|
||||||
|
|
||||||
$('#txtDevicePath', page).val(info.Url || '');
|
page.querySelector('.txtDevicePath').value = info.Url || '';
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -22,8 +22,7 @@
|
||||||
|
|
||||||
var info = {
|
var info = {
|
||||||
Type: 'm3u',
|
Type: 'm3u',
|
||||||
Url: $('#txtDevicePath', page).val(),
|
Url: page.querySelector('.txtDevicePath').value
|
||||||
ImportFavoritesOnly: $('#chkFavorite', page).checked()
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var id = getParameterByName('id');
|
var id = getParameterByName('id');
|
||||||
|
|
|
||||||
|
|
@ -18,4 +18,5 @@
|
||||||
<link rel="import" href="bower_components/paper-slider/paper-slider.html">
|
<link rel="import" href="bower_components/paper-slider/paper-slider.html">
|
||||||
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
|
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
|
||||||
<link rel="import" href="bower_components/paper-input/paper-input.html">
|
<link rel="import" href="bower_components/paper-input/paper-input.html">
|
||||||
|
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
|
||||||
<link rel="import" href="thirdparty/emby-icons.html">
|
<link rel="import" href="thirdparty/emby-icons.html">
|
||||||
|
|
@ -12314,6 +12314,8 @@ is separate from validation, and `allowed-pattern` does not affect how the input
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</head><body><div hidden="" by-vulcanize=""><dom-module id="paper-material" assetpath="bower_components/paper-material/">
|
</head><body><div hidden="" by-vulcanize=""><dom-module id="paper-material" assetpath="bower_components/paper-material/">
|
||||||
<style>
|
<style>
|
||||||
:host {
|
:host {
|
||||||
|
|
@ -15855,11 +15857,33 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
||||||
height: 4px;
|
height: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host(.transiting) #activeProgress,
|
||||||
|
:host(.transiting) #secondaryProgress {
|
||||||
|
-webkit-transition-property: -webkit-transform;
|
||||||
|
transition-property: transform;
|
||||||
|
|
||||||
|
/* Duration */
|
||||||
|
-webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s);
|
||||||
|
transition-duration: var(--paper-progress-transition-duration, 0.08s);
|
||||||
|
|
||||||
|
/* Timing function */
|
||||||
|
-webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease);
|
||||||
|
transition-timing-function: var(--paper-progress-transition-timing-function, ease);
|
||||||
|
|
||||||
|
/* Delay */
|
||||||
|
-webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
|
||||||
|
transition-delay: var(--paper-progress-transition-delay, 0s);
|
||||||
|
}
|
||||||
|
|
||||||
#progressContainer {
|
#progressContainer {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: var(--paper-progress-container-color, --google-grey-300);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@apply(--paper-progress-container);
|
||||||
|
}
|
||||||
|
|
||||||
|
#progressContainer, #indeterminateSplitter {
|
||||||
|
background-color: var(--paper-progress-container-color, --google-grey-300);
|
||||||
}
|
}
|
||||||
|
|
||||||
#activeProgress,
|
#activeProgress,
|
||||||
|
|
@ -15878,34 +15902,86 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
||||||
background-color: var(--paper-progress-secondary-color, --google-green-100);
|
background-color: var(--paper-progress-secondary-color, --google-green-100);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#indeterminateSplitter {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
#activeProgress.indeterminate {
|
#activeProgress.indeterminate {
|
||||||
|
-webkit-transform-origin: right center;
|
||||||
|
transform-origin: right center;
|
||||||
|
-webkit-animation: indeterminate-bar 2s linear infinite;
|
||||||
|
animation: indeterminate-bar 2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
#indeterminateSplitter.indeterminate {
|
||||||
|
display: block;
|
||||||
-webkit-transform-origin: center center;
|
-webkit-transform-origin: center center;
|
||||||
transform-origin: center center;
|
transform-origin: center center;
|
||||||
-webkit-animation: indeterminate-bar 1s linear infinite;
|
-webkit-animation: indeterminate-splitter 2s linear infinite;
|
||||||
animation: indeterminate-bar 1s linear infinite;
|
animation: indeterminate-splitter 2s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes indeterminate-bar {
|
@-webkit-keyframes indeterminate-bar {
|
||||||
0% {
|
0% {
|
||||||
-webkit-transform: translate(-50%) scaleX(0);
|
-webkit-transform: scaleX(1) translateX(-100%);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
-webkit-transform: translate(0%) scaleX(0.3);
|
-webkit-transform: scaleX(1) translateX(0%);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
-webkit-transform: scaleX(1) translateX(0%);
|
||||||
|
-webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
-webkit-transform: translate(50%) scaleX(0);
|
-webkit-transform: scaleX(0) translateX(0%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes indeterminate-splitter {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scaleX(.75) translateX(-125%);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
-webkit-transform: scaleX(.75) translateX(-125%);
|
||||||
|
-webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
-webkit-transform: scaleX(.75) translateX(125%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: scaleX(.75) translateX(125%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes indeterminate-bar {
|
@keyframes indeterminate-bar {
|
||||||
0% {
|
0% {
|
||||||
transform: translate(-50%) scaleX(0);
|
transform: scaleX(1) translateX(-100%);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
transform: translate(0%) scaleX(0.3);
|
transform: scaleX(1) translateX(0%);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scaleX(1) translateX(0%);
|
||||||
|
animation-timing-function: cubic-bezier(.28,.62,.37,.91);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translate(50%) scaleX(0);
|
transform: scaleX(0) translateX(0%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes indeterminate-splitter {
|
||||||
|
0% {
|
||||||
|
transform: scaleX(.75) translateX(-125%);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
transform: scaleX(.75) translateX(-125%);
|
||||||
|
animation-timing-function: cubic-bezier(.42,0,.6,.8);
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
transform: scaleX(.75) translateX(125%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scaleX(.75) translateX(125%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -15913,6 +15989,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
||||||
<div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
|
<div id="progressContainer" role="progressbar" aria-valuenow$="{{value}}" aria-valuemin$="{{min}}" aria-valuemax$="{{max}}">
|
||||||
<div id="secondaryProgress" class="fit"></div>
|
<div id="secondaryProgress" class="fit"></div>
|
||||||
<div id="activeProgress" class="fit"></div>
|
<div id="activeProgress" class="fit"></div>
|
||||||
|
<div id="indeterminateSplitter" class="fit"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
|
@ -15967,6 +16044,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
||||||
// If we use attribute/class binding, the animation sometimes doesn't translate properly
|
// If we use attribute/class binding, the animation sometimes doesn't translate properly
|
||||||
// on Safari 7.1. So instead, we toggle the class here in the update method.
|
// on Safari 7.1. So instead, we toggle the class here in the update method.
|
||||||
this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgress);
|
this.toggleClass('indeterminate', this.indeterminate, this.$.activeProgress);
|
||||||
|
this.toggleClass('indeterminate', this.indeterminate, this.$.indeterminateSplitter);
|
||||||
},
|
},
|
||||||
|
|
||||||
_transformProgress: function(progress, ratio) {
|
_transformProgress: function(progress, ratio) {
|
||||||
|
|
@ -17374,6 +17452,266 @@ paper-ripple {
|
||||||
})();
|
})();
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
<dom-module id="paper-checkbox" assetpath="bower_components/paper-checkbox/">
|
||||||
|
<style>
|
||||||
|
/*
|
||||||
|
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
|
||||||
|
*/
|
||||||
|
|
||||||
|
:host {
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(:focus) {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#checkboxContainer {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-transform: translateZ(0);
|
||||||
|
transform: translateZ(0);
|
||||||
|
vertical-align: middle;
|
||||||
|
background-color: var(--paper-checkbox-unchecked-background-color, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host #ink {
|
||||||
|
position: absolute;
|
||||||
|
top: -15px;
|
||||||
|
left: -15px;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color);
|
||||||
|
opacity: 0.6;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host #ink[checked] {
|
||||||
|
color: var(--paper-checkbox-checked-ink-color, --default-primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host #checkbox {
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
border: solid 2px;
|
||||||
|
border-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
|
||||||
|
border-radius: 2px;
|
||||||
|
pointer-events: none;
|
||||||
|
-webkit-transition: background-color 140ms, border-color 140ms;
|
||||||
|
transition: background-color 140ms, border-color 140ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* checkbox checked animations */
|
||||||
|
#checkbox.checked #checkmark {
|
||||||
|
-webkit-animation: checkmark-expand 140ms ease-out forwards;
|
||||||
|
animation: checkmark-expand 140ms ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes checkmark-expand {
|
||||||
|
0% {
|
||||||
|
top: 9px;
|
||||||
|
left: 6px;
|
||||||
|
width: 0px;
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: -1px;
|
||||||
|
left: 4px;
|
||||||
|
width: 5px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes checkmark-expand {
|
||||||
|
0% {
|
||||||
|
top: 9px;
|
||||||
|
left: 6px;
|
||||||
|
width: 0px;
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: -1px;
|
||||||
|
left: 4px;
|
||||||
|
width: 5px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:host #checkbox.checked {
|
||||||
|
background-color: var(--paper-checkbox-checked-color, --default-primary-color);
|
||||||
|
border-color: var(--paper-checkbox-checked-color, --default-primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host #checkmark {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
left: 4px;
|
||||||
|
width: 5px;
|
||||||
|
height: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-top: none;
|
||||||
|
border-left: none;
|
||||||
|
border-right-width: 2px;
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
border-color: var(--paper-checkbox-checkmark-color, white);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* label */
|
||||||
|
#checkboxLabel {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding-left: 8px;
|
||||||
|
white-space: normal;
|
||||||
|
pointer-events: none;
|
||||||
|
color: var(--paper-checkbox-label-color, --primary-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#checkboxLabel[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* disabled state */
|
||||||
|
:host([disabled]) {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([disabled]) #checkbox {
|
||||||
|
opacity: 0.5;
|
||||||
|
border-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([disabled][checked]) #checkbox {
|
||||||
|
background-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([disabled]) #checkboxLabel {
|
||||||
|
opacity: 0.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<div id="checkboxContainer">
|
||||||
|
<paper-ripple id="ink" class="circle" center="" checked$="[[checked]]"></paper-ripple>
|
||||||
|
<div id="checkbox" class$="[[_computeCheckboxClass(checked)]]">
|
||||||
|
<div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="checkboxLabel" aria-hidden="true"><content></content></div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
Polymer({
|
||||||
|
is: 'paper-checkbox',
|
||||||
|
|
||||||
|
behaviors: [
|
||||||
|
Polymer.PaperInkyFocusBehavior
|
||||||
|
],
|
||||||
|
|
||||||
|
hostAttributes: {
|
||||||
|
role: 'checkbox',
|
||||||
|
'aria-checked': false,
|
||||||
|
tabindex: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
properties: {
|
||||||
|
/**
|
||||||
|
* Fired when the checked state changes due to user interaction.
|
||||||
|
*
|
||||||
|
* @event change
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fired when the checked state changes.
|
||||||
|
*
|
||||||
|
* @event iron-change
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets or sets the state, `true` is checked and `false` is unchecked.
|
||||||
|
*/
|
||||||
|
checked: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
reflectToAttribute: true,
|
||||||
|
notify: true,
|
||||||
|
observer: '_checkedChanged'
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If true, the button toggles the active state with each tap or press
|
||||||
|
* of the spacebar.
|
||||||
|
*/
|
||||||
|
toggles: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
|
reflectToAttribute: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
ready: function() {
|
||||||
|
if (Polymer.dom(this).textContent == '') {
|
||||||
|
this.$.checkboxLabel.hidden = true;
|
||||||
|
} else {
|
||||||
|
this.setAttribute('aria-label', Polymer.dom(this).textContent);
|
||||||
|
}
|
||||||
|
this._isReady = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// button-behavior hook
|
||||||
|
_buttonStateChanged: function() {
|
||||||
|
if (this.disabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this._isReady) {
|
||||||
|
this.checked = this.active;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_checkedChanged: function(checked) {
|
||||||
|
this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
|
||||||
|
this.active = this.checked;
|
||||||
|
this.fire('iron-change');
|
||||||
|
},
|
||||||
|
|
||||||
|
_computeCheckboxClass: function(checked) {
|
||||||
|
if (checked) {
|
||||||
|
return 'checked';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
|
||||||
|
_computeCheckmarkClass: function(checked) {
|
||||||
|
if (!checked) {
|
||||||
|
return 'hidden';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</dom-module>
|
||||||
<iron-iconset-svg name="icons" size="24">
|
<iron-iconset-svg name="icons" size="24">
|
||||||
<svg>
|
<svg>
|
||||||
<defs>
|
<defs>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue