third_party/polymer/v1_0/components-chromium/paper-card/demo/index.html - Issue 1401633002: Update Polymer from 1.1.4 -> 1.1.5

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-card/demo/index.html

Issue 1401633002: Update Polymer from 1.1.4 -> 1.1.5 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: dzhioev@ review Created 5 years, 2 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-card/bower.json ('k') | third_party/polymer/v1_0/components-chromium/paper-card/paper-card.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!doctype html>

2 <!--

3 @license

4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

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

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

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

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

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

10 -->

11 <html lang="en">

12 <head>

13 <title>paper-card demo</title>

14 <meta charset="utf-8">

15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial- scale=1, user-scalable=yes">

17

18 <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

19

20 <link rel="import" href="../paper-card.html">

21 <link rel="import" href="../../paper-button/paper-button.html">

22 <link rel="import" href="../../paper-icon-button/paper-icon-button.html">

23 <link rel="import" href="../../iron-icons/iron-icons.html">

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

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

26

27 <link rel="stylesheet" href="../../paper-styles/demo.css">

28

29 <style is="custom-style">

30 body {

31 background-color: var(--paper-grey-50);

32 }

33

34 #cards {

35 @apply(--layout-vertical);

36 @apply(--center-justified);

37 max-width: 400px;

38 margin-left: auto;

39 margin-right: auto;

40 }

41

42 paper-card {

43 width: 100%;

44 margin-bottom: 16px;

45 }

46

47 .avatar {

48 display: inline-block;

49 height: 64px;

50 width: 64px;

51 border-radius: 50%;

52 background: var(--paper-pink-500);

53 color: white;

54 line-height: 64px;

55 font-size: 30px;

56 text-align: center;

57 }

58

59 .fancy .title {

60 position: absolute;

61 top: 30px;

62 left: 100px;

63 color: var(--paper-indigo-500);

64 }

65

66 .fancy img {

67 width: 100%;

68 }

69

70 .fancy .big {

71 font-size: 22px;

72 padding: 8px 0 16px;

73 color: var(--google-grey-500);

74 }

75

76 .fancy .medium {

77 font-size: 16px;

78 padding-bottom: 8px;

79 }

80

81 .pink {

82 --paper-card-header-color: var(--paper-pink-500);

83 }

84 </style>

85

86 </head>

87 <body unresolved>

88 <div id="cards">

89

90 <paper-card>

91 <div class="card-content">

92 <div>Cards are a convenient means of displaying content composed of diff erent types of objects.

93 <br><br>

94 <b>Hurray!</b>

95 </div>

96 </div>

97 </paper-card>

98

99 <paper-card heading="Some cards only have titles"></paper-card>

100

101 <paper-card id="shadow_demo" heading="Paper Shadows" class="pink" animated-s hadow>

102 <div class="card-content">

103 Cards can have different shadows.

104 </div>

105 <div class="card-actions">

106 <paper-button onclick="decreaseShadow()">Decrease</paper-button>

107 <paper-button onclick="increaseShadow()">Increase</paper-button>

108 </div>

109 </paper-card>

110

111 <paper-card >

112 <div class="card-content">

113 Lorem ipsum dolor sit amet, nec ad conceptam interpretaris, mea ne solet repudiandae. Laudem nostrud ei vim. Sapientem consequuntur usu ad, vel etiam ph ilosophia ex, ad quidam option quo. Sed sale integre pericula ei, rebum adipisci ng ius ea.

114 </div>

115 <div class="card-actions">

116 <paper-icon-button icon="favorite" title="favorite"></paper-icon-button>

117 <paper-icon-button icon="bookmark" title="bookmark"></paper-icon-button>

118 <paper-icon-button icon="cloud-upload" title="cloud-upload"></paper-icon -button>

119 </div>

120 </paper-card>

121

122 <paper-card heading="Cards can have titles" class="pink">

123 <div class="card-content">

124 Lorem ipsum dolor sit amet, nec ad conceptam interpretaris, mea ne solet repudiandae. Laudem nostrud ei vim. Sapientem consequuntur usu ad, vel etiam ph ilosophia ex, ad quidam option quo. Sed sale integre pericula ei, rebum adipisci ng ius ea.

125 </div>

126 <div class="card-actions">

127 <paper-button>Nay</paper-button>

128 <paper-button>Yay!</paper-button>

129 </div>

130 </paper-card>

131

132 <paper-card heading="Titles AND images!" class="pink"

133 image="http://placehold.it/350x150">

134 <div class="card-content">

135 Lorem ipsum dolor sit amet, nec ad conceptam interpretaris, mea ne solet repudiandae. Laudem nostrud ei vim. Sapientem consequuntur usu ad, vel etiam ph ilosophia ex, ad quidam option quo. Sed sale integre pericula ei, rebum adipisci ng ius ea.

136 </div>

137 <div class="card-actions">

138 <paper-button>No</paper-button>

139 <paper-button>Yes</paper-button>

140 </div>

141 </paper-card>

142

143 <paper-card heading="Actions can be stacked" class="pink">

144 <div class="card-content">

145 Lorem ipsum dolor sit amet, nec ad conceptam interpretaris, mea ne solet repudiandae. Laudem nostrud ei vim. Sapientem consequuntur usu ad, vel etiam ph ilosophia ex, ad quidam option quo. Sed sale integre pericula ei, rebum adipisci ng ius ea.

146 </div>

147 <div class="card-actions">

148 <paper-button>Action</paper-button>

149 </div>

150 <div class="card-actions">

151 <paper-button>Moar action!</paper-button>

152 </div>

153 </paper-card>

154

155 <paper-card class='fancy'>

156 <div class="card-content">

157 <div class="avatar">:)</div>

158 <div class="title">

159 <div class="medium">Title</div>

160 <div class="small">subtitle</div>

161 </div>

162 </div>

163

164 <!-- take this out of the content class so that it can span the whole card -->

165 <img src="http://placehold.it/350x150">

166

167 <div class="card-content">

168 <div class="big">Usu eu novum principes, vel quodsi aliquip ea.</div>

169 <div class="medium">Ut labores minimum atomorum pro. Laudem tibique ut h as.</div>

170 <div class="small">Usu eu novum principes, vel quodsi aliquip ea.</div>

171 </div>

172 </paper-card>

173 </div>

174

175 <script>

176 function decreaseShadow() {

177 var card = document.querySelector('#shadow_demo');

178 card.elevation = card.elevation > 0 ? card.elevation - 1 : 0;

179 }

180

181 function increaseShadow() {

182 var card = document.querySelector('#shadow_demo');

183 card.elevation = card.elevation < 5 ? card.elevation + 1 : 5;

184 }

185 </script>

186

187 </body>

188 </html>

OLD	NEW