third_party/polymer/v1_0/components-chromium/paper-toolbar/paper-toolbar.html - Issue 1162963002: Revert "Rename polymer and cr_elements v0_8 to v1_0"

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

Issue 1162963002: Revert "Rename polymer and cr_elements v0_8 to v1_0" (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: 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/v1_0/components-chromium/paper-toolbar/index.html ('k') | third_party/polymer/v1_0/components-chromium/paper-toolbar/paper-toolbar-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 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

6 Code distributed by Google as part of the polymer project is also

7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

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

9 <link rel="import" href="../paper-styles/paper-styles.html">

10

11 <!--

12 `paper-toolbar` is a horizontal bar containing items that can be used for

13 label, navigation, search and actions. The items place inside the

14 `paper-toolbar` are projected into a `class="horizontal center layout"` containe r inside of

15 `paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items'

16 sizing.

17

18 Example:

19

20 <paper-toolbar>

21 <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>

22 <div title>Title</div>

23 <paper-icon-button icon="more" on-tap="moreAction"></paper-icon-button>

24 </paper-toolbar>

25

26 `paper-toolbar` has a standard height, but can made be taller by setting `tall`

27 class on the `paper-toolbar`. This will make the toolbar 3x the normal height.

28

29 <paper-toolbar class="tall">

30 <paper-icon-button icon="menu"></paper-icon-button>

31 </paper-toolbar>

32

33 Apply `medium-tall` class to make the toolbar medium tall. This will make the

34 toolbar 2x the normal height.

35

36 <paper-toolbar class="medium-tall">

37 <paper-icon-button icon="menu"></paper-icon-button>

38 </paper-toolbar>

39

40 When `tall`, items can pin to either the top (default), middle or bottom. Use

41 `middle` class for middle content and `bottom` class for bottom content.

42

43 <paper-toolbar class="tall">

44 <paper-icon-button icon="menu"></paper-icon-button>

45 <div title class="middle">Middle Title</div>

46 <div title class="bottom">Bottom Title</div>

47 </paper-toolbar>

48

49 For `medium-tall` toolbar, the middle and bottom contents overlap and are

50 pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are

51 still honored separately.

52

53 ### Styling

54

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

56

57 Custom property \| Description \| Default

58 ----------------\|-------------\|----------

59 `--paper-toolbar-background` \| Toolbar background color \| `--default-primary -color`

60 `--paper-toolbar-color` \| Toolbar foreground color \| `--text-primary-co lor`

61 `--paper-toolbar` \| Mixin applied to the toolbar \| `{}`

62

63 ### Accessibility

64

65 `<paper-toolbar>` has `role="toolbar"` by default. Any elements with the `title` attribute will

66 be used as the label of the toolbar via `aria-labelledby`.

67

68 @demo demo/index.html

69 -->

70

71 </head><body><dom-module id="paper-toolbar">

72

73 <style>

74 :host {

75 /* technical */

76 display: block;

77 position: relative;

78 box-sizing: border-box;

79 -moz-box-sizing: border-box;

80

81 /* size */

82 height: 64px;

83

84 background: var(--paper-toolbar-background, --default-primary-color);

85 color: var(--paper-toolbar-color, --text-primary-color);

86

87 @apply(--paper-toolbar);

88 }

89

90 :host(.animate) {

91 /* transition */

92 transition: height 0.18s ease-in;

93 }

94

95 :host(.medium-tall) {

96 height: 128px;

97 }

98

99 :host(.tall) {

100 height: 192px;

101 }

102

103 .toolbar-tools {

104 position: relative;

105 height: 64px;

106 padding: 0 16px;

107 pointer-events: none;

108 }

109

110 /*

111 * TODO: Where should media query breakpoints live so they can be shared bet ween elements?

112 */

113

114 @media (max-width: 639px) {

115 :host {

116 height: 56px;

117 }

118

119 :host(.medium-tall) {

120 height: 112px;

121 }

122

123 :host(.tall) {

124 height: 168px;

125 }

126

127 .toolbar-tools {

128 height: 56px;

129 }

130 }

131

132 #topBar {

133 position: relative;

134 z-index: 1;

135 }

136

137 /* middle bar */

138 #middleBar {

139 position: absolute;

140 top: 0;

141 right: 0;

142 left: 0;

143 z-index: 2;

144 }

145

146 :host(.tall) #middleBar,

147 :host(.medium-tall) #middleBar {

148 -webkit-transform: translateY(100%);

149 transform: translateY(100%);

150 }

151

152 /* bottom bar */

153 #bottomBar {

154 position: absolute;

155 right: 0;

156 bottom: 0;

157 left: 0;

158 z-index: 1;

159 }

160

161 /*

162 * make elements (e.g. buttons) respond to mouse/touch events

163 *

164 * `.toolbar-tools` disables touch events so multiple toolbars can stack and not

165 * absorb events. All children must have pointer events re-enabled to work a s

166 * expected.

167 */

168 .toolbar-tools > ::content > *:not([disabled]) {

169 pointer-events: auto;

170 }

171

172 .toolbar-tools > ::content [title] {

173 @apply(--paper-font-title);

174 @apply(--layout-flex);

175

176 text-overflow: ellipsis;

177 white-space: nowrap;

178 overflow: hidden;

179

180 /*

181 * Polymer/polymer/issues/1525

182 * --paper-font-title defines a `font-weight`

183 * let's override its value, but we need `important!`

184 * because all mixins are resolved in rule's selector that has higher prec edence

185 * than the current selector.

186 */

187 font-weight: 400 !important;

188 }

189

190 /**

191 * TODO: Refactor these selectors

192 * Work in progress.

193 */

194 .toolbar-tools > ::content paper-icon-button[icon=menu] {

195 margin-left: -8px;

196 margin-right: 24px;

197 }

198

199 .toolbar-tools > ::content paper-icon-button + paper-icon-button {

200 margin-right: -8px;

201 }

202

203 .toolbar-tools > ::content > [title],

204 .toolbar-tools > ::content[select=".middle"] > [title],

205 .toolbar-tools > ::content[select=".bottom"] > [title] {

206 margin-left: 56px;

207 }

208

209 .toolbar-tools > ::content > paper-icon-button + [title],

210 .toolbar-tools > ::content[select=".middle"] paper-icon-button + [title],

211 .toolbar-tools > ::content[select=".bottom"] paper-icon-button + [title] {

212 margin-left: 0;

213 }

214 </style>

215

216 <template>

217

218 <div id="topBar" class$="[[_computeBarClassName(justify)]]">

219 <content select=":not(.middle):not(.bottom)"></content>

220 </div>

221

222 <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]">

223 <content select=".middle"></content>

224 </div>

225

226 <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]">

227 <content select=".bottom"></content>

228 </div>

229

230 </template>

231

232 </dom-module>

233

234 <script src="paper-toolbar-extracted.js"></script></body></html>

OLD	NEW