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

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

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

Patch Set: 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:

« chrome/browser/resources/md_downloads/vulcanized.html ('K') | « third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/app-layout/app-drawer/app-drawer-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-drawer is a navigation drawer that can slide in from the left or right.

14

15 Example:

16

17 Align the drawer at the start, which is left in LTR layouts (default):

18

19 ```html

20 <app-drawer opened></app-drawer>

21 ```

22

23 Align the drawer at the end:

24

25 ```html

26 <app-drawer align="end" opened></app-drawer>

27 ```

28

29 To make the contents of the drawer scrollable, create a wrapper for the scroll

30 content, and apply height and overflow styles to it.

31

32 ```html

33 <app-drawer>

34 <div style="height: 100%; overflow: auto;"></div>

35 </app-drawer>

36 ```

37

38 ### Styling

39

40 Custom property \| Description \| Defa ult

41 ---------------------------------\|----------------------------------------\|----- ---------------

42 `--app-drawer-width` \| Width of the drawer \| 256p x

43 `--app-drawer-content-container` \| Mixin for the drawer content container \| {}

44 `--app-drawer-scrim-background` \| Background for the scrim \| rgba (0, 0, 0, 0.5)

45

46 @group App Elements

47 @element app-drawer

48 @demo app-drawer/demo/left-drawer.html Simple Left Drawer

49 @demo app-drawer/demo/right-drawer.html Right Drawer with Icons

50 -->

51

52 </head><body><dom-module id="app-drawer">

53 <template>

54 <style>

55 :host {

56 position: fixed;

57 top: -120px;

58 right: 0;

59 bottom: -120px;

60 left: 0;

61

62 visibility: hidden;

63

64 transition: visibility 0.2s ease;

65 }

66

67 :host([opened]) {

68 visibility: visible;

69 }

70

71 :host([persistent]) {

72 width: var(--app-drawer-width, 256px);

73 }

74

75 :host([persistent][position=left]) {

76 right: auto;

77 }

78

79 :host([persistent][position=right]) {

80 left: auto;

81 }

82

83 #contentContainer {

84 position: absolute;

85 top: 0;

86 bottom: 0;

87 left: 0;

88

89 width: var(--app-drawer-width, 256px);

90 padding: 120px 0;

91

92 transition: 0.2s ease;

93 transition-property: -webkit-transform;

94 transition-property: transform;

95 -webkit-transform: translate3d(-100%, 0, 0);

96 transform: translate3d(-100%, 0, 0);

97

98 background-color: #FFF;

99

100 @apply(--app-drawer-content-container);

101 }

102

103 :host([position=right]) > #contentContainer {

104 right: 0;

105 left: auto;

106

107 -webkit-transform: translate3d(100%, 0, 0);

108 transform: translate3d(100%, 0, 0);

109 }

110

111 :host([swipe-open]) > #contentContainer::after {

112 position: fixed;

113 top: 0;

114 bottom: 0;

115 left: 100%;

116

117 visibility: visible;

118

119 width: 20px;

120

121 content: '';

122 }

123

124 :host([swipe-open][position=right]) > #contentContainer::after {

125 right: 100%;

126 left: auto;

127 }

128

129 :host([opened]) > #contentContainer {

130 -webkit-transform: translate3d(0, 0, 0);

131 transform: translate3d(0, 0, 0);

132 }

133

134 #scrim {

135 position: absolute;

136 top: 0;

137 right: 0;

138 bottom: 0;

139 left: 0;

140

141 transition: opacity 0.2s ease;

142 -webkit-transform: translateZ(0);

143 transform: translateZ(0);

144

145 opacity: 0;

146 background: var(--app-drawer-scrim-background, rgba(0, 0, 0, 0.5));

147 }

148

149 :host([opened]) > #scrim {

150 opacity: 1;

151 }

152

153 :host([opened][persistent]) > #scrim {

154 visibility: hidden;

155 /**

156 * NOTE(keanulee): Keep both opacity: 0 and visibility: hidden to preven t the

157 * scrim from showing when toggling between closed and opened/persistent .

158 */

159

160 opacity: 0;

161 }

162 </style>

163

164 <div id="scrim" on-tap="close"></div>

165

166 <div id="contentContainer">

167 <content></content>

168 </div>

169 </template>

170

171 </dom-module>

172 <script src="app-drawer-extracted.js"></script></body></html>

OLD	NEW