Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(490)

Side by Side Diff: third_party/polymer/v1_0/components/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
OLDNEW
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 --> 9 -->
10 10
11 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../polymer/polymer.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-radio-button-behavior.html"> 13 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
14 14
15 <!-- 15 <!--
16 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state 16 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state
17 by tapping or by dragging the switch. 17 by tapping or by dragging the switch.
18 18
19 Example: 19 Example:
20 20
21 <paper-toggle-button></paper-toggle-button> 21 <paper-toggle-button></paper-toggle-button>
22 22
23 ### Styling 23 ### Styling
24 24
25 The following custom properties and mixins are available for styling: 25 The following custom properties and mixins are available for styling:
26 26
27 Custom property | Description | Default 27 Custom property | Description | Default
28 ----------------|-------------|---------- 28 ----------------|-------------|----------
29 `--paper-toggle-button-unchecked-bar-color` | Slider color when the input is not checked | `#000000` 29 `--paper-toggle-button-unchecked-bar-color` | Slider color when the input is not checked | `#000000`
30 `--paper-toggle-button-unchecked-button-color` | Button color when the input is not checked | `--paper-grey-50` 30 `--paper-toggle-button-unchecked-button-color` | Button color when the input is not checked | `--paper-grey-50`
31 `--paper-toggle-button-unchecked-ink-color` | Selected/focus ripple color when t he input is not checked | `--dark-primary-color` 31 `--paper-toggle-button-unchecked-ink-color` | Selected/focus ripple color when t he input is not checked | `--dark-primary-color`
32 `--paper-toggle-button-checked-bar-color` | Slider button color when the input i s checked | `--google-green-500` 32 `--paper-toggle-button-checked-bar-color` | Slider button color when the input i s checked | `--google-green-500`
33 `--paper-toggle-button-checked-button-color` | Button color when the input is ch ecked | `--google-green-500` 33 `--paper-toggle-button-checked-button-color` | Button color when the input is ch ecked | `--google-green-500`
34 `--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--google-green-500` 34 `--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--google-green-500`
35 35
36 @group Paper Elements 36 @group Paper Elements
37 @element paper-toggle-button 37 @element paper-toggle-button
38 @hero hero.svg 38 @hero hero.svg
39 @demo demo/index.html 39 @demo demo/index.html
40 --> 40 -->
41 <style is="custom-style">
42 :root {
43 --paper-toggle-button-unchecked-bar-color: #000000;
44 --paper-toggle-button-unchecked-button-color: var(--paper-grey-50);
45 --paper-toggle-button-unchecked-ink-color: var(--dark-primary-color);
46
47 --paper-toggle-button-checked-bar-color: var(--google-green-500);
48 --paper-toggle-button-checked-button-color: var(--google-green-500);
49 --paper-toggle-button-checked-ink-color: var(--google-green-500);
50 }
51 </style>
52 41
53 <dom-module id="paper-toggle-button"> 42 <dom-module id="paper-toggle-button">
54 43
55 <link rel="import" type="css" href="paper-toggle-button.css"> 44 <link rel="import" type="css" href="paper-toggle-button.css">
56 45
57 <template> 46 <template>
58 47
59 <div id="toggleContainer"> 48 <div id="toggleContainer">
60 <div id="toggleBar" class="toggle-bar"></div> 49 <div id="toggleBar" class="toggle-bar"></div>
61 <div id="toggleButton" class="toggle-button"> 50 <div id="toggleButton" class="toggle-button">
62 <paper-ripple id="ink" class="toggle-ink circle" recenters></paper-rippl e> 51 <paper-ripple id="ink" class="toggle-ink circle" recenters></paper-rippl e>
63 </div> 52 </div>
64 </div> 53 </div>
65 54
66 </template> 55 </template>
67 56
68 <script> 57 <script>
69 Polymer({ 58 Polymer({
70 is: 'paper-toggle-button', 59 is: 'paper-toggle-button',
71 60
72 behaviors: [ 61 behaviors: [
73 Polymer.PaperRadioButtonBehavior 62 Polymer.PaperInkyFocusBehavior
74 ], 63 ],
75 64
76 hostAttributes: { 65 hostAttributes: {
77 role: 'button', 66 role: 'button',
78 'aria-pressed': 'false', 67 'aria-pressed': 'false',
79 tabindex: 0 68 tabindex: 0
80 }, 69 },
81 70
82 properties: { 71 properties: {
83 /** 72 /**
(...skipping 90 matching lines...) Expand 10 before | Expand all | Expand 10 after
174 163
175 _trackEnd: function(track) { 164 _trackEnd: function(track) {
176 this.$.toggleButton.classList.remove('dragging'); 165 this.$.toggleButton.classList.remove('dragging');
177 this.transform('', this.$.toggleButton); 166 this.transform('', this.$.toggleButton);
178 } 167 }
179 168
180 }); 169 });
181 </script> 170 </script>
182 171
183 </dom-module> 172 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698