third_party/polymer/v0_8/components-chromium/paper-toggle-button/paper-toggle-button.html - Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed.

Side by Side Diff: third_party/polymer/v0_8/components-chromium/paper-toggle-button/paper-toggle-button.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 6 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/v0_8/components-chromium/paper-toggle-button/paper-toggle-button.css ('k') | third_party/polymer/v0_8/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-ripple/paper-ripple.html">	10 <link rel="import" href="../paper-ripple/paper-ripple.html">

11 <link rel="import" href="../paper-behaviors/paper-radio-button-behavior.html">	11 <link rel="import" href="../paper-behaviors/paper-radio-button-behavior.html">

12	12

13 <!--	13 <!--

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

15 by tapping or by dragging the swtich.	15 by tapping or by dragging the switch.

16	16

17 Example:	17 Example:

18	18

19 <paper-toggle-button></paper-toggle-button>	19 <paper-toggle-button></paper-toggle-button>

20	20

21 Styling toggle-button:	21 ### Styling

22 <style is="x-style">	22

23 * {	23 The following custom properties and mixins are available for styling:

24 --paper-toggle-button-unchecked-bar-color: #FF4081;	24

25 --paper-toggle-button-unchecked-button-color: #9c27b0;	25 Custom property \| Description \| Default

26 --paper-toggle-button-unchecked-ink-color: #009688;	26 ----------------\|-------------\|----------

27 --paper-toggle-button-checked-bar-color: #5677fc;	27 `--paper-toggle-button-unchecked-bar-color` \| Slider color when the input is not checked \| `#000000`

28 --paper-toggle-button-checked-button-color: #ff4081;	28 `--paper-toggle-button-unchecked-button-color` \| Button color when the input is not checked \| `--paper-grey-50`

29 --paper-toggle-button-checked-ink-color: #ff4081;	29 `--paper-toggle-button-unchecked-ink-color` \| Selected/focus ripple color when t he input is not checked \| `--dark-primary-color`

30 }	30 `--paper-toggle-button-checked-bar-color` \| Slider button color when the input i s checked \| `--google-green-500`

31 </style>	31 `--paper-toggle-button-checked-button-color` \| Button color when the input is ch ecked \| `--google-green-500`

	32 `--paper-toggle-button-checked-ink-color` \| Selected/focus ripple color when the input is checked \| `--google-green-500`

32	33

33 @group Paper Elements	34 @group Paper Elements

34 @element paper-toggle-button	35 @element paper-toggle-button

	36 @hero hero.svg

	37 @demo demo/index.html

35 -->	38 -->

	39 <style is="custom-style">

	40 :root {

	41 --paper-toggle-button-unchecked-bar-color: #000000;

	42 --paper-toggle-button-unchecked-button-color: var(--paper-grey-50);

	43 --paper-toggle-button-unchecked-ink-color: var(--dark-primary-color);

	44

	45 --paper-toggle-button-checked-bar-color: var(--google-green-500);

	46 --paper-toggle-button-checked-button-color: var(--google-green-500);

	47 --paper-toggle-button-checked-ink-color: var(--google-green-500);

	48 }

	49 </style>

36	50

37 </head><body><dom-module id="paper-toggle-button">	51 </head><body><dom-module id="paper-toggle-button">

38	52

39 <style is="x-style">

40 * {

41 --paper-toggle-button-unchecked-bar-color: #000000;

42 --paper-toggle-button-unchecked-button-color: #f1f1f1;

43 --paper-toggle-button-unchecked-ink-color: #bbb;

44 --paper-toggle-button-checked-bar-color: #0f9d58;

45 --paper-toggle-button-checked-button-color: #0f9d58;

46 --paper-toggle-button-checked-ink-color: #0f9d58;

47 }

48 </style>

49

50 <link rel="import" type="css" href="paper-toggle-button.css">	53 <link rel="import" type="css" href="paper-toggle-button.css">

51	54

52 <template>	55 <template>

53	56

54 <div id="toggleContainer">	57 <div id="toggleContainer">

55 <div id="toggleBar" class="toggle-bar"></div>	58 <div id="toggleBar" class="toggle-bar"></div>

56 <div id="toggleButton" class="toggle-button">	59 <div id="toggleButton" class="toggle-button">

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

58 </div>	61 </div>

59 </div>	62 </div>

60	63

61 </template>	64 </template>

62	65

63 </dom-module>	66 </dom-module>

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

OLD	NEW