mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update button styles
This commit is contained in:
parent
217234f89d
commit
b33a3302ed
109 changed files with 474 additions and 733 deletions
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-button",
|
||||
"version": "1.0.11",
|
||||
"version": "1.0.12",
|
||||
"description": "Material design button",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
@ -16,34 +16,33 @@
|
|||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/paper-button"
|
||||
"url": "git://github.com/PolymerElements/paper-button.git"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/paper-button",
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0",
|
||||
"paper-ripple": "polymerelements/paper-ripple#^1.0.0",
|
||||
"paper-material": "polymerelements/paper-material#^1.0.0",
|
||||
"paper-behaviors": "polymerelements/paper-behaviors#^1.0.0",
|
||||
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0"
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
|
||||
"paper-material": "PolymerElements/paper-material#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "polymer/web-component-tester#^3.4.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"iron-icon": "polymerelements/iron-icon#^1.0.0",
|
||||
"iron-icons": "polymerelements/iron-icons#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0"
|
||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"_release": "1.0.11",
|
||||
"_release": "1.0.12",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.11",
|
||||
"commit": "7d0f75300372d91835ae7298593d50987d4a610f"
|
||||
"tag": "v1.0.12",
|
||||
"commit": "96c3a2661c355223d0b41e1d34126f9c62d544dc"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-button.git",
|
||||
"_target": "~1.0.1",
|
||||
|
|
|
@ -1,15 +1,14 @@
|
|||
language: node_js
|
||||
sudo: false
|
||||
sudo: required
|
||||
before_script:
|
||||
- npm install web-component-tester
|
||||
- npm install bower
|
||||
- 'export PATH=$PWD/node_modules/.bin:$PATH'
|
||||
- npm install -g bower polylint web-component-tester
|
||||
- bower install
|
||||
- polylint
|
||||
env:
|
||||
global:
|
||||
- secure: geFs7Ipj7/9knSKT2FEYAB7b/zbmgWFXCgZm7cEcrG71EX/HB1do3spANGOlRly77xaZtNNF1OGYBHIP36DSyMEHRYj6TYtTrPIr2ySeHvoOv0nzYakXdscxBvfI5HJrNiFpld80KoGl8vKfroLNpVLallgumX3diydypolvW1I=
|
||||
- secure: IILEhg3m49exN5hpxbPP1JA/q+s4v/QpOMbDiXVRV4Uz1XwOPGLCyrAB0ENjwzMCyeOah1Z2MyQSUiPisLheHKvZifhviNqizWN//8EDkg1gkU0R6egGdotD5mBb3UpCD0CNZ8+D0FYwOpdCWCruwr7N+zDUN+6r5H07KP/VeUU=
|
||||
node_js: 4
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: latest
|
||||
apt:
|
||||
|
@ -17,6 +16,8 @@ addons:
|
|||
- google-chrome
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
sauce_connect: true
|
||||
script:
|
||||
- xvfb-run wct
|
||||
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
|
||||
dist: trusty
|
||||
|
|
|
@ -1,11 +1,16 @@
|
|||
|
||||
<!--
|
||||
This file is autogenerated based on
|
||||
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
||||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
|
||||
You can however override the jsbin link with one that's customized to this
|
||||
specific element:
|
||||
|
||||
jsbin=https://jsbin.com/cagaye/edit?html,output
|
||||
-->
|
||||
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
|
||||
|
@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
|
|||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output).
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
|
@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
|
|||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax:
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, #40
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-button",
|
||||
"version": "1.0.11",
|
||||
"version": "1.0.12",
|
||||
"description": "Material design button",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
@ -16,27 +16,26 @@
|
|||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/paper-button"
|
||||
"url": "git://github.com/PolymerElements/paper-button.git"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/paper-button",
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0",
|
||||
"paper-ripple": "polymerelements/paper-ripple#^1.0.0",
|
||||
"paper-material": "polymerelements/paper-material#^1.0.0",
|
||||
"paper-behaviors": "polymerelements/paper-behaviors#^1.0.0",
|
||||
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0"
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
|
||||
"paper-material": "PolymerElements/paper-material#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "polymer/web-component-tester#^3.4.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"iron-icon": "polymerelements/iron-icon#^1.0.0",
|
||||
"iron-icons": "polymerelements/iron-icons#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0"
|
||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": []
|
||||
}
|
||||
|
|
|
@ -117,6 +117,22 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</style>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h3>Buttons can be used as a link</h3>
|
||||
<demo-snippet class="centered-demo">
|
||||
<template>
|
||||
<a href="https://www.polymer-project.org/" tabindex="-1">
|
||||
<paper-button raised>Polymer Project</paper-button>
|
||||
</a>
|
||||
<style>
|
||||
a paper-button,
|
||||
a:active paper-button,
|
||||
a:visited paper-button {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -9,10 +9,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../paper-material/paper-material.html">
|
||||
<link rel="import" href="../paper-ripple/paper-ripple.html">
|
||||
<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
|
||||
<link rel="import" href="../paper-material/paper-material.html">
|
||||
|
||||
<!--
|
||||
Material design: [Buttons](https://www.google.com/design/spec/components/buttons.html)
|
||||
|
@ -40,6 +39,14 @@ create a button with an icon and some text:
|
|||
custom button content
|
||||
</paper-button>
|
||||
|
||||
To use `paper-button` as a link, wrap it in an anchor tag. Since `paper-button` will already
|
||||
receive focus, you may want to prevent the anchor tag from receiving focus as well by setting
|
||||
its tabindex to -1.
|
||||
|
||||
<a href="https://www.polymer-project.org/" tabindex="-1">
|
||||
<paper-button raised>Polymer Project</paper-button>
|
||||
</a>
|
||||
|
||||
### Styling
|
||||
|
||||
Style the button with CSS as you would a normal DOM element.
|
||||
|
@ -76,16 +83,17 @@ Custom property | Description | Default
|
|||
|
||||
<dom-module id="paper-button">
|
||||
<template strip-whitespace>
|
||||
|
||||
<style include="paper-material">
|
||||
:host {
|
||||
display: inline-block;
|
||||
@apply(--layout-inline);
|
||||
@apply(--layout-center-center);
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-width: 5.14em;
|
||||
margin: 0 0.29em;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
font: inherit;
|
||||
text-transform: uppercase;
|
||||
outline-width: 0;
|
||||
|
@ -98,6 +106,7 @@ Custom property | Description | Default
|
|||
z-index: 0;
|
||||
padding: 0.7em 0.57em;
|
||||
|
||||
@apply(--paper-font-common-base);
|
||||
@apply(--paper-button);
|
||||
}
|
||||
|
||||
|
@ -123,50 +132,47 @@ Custom property | Description | Default
|
|||
paper-ripple {
|
||||
color: var(--paper-button-ink-color);
|
||||
}
|
||||
|
||||
:host > ::content * {
|
||||
text-transform: inherit;
|
||||
}
|
||||
</style>
|
||||
|
||||
<content></content>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'paper-button',
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'paper-button',
|
||||
|
||||
behaviors: [
|
||||
Polymer.PaperButtonBehavior
|
||||
],
|
||||
behaviors: [
|
||||
Polymer.PaperButtonBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* If true, the button should be styled with a shadow.
|
||||
*/
|
||||
raised: {
|
||||
type: Boolean,
|
||||
reflectToAttribute: true,
|
||||
value: false,
|
||||
observer: '_calculateElevation'
|
||||
}
|
||||
},
|
||||
|
||||
_calculateElevation: function() {
|
||||
if (!this.raised) {
|
||||
this._setElevation(0);
|
||||
} else {
|
||||
Polymer.PaperButtonBehaviorImpl._calculateElevation.apply(this);
|
||||
}
|
||||
}
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* If true, the button should be styled with a shadow.
|
||||
*/
|
||||
raised: {
|
||||
type: Boolean,
|
||||
reflectToAttribute: true,
|
||||
value: false,
|
||||
observer: '_calculateElevation'
|
||||
}
|
||||
},
|
||||
Fired when the animation finishes.
|
||||
This is useful if you want to wait until
|
||||
the ripple animation finishes to perform some action.
|
||||
|
||||
_calculateElevation: function() {
|
||||
if (!this.raised) {
|
||||
this._setElevation(0);
|
||||
} else {
|
||||
Polymer.PaperButtonBehaviorImpl._calculateElevation.apply(this);
|
||||
}
|
||||
}
|
||||
/**
|
||||
|
||||
Fired when the animation finishes.
|
||||
This is useful if you want to wait until
|
||||
the ripple animation finishes to perform some action.
|
||||
|
||||
@event transitionend
|
||||
@param {{node: Object}} detail Contains the animated node.
|
||||
*/
|
||||
});
|
||||
</script>
|
||||
@event transitionend
|
||||
Event param: {{node: Object}} detail Contains the animated node.
|
||||
*/
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue