Index: polymer_1.2.3/bower_components/iron-flex-layout/iron-flex-layout.html |
diff --git a/polymer_1.0.4/bower_components/iron-flex-layout/iron-flex-layout.html b/polymer_1.2.3/bower_components/iron-flex-layout/iron-flex-layout.html |
similarity index 81% |
copy from polymer_1.0.4/bower_components/iron-flex-layout/iron-flex-layout.html |
copy to polymer_1.2.3/bower_components/iron-flex-layout/iron-flex-layout.html |
index ed9cd7bb7b15412865297b4897115925f41e27b0..09b4657ad98b1ec004f4021016546ca80c9b25b4 100644 |
--- a/polymer_1.0.4/bower_components/iron-flex-layout/iron-flex-layout.html |
+++ b/polymer_1.2.3/bower_components/iron-flex-layout/iron-flex-layout.html |
@@ -10,8 +10,28 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
<link rel="import" href="../polymer/polymer.html"> |
-<style is="custom-style"> |
+<!-- |
+The `<iron-flex-layout>` component provides simple ways to use [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), also known as flexbox. This component provides two different ways to use flexbox: |
+ |
+1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes). The layout class stylesheet provides a simple set of class-based flexbox rules. Layout classes let you specify layout properties directly in markup. |
+ |
+2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html). The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function. |
+ |
+A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available. |
+@group Iron Elements |
+@pseudoElement iron-flex-layout |
+@demo demo/index.html |
+--> |
+ |
+<style> |
+ /* IE 10 support for HTML5 hidden attr */ |
+ [hidden] { |
+ display: none !important; |
+ } |
+</style> |
+ |
+<style is="custom-style"> |
:root { |
--layout: { |
@@ -27,10 +47,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
}; |
--layout-horizontal: { |
- /* @apply(--layout); */ |
- display: -ms-flexbox; |
- display: -webkit-flex; |
- display: flex; |
+ @apply(--layout); |
-ms-flex-direction: row; |
-webkit-flex-direction: row; |
@@ -38,16 +55,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
}; |
--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; |
@@ -55,6 +71,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
}; |
--layout-vertical-reverse: { |
+ @apply(--layout); |
+ |
-ms-flex-direction: column-reverse; |
-webkit-flex-direction: column-reverse; |
flex-direction: column-reverse; |
@@ -211,13 +229,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
}; |
--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 */ |
@@ -275,34 +288,36 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
overflow: auto; |
}; |
+ --layout-fullbleed: { |
+ margin: 0; |
+ height: 100vh; |
+ }; |
+ |
/* fixed position */ |
- --layout-fixed-bottom:, |
- --layout-fixed-left:, |
- --layout-fixed-right:, |
--layout-fixed-top: { |
position: fixed; |
- }; |
- |
- --layout-fixed-top: { |
top: 0; |
left: 0; |
right: 0; |
}; |
--layout-fixed-right: { |
+ position: fixed; |
top: 0; |
right: 0; |
bottom: 0; |
}; |
--layout-fixed-bottom: { |
+ position: fixed; |
right: 0; |
bottom: 0; |
left: 0; |
}; |
--layout-fixed-left: { |
+ position: fixed; |
top: 0; |
bottom: 0; |
left: 0; |