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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1336623003: [MD settings] updating polymer to 1.1.13 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: changed Polymer.IronCheckedElementBehavior name Created 5 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:
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') | Show Comments Hide Comments ('s')
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 --><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-styles/color.html"> 10 <link rel="import" href="../paper-styles/color.html">
11 <link rel="import" href="../paper-styles/default-theme.html"> 11 <link rel="import" href="../paper-styles/default-theme.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-inky-focus-behavior.html"> 13 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
14 <link rel="import" href="../iron-checked-element-behavior/iron-checked-element-b ehavior.html">
14 15
15 <!-- 16 <!--
16 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state 17 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state
17 by tapping or by dragging the switch. 18 by tapping or by dragging the switch.
18 19
19 Example: 20 Example:
20 21
21 <paper-toggle-button></paper-toggle-button> 22 <paper-toggle-button></paper-toggle-button>
22 23
23 ### Styling 24 ### Styling
24 25
25 The following custom properties and mixins are available for styling: 26 The following custom properties and mixins are available for styling:
26 27
27 Custom property | Description | Default 28 Custom property | Description | Default
28 ----------------|-------------|---------- 29 ----------------|-------------|----------
29 `--paper-toggle-button-unchecked-bar-color` | Slider color when the input is not checked | `#000000` 30 `--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` 31 `--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` 32 `--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` 33 `--paper-toggle-button-checked-bar-color` | Slider button color when the input i s checked | `--default-primary-color`
33 `--paper-toggle-button-checked-button-color` | Button color when the input is ch ecked | `--google-green-500` 34 `--paper-toggle-button-checked-button-color` | Button color when the input is ch ecked | `--default-primary-color`
34 `--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--google-green-500` 35 `--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--default-primary-color`
35 `--paper-toggle-button-unchecked-bar` | Mixin applied to the slider when the inp ut is not checked | `{}` 36 `--paper-toggle-button-unchecked-bar` | Mixin applied to the slider when the inp ut is not checked | `{}`
36 `--paper-toggle-button-unchecked-button` | Mixin applied to the slider button wh en the input is not checked | `{}` 37 `--paper-toggle-button-unchecked-button` | Mixin applied to the slider button wh en the input is not checked | `{}`
37 `--paper-toggle-button-checked-bar` | Mixin applied to the slider when the input is checked | `{}` 38 `--paper-toggle-button-checked-bar` | Mixin applied to the slider when the input is checked | `{}`
38 `--paper-toggle-button-checked-button` | Mixin applied to the slider button when the input is checked | `{}` 39 `--paper-toggle-button-checked-button` | Mixin applied to the slider button when the input is checked | `{}`
39 40
40 @group Paper Elements 41 @group Paper Elements
41 @element paper-toggle-button 42 @element paper-toggle-button
42 @hero hero.svg 43 @hero hero.svg
43 @demo demo/index.html 44 @demo demo/index.html
44 --> 45 -->
45 46
46 </head><body><dom-module id="paper-toggle-button"> 47 </head><body><dom-module id="paper-toggle-button">
48 <template>
47 49
48 <link rel="import" type="css" href="paper-toggle-button.css"> 50 <style>
51 :host {
52 display: inline-block;
53 }
49 54
50 <template> 55 :host([disabled]) {
56 pointer-events: none;
57 }
58
59 :host(:focus) {
60 outline:none;
61 }
62
63 :host .toggle-bar {
64 background-color: var(--paper-toggle-button-unchecked-bar-color, #000000 );
65 @apply(--paper-toggle-button-unchecked-bar);
66 }
67
68 :host .toggle-button {
69 background-color: var(--paper-toggle-button-unchecked-button-color, --pa per-grey-50);
70 @apply(--paper-toggle-button-unchecked-button);
71 }
72
73 :host([checked]) .toggle-bar {
74 background-color: var(--paper-toggle-button-checked-bar-color, --default -primary-color);
75 @apply(--paper-toggle-button-checked-bar);
76 }
77
78 :host([checked]) .toggle-button {
79 background-color: var(--paper-toggle-button-checked-button-color, --defa ult-primary-color);
80 @apply(--paper-toggle-button-checked-button);
81 }
82
83 :host .toggle-ink {
84 color: var(--paper-toggle-button-unchecked-ink-color, --primary-text-col or);
85 }
86
87 :host([checked]) .toggle-ink {
88 color: var(--paper-toggle-button-checked-ink-color, --default-primary-co lor);
89 }
90
91 /* ID selectors should not be overriden by users. */
92
93 #toggleContainer {
94 position: relative;
95 width: 36px;
96 height: 14px;
97 }
98
99 #toggleBar {
100 position: absolute;
101 height: 100%;
102 width: 100%;
103 border-radius: 8px;
104 pointer-events: none;
105 opacity: 0.4;
106 transition: background-color linear .08s;
107 }
108
109 :host([checked]) #toggleBar {
110 opacity: 0.5;
111 }
112
113 :host([disabled]) #toggleBar {
114 background-color: #000;
115 opacity: 0.12;
116 }
117
118 #toggleButton {
119 position: absolute;
120 top: -3px;
121 height: 20px;
122 width: 20px;
123 border-radius: 50%;
124 box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
125 transition: -webkit-transform linear .08s, background-color linear .08s;
126 transition: transform linear .08s, background-color linear .08s;
127 will-change: transform;
128 }
129
130 #toggleButton.dragging {
131 -webkit-transition: none;
132 transition: none;
133 }
134
135 :host([checked]) #toggleButton {
136 -webkit-transform: translate(16px, 0);
137 transform: translate(16px, 0);
138 }
139
140 :host([disabled]) #toggleButton {
141 background-color: #bdbdbd;
142 opacity: 1;
143 }
144
145 #ink {
146 position: absolute;
147 top: -14px;
148 left: -14px;
149 width: 48px;
150 height: 48px;
151 opacity: 0.5;
152 pointer-events: none;
153 }
154 </style>
51 155
52 <div id="toggleContainer"> 156 <div id="toggleContainer">
53 <div id="toggleBar" class="toggle-bar"></div> 157 <div id="toggleBar" class="toggle-bar"></div>
54 <div id="toggleButton" class="toggle-button"> 158 <div id="toggleButton" class="toggle-button">
55 <paper-ripple id="ink" class="toggle-ink circle" recenters=""></paper-ri pple> 159 <paper-ripple id="ink" class="toggle-ink circle" recenters=""></paper-ri pple>
56 </div> 160 </div>
57 </div> 161 </div>
58 162
59 </template> 163 </template>
60 164
61 </dom-module> 165 </dom-module>
62 <script src="paper-toggle-button-extracted.js"></script></body></html> 166 <script src="paper-toggle-button-extracted.js"></script></body></html>
OLDNEW
« 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 »

Powered by Google App Engine
This is Rietveld 408576698