mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update requirecss
This commit is contained in:
parent
57708e9007
commit
91051df493
30 changed files with 600 additions and 221 deletions
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-flex-layout",
|
||||
"version": "1.2.1",
|
||||
"version": "1.2.2",
|
||||
"description": "Provide flexbox-based layouts",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
|
@ -28,14 +28,14 @@
|
|||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/PolymerElements/iron-flex-layout",
|
||||
"_release": "1.2.1",
|
||||
"homepage": "https://github.com/polymerelements/iron-flex-layout",
|
||||
"_release": "1.2.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.2.1",
|
||||
"commit": "ebda425d92e20af300e2e175e5ef234b89a32486"
|
||||
"tag": "v1.2.2",
|
||||
"commit": "41c4f35be1368afb770312b907a258175565dbdf"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-flex-layout.git",
|
||||
"_source": "git://github.com/polymerelements/iron-flex-layout.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-flex-layout"
|
||||
"_originalSource": "polymerelements/iron-flex-layout"
|
||||
}
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-flex-layout",
|
||||
"version": "1.2.1",
|
||||
"version": "1.2.2",
|
||||
"description": "Provide flexbox-based layouts",
|
||||
"keywords": [
|
||||
"web-components",
|
||||
|
|
|
@ -52,12 +52,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
#demo1 {
|
||||
.flex {
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container" id="demo1">
|
||||
<div class="container flex">
|
||||
<div>one</div>
|
||||
<div>two</div>
|
||||
<div>three</div>
|
||||
|
@ -71,7 +71,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
#demo2 {
|
||||
.flex-horizontal {
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
.flexchild {
|
||||
|
@ -79,7 +79,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
}
|
||||
</style>
|
||||
|
||||
<div class="container" id="demo2">
|
||||
<div class="container flex-horizontal">
|
||||
<div>one</div>
|
||||
<div class="flexchild">two (flex)</div>
|
||||
<div>three</div>
|
||||
|
@ -93,17 +93,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
#demo3 {
|
||||
.flex-vertical {
|
||||
@apply(--layout-vertical);
|
||||
height: 220px;
|
||||
}
|
||||
.flexchild {
|
||||
.flexchild-vertical {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container" id="demo3">
|
||||
<div class="container flex-vertical">
|
||||
<div>one</div>
|
||||
<div class="flexchild">two (flex)</div>
|
||||
<div class="flexchild-vertical">two (flex)</div>
|
||||
<div>three</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -115,7 +116,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
#demo4 {
|
||||
.flex-horizontal-with-ratios {
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
.flexchild {
|
||||
|
@ -129,7 +130,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
}
|
||||
</style>
|
||||
|
||||
<div class="container" id="demo4">
|
||||
<div class="container flex-horizontal-with-ratios">
|
||||
<div class="flex3child">one</div>
|
||||
<div class="flexchild">two</div>
|
||||
<div class="flex2child">three</div>
|
||||
|
@ -138,19 +139,37 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</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">
|
||||
#demo5 {
|
||||
.flex-center-align {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container" id="demo5">
|
||||
<div class="container flex-center-align">
|
||||
<div>center</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -162,14 +181,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
#demo6 {
|
||||
.flex-start-align {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-start);
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container" id="demo6">
|
||||
<div class="container flex-start-align">
|
||||
<div>start</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -181,14 +200,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
#demo7 {
|
||||
.flex-end-align {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-end);
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container" id="demo7">
|
||||
<div class="container flex-end-align">
|
||||
<div>end</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -200,13 +219,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
#demo8 {
|
||||
.flex-start-justified {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-start-justified);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container" id="demo8">
|
||||
<div class="container flex-start-justified">
|
||||
<div>start-justified</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -218,13 +237,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
#demo9 {
|
||||
.flex-center-justified {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center-justified);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container" id="demo9">
|
||||
<div class="container flex-center-justified">
|
||||
<div>center-justified</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -236,13 +255,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
#demo10 {
|
||||
.flex-end-justified {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-end-justified);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container" id="demo10">
|
||||
<div class="container flex-end-justified">
|
||||
<div>end-justified</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -254,13 +273,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
#demo10 {
|
||||
.flex-equal-justified {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-justified);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container" id="demo10">
|
||||
<div class="container flex-equal-justified">
|
||||
<div>justified</div>
|
||||
<div>justified</div>
|
||||
<div>justified</div>
|
||||
|
@ -274,13 +293,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
#demo11 {
|
||||
.flex-equal-around-justified {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-around-justified);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container" id="demo11">
|
||||
<div class="container flex-equal-around-justified">
|
||||
<div>around-justified</div>
|
||||
<div>around-justified</div>
|
||||
</div>
|
||||
|
@ -293,12 +312,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
#demo12 {
|
||||
.flex-self-align {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-justified);
|
||||
height: 120px;
|
||||
}
|
||||
#demo12 div {
|
||||
.flex-self-align div {
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
.child1 {
|
||||
|
@ -315,7 +334,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
}
|
||||
</style>
|
||||
|
||||
<div class="container" id="demo12">
|
||||
<div class="container flex-self-align">
|
||||
<div class="child1">one</div>
|
||||
<div class="child2">two</div>
|
||||
<div class="child3">three</div>
|
||||
|
@ -330,14 +349,34 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
#demo13 {
|
||||
.flex-wrap {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-wrap);
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container" id="demo13">
|
||||
<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>
|
||||
|
@ -352,10 +391,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
#demo14 {
|
||||
.general {
|
||||
width: 100%;
|
||||
}
|
||||
#demo14 > div {
|
||||
.general > div {
|
||||
background-color: #ccc;
|
||||
padding: 4px;
|
||||
margin: 12px;
|
||||
|
@ -374,7 +413,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
}
|
||||
</style>
|
||||
|
||||
<div id="demo14">
|
||||
<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>
|
||||
|
|
|
@ -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 */
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue