third_party/polymer/components-chromium/paper-slider/demo.html - Issue 1215543002: Remove Polymer 0.5.

Side by Side Diff: third_party/polymer/components-chromium/paper-slider/demo.html

Issue 1215543002: Remove Polymer 0.5. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: fix unit test Created 5 years, 5 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/components-chromium/paper-slider/bower.json ('k') | third_party/polymer/components-chromium/paper-slider/index.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 <!--

2 @license

3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

4 This code may only be used under the BSD style license found at http://polym er.github.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/CO NTRIBUTORS.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/P ATENTS.txt

9 -->

10 <!doctype html>

11 <html>

12 <head>

13 <title>paper-slider</title>

14

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

16 <meta name="mobile-web-app-capable" content="yes">

17 <meta name="apple-mobile-web-app-capable" content="yes">

18

19 <script src="../webcomponentsjs/webcomponents.js"></script>

20

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

22 <link rel="import" href="../font-roboto/roboto.html">

23

24 <style shim-shadowdom>

25

26 body {

27 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;

28 margin: 0;

29 padding: 24px;

30 }

31

32 paper-slider {

33 width: 100%;

34 }

35

36 section {

37 max-width: 1000px;

38 padding: 20px 0;

39 background-color: #f0f0f0;

40 }

41

42 section > div {

43 padding: 14px;

44 }

45

46 .yellow-slider paper-slider::shadow #sliderKnobInner,

47 .yellow-slider paper-slider::shadow #sliderBar::shadow #activeProgress {

48 background-color: #f4b400;

49 }

50

51 .green-slider paper-slider::shadow #sliderKnobInner,

52 .green-slider paper-slider::shadow #sliderKnobInner::before,

53 .green-slider paper-slider::shadow #sliderBar::shadow #activeProgress {

54 background-color: #0f9d58;

55 }

56

57 #ratingsLabel {

58 padding-left: 12px;

59 color: #a0a0a0;

60 }

61

62 </style>

63

64 </head>

65 <body unresolved>

66

67 <section class="yellow-slider">

68

69 <div>Music, video, games & other media</div>

70 <paper-slider value="50"></paper-slider>

71

72 <br>

73 <br>

74

75 <div>Notifications</div>

76 <paper-slider value="50"></paper-slider>

77

78 <br>

79 <br>

80

81 <div>Alarms</div>

82 <paper-slider value="80"></paper-slider>

83

84 </section>

85

86 <br>

87

88 <section>

89

90 <div center horizontal layout>

91 <div>R</div>

92 <paper-slider value="23" max="255" editable></paper-slider>

93 </div>

94

95 <br>

96 <br>

97

98 <div center horizontal layout>

99 <div>G</div>

100 <paper-slider value="183" max="255" editable></paper-slider>

101 </div>

102

103 <br>

104 <br>

105

106 <div center horizontal layout>

107 <div>B</div>

108 <paper-slider value="211" max="255" editable></paper-slider>

109 </div>

110

111 </section>

112

113 <br>

114

115 <section class="green-slider">

116

117 <div>Brightness</div>

118 <br>

119 <paper-slider pin value="50"></paper-slider>

120

121 </section>

122

123 <br>

124

125 <section class="green-slider">

126

127 <div>

128 <span>Ratings</span><span id="ratingsLabel"></span>

129 </div>

130 <br>

131 <paper-slider id="ratings" pin snaps max="10" step="1" value="5"></paper-sli der>

132

133 </section>

134

135 <script>

136

137 var ratings = document.querySelector('#ratings');

138 ratings.addEventListener('core-change', function() {

139 document.querySelector('#ratingsLabel').textContent = ratings.value;

140 });

141

142 </script>

143

144 </body>

145 </html>

OLD	NEW