Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(95)

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-tabs/paper-tabs.html

Issue 1468623004: Update Polymer from 1.2.1 -> 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@travis-yml
Patch Set: local-state.html Created 5 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --><html><head><link rel="import" href="../polymer/polymer.html"> 9 --><html><head><link rel="import" href="../polymer/polymer.html">
10 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> 10 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
11 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
12 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html "> 11 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html ">
13 <link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html"> 12 <link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html">
14 <link rel="import" href="../iron-icon/iron-icon.html"> 13 <link rel="import" href="../iron-icon/iron-icon.html">
15 <link rel="import" href="../paper-icon-button/paper-icon-button.html"> 14 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
16 <link rel="import" href="../paper-styles/color.html"> 15 <link rel="import" href="../paper-styles/color.html">
17 <link rel="import" href="paper-tabs-icons.html"> 16 <link rel="import" href="paper-tabs-icons.html">
18 <link rel="import" href="paper-tab.html"> 17 <link rel="import" href="paper-tab.html">
19 18
20 <!-- 19 <!--
21 Material design: [Tabs](https://www.google.com/design/spec/components/tabs.html) 20 Material design: [Tabs](https://www.google.com/design/spec/components/tabs.html)
(...skipping 27 matching lines...) Expand all
49 <div>Page 1</div> 48 <div>Page 1</div>
50 <div>Page 2</div> 49 <div>Page 2</div>
51 <div>Page 3</div> 50 <div>Page 3</div>
52 </iron-pages> 51 </iron-pages>
53 52
54 53
55 To use links in tabs, add `link` attribute to `paper-tab` and put an `<a>` 54 To use links in tabs, add `link` attribute to `paper-tab` and put an `<a>`
56 element in `paper-tab`. 55 element in `paper-tab`.
57 56
58 Example: 57 Example:
58 <style is="custom-style">
59 .link {
60 @apply(--layout-horizontal);
61 @apply(--layout-center-center);
62 }
63 }
64 </style>
59 65
60 <paper-tabs selected="0"> 66 <paper-tabs selected="0">
61 <paper-tab link> 67 <paper-tab link>
62 <a href="#link1" class="horizontal center-center layout">TAB ONE</a> 68 <a href="#link1" class="link">TAB ONE</a>
63 </paper-tab> 69 </paper-tab>
64 <paper-tab link> 70 <paper-tab link>
65 <a href="#link2" class="horizontal center-center layout">TAB TWO</a> 71 <a href="#link2" class="link">TAB TWO</a>
66 </paper-tab> 72 </paper-tab>
67 <paper-tab link> 73 <paper-tab link>
68 <a href="#link3" class="horizontal center-center layout">TAB THREE</a> 74 <a href="#link3" class="link">TAB THREE</a>
69 </paper-tab> 75 </paper-tab>
70 </paper-tabs> 76 </paper-tabs>
71 77
72 ### Styling 78 ### Styling
73 79
74 The following custom properties and mixins are available for styling: 80 The following custom properties and mixins are available for styling:
75 81
76 Custom property | Description | Default 82 Custom property | Description | Default
77 ----------------|-------------|---------- 83 ----------------|-------------|----------
78 `--paper-tabs-selection-bar-color` | Color for the selection bar | `--paper-yell ow-a100` 84 `--paper-tabs-selection-bar-color` | Color for the selection bar | `--paper-yell ow-a100`
(...skipping 26 matching lines...) Expand all
105 111
106 :host-context([dir=rtl]) { 112 :host-context([dir=rtl]) {
107 @apply(--layout-horizontal-reverse); 113 @apply(--layout-horizontal-reverse);
108 } 114 }
109 115
110 #tabsContainer { 116 #tabsContainer {
111 position: relative; 117 position: relative;
112 height: 100%; 118 height: 100%;
113 white-space: nowrap; 119 white-space: nowrap;
114 overflow: hidden; 120 overflow: hidden;
121 @apply(--layout-flex);
115 } 122 }
116 123
117 #tabsContent { 124 #tabsContent {
118 height: 100%; 125 height: 100%;
119 } 126 }
120 127
121 #tabsContent.scrollable { 128 #tabsContent.scrollable {
122 position: absolute; 129 position: absolute;
123 white-space: nowrap; 130 white-space: nowrap;
124 } 131 }
125 132
133 #tabsContent.horizontal {
134 @apply(--layout-horizontal);
135 }
136
126 .hidden { 137 .hidden {
127 display: none; 138 display: none;
128 } 139 }
129 140
130 .not-visible { 141 .not-visible {
131 opacity: 0; 142 opacity: 0;
132 cursor: default; 143 cursor: default;
133 } 144 }
134 145
135 paper-icon-button { 146 paper-icon-button {
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
174 #tabsContent > ::content > *:not(#selectionBar) { 185 #tabsContent > ::content > *:not(#selectionBar) {
175 height: 100%; 186 height: 100%;
176 } 187 }
177 188
178 </style> 189 </style>
179 190
180 <template> 191 <template>
181 192
182 <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollBu ttonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonU p" on-down="_onLeftScrollButtonDown" tabindex="-1"></paper-icon-button> 193 <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollBu ttonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonU p" on-down="_onLeftScrollButtonDown" tabindex="-1"></paper-icon-button>
183 194
184 <div id="tabsContainer" class="flex" on-track="_scroll" on-down="_down"> 195 <div id="tabsContainer" on-track="_scroll" on-down="_down">
185 196
186 <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable)]]"> 197 <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable)]]">
187 198
188 <content select="*"></content> 199 <content select="*"></content>
189 200
190 <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignB ottom)]]" on-transitionend="_onBarTransitionEnd"></div> 201 <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignB ottom)]]" on-transitionend="_onBarTransitionEnd"></div>
191 202
192 </div> 203 </div>
193 204
194 </div> 205 </div>
195 206
196 <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollB uttonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButto nUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button> 207 <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollB uttonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButto nUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button>
197 208
198 </template> 209 </template>
199 210
200 </dom-module> 211 </dom-module>
201 212
202 <script src="paper-tabs-extracted.js"></script></body></html> 213 <script src="paper-tabs-extracted.js"></script></body></html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698