third_party/polymer/v1_0/components-chromium/paper-toggle-button/paper-toggle-button.html - Issue 1187823002: Update Polymer components and re-run reproduce.sh

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

Issue 1187823002: Update Polymer components and re-run reproduce.sh (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Rebase 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/v1_0/components-chromium/paper-toggle-button/paper-toggle-button.css ('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-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-inky-focus-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 switch.	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	21 ### Styling

22	22

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

24	24

25 Custom property \| Description \| Default	25 Custom property \| Description \| Default

26 ----------------\|-------------\|----------	26 ----------------\|-------------\|----------

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

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

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

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

31 `--paper-toggle-button-checked-button-color` \| Button color when the input is ch ecked \| `--google-green-500`	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 `--paper-toggle-button-checked-ink-color` \| Selected/focus ripple color when the input is checked \| `--google-green-500`

33	33

34 @group Paper Elements	34 @group Paper Elements

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

36 @hero hero.svg	36 @hero hero.svg

37 @demo demo/index.html	37 @demo demo/index.html

38 -->	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>

50	39

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

52	41

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

54	43

55 <template>	44 <template>

56	45

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

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

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

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

61 </div>	50 </div>

62 </div>	51 </div>

63	52

64 </template>	53 </template>

65	54

66 </dom-module>	55 </dom-module>

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

OLD	NEW