Merge pull request #103 from PolymerElements/2.0-preview

2.0 preview

.gitignore

@@ -1,2 +1,2 @@
-bower_components
-
+bower_components*
+bower-*.json

.travis.yml

@@ -1,24 +1,28 @@
 language: node_js
 sudo: required
 before_script:
-  - npm install -g bower polylint web-component-tester
-  - bower install
-  - polylint
+  - npm install -g bower polymer-cli@next
+  - polymer install --variants
+  - sudo mv /usr/bin/google-chrome /usr/bin/google-chrome-old
+  - sudo mv /usr/bin/google-chrome-beta /usr/bin/google-chrome
 env:
   global:
     - secure: >-
         idlCNYtNQ7rLGCSl2NuZ++XZEwofpojkakXhL8m34pCX1ZwhGRprHsvNE7h7tz8SIV+mUjuUT8DaM7rlgZ+bLyw/Hq7G15DdmU5puUsCVibFFBBEhh82lxkdK/Rlfo+ytt0MFsbTJljEoqTSbnL0fSeC0cN/7wf6yEQs/+mTR0I=
     - secure: >-
         i/rAHa9rxszmbE+RbQ2b7ln6OYzrcoUssdPk36lNeJk/B1HjBS9cfg1PMwSAw+t6yvAN3I0fbOOl4dlGB1K5T4kAtmcAcC3fbptJL08IvK9K15pz/rMEzIBWLXj9oVJliwBZR2GFH+5zv6aFdEwQxh1leBnHQwmKgl24QX8XGO4=
-node_js: '6'
+node_js: stable
 addons:
   firefox: latest
   apt:
     sources:
       - google-chrome
     packages:
-      - google-chrome-stable
+      - google-chrome-beta
+  sauce_connect: true
 script:
-  - xvfb-run wct
-  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi'
+  - xvfb-run polymer test
+  - >-
+    if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default';
+    fi
 dist: trusty

GUIDE.md

@@ -126,8 +126,8 @@ main document. (They cannot be applied in the main document without a `custom-st
   <!-- main document -- apply mixins in a custom-style element -->
   <style is="custom-style">
     .container {
-      @apply(--layout-horizontal);
-      @apply(--layout-wrap);
+      @apply --layout-horizontal;
+      @apply --layout-wrap;
     }
   </style>
 
@@ -153,8 +153,8 @@ main document. (They cannot be applied in the main document without a `custom-st
   <!-- inside an element -- apply mixins in a standard style element -->
   <style>
     .container {
-      @apply(--layout-horizontal);
-      @apply(--layout-wrap);
+      @apply --layout-horizontal;
+      @apply --layout-wrap;
     }
   </style>
 
@@ -234,7 +234,7 @@ The classes listed here are included in the `iron-flex` module of the `iron-flex
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
+    @apply --layout-horizontal;
   }
 </style>
 
@@ -301,10 +301,10 @@ The classes listed here are included in the `iron-flex` module of the `iron-flex
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
+    @apply --layout-horizontal;
   }
   .flexchild {
-    @apply(--layout-flex);
+    @apply --layout-flex;
   }
 </style>
 
@@ -362,10 +362,10 @@ The same rules can be used for children in vertical layouts.
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-vertical);
+    @apply --layout-vertical;
   }
   .flexchild {
-    @apply(--layout-flex);
+    @apply --layout-flex;
   }
 </style>
 
@@ -432,16 +432,16 @@ The classes listed here are included in the `iron-flex-factors` module of the `i
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
+    @apply --layout-horizontal;
   }
   .flexchild {
-    @apply(--layout-flex)
+    @apply --layout-flex;
   }
   .flex2child {
-    @apply(--layout-flex-2);
+    @apply --layout-flex-2;
   }
   .flex3child {
-    @apply(--layout-flex-3);
+    @apply --layout-flex-3;
   }
 </style>
 
@@ -567,8 +567,8 @@ by adding the `center` class or applying the `--layout-center` mixin.
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-center);
+    @apply --layout-horizontal;
+    @apply --layout-center;
   }
 </style>
 
@@ -652,8 +652,8 @@ classes, or by applying the `--layout-start` or `--layout-end` mixins.
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-start);
+    @apply --layout-horizontal;
+    @apply --layout-start;
   }
 </style>
 
@@ -733,8 +733,8 @@ classes, or by applying the `--layout-start` or `--layout-end` mixins.
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-end);
+    @apply --layout-horizontal;
+    @apply --layout-end;
   }
 </style>
 
@@ -830,8 +830,8 @@ The classes listed here are included in the `iron-flex-alignment` module of the
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-center-justified);
+    @apply --layout-horizontal;
+    @apply --layout-center-justified;
   }
 </style>
 
@@ -911,8 +911,8 @@ The classes listed here are included in the `iron-flex-alignment` module of the
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-justified);
+    @apply --layout-horizontal;
+    @apply --layout-justified;
   }
 </style>
 
@@ -1046,24 +1046,24 @@ Class | Mixin | Result
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal);
-    @apply(--layout-justified);
+    @apply --layout-horizontal;
+    @apply --layout-justified;
     height: 120px;
   }
   .container div {
-    @apply(--layout-flex);
+    @apply --layout-flex;
   }
   .child1 {
-    @apply(--layout-self-start);
+    @apply --layout-self-start;
   }
   .child2 {
-    @apply(--layout-self-center);
+    @apply --layout-self-center;
   }
   .child3 {
-    @apply(--layout-self-end);
+    @apply --layout-self-end;
   }
   .child4 {
-    @apply(--layout-self-stretch);
+    @apply --layout-self-stretch;
   }
 </style>
 <div class="container">
@@ -1169,7 +1169,7 @@ The classes listed here are included in the `iron-flex-reverse` module of the `i
 ```html
 <style is="custom-style">
   .container {
-    @apply(--layout-horizontal-reverse);
+    @apply --layout-horizontal-reverse;
   }
 </style>
 

README.md

@@ -22,13 +22,14 @@ Sample use:
     <link rel="import" href="iron-flex-layout-classes.html">
     <dom-module id="demo-element">
       <template>
-        <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+        <custom-style>
+          <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+        </custom-style>
         <style>
           .container, .layout {
             background-color: #ccc;
             padding: 4px;
           }
-
           .container div, .layout div {
             background-color: white;
             padding: 12px;
@@ -53,15 +54,8 @@ Sample use:
 1. [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.
 
-
-
-Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes)
-are deprecated, and should not be used. To continue using layout properties
-directly in markup, please switch to using the new `dom-module`-based
-[layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
-Please note that the new version does not use `/deep/`, and therefore requires you
-to import the `dom-modules` in every element that needs to use them.
-
 A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available.
 
+## Changes in 2.0
+- removed the deprecated `/deep/` classes -- files removed: `classes/iron-flex-layout.html`, `classes/iron-shadow-flex-layout` 
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "iron-flex-layout",
-  "version": "1.3.7",
+  "version": "2.0.0",
   "description": "Provide flexbox-based layouts",
   "keywords": [
     "web-components",
@@ -18,14 +18,29 @@
     "url": "git://github.com/PolymerElements/iron-flex-layout.git"
   },
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.1.0"
+    "polymer": "Polymer/polymer#^2.0.0-rc.1"
   },
   "devDependencies": {
-    "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
-    "web-component-tester": "^4.0.0"
+    "test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0-prerelease.6",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1",
+    "iron-component-page": "PolymerElements/iron-component-page#2.0-preview",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#2.0-preview"
+  },
+  "ignore": [],
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "Polymer/polymer#^1.1.0"
+      },
+      "devDependencies": {
+        "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+        "web-component-tester": "Polymer/web-component-tester#^4.0.0",
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0"
+      }
+    }
   },
   "pages": {
     "Flexbox layout guide": "GUIDE.md"