mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update polymer
This commit is contained in:
parent
8119b930e4
commit
cbb6337b41
74 changed files with 2195 additions and 1393 deletions
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-fab",
|
||||
"version": "1.0.4",
|
||||
"version": "1.0.5",
|
||||
"description": "A material design floating action button",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
@ -36,11 +36,11 @@
|
|||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.0.4",
|
||||
"_release": "1.0.5",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.4",
|
||||
"commit": "7eddddad90a5ca962209fa7241435459ebb9b6b7"
|
||||
"tag": "v1.0.5",
|
||||
"commit": "2f1cebbceeb76b5f48f2d82ea02001e0725d2d6e"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-fab.git",
|
||||
"_target": "~1.0.2",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-fab",
|
||||
"version": "1.0.4",
|
||||
"version": "1.0.5",
|
||||
"description": "A material design floating action button",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
|
@ -63,33 +63,44 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<div>
|
||||
<h4>Enabled</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-fab icon="arrow-forward" title="arrow-forward" tabindex="0"></paper-fab>
|
||||
<paper-fab icon="create" title="create" tabindex="0"></paper-fab>
|
||||
<paper-fab icon="favorite" title="heart" tabindex="0"></paper-fab>
|
||||
<paper-fab mini icon="done" title="done" tabindex="0"></paper-fab>
|
||||
<paper-fab mini icon="reply" title="reply" tabindex="0"></paper-fab>
|
||||
<paper-fab icon="arrow-forward" title="arrow-forward"></paper-fab>
|
||||
<paper-fab icon="create" title="create"></paper-fab>
|
||||
<paper-fab icon="favorite" title="heart"></paper-fab>
|
||||
<paper-fab mini icon="done" title="done"></paper-fab>
|
||||
<paper-fab mini icon="reply" title="reply"></paper-fab>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Disabled</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-fab disabled icon="arrow-forward" title="arrow-forward" tabindex="0"></paper-fab>
|
||||
<paper-fab disabled icon="create" title="create" tabindex="0"></paper-fab>
|
||||
<paper-fab disabled icon="favorite" title="heart" tabindex="0"></paper-fab>
|
||||
<paper-fab disabled mini icon="done" title="done" tabindex="0"></paper-fab>
|
||||
<paper-fab disabled mini icon="reply" title="reply" tabindex="0"></paper-fab>
|
||||
<paper-fab disabled icon="arrow-forward" title="arrow-forward"></paper-fab>
|
||||
<paper-fab disabled icon="create" title="create"></paper-fab>
|
||||
<paper-fab disabled icon="favorite" title="heart"></paper-fab>
|
||||
<paper-fab disabled mini icon="done" title="done"></paper-fab>
|
||||
<paper-fab disabled mini icon="reply" title="reply"></paper-fab>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Colors</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-fab icon="arrow-forward" title="arrow-forward" tabindex="0" class="blue"></paper-fab>
|
||||
<paper-fab icon="create" title="create" tabindex="0" class="red"></paper-fab>
|
||||
<paper-fab icon="favorite" title="heart" tabindex="0" class="orange"></paper-fab>
|
||||
<paper-fab mini icon="done" title="done" tabindex="0" class="green"></paper-fab>
|
||||
<paper-fab mini icon="reply" title="reply" tabindex="0" class="blue"></paper-fab>
|
||||
<paper-fab icon="arrow-forward" title="arrow-forward" class="blue"></paper-fab>
|
||||
<paper-fab icon="create" title="create" class="red"></paper-fab>
|
||||
<paper-fab icon="favorite" title="heart" class="orange"></paper-fab>
|
||||
<paper-fab mini icon="done" title="done" class="green"></paper-fab>
|
||||
<paper-fab mini icon="reply" title="reply" class="blue"></paper-fab>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Noink</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-fab noink icon="arrow-forward" title="arrow-forward"></paper-fab>
|
||||
<paper-fab noink icon="create" title="create"></paper-fab>
|
||||
<paper-fab noink icon="favorite" title="heart"></paper-fab>
|
||||
<paper-fab noink mini icon="done" title="done"></paper-fab>
|
||||
<paper-fab noink mini icon="reply" title="reply"></paper-fab>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -18,7 +18,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
|
||||
|
||||
<!--
|
||||
Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Button</a>
|
||||
Material design: [Floating Action Button](https://www.google.com/design/spec/components/buttons-floating-action-button.html)
|
||||
|
||||
`paper-fab` is a floating action button. It contains an image placed in the center and
|
||||
comes in two sizes: regular size and a smaller size by applying the attribute `mini`. When
|
||||
|
@ -49,6 +49,7 @@ Custom property | Description | Default
|
|||
`--paper-fab` | Mixin applied to the button | `{}`
|
||||
`--paper-fab-mini` | Mixin applied to a mini button | `{}`
|
||||
`--paper-fab-disabled` | Mixin applied to a disabled button | `{}`
|
||||
`--paper-fab-iron-icon` | Mixin applied to the iron-icon within the button | `{}`
|
||||
|
||||
@group Paper Elements
|
||||
@demo demo/index.html
|
||||
|
@ -56,63 +57,59 @@ Custom property | Description | Default
|
|||
-->
|
||||
|
||||
<dom-module id="paper-fab">
|
||||
<style>
|
||||
<template strip-whitespace>
|
||||
<style include="paper-material">
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
outline: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
outline: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: var(--paper-fab-background, --accent-color);
|
||||
color: var(--text-primary-color);
|
||||
border-radius: 50%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: var(--paper-fab-background, --accent-color);
|
||||
color: var(--text-primary-color);
|
||||
border-radius: 50%;
|
||||
padding: 16px;
|
||||
|
||||
z-index: 0;
|
||||
z-index: 0;
|
||||
|
||||
@apply(--paper-fab);
|
||||
}
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center-center);
|
||||
@apply(--paper-fab);
|
||||
}
|
||||
|
||||
:host([mini]) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 8px;
|
||||
:host([mini]) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 8px;
|
||||
|
||||
@apply(--paper-fab-mini);
|
||||
}
|
||||
@apply(--paper-fab-mini);
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
color: var(--paper-fab-disabled-text, --paper-grey-500);
|
||||
background: var(--paper-fab-disabled-background, --paper-grey-300);
|
||||
@apply(--paper-fab-disabled);
|
||||
}
|
||||
:host([disabled]) {
|
||||
color: var(--paper-fab-disabled-text, --paper-grey-500);
|
||||
background: var(--paper-fab-disabled-background, --paper-grey-300);
|
||||
@apply(--paper-fab-disabled);
|
||||
}
|
||||
|
||||
paper-material {
|
||||
border-radius: inherit;
|
||||
@apply(--layout-fit);
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center-center);
|
||||
}
|
||||
iron-icon {
|
||||
@apply(--paper-fab-iron-icon);
|
||||
}
|
||||
|
||||
.keyboard-focus {
|
||||
background: var(--paper-fab-keyboard-focus-background, --paper-pink-900);
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<paper-ripple></paper-ripple>
|
||||
<paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated>
|
||||
<iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>
|
||||
</paper-material>
|
||||
:host(.keyboard-focus) {
|
||||
background: var(--paper-fab-keyboard-focus-background, --paper-pink-900);
|
||||
}
|
||||
</style>
|
||||
<iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>
|
||||
</template>
|
||||
</dom-module>
|
||||
<script>
|
||||
|
@ -163,14 +160,6 @@ Custom property | Description | Default
|
|||
value: false,
|
||||
reflectToAttribute: true
|
||||
}
|
||||
},
|
||||
|
||||
_computeContentClass: function(receivedFocusFromKeyboard) {
|
||||
var className = 'content';
|
||||
if (receivedFocusFromKeyboard) {
|
||||
className += ' keyboard-focus';
|
||||
}
|
||||
return className;
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
@ -18,7 +18,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<script src="../../test-fixture/test-fixture-mocha.js"></script>
|
||||
|
||||
<link rel="import" href="../../core-icons/core-icons.html">
|
||||
<link rel="import" href="../../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
<link rel="import" href="../paper-fab.html">
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue