third_party/polymer/v1_0/components-chromium/app-layout/app-toolbar/app-toolbar.html - Issue 2633633002: Polymer: Remove unused app-layout element

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

Issue 2633633002: Polymer: Remove unused app-layout element (Closed)

Patch Set: Fix closure Created 3 years, 11 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:

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/app-layout/app-scrollpos-control/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/app-layout/app-toolbar/app-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 @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/iron-flex-layout.html">

11

12 <!--

13 app-toolbar is a horizontal toolbar containing items that can be used for

14 label, navigation, search and actions.

15

16 ### Example

17

18 Add a title to the toolbar.

19

20 ```html

21 <app-toolbar>

22 <div title>App name</div>

23 </app-toolbar>

24 ```

25

26 Add a button to the left and right side of the toolbar.

27

28 ```html

29 <app-toolbar>

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

31 <div title>App name</div>

32 <paper-icon-button icon="search"></paper-icon-button>

33 </app-toolbar>

34 ```

35

36 You can use the attributes `top-item` or `bottom-item` to completely fit an elem ent

37 to the top or bottom of the toolbar respectively.

38

39 ### Content attributes

40

41 Attribute \| Description

42 ---------------------\|---------------------------------------------------------

43 `title` \| The main title element.

44 `condensed-title` \| The title element if used inside a condensed app-header.

45 `spacer` \| Adds a left margin of `64px`.

46 `bottom-item` \| Sticks the element to the bottom of the toolbar.

47 `top-item` \| Sticks the element to the top of the toolbar.

48

49 ### Styling

50

51 Custom property \| Description \| Default

52 -----------------------------\|------------------------------\|------------------- ----

53 `--app-toolbar-font-size` \| Toolbar font size \| 20px

54

55 @group App Elements

56 @element app-toolbar

57 @demo app-toolbar/demo/index.html

58 -->

59

60 </head><body><dom-module id="app-toolbar">

61 <template>

62 <style>

63 :host {

64 position: relative;

65

66 @apply(--layout-horizontal);

67 @apply(--layout-center);

68

69 height: 64px;

70 padding: 0 16px;

71

72 pointer-events: none;

73

74 font-size: var(--app-toolbar-font-size, 20px);

75 }

76

77 :host > ::content > * {

78 pointer-events: auto;

79 }

80

81 :host > ::content > paper-icon-button {

82 /* paper-icon-button/issues/33 */

83 font-size: 0;

84 }

85

86 :host > ::content > [title],

87 :host > ::content > [condensed-title] {

88 pointer-events: none;

89 @apply(--layout-flex);

90 }

91

92 :host > ::content > [bottom-item] {

93 position: absolute;

94 right: 0;

95 bottom: 0;

96 left: 0;

97 }

98

99 :host > ::content > [top-item] {

100 position: absolute;

101 top: 0;

102 right: 0;

103 left: 0;

104 }

105

106 :host > ::content > [spacer] {

107 margin-left: 64px;

108 }

109 </style>

110

111 <content></content>

112 </template>

113

114 </dom-module>

115 <script src="app-toolbar-extracted.js"></script></body></html>

OLD	NEW