Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

Added mixins --paper-tabs-scroll-buttons, --paper-tabs-scroll-button-left and --paper-tabs-scroll-button-right #211

Closed
wants to merge 2 commits into from
Closed

Added mixins --paper-tabs-scroll-buttons, --paper-tabs-scroll-button-left and --paper-tabs-scroll-button-right #211

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
adf3536
Added mixins `--paper-tabs-scroll-buttons`, `--paper-tabs-scroll-butt…
philipp90 Aug 8, 2017
4573de2
added `display: none` to `.not-visible`
philipp90 Aug 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions paper-tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -167,6 +170,7 @@
.not-visible {
opacity: 0;
cursor: default;
display: none;
}

paper-icon-button {
Expand Down Expand Up @@ -211,9 +215,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)]]">
Expand All @@ -223,7 +239,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>

Expand Down