mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
merge from dev
This commit is contained in:
parent
1c8f02ce0f
commit
33b01d778c
911 changed files with 34157 additions and 57125 deletions
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-flex-layout",
|
||||
"version": "1.0.4",
|
||||
"version": "1.2.2",
|
||||
"description": "Provide flexbox-based layouts",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
|
@ -18,19 +18,22 @@
|
|||
"url": "git://github.com/PolymerElements/iron-flex-layout.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
"polymer": "Polymer/polymer#^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"marked-element": "polymerelements/marked-element#^1.0.0",
|
||||
"prism-element": "PolymerElements/prism-element#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/PolymerElements/iron-flex-layout",
|
||||
"_release": "1.0.4",
|
||||
"_release": "1.2.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.4",
|
||||
"commit": "dcfc54b0d358269bf0c72180b4ab090fc4931ecd"
|
||||
"tag": "v1.2.2",
|
||||
"commit": "41c4f35be1368afb770312b907a258175565dbdf"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-flex-layout.git",
|
||||
"_target": "^1.0.0",
|
||||
|
|
22
dashboard-ui/bower_components/iron-flex-layout/.travis.yml
vendored
Normal file
22
dashboard-ui/bower_components/iron-flex-layout/.travis.yml
vendored
Normal file
|
@ -0,0 +1,22 @@
|
|||
language: node_js
|
||||
sudo: false
|
||||
before_script:
|
||||
- npm install web-component-tester
|
||||
- npm install bower
|
||||
- 'export PATH=$PWD/node_modules/.bin:$PATH'
|
||||
- bower install
|
||||
env:
|
||||
global:
|
||||
- secure: jFaXkmco40NlJT4VyFYM34Zv9D1XVfLXgixobnyHQyJDBKSXrNLcwDuvrGUpJx/pwBCxEhKAbvxeJ+PBMUv8QV08MAdw2S6QOsIe3CUxAehoNoOMJw5duhE8faWlz8qzmCWEowHVFUeVsd0ZUsgOu6RTspj2A51D/CztQuW0Ljw=
|
||||
- secure: fKrO5yMx8kZM1WQ3k0bzo6MCREKGW2WkCl2suDjuEtb1SQ/SaZa9Tun0fcqIHVJqg9+jOS1Romt/+MN27Nc6IT1tv/NdLd+uWjtMA+OzLyv48gzcdu8Ls/TISUGm5Wb7XHkcvMAb1tRoBs5BOvQ/85FilZLEq1km8snG9ZsOOWI=
|
||||
node_js: 4
|
||||
addons:
|
||||
firefox: latest
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
script:
|
||||
- 'true || xvfb-run wct'
|
||||
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then true || wct -s 'default'; fi"
|
72
dashboard-ui/bower_components/iron-flex-layout/CONTRIBUTING.md
vendored
Normal file
72
dashboard-ui/bower_components/iron-flex-layout/CONTRIBUTING.md
vendored
Normal file
|
@ -0,0 +1,72 @@
|
|||
|
||||
<!--
|
||||
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 :)
|
||||
-->
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
|
||||
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
|
||||
|
||||
### Filing Issues
|
||||
|
||||
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
|
||||
|
||||
1. **Who will use the feature?** _“As someone filling out a form…”_
|
||||
2. **When will they use the feature?** _“When I enter an invalid value…”_
|
||||
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
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).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
### Submitting Pull Requests
|
||||
|
||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
||||
|
||||
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:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
||||
```markdown
|
||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
||||
```
|
||||
|
||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
||||
|
||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-flex-layout",
|
||||
"version": "1.0.4",
|
||||
"version": "1.2.2",
|
||||
"description": "Provide flexbox-based layouts",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
|
@ -18,11 +18,14 @@
|
|||
"url": "git://github.com/PolymerElements/iron-flex-layout.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
"polymer": "Polymer/polymer#^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"marked-element": "polymerelements/marked-element#^1.0.0",
|
||||
"prism-element": "PolymerElements/prism-element#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0"
|
||||
}
|
||||
},
|
||||
"ignore": []
|
||||
}
|
||||
|
|
|
@ -284,7 +284,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
html /deep/ .fixed-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
botttom: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
html /deep/ .fixed-bottom {
|
||||
|
@ -295,7 +295,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
html /deep/ .fixed-left {
|
||||
top: 0;
|
||||
botttom: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
|
95
dashboard-ui/bower_components/iron-flex-layout/demo/demo-snippet.html
vendored
Normal file
95
dashboard-ui/bower_components/iron-flex-layout/demo/demo-snippet.html
vendored
Normal file
|
@ -0,0 +1,95 @@
|
|||
<!--
|
||||
@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="../../prism-element/prism-highlighter.html">
|
||||
<link rel="import" href="../../marked-element/marked-element.html">
|
||||
|
||||
<!--
|
||||
Quick element that can display the source of a code snippet and a rendered demo.
|
||||
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
#demo6 {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-start);
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container" id="demo6">
|
||||
<div>start</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
-->
|
||||
|
||||
<dom-module id="demo-snippet">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.demo {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.code {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #fafafa;
|
||||
font-size: 13px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.code > pre {
|
||||
margin: 0;
|
||||
padding: 0 0 10px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<prism-highlighter></prism-highlighter>
|
||||
|
||||
<div class="demo">
|
||||
<content id="content"></content>
|
||||
</div>
|
||||
|
||||
<marked-element markdown=[[_markdown]]>
|
||||
<div class="markdown-html code"></div>
|
||||
</marked-element>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'demo-snippet',
|
||||
|
||||
properties: {
|
||||
_markdown: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
var template = Polymer.dom(this).queryDistributedElements('template')[0];
|
||||
|
||||
var snippet = Polymer.domInnerHTML.getInnerHTML(template);
|
||||
this._markdown = '```\n' + snippet + '\n' + '```';
|
||||
|
||||
// Stamp the template.
|
||||
Polymer.dom(this).appendChild(document.importNode(template.content, true));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</dom-module>
|
|
@ -2,41 +2,427 @@
|
|||
<!--
|
||||
@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
|
||||
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
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>iron-flex-layout</title>
|
||||
<title>iron-flex-layout demo</title>
|
||||
<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="../../paper-styles/paper-styles.html">
|
||||
<link rel="import" href="x-app.html">
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
<link rel="import" href="demo-snippet.html">
|
||||
<link rel="import" href="../iron-flex-layout.html">
|
||||
|
||||
<style>
|
||||
|
||||
html, body, x-app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
.container {
|
||||
background-color: #ccc;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
}
|
||||
.container > div {
|
||||
padding: 15px;
|
||||
margin: 5px;
|
||||
background-color: white;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
demo-snippet {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vertical-section {
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body class="fullbleed">
|
||||
<body unresolved class="fullbleed">
|
||||
|
||||
<x-app></x-app>
|
||||
<h4>Horizontal and vertical layout</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex {
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex">
|
||||
<div>one</div>
|
||||
<div>two</div>
|
||||
<div>three</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Flexible children</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-horizontal {
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
.flexchild {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-horizontal">
|
||||
<div>one</div>
|
||||
<div class="flexchild">two (flex)</div>
|
||||
<div>three</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Flexible children in vertical layouts</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-vertical {
|
||||
@apply(--layout-vertical);
|
||||
height: 220px;
|
||||
}
|
||||
.flexchild-vertical {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-vertical">
|
||||
<div>one</div>
|
||||
<div class="flexchild-vertical">two (flex)</div>
|
||||
<div>three</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Flex ratios</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-horizontal-with-ratios {
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
.flexchild {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
.flex2child {
|
||||
@apply(--layout-flex-2);
|
||||
}
|
||||
.flex3child {
|
||||
@apply(--layout-flex-3);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-horizontal-with-ratios">
|
||||
<div class="flex3child">one</div>
|
||||
<div class="flexchild">two</div>
|
||||
<div class="flex2child">three</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Cross-axis stretch alignment (default)</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-stretch-align {
|
||||
@apply(--layout-horizontal);
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-stretch-align">
|
||||
<div>stretch</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Cross-axis center alignment</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-center-align {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-center-align">
|
||||
<div>center</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Cross-axis start alignment</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-start-align {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-start);
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-start-align">
|
||||
<div>start</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Cross-axis end alignment</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-end-align {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-end);
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-end-align">
|
||||
<div>end</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Justification, start justified</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-start-justified {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-start-justified);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-start-justified">
|
||||
<div>start-justified</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Justification, start justified</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-center-justified {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center-justified);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-center-justified">
|
||||
<div>center-justified</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Justification, end justified</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-end-justified {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-end-justified);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-end-justified">
|
||||
<div>end-justified</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Justification, equal space between elements</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-equal-justified {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-justified);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-equal-justified">
|
||||
<div>justified</div>
|
||||
<div>justified</div>
|
||||
<div>justified</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Justification, equal space around each element</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-equal-around-justified {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-around-justified);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-equal-around-justified">
|
||||
<div>around-justified</div>
|
||||
<div>around-justified</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Self alignment</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-self-align {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-justified);
|
||||
height: 120px;
|
||||
}
|
||||
.flex-self-align div {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
.child1 {
|
||||
@apply(--layout-self-start);
|
||||
}
|
||||
.child2 {
|
||||
@apply(--layout-self-center);
|
||||
}
|
||||
.child3 {
|
||||
@apply(--layout-self-end);
|
||||
}
|
||||
.child4 {
|
||||
@apply(--layout-self-stretch);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-self-align">
|
||||
<div class="child1">one</div>
|
||||
<div class="child2">two</div>
|
||||
<div class="child3">three</div>
|
||||
<div class="child4">four</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Wrapping</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-wrap {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-wrap);
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-wrap">
|
||||
<div>one</div>
|
||||
<div>two</div>
|
||||
<div>three</div>
|
||||
<div>four</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Reversed layouts</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.flex-reversed {
|
||||
@apply(--layout-horizontal-reverse);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex-reversed">
|
||||
<div>one</div>
|
||||
<div>two</div>
|
||||
<div>three</div>
|
||||
<div>four</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>General purpose ruls</h4>
|
||||
<div class="vertical-section">
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.general {
|
||||
width: 100%;
|
||||
}
|
||||
.general > div {
|
||||
background-color: #ccc;
|
||||
padding: 4px;
|
||||
margin: 12px;
|
||||
}
|
||||
.block {
|
||||
@apply(--layout-block);
|
||||
}
|
||||
.invisible {
|
||||
@apply(--layout-invisible);
|
||||
}
|
||||
.relative {
|
||||
@apply(--layout-relative);
|
||||
}
|
||||
.fit {
|
||||
@apply(--layout-fit);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="general">
|
||||
<div>Before <span>[A Span]</span> After</div>
|
||||
<div>Before <span class="block">[A Block Span]</span> After</div>
|
||||
<div>Before invisible span <span class="invisible">Not displayed</span> After invisible span</div>
|
||||
<div class="relative" style="height: 100px;">
|
||||
<div class="fit" style="background-color: #000;color: white">Fit</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,118 +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
|
||||
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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../iron-flex-layout.html">
|
||||
|
||||
<dom-module id="x-app">
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--paper-font-body2);
|
||||
}
|
||||
|
||||
[nav] {
|
||||
@apply(--layout-vertical);
|
||||
|
||||
width: 200px;
|
||||
background-color: var(--paper-grey-300);
|
||||
}
|
||||
|
||||
[item] {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
|
||||
height: 60px;
|
||||
padding-left: 16px;
|
||||
border-bottom: 1px solid var(--paper-grey-400);
|
||||
}
|
||||
|
||||
[main] {
|
||||
@apply(--layout-flex);
|
||||
@apply(--layout-vertical);
|
||||
}
|
||||
|
||||
[header] {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
|
||||
@apply(--paper-font-subhead);
|
||||
|
||||
height: 60px;
|
||||
background-color: var(--google-blue-700);
|
||||
padding: 0 16px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
[tool] {
|
||||
@apply(--layout-inline);
|
||||
}
|
||||
|
||||
[content] {
|
||||
@apply(--layout-flex);
|
||||
|
||||
overflow: auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
[card] {
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center-center);
|
||||
|
||||
@apply(--shadow-elevation-2dp);
|
||||
|
||||
height: 300px;
|
||||
max-width: 800px;
|
||||
margin: 16px auto;
|
||||
font-weight: bold;
|
||||
background-color: var(--paper-grey-200);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
|
||||
<div nav>
|
||||
<div content>
|
||||
<div item>ITEM 1</div>
|
||||
<div item>ITEM 2</div>
|
||||
<div item>ITEM 3</div>
|
||||
<div item>ITEM 4</div>
|
||||
<div item>ITEM 5</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div main>
|
||||
<div header>
|
||||
<div tool>Foo</div>
|
||||
<div class="flex"></div>
|
||||
<div tool>Bar</div>
|
||||
</div>
|
||||
<div content>
|
||||
<div card>CARD 1</div>
|
||||
<div card>CARD 2</div>
|
||||
<div card>CARD 3</div>
|
||||
<div card>CARD 4</div>
|
||||
<div card>CARD 5</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
is: 'x-app'
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -2,11 +2,11 @@
|
|||
<!--
|
||||
@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
|
||||
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
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
|
|
@ -47,10 +47,7 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
|
|||
};
|
||||
|
||||
--layout-horizontal: {
|
||||
/* @apply(--layout); */
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
@apply(--layout);
|
||||
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
|
@ -58,16 +55,15 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
|
|||
};
|
||||
|
||||
--layout-horizontal-reverse: {
|
||||
@apply(--layout);
|
||||
|
||||
-ms-flex-direction: row-reverse;
|
||||
-webkit-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
};
|
||||
|
||||
--layout-vertical: {
|
||||
/* @apply(--layout); */
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
@apply(--layout);
|
||||
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
|
@ -75,6 +71,8 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
|
|||
};
|
||||
|
||||
--layout-vertical-reverse: {
|
||||
@apply(--layout);
|
||||
|
||||
-ms-flex-direction: column-reverse;
|
||||
-webkit-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
|
@ -231,13 +229,8 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
|
|||
};
|
||||
|
||||
--layout-center-center: {
|
||||
/* @apply(--layout-center --layout-center-justified); */
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
@apply(--layout-center);
|
||||
@apply(--layout-center-justified);
|
||||
};
|
||||
|
||||
/* self alignment */
|
||||
|
@ -295,6 +288,11 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
|
|||
overflow: auto;
|
||||
};
|
||||
|
||||
--layout-fullbleed: {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
};
|
||||
|
||||
/* fixed position */
|
||||
|
||||
--layout-fixed-top: {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue