Merge pull request #79 from PolymerElements/bicknellr/rtl-arrows

Fixes #39: reverse flex direction when in RTL

demo/index.html

@@ -125,7 +125,28 @@ <h3>E. Scrollable Tabs</h3>
 
     </paper-tabs>
 
-    <h3>F. Link Tabs</h3>
+    <h3>F. Scrollable tabs within right-to-left region</h3>
+
+    <div dir="rtl">
+      <paper-tabs selected="0" scrollable>
+
+        <paper-tab>NUMBER ONE ITEM</paper-tab>
+        <paper-tab>ITEM TWO</paper-tab>
+        <paper-tab>THE THIRD ITEM</paper-tab>
+        <paper-tab>THE ITEM FOUR</paper-tab>
+        <paper-tab>FIFTH</paper-tab>
+        <paper-tab>THE SIXTH TAB</paper-tab>
+        <paper-tab>NUMBER SEVEN</paper-tab>
+        <paper-tab>EIGHT</paper-tab>
+        <paper-tab>NUMBER NINE</paper-tab>
+        <paper-tab>THE TENTH</paper-tab>
+        <paper-tab>THE ITEM ELEVEN</paper-tab>
+        <paper-tab>TWELFTH ITEM</paper-tab>
+
+      </paper-tabs>
+    </div>
+
+    <h3>G. Link Tabs</h3>
 
     <paper-tabs selected="0">
 
@@ -135,7 +156,7 @@ <h3>F. Link Tabs</h3>
 
     </paper-tabs>
 
-    <h3>G. Tabs in Toolbar</h3>
+    <h3>H. Tabs in Toolbar</h3>
 
     <paper-toolbar class="tall">
 
@@ -150,7 +171,7 @@ <h3>G. Tabs in Toolbar</h3>
 
     </paper-toolbar>
 
-    <h3>H. Tabs aligned to bottom</h3>
+    <h3>I. Tabs aligned to bottom</h3>
 
     <paper-tabs selected="0" align-bottom>
 
@@ -160,7 +181,7 @@ <h3>H. Tabs aligned to bottom</h3>
 
     </paper-tabs>
 
-    <h3>I. Bound Selection</h3>
+    <h3>J. Bound Selection</h3>
 
     <template is="dom-bind">
       <h2>Current Tab: <span>[[selected]]</span></h2>

paper-tabs.html

@@ -105,6 +105,10 @@
       @apply(--paper-tabs);
     }
 
+    :host-context([dir=rtl]) {
+      @apply(--layout-horizontal-reverse);
+    }
+
     #tabsContainer {
       position: relative;
       height: 100%;