mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update components
This commit is contained in:
Luke Pulverenti
parent
02e924e3c5
commit
05b25af69f
55 changed files with 1554 additions and 907 deletions
|
|
@ -1,95 +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
|
||||
-->
|
||||
|
||||
<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>
|
||||
|
|
@ -19,10 +19,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
<link rel="import" href="demo-snippet.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
|
||||
<link rel="import" href="../iron-flex-layout.html">
|
||||
|
||||
<style>
|
||||
<style is="custom-style" include="demo-pages-shared-styles">
|
||||
demo-snippet {
|
||||
--demo-snippet-demo: {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
background-color: #ccc;
|
||||
padding: 5px;
|
||||
|
|
@ -35,20 +41,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
min-height: 20px;
|
||||
}
|
||||
|
||||
demo-snippet {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vertical-section {
|
||||
padding: 0 !important;
|
||||
.vertical-section-container {
|
||||
max-width: 700px
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved class="fullbleed">
|
||||
|
||||
<h4>Horizontal and vertical layout</h4>
|
||||
<div class="vertical-section">
|
||||
<div class="vertical-section-container centered">
|
||||
<h4>Horizontal and vertical layout</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
@ -56,7 +57,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
@apply(--layout-horizontal);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container flex">
|
||||
<div>one</div>
|
||||
<div>two</div>
|
||||
|
|
@ -64,10 +64,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Flexible children</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Flexible children</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
@ -86,10 +84,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Flexible children in vertical layouts</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Flexible children in vertical layouts</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
@ -109,10 +105,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Flex ratios</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Flex ratios</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
@ -137,10 +131,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Cross-axis stretch alignment (default)</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Cross-axis stretch alignment (default)</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
@ -155,10 +147,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Cross-axis center alignment</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Cross-axis center alignment</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
@ -174,10 +164,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Cross-axis start alignment</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Cross-axis start alignment</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
@ -193,10 +181,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Cross-axis end alignment</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Cross-axis end alignment</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
@ -212,10 +198,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Justification, start justified</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Justification, start justified</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
@ -230,10 +214,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Justification, start justified</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Justification, start justified</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
@ -248,10 +230,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Justification, end justified</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Justification, end justified</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
@ -266,10 +246,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Justification, equal space between elements</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Justification, equal space between elements</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
@ -286,10 +264,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Justification, equal space around each element</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Justification, equal space around each element</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
@ -305,10 +281,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Self alignment</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Self alignment</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
@ -342,10 +316,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Wrapping</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Wrapping</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
@ -364,10 +336,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>Reversed layouts</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>Reversed layouts</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
@ -384,10 +354,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
|
||||
<h4>General purpose ruls</h4>
|
||||
<div class="vertical-section">
|
||||
<h4>General purpose rules</h4>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue