third_party/polymer/v1_0/components-chromium/paper-toggle-button/paper-toggle-button.html - Issue 2314283002: Roll Polymer

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

Issue 2314283002: Roll Polymer (Closed)

Patch Set: dep Created 4 years, 3 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:

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-toggle-button/bower.json ('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="../iron-flex-layout/iron-flex-layout.html">	10 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

(...skipping 16 matching lines...) Expand all Loading...
27 The following custom properties and mixins are available for styling:	27 The following custom properties and mixins are available for styling:

28	28

29 Custom property \| Description \| Default	29 Custom property \| Description \| Default

30 ----------------\|-------------\|----------	30 ----------------\|-------------\|----------

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

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

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

34 `--paper-toggle-button-checked-bar-color` \| Slider button color when the input i s checked \| `--primary-color`	34 `--paper-toggle-button-checked-bar-color` \| Slider button color when the input i s checked \| `--primary-color`

35 `--paper-toggle-button-checked-button-color` \| Button color when the input is ch ecked \| `--primary-color`	35 `--paper-toggle-button-checked-button-color` \| Button color when the input is ch ecked \| `--primary-color`

36 `--paper-toggle-button-checked-ink-color` \| Selected/focus ripple color when the input is checked \| `--primary-color`	36 `--paper-toggle-button-checked-ink-color` \| Selected/focus ripple color when the input is checked \| `--primary-color`

	37 `--paper-toggle-button-invalid-bar-color` \| Slider button color when the input i s invalid \| `--error-color`

	38 `--paper-toggle-button-invalid-button-color` \| Button color when the input is in valid \| `--error-color`

	39 `--paper-toggle-button-invalid-ink-color` \| Selected/focus ripple color when the input is invalid \| `--error-color`

37 `--paper-toggle-button-unchecked-bar` \| Mixin applied to the slider when the inp ut is not checked \| `{}`	40 `--paper-toggle-button-unchecked-bar` \| Mixin applied to the slider when the inp ut is not checked \| `{}`

38 `--paper-toggle-button-unchecked-button` \| Mixin applied to the slider button wh en the input is not checked \| `{}`	41 `--paper-toggle-button-unchecked-button` \| Mixin applied to the slider button wh en the input is not checked \| `{}`

39 `--paper-toggle-button-checked-bar` \| Mixin applied to the slider when the input is checked \| `{}`	42 `--paper-toggle-button-checked-bar` \| Mixin applied to the slider when the input is checked \| `{}`

40 `--paper-toggle-button-checked-button` \| Mixin applied to the slider button when the input is checked \| `{}`	43 `--paper-toggle-button-checked-button` \| Mixin applied to the slider button when the input is checked \| `{}`

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

42 `--paper-toggle-button-label-spacing` \| Spacing between the label and the button \| `8px`	45 `--paper-toggle-button-label-spacing` \| Spacing between the label and the button \| `8px`

43	46

44 This element applies the mixin `--paper-font-common-base` but does not import `p aper-styles/typography.html`.	47 This element applies the mixin `--paper-font-common-base` but does not import `p aper-styles/typography.html`.

45 In order to apply the `Roboto` font to this element, make sure you've imported ` paper-styles/typography.html`.	48 In order to apply the `Roboto` font to this element, make sure you've imported ` paper-styles/typography.html`.

46	49

(...skipping 112 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
159 }	162 }

160	163

161 .toggle-label {	164 .toggle-label {

162 position: relative;	165 position: relative;

163 display: inline-block;	166 display: inline-block;

164 vertical-align: middle;	167 vertical-align: middle;

165 padding-left: var(--paper-toggle-button-label-spacing, 8px);	168 padding-left: var(--paper-toggle-button-label-spacing, 8px);

166 pointer-events: none;	169 pointer-events: none;

167 color: var(--paper-toggle-button-label-color, --primary-text-color);	170 color: var(--paper-toggle-button-label-color, --primary-text-color);

168 }	171 }

	172

	173 /* invalid state */

	174 :host([invalid]) .toggle-bar {

	175 background-color: var(--paper-toggle-button-invalid-bar-color, --error-c olor);

	176 }

	177

	178 :host([invalid]) .toggle-button {

	179 background-color: var(--paper-toggle-button-invalid-button-color, --erro r-color);

	180 }

	181

	182 :host([invalid]) .toggle-ink {

	183 color: var(--paper-toggle-button-invalid-ink-color, --error-color);

	184 }

169 </style>	185 </style>

170	186

171 <div class="toggle-container">	187 <div class="toggle-container">

172 <div id="toggleBar" class="toggle-bar"></div>	188 <div id="toggleBar" class="toggle-bar"></div>

173 <div id="toggleButton" class="toggle-button"></div>	189 <div id="toggleButton" class="toggle-button"></div>

174 </div>	190 </div>

175	191

176 <div class="toggle-label"><content></content></div>	192 <div class="toggle-label"><content></content></div>

177	193

178 </template>	194 </template>

179	195

180 </dom-module>	196 </dom-module>

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

OLD	NEW