Added mixins --paper-tabs-scroll-buttons, `--paper-tabs-scroll-butt…

…on-left` and `--paper-tabs-scroll-button-right`
magora-labs · Aug 8, 2017 · adf3536 · adf3536
1 parent 66e3d15
commit adf3536
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/paper-tabs.html b/paper-tabs.html
@@ -90,6 +90,9 @@
 `--paper-tabs` | Mixin applied to the tabs | `{}`
 `--paper-tabs-content` | Mixin applied to the content container of tabs | `{}`
 `--paper-tabs-container` | Mixin applied to the layout container of tabs | `{}`
+`--paper-tabs-scroll-buttons` | Mixin applied to the scroll buttons | `{}`
+`--paper-tabs-scroll-button-left` | Mixin applied to the left scroll button | `{}`
+`--paper-tabs-scroll-button-right` | Mixin applied to the right scroll button | `{}`
 
 @hero hero.svg
 @demo demo/index.html
@@ -211,9 +214,21 @@
       #tabsContent > ::slotted(:not(#selectionBar)) {
         height: 100%;
       }
+
+      paper-icon-button {
+        @apply --paper-tabs-scroll-buttons;
+      }
+
+      #scroll-button-left {
+        @apply --paper-tabs-scroll-button-left;
+      }
+
+      #scroll-button-right {
+        @apply --paper-tabs-scroll-button-right;
+      }
     </style>
 
-    <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollButtonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onLeftScrollButtonDown" tabindex="-1"></paper-icon-button>
+    <paper-icon-button id="scroll-button-left" icon="paper-tabs:chevron-left" class$="[[_computeScrollButtonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onLeftScrollButtonDown" tabindex="-1"></paper-icon-button>
 
     <div id="tabsContainer" on-track="_scroll" on-down="_down">
       <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable, fitContainer)]]">
@@ -223,7 +238,7 @@
       </div>
     </div>
 
-    <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollButtonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button>
+    <paper-icon-button id="scroll-button-right" icon="paper-tabs:chevron-right" class$="[[_computeScrollButtonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button>
 
   </template>