third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button.html - Issue 899383002: Update paper-toggle-button to 0.5.4

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

Issue 899383002: Update paper-toggle-button to 0.5.4 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 5 years, 10 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/components-chromium/paper-toggle-button/paper-toggle-button.css ('k') | third_party/polymer/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 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.	2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

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

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

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

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

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

8 --><!--	8 --><!--

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

10 by tapping or by dragging the swtich.	10 by tapping or by dragging the swtich.

11	11

12 Example:	12 Example:

13	13

14 <paper-toggle-button></paper-toggle-button>	14 <paper-toggle-button></paper-toggle-button>

15	15

16 Styling toggle button:	16 Styling toggle button:

17	17

18 To change the ink color for checked state:	18 To change the toggle color:

19	19

20 paper-toggle-button::shadow paper-radio-button::shadow #ink[checked] {	20 paper-toggle-button::shadow .toggle {

	21 background-color: #9c27b0;

	22 }

	23

	24 To change the ink color:

	25

	26 paper-toggle-button::shadow .toggle-ink {

	27 color: #009688;

	28 }

	29

	30 To change the checked toggle color:

	31

	32 paper-toggle-button::shadow [checked] .toggle {

	33 background-color: #4285f4;

	34 }

	35

	36 To change the checked ink color:

	37

	38 paper-toggle-button::shadow [checked] .toggle-ink {

21 color: #4285f4;	39 color: #4285f4;

22 }	40 }

23

24 To change the radio checked color:

25

26 paper-toggle-button::shadow paper-radio-button::shadow #onRadio {

27 background-color: #4285f4;

28 }

29

30 To change the bar color for checked state:

31	41

32 paper-toggle-button::shadow #toggleBar[checked] {	42 To change the toggle bar and toggle button colors separately:

33 background-color: #4285f4;

34 }

35

36 To change the ink color for unchecked state:

37	43

38 paper-toggle-button::shadow paper-radio-button::shadow #ink {	44 paper-toggle-button::shadow .toggle-bar {

39 color: #b5b5b5;	45 background-color: #5677fc;

40 }

41

42 To change the radio unchecked color:

43

44 paper-toggle-button::shadow paper-radio-button::shadow #offRadio {

45 border-color: #b5b5b5;

46 }	46 }

47	47

48 To change the bar color for unchecked state:	48 paper-toggle-button::shadow .toggle-button {

49	49 background-color: #9c27b0;

50 paper-toggle-button::shadow #toggleBar {

51 background-color: red;

52 }	50 }

53	51

54 @group Paper Elements	52 @group Paper Elements

55 @element paper-toggle-button	53 @element paper-toggle-button

56 @homepage github.io	54 @homepage github.io

57 --><html><head><link rel="import" href="../paper-radio-button/paper-radio-button .html">	55 --><html><head><link rel="import" href="../paper-radio-button/paper-radio-button .html">

	56 <link rel="import" href="../core-a11y-keys/core-a11y-keys.html">

58	57

59 </head><body><polymer-element name="paper-toggle-button" attributes="checked dis abled" role="button" aria-pressed="false" tabindex="0" assetpath="">	58 </head><body><polymer-element name="paper-toggle-button" attributes="checked dis abled" role="button" aria-pressed="false" tabindex="0" assetpath="">

60 <template>	59 <template>

61	60

62 <link rel="stylesheet" href="paper-toggle-button.css">	61 <link rel="stylesheet" href="paper-toggle-button.css">

63	62

64 <div id="toggleContainer" disabled?="{{disabled}}">	63 <core-a11y-keys target="{{}}" keys="space" on-keys-pressed="{{tap}}"></core-a1 1y-keys>

	64

	65 <div id="toggleContainer" checked?="{{checked}}" disabled?="{{disabled}}">

65	66

66 <div id="toggleBar" checked?="{{checked}}"></div>	67 <div id="toggleBar" class="toggle toggle-bar"></div>

67	68

68 <paper-radio-button id="toggleRadio" toggles="" checked="{{checked}}" on-cha nge="{{changeAction}}" on-core-change="{{stopPropagation}}" on-trackstart="{{tra ckStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"></paper-radio-butto n>	69 <div id="toggleButton" class="toggle toggle-button">

69	70 <paper-ripple id="ink" class="toggle-ink circle"></paper-ripple>

	71 </div>

	72

70 </div>	73 </div>

71	74

72 </template>	75 </template>

73	76

74 </polymer-element>	77 </polymer-element>

75 <script src="paper-toggle-button-extracted.js"></script></body></html>	78 <script charset="utf-8" src="paper-toggle-button-extracted.js"></script></body>< /html>

OLD	NEW