1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update requirecss

This commit is contained in:
Luke Pulverenti 2015-12-01 00:22:52 -05:00
parent 57708e9007
commit 91051df493
30 changed files with 600 additions and 221 deletions

View file

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

View file

@ -1,6 +1,6 @@
{
"name": "iron-flex-layout",
"version": "1.2.1",
"version": "1.2.2",
"description": "Provide flexbox-based layouts",
"keywords": [
"web-components",

View file

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

View file

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