mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update components
This commit is contained in:
parent
3449729ff4
commit
68f6551ee5
15 changed files with 407 additions and 496 deletions
|
@ -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-behaviors",
|
"homepage": "https://github.com/polymerelements/iron-behaviors",
|
||||||
"_release": "1.0.8",
|
"_release": "1.0.8",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.8",
|
"tag": "v1.0.8",
|
||||||
"commit": "663ad706b43989f4961d945b8116cf4db346532f"
|
"commit": "663ad706b43989f4961d945b8116cf4db346532f"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/iron-behaviors.git",
|
"_source": "git://github.com/polymerelements/iron-behaviors.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "PolymerElements/iron-behaviors"
|
"_originalSource": "polymerelements/iron-behaviors"
|
||||||
}
|
}
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-checked-element-behavior",
|
"name": "iron-checked-element-behavior",
|
||||||
"version": "1.0.1",
|
"version": "1.0.2",
|
||||||
"description": "Implements an element that has a checked attribute and can be added to a form",
|
"description": "Implements an element that has a checked attribute and can be added to a form",
|
||||||
"authors": "The Polymer Authors",
|
"authors": "The Polymer Authors",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
|
@ -33,11 +33,11 @@
|
||||||
"web-component-tester": "*",
|
"web-component-tester": "*",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"_release": "1.0.1",
|
"_release": "1.0.2",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.1",
|
"tag": "v1.0.2",
|
||||||
"commit": "c680a5f6a61bd1fb52a691d7ee763f679414615e"
|
"commit": "975b9f22ebd89ef457491fcc44cb86b660fc42cd"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/iron-checked-element-behavior.git",
|
"_source": "git://github.com/PolymerElements/iron-checked-element-behavior.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-checked-element-behavior",
|
"name": "iron-checked-element-behavior",
|
||||||
"version": "1.0.1",
|
"version": "1.0.2",
|
||||||
"description": "Implements an element that has a checked attribute and can be added to a form",
|
"description": "Implements an element that has a checked attribute and can be added to a form",
|
||||||
"authors": "The Polymer Authors",
|
"authors": "The Polymer Authors",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
|
|
|
@ -66,9 +66,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns false if the element is required and not checked, and true otherwise.
|
* Returns false if the element is required and not checked, and true otherwise.
|
||||||
* @return {Boolean} true if `required` is false, or if `required` and `checked` are both true.
|
* @return {boolean} true if `required` is false, or if `required` and `checked` are both true.
|
||||||
*/
|
*/
|
||||||
_getValidity: function() {
|
_getValidity: function(_value) {
|
||||||
return this.disabled || !this.required || (this.required && this.checked);
|
return this.disabled || !this.required || (this.required && this.checked);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-input",
|
"name": "iron-input",
|
||||||
"version": "1.0.5",
|
"version": "1.0.6",
|
||||||
"description": "An input element with data binding",
|
"description": "An input element with data binding",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
@ -33,11 +33,11 @@
|
||||||
"web-component-tester": "*",
|
"web-component-tester": "*",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"_release": "1.0.5",
|
"_release": "1.0.6",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.5",
|
"tag": "v1.0.6",
|
||||||
"commit": "3ae9ec75f2252402bd62ed879052b54a9c49f60f"
|
"commit": "a206c6140aad96d5355074676713f9e0a1b1581d"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/iron-input.git",
|
"_source": "git://github.com/PolymerElements/iron-input.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-input",
|
"name": "iron-input",
|
||||||
"version": "1.0.5",
|
"version": "1.0.6",
|
||||||
"description": "An input element with data binding",
|
"description": "An input element with data binding",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
|
|
@ -120,6 +120,9 @@ is separate from validation, and `allowed-pattern` does not affect how the input
|
||||||
this.bindValue = this.value;
|
this.bindValue = this.value;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @suppress {checkTypes}
|
||||||
|
*/
|
||||||
_bindValueChanged: function() {
|
_bindValueChanged: function() {
|
||||||
if (this.value !== this.bindValue) {
|
if (this.value !== this.bindValue) {
|
||||||
this.value = !(this.bindValue || this.bindValue === 0) ? '' : this.bindValue;
|
this.value = !(this.bindValue || this.bindValue === 0) ? '' : this.bindValue;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-checkbox",
|
"name": "paper-checkbox",
|
||||||
"version": "1.0.8",
|
"version": "1.0.9",
|
||||||
"description": "A material design checkbox",
|
"description": "A material design checkbox",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
@ -20,26 +20,26 @@
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
"homepage": "https://github.com/PolymerElements/paper-checkbox",
|
"homepage": "https://github.com/PolymerElements/paper-checkbox",
|
||||||
"ignore": [],
|
"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": {
|
"dependencies": {
|
||||||
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
|
"polymer": "Polymer/polymer#^1.1.0",
|
||||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
|
||||||
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
|
|
||||||
"iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#^1.0.0",
|
"iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#^1.0.0",
|
||||||
"polymer": "Polymer/polymer#^1.0.0"
|
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
|
||||||
|
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
|
||||||
|
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
|
||||||
},
|
},
|
||||||
"_release": "1.0.8",
|
"devDependencies": {
|
||||||
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||||
|
"web-component-tester": "*",
|
||||||
|
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||||
|
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||||
|
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||||
|
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
|
||||||
|
},
|
||||||
|
"_release": "1.0.9",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.8",
|
"tag": "v1.0.9",
|
||||||
"commit": "7ad629545e5eff1d3e2d8e8d468732515ed490a0"
|
"commit": "e0568e5ad76dc8a4f73968e5cbe5270cba548f9e"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/paper-checkbox.git",
|
"_source": "git://github.com/PolymerElements/paper-checkbox.git",
|
||||||
"_target": "~1.0.5",
|
"_target": "~1.0.5",
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-checkbox",
|
"name": "paper-checkbox",
|
||||||
"version": "1.0.8",
|
"version": "1.0.9",
|
||||||
"description": "A material design checkbox",
|
"description": "A material design checkbox",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
@ -20,19 +20,19 @@
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
"homepage": "https://github.com/PolymerElements/paper-checkbox",
|
"homepage": "https://github.com/PolymerElements/paper-checkbox",
|
||||||
"ignore": [],
|
"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": {
|
"dependencies": {
|
||||||
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
|
"polymer": "Polymer/polymer#^1.1.0",
|
||||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
|
||||||
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
|
|
||||||
"iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#^1.0.0",
|
"iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#^1.0.0",
|
||||||
"polymer": "Polymer/polymer#^1.0.0"
|
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
|
||||||
|
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
|
||||||
|
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||||
|
"web-component-tester": "*",
|
||||||
|
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||||
|
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||||
|
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||||
|
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,7 +21,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
<link rel="import" href="../paper-checkbox.html">
|
<link rel="import" href="../paper-checkbox.html">
|
||||||
|
|
||||||
<style is="custom-style">
|
<style is="custom-style">
|
||||||
|
|
||||||
paper-checkbox {
|
paper-checkbox {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
|
|
|
@ -1,157 +0,0 @@
|
||||||
/**
|
|
||||||
@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;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* invalid state */
|
|
||||||
#checkbox.invalid:not(.checked) {
|
|
||||||
border-color: var(--paper-checkbox-error-color, --google-red-500);
|
|
||||||
}
|
|
|
@ -47,9 +47,156 @@ Custom property | Description | Default
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<dom-module id="paper-checkbox">
|
<dom-module id="paper-checkbox">
|
||||||
<link rel="import" type="css" href="paper-checkbox.css">
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
: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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* invalid state */
|
||||||
|
#checkbox.invalid:not(.checked) {
|
||||||
|
border-color: var(--paper-checkbox-error-color, --google-red-500);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div id="checkboxContainer">
|
<div id="checkboxContainer">
|
||||||
<paper-ripple id="ink" class="circle" center checked$="[[checked]]"></paper-ripple>
|
<paper-ripple id="ink" class="circle" center checked$="[[checked]]"></paper-ripple>
|
||||||
|
@ -59,7 +206,6 @@ Custom property | Description | Default
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="checkboxLabel" aria-hidden="true"><content></content></div>
|
<div id="checkboxLabel" aria-hidden="true"><content></content></div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -89,8 +235,8 @@ Custom property | Description | Default
|
||||||
*
|
*
|
||||||
* @event iron-change
|
* @event iron-change
|
||||||
*/
|
*/
|
||||||
|
|
||||||
ariaActiveAttribute: {
|
ariaActiveAttribute: {
|
||||||
|
type: String,
|
||||||
value: 'aria-checked'
|
value: 'aria-checked'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -104,7 +250,6 @@ Custom property | Description | Default
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Update the checkbox aria-label. This is a temporary workaround not
|
* Update the checkbox aria-label. This is a temporary workaround not
|
||||||
* being able to observe changes in <content>
|
* being able to observe changes in <content>
|
||||||
|
@ -141,7 +286,6 @@ Custom property | Description | Default
|
||||||
_computeCheckmarkClass: function(checked) {
|
_computeCheckmarkClass: function(checked) {
|
||||||
return checked ? '' : 'hidden';
|
return checked ? '' : 'hidden';
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
|
|
@ -418,18 +418,22 @@
|
||||||
Format: 'srt',
|
Format: 'srt',
|
||||||
Method: 'Embed'
|
Method: 'Embed'
|
||||||
});
|
});
|
||||||
//profile.SubtitleProfiles.push({
|
profile.SubtitleProfiles.push({
|
||||||
// Format: 'ass',
|
Format: 'ass',
|
||||||
// Method: 'Embed'
|
Method: 'Embed'
|
||||||
//});
|
});
|
||||||
//profile.SubtitleProfiles.push({
|
profile.SubtitleProfiles.push({
|
||||||
// Format: 'ssa',
|
Format: 'ssa',
|
||||||
// Method: 'Embed'
|
Method: 'Embed'
|
||||||
//});
|
});
|
||||||
profile.SubtitleProfiles.push({
|
profile.SubtitleProfiles.push({
|
||||||
Format: 'pgs',
|
Format: 'pgs',
|
||||||
Method: 'Embed'
|
Method: 'Embed'
|
||||||
});
|
});
|
||||||
|
profile.SubtitleProfiles.push({
|
||||||
|
Format: 'pgssub',
|
||||||
|
Method: 'Embed'
|
||||||
|
});
|
||||||
profile.SubtitleProfiles.push({
|
profile.SubtitleProfiles.push({
|
||||||
Format: 'vtt',
|
Format: 'vtt',
|
||||||
Method: 'Embed'
|
Method: 'Embed'
|
||||||
|
|
|
@ -962,11 +962,6 @@ $.ui.plugin = {
|
||||||
$.mobile.links( this );
|
$.mobile.links( this );
|
||||||
}
|
}
|
||||||
|
|
||||||
// Degrade inputs for styleing
|
|
||||||
if ( $.mobile.degradeInputsWithin ) {
|
|
||||||
$.mobile.degradeInputsWithin( this );
|
|
||||||
}
|
|
||||||
|
|
||||||
var thisElem = this[0];
|
var thisElem = this[0];
|
||||||
|
|
||||||
// Run buttonmarkup
|
// Run buttonmarkup
|
||||||
|
@ -3513,14 +3508,21 @@ $.widget( "mobile.page", {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
_setOptions: function( o ) {
|
_setOptions: function (o) {
|
||||||
|
|
||||||
|
var elem = this.element[0];
|
||||||
if ( o.theme !== undefined ) {
|
if ( o.theme !== undefined ) {
|
||||||
this.element.removeClass( "ui-page-theme-" + this.options.theme ).addClass( "ui-page-theme-" + o.theme );
|
elem.classList.remove("ui-page-theme-" + this.options.theme);
|
||||||
|
elem.classList.add("ui-page-theme-" + o.theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( o.contentTheme !== undefined ) {
|
if (o.contentTheme !== undefined) {
|
||||||
this.element.find( "[data-" + $.mobile.ns + "='content']" ).removeClass( "ui-body-" + this.options.contentTheme )
|
var elems = elem.querySelectorAll("*[data-" + $.mobile.ns + "='content']");
|
||||||
.addClass( "ui-body-" + o.contentTheme );
|
for (var i = 0, length = elems.length; i < length; i++) {
|
||||||
|
var el = elems[i];
|
||||||
|
el.classList.remove("ui-body-" + this.options.contentTheme);
|
||||||
|
el.classList.add("ui-body-" + o.contentTheme);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -3560,53 +3562,6 @@ $.widget( "mobile.page", {
|
||||||
});
|
});
|
||||||
})( jQuery );
|
})( jQuery );
|
||||||
|
|
||||||
(function( $, undefined ) {
|
|
||||||
|
|
||||||
$.mobile.degradeInputs = {
|
|
||||||
color: false,
|
|
||||||
date: false,
|
|
||||||
datetime: false,
|
|
||||||
"datetime-local": false,
|
|
||||||
email: false,
|
|
||||||
month: false,
|
|
||||||
number: false,
|
|
||||||
range: "number",
|
|
||||||
search: "text",
|
|
||||||
tel: false,
|
|
||||||
time: false,
|
|
||||||
url: false,
|
|
||||||
week: false
|
|
||||||
};
|
|
||||||
// Backcompat remove in 1.5
|
|
||||||
$.mobile.page.prototype.options.degradeInputs = $.mobile.degradeInputs;
|
|
||||||
|
|
||||||
// Auto self-init widgets
|
|
||||||
$.mobile.degradeInputsWithin = function( target ) {
|
|
||||||
|
|
||||||
target = $( target );
|
|
||||||
|
|
||||||
// Degrade inputs to avoid poorly implemented native functionality
|
|
||||||
target.find( "input" ).not( $.mobile.page.prototype.keepNativeSelector() ).each(function() {
|
|
||||||
var element = $( this ),
|
|
||||||
type = this.getAttribute( "type" ),
|
|
||||||
optType = $.mobile.degradeInputs[ type ] || "text",
|
|
||||||
html, hasType, findstr, repstr;
|
|
||||||
|
|
||||||
if ( $.mobile.degradeInputs[ type ] ) {
|
|
||||||
html = $( "<div>" ).html( element.clone() ).html();
|
|
||||||
// In IE browsers, the type sometimes doesn't exist in the cloned markup, so we replace the closing tag instead
|
|
||||||
hasType = html.indexOf( " type=" ) > -1;
|
|
||||||
findstr = hasType ? /\s+type=["']?\w+['"]?/ : /\/?>/;
|
|
||||||
repstr = " type=\"" + optType + "\" data-" + $.mobile.ns + "type=\"" + type + "\"" + ( hasType ? "" : ">" );
|
|
||||||
|
|
||||||
element.replaceWith( html.replace( findstr, repstr ) );
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
})( jQuery );
|
|
||||||
|
|
||||||
|
|
||||||
(function( $, undefined ) {
|
(function( $, undefined ) {
|
||||||
|
|
||||||
|
@ -4537,18 +4492,21 @@ $.fn.grid = function( options ) {
|
||||||
(function( $, undefined ) {
|
(function( $, undefined ) {
|
||||||
|
|
||||||
// existing base tag?
|
// existing base tag?
|
||||||
var baseElement = $( "head" ).children( "base" ),
|
var baseElement = document.querySelector('head base');
|
||||||
|
|
||||||
|
if (!baseElement) {
|
||||||
|
baseElement = $( "<base>", { href: $.mobile.path.documentBase.hrefNoHash } ).prependTo( $( "head" ) ) ;
|
||||||
|
baseElement = baseElement[0];
|
||||||
|
}
|
||||||
// base element management, defined depending on dynamic base tag support
|
// base element management, defined depending on dynamic base tag support
|
||||||
// TODO move to external widget
|
// TODO move to external widget
|
||||||
base = {
|
var base = {
|
||||||
|
|
||||||
// define base element, for use in routing asset urls that are referenced
|
// define base element, for use in routing asset urls that are referenced
|
||||||
// in Ajax-requested markup
|
// in Ajax-requested markup
|
||||||
element: ( baseElement.length ? baseElement :
|
element: baseElement,
|
||||||
$( "<base>", { href: $.mobile.path.documentBase.hrefNoHash } ).prependTo( $( "head" ) ) ),
|
|
||||||
|
|
||||||
linkSelector: "[src], link[href], a[rel='external'], *[data-ajax='false'], a[target]",
|
linkSelector: "*[src], link[href], a[rel='external'], *[data-ajax='false'], a[target]",
|
||||||
|
|
||||||
// set the generated BASE element's href to a new page's base path
|
// set the generated BASE element's href to a new page's base path
|
||||||
set: function( href ) {
|
set: function( href ) {
|
||||||
|
@ -4561,35 +4519,17 @@ $.fn.grid = function( options ) {
|
||||||
|
|
||||||
// we should use the base tag if we can manipulate it dynamically
|
// we should use the base tag if we can manipulate it dynamically
|
||||||
if ( $.support.dynamicBaseTag ) {
|
if ( $.support.dynamicBaseTag ) {
|
||||||
base.element.attr( "href",
|
base.element.setAttribute("href",
|
||||||
$.mobile.path.makeUrlAbsolute( href, $.mobile.path.documentBase ) );
|
$.mobile.path.makeUrlAbsolute( href, $.mobile.path.documentBase ) );
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
rewrite: function( href, page ) {
|
rewrite: function( href, page ) {
|
||||||
var newPath = $.mobile.path.get( href );
|
|
||||||
|
|
||||||
page.find( base.linkSelector ).each(function( i, link ) {
|
|
||||||
var thisAttr = $( link ).is( "[href]" ) ? "href" :
|
|
||||||
$( link ).is( "[src]" ) ? "src" : "action",
|
|
||||||
theLocation = $.mobile.path.parseLocation(),
|
|
||||||
thisUrl = $( link ).attr( thisAttr );
|
|
||||||
|
|
||||||
// XXX_jblas: We need to fix this so that it removes the document
|
|
||||||
// base URL, and then prepends with the new page URL.
|
|
||||||
// if full path exists and is same, chop it - helps IE out
|
|
||||||
thisUrl = thisUrl.replace( theLocation.protocol + theLocation.doubleSlash +
|
|
||||||
theLocation.host + theLocation.pathname, "" );
|
|
||||||
|
|
||||||
if ( !/^(\w+:|#|\/)/.test( thisUrl ) ) {
|
|
||||||
$( link ).attr( thisAttr, newPath + thisUrl );
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// set the generated BASE element's href to a new page's base path
|
// set the generated BASE element's href to a new page's base path
|
||||||
reset: function(/* href */) {
|
reset: function(/* href */) {
|
||||||
base.element.attr( "href", $.mobile.path.documentBase.hrefNoSearch );
|
base.element.setAttribute( "href", $.mobile.path.documentBase.hrefNoSearch );
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -6012,19 +5952,6 @@ $.fn.grid = function( options ) {
|
||||||
|
|
||||||
// Direct focus to the page title, or otherwise first focusable element
|
// Direct focus to the page title, or otherwise first focusable element
|
||||||
$.mobile.focusPage = function ( page ) {
|
$.mobile.focusPage = function ( page ) {
|
||||||
var autofocus = page.find( "[autofocus]" ),
|
|
||||||
pageTitle = page.find( ".ui-title:eq(0)" );
|
|
||||||
|
|
||||||
if ( autofocus.length ) {
|
|
||||||
autofocus.focus();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( pageTitle.length ) {
|
|
||||||
pageTitle.focus();
|
|
||||||
} else{
|
|
||||||
page.focus();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// No-op implementation of transition degradation
|
// No-op implementation of transition degradation
|
||||||
|
@ -6330,17 +6257,18 @@ $.fn.grid = function( options ) {
|
||||||
|
|
||||||
//prefetch pages when anchors with data-prefetch are encountered
|
//prefetch pages when anchors with data-prefetch are encountered
|
||||||
$.mobile.document.delegate( ".ui-page", "pageshow.prefetch", function() {
|
$.mobile.document.delegate( ".ui-page", "pageshow.prefetch", function() {
|
||||||
var urls = [];
|
var urls = [];
|
||||||
$( this ).find( "a[data-prefetch]" ).each(function() {
|
var prefetchLinks = this.querySelectorAll("a[data-prefetch]");
|
||||||
var $link = $( this ),
|
for (var i = 0, length = prefetchLinks.length; i < length; i++) {
|
||||||
url = $link.attr( "href" );
|
var prefetchLink = prefetchLinks[i];
|
||||||
|
var url = prefetchLink.getAttribute("href");
|
||||||
|
|
||||||
if ( url && $.inArray( url, urls ) === -1 ) {
|
if (url && $.inArray(url, urls) === -1) {
|
||||||
urls.push( url );
|
urls.push(url);
|
||||||
|
|
||||||
$.mobile.loadPage( url, { role: $link.attr( "data-" + $.mobile.ns + "rel" ),prefetch: true } );
|
$.mobile.loadPage(url, { role: prefetchLink.getAttribute("data-" + $.mobile.ns + "rel"), prefetch: true });
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// TODO ensure that the navigate binding in the content widget happens at the right time
|
// TODO ensure that the navigate binding in the content widget happens at the right time
|
||||||
|
@ -6542,24 +6470,26 @@ $.fn.grid = function( options ) {
|
||||||
|
|
||||||
$.mobile.links = function( target ) {
|
$.mobile.links = function( target ) {
|
||||||
|
|
||||||
|
target = target.length ? target[0] : target;
|
||||||
|
|
||||||
|
var links = $(target.getElementsByTagName('a'))
|
||||||
|
.jqmEnhanceable()
|
||||||
|
.filter("[data-rel='popup'][href][href!='']");
|
||||||
|
|
||||||
//links within content areas, tests included with page
|
//links within content areas, tests included with page
|
||||||
$( target )
|
links.each(function () {
|
||||||
.find( "a" )
|
|
||||||
.jqmEnhanceable()
|
|
||||||
.filter( "[data-rel='popup'][href][href!='']" )
|
|
||||||
.each( function() {
|
|
||||||
// Accessibility info for popups
|
// Accessibility info for popups
|
||||||
var element = this,
|
var element = this,
|
||||||
idref = element.getAttribute( "href" ).substring( 1 );
|
idref = element.getAttribute( "href" ).substring( 1 );
|
||||||
|
|
||||||
if ( idref ) {
|
if (idref) {
|
||||||
element.setAttribute( "aria-haspopup", true );
|
element.setAttribute( "aria-haspopup", true );
|
||||||
element.setAttribute( "aria-owns", idref );
|
element.setAttribute( "aria-owns", idref );
|
||||||
element.setAttribute( "aria-expanded", false );
|
element.setAttribute( "aria-expanded", false );
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.end()
|
.end()
|
||||||
.not( ".ui-btn, [data-role='none'], [data-role='nojs']" )
|
.not( ".ui-btn, [data-role='none']" )
|
||||||
.addClass( "ui-link" );
|
.addClass( "ui-link" );
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -12094,6 +12094,9 @@ is separate from validation, and `allowed-pattern` does not affect how the input
|
||||||
this.bindValue = this.value;
|
this.bindValue = this.value;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @suppress {checkTypes}
|
||||||
|
*/
|
||||||
_bindValueChanged: function() {
|
_bindValueChanged: function() {
|
||||||
if (this.value !== this.bindValue) {
|
if (this.value !== this.bindValue) {
|
||||||
this.value = !(this.bindValue || this.bindValue === 0) ? '' : this.bindValue;
|
this.value = !(this.bindValue || this.bindValue === 0) ? '' : this.bindValue;
|
||||||
|
@ -12783,9 +12786,9 @@ is separate from validation, and `allowed-pattern` does not affect how the input
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns false if the element is required and not checked, and true otherwise.
|
* Returns false if the element is required and not checked, and true otherwise.
|
||||||
* @return {Boolean} true if `required` is false, or if `required` and `checked` are both true.
|
* @return {boolean} true if `required` is false, or if `required` and `checked` are both true.
|
||||||
*/
|
*/
|
||||||
_getValidity: function() {
|
_getValidity: function(_value) {
|
||||||
return this.disabled || !this.required || (this.required && this.checked);
|
return this.disabled || !this.required || (this.required && this.checked);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -18391,168 +18394,156 @@ paper-ripple {
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<dom-module id="paper-checkbox" assetpath="bower_components/paper-checkbox/">
|
<dom-module id="paper-checkbox" assetpath="bower_components/paper-checkbox/">
|
||||||
<style>
|
|
||||||
/**
|
|
||||||
@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;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* invalid state */
|
|
||||||
#checkbox.invalid:not(.checked) {
|
|
||||||
border-color: var(--paper-checkbox-error-color, --google-red-500);
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<style>
|
||||||
|
: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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* invalid state */
|
||||||
|
#checkbox.invalid:not(.checked) {
|
||||||
|
border-color: var(--paper-checkbox-error-color, --google-red-500);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div id="checkboxContainer">
|
<div id="checkboxContainer">
|
||||||
<paper-ripple id="ink" class="circle" center="" checked$="[[checked]]"></paper-ripple>
|
<paper-ripple id="ink" class="circle" center="" checked$="[[checked]]"></paper-ripple>
|
||||||
|
@ -18562,7 +18553,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="checkboxLabel" aria-hidden="true"><content></content></div>
|
<div id="checkboxLabel" aria-hidden="true"><content></content></div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -18592,8 +18582,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
*
|
*
|
||||||
* @event iron-change
|
* @event iron-change
|
||||||
*/
|
*/
|
||||||
|
|
||||||
ariaActiveAttribute: {
|
ariaActiveAttribute: {
|
||||||
|
type: String,
|
||||||
value: 'aria-checked'
|
value: 'aria-checked'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -18607,7 +18597,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Update the checkbox aria-label. This is a temporary workaround not
|
* Update the checkbox aria-label. This is a temporary workaround not
|
||||||
* being able to observe changes in <content>
|
* being able to observe changes in <content>
|
||||||
|
@ -18644,9 +18633,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
_computeCheckmarkClass: function(checked) {
|
_computeCheckmarkClass: function(checked) {
|
||||||
return checked ? '' : 'hidden';
|
return checked ? '' : 'hidden';
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</dom-module>
|
</dom-module>
|
||||||
<dom-module id="paper-icon-item" assetpath="bower_components/paper-item/">
|
<dom-module id="paper-icon-item" assetpath="bower_components/paper-item/">
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue