1
0
Fork 0
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:
Luke Pulverenti 2016-06-04 23:50:07 -04:00
parent 217234f89d
commit b33a3302ed
109 changed files with 474 additions and 733 deletions

View file

@ -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",

View file

@ -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

View file

@ -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:

View file

@ -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": []
}

View file

@ -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>

View file

@ -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>