third_party/polymer/v0_8/components-chromium/paper-tabs/paper-tab.html - Issue 1155683008: Rename polymer and cr_elements v0_8 to v1_0

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

Issue 1155683008: Rename polymer and cr_elements v0_8 to v1_0 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@v1

Patch Set: fix a merge mistake Created 5 years, 6 months 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

« no previous file with comments | « third_party/polymer/v0_8/components-chromium/paper-tabs/index.html ('k') | third_party/polymer/v0_8/components-chromium/paper-tabs/paper-tab-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!--

2 @license

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

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

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

9 --><html><head><link rel="import" href="../polymer/polymer.html">

10 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">

11 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

12 <link rel="import" href="../iron-behaviors/iron-control-state.html">

13 <link rel="import" href="../paper-ripple/paper-ripple.html">

14

15 <!--

16 `paper-tab` is styled to look like a tab. It should be used in conjunction with

17 `paper-tabs`.

18

19 Example:

20

21 <paper-tabs selected="0">

22 <paper-tab>TAB 1</paper-tab>

23 <paper-tab>TAB 2</paper-tab>

24 <paper-tab>TAB 3</paper-tab>

25 </paper-tabs>

26

27 ### Styling

28

29 The following custom properties and mixins are available for styling:

30

31 Custom property \| Description \| Default

32 ----------------\|-------------\|----------

33 `--paper-tab-ink` \| Ink color \| `--paper-yellow-a100`

34 `--paper-tab` \| Mixin applied to the tab \| `{}`

35 `--paper-tab-content` \| Mixin applied to the tab content \| `{}`

36

37 -->

38

39 </head><body><dom-module id="paper-tab">

40

41 <style>

42

43 :host {

44 @apply(--layout-inline);

45 @apply(--layout-center);

46 @apply(--layout-center-justified);

47 @apply(--layout-flex);

48

49 position: relative;

50 padding: 0 12px;

51 overflow: hidden;

52 cursor: pointer;

53

54 @apply(--paper-tab);

55 }

56

57 :host(:focus) {

58 outline: none;

59 }

60

61 :host([link]) {

62 padding: 0;

63 }

64

65 .tab-content {

66 height: 100%;

67 -webkit-transform: translateZ(0);

68 transform: translateZ(0);

69 transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);

70

71 @apply(--paper-tab-content);

72 }

73

74 :host(:not(.iron-selected)) > .tab-content {

75 opacity: 0.8;

76 }

77

78 :host(:focus) .tab-content {

79 opacity: 1;

80 font-weight: 700;

81 }

82

83 #ink {

84 color: var(--paper-tab-ink, --paper-yellow-a100);

85 pointer-events: none;

86 }

87

88 .tab-content > ::content > a {

89 height: 100%;

90 /* flex */

91 -ms-flex: 1 1 0.000000001px;

92 -webkit-flex: 1;

93 flex: 1;

94 -webkit-flex-basis: 0.000000001px;

95 flex-basis: 0.000000001px;

96 }

97

98 </style>

99

100 <template>

101

102 <div class="tab-content flex-auto center-center horizontal layout">

103 <content></content>

104 </div>

105

106 <template is="dom-if" if="[[!noink]]">

107 <paper-ripple id="ink" initial-opacity="0.95" opacity-decay-velocity="0.98 "></paper-ripple>

108 </template>

109

110 </template>

111

112 </dom-module>

113

114 <script src="paper-tab-extracted.js"></script></body></html>

OLD	NEW