third_party/polymer/v1_0/components-chromium/paper-toggle-button/paper-toggle-button.html - Issue 1401633002: Update Polymer from 1.1.4 -> 1.1.5

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-toggle-button/paper-toggle-button.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-toggle-button/hero.svg ('k') | third_party/polymer/v1_0/components-chromium/paper-toggle-button/paper-toggle-button-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!--	1 <!--

2 @license	2 @license

3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.	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	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	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	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	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	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">	9 --><html><head><link rel="import" href="../polymer/polymer.html">

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

11 <link rel="import" href="../paper-styles/default-theme.html">	11 <link rel="import" href="../paper-styles/default-theme.html">

12 <link rel="import" href="../paper-ripple/paper-ripple.html">	12 <link rel="import" href="../paper-ripple/paper-ripple.html">

13 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">	13 <link rel="import" href="../paper-behaviors/paper-checked-element-behavior.html" >

14 <link rel="import" href="../iron-checked-element-behavior/iron-checked-element-b ehavior.html">

15	14

16 <!--	15 <!--

	16 Material design: [Switch](https://www.google.com/design/spec/components/selectio n-controls.html#selection-controls-switch)

	17

17 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state	18 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state

18 by tapping or by dragging the switch.	19 by tapping or by dragging the switch.

19	20

20 Example:	21 Example:

21	22

22 <paper-toggle-button></paper-toggle-button>	23 <paper-toggle-button></paper-toggle-button>

23	24

24 ### Styling	25 ### Styling

25	26

26 The following custom properties and mixins are available for styling:	27 The following custom properties and mixins are available for styling:

(...skipping 12 matching lines...) Expand all Loading...
39 `--paper-toggle-button-checked-button` \| Mixin applied to the slider button when the input is checked \| `{}`	40 `--paper-toggle-button-checked-button` \| Mixin applied to the slider button when the input is checked \| `{}`

40 `--paper-toggle-button-label-color` \| Label color \| `--primary-text-color`	41 `--paper-toggle-button-label-color` \| Label color \| `--primary-text-color`

41	42

42 @group Paper Elements	43 @group Paper Elements

43 @element paper-toggle-button	44 @element paper-toggle-button

44 @hero hero.svg	45 @hero hero.svg

45 @demo demo/index.html	46 @demo demo/index.html

46 -->	47 -->

47	48

48 </head><body><dom-module id="paper-toggle-button">	49 </head><body><dom-module id="paper-toggle-button">

49 <template>	50 <template strip-whitespace="">

50	51

51 <style>	52 <style>

52 :host {	53 :host {

53 display: inline-block;	54 display: inline-block;

54 }	55 }

55	56

56 :host([disabled]) {	57 :host([disabled]) {

57 pointer-events: none;	58 pointer-events: none;

58 }	59 }

59	60

(...skipping 87 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
147 vertical-align: middle;	148 vertical-align: middle;

148 margin-left: 10px;	149 margin-left: 10px;

149 white-space: normal;	150 white-space: normal;

150 pointer-events: none;	151 pointer-events: none;

151 color: var(--paper-toggle-button-label-color, --primary-text-color);	152 color: var(--paper-toggle-button-label-color, --primary-text-color);

152 }	153 }

153 </style>	154 </style>

154	155

155 <div class="toggle-container">	156 <div class="toggle-container">

156 <div id="toggleBar" class="toggle-bar"></div>	157 <div id="toggleBar" class="toggle-bar"></div>

157 <div id="toggleButton" class="toggle-button">	158 <div id="toggleButton" class="toggle-button"></div>

158 <paper-ripple id="ink" class="toggle-ink circle" recenters=""></paper-ri pple>

159 </div>

160 </div>	159 </div>

161	160

162 <div class="toggle-label"><content></content></div>	161 <div class="toggle-label"><content></content></div>

163	162

164 </template>	163 </template>

165	164

166 </dom-module>	165 </dom-module>

167 <script src="paper-toggle-button-extracted.js"></script></body></html>	166 <script src="paper-toggle-button-extracted.js"></script></body></html>

OLD	NEW