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

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 1766433002: Roll Polymer to 1.3.1 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 4 years, 9 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/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/paper-tooltip/.bower.json » ('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="../iron-flex-layout/iron-flex-layout.html"> 10 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
11 <link rel="import" href="../paper-styles/color.html"> 11 <link rel="import" href="../paper-styles/color.html">
12 <link rel="import" href="../paper-styles/default-theme.html"> 12 <link rel="import" href="../paper-styles/default-theme.html">
13 <link rel="import" href="../paper-ripple/paper-ripple.html">
14 <link rel="import" href="../paper-behaviors/paper-checked-element-behavior.html" > 13 <link rel="import" href="../paper-behaviors/paper-checked-element-behavior.html" >
15 14
16 <!-- 15 <!--
17 Material design: [Switch](https://www.google.com/design/spec/components/selectio n-controls.html#selection-controls-switch) 16 Material design: [Switch](https://www.google.com/design/spec/components/selectio n-controls.html#selection-controls-switch)
18 17
19 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state 18 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state
20 by tapping or by dragging the switch. 19 by tapping or by dragging the switch.
21 20
22 Example: 21 Example:
23 22
24 <paper-toggle-button></paper-toggle-button> 23 <paper-toggle-button></paper-toggle-button>
25 24
26 ### Styling 25 ### Styling
27 26
28 The following custom properties and mixins are available for styling: 27 The following custom properties and mixins are available for styling:
29 28
30 Custom property | Description | Default 29 Custom property | Description | Default
31 ----------------|-------------|---------- 30 ----------------|-------------|----------
32 `--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`
33 `--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`
34 `--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`
35 `--paper-toggle-button-checked-bar-color` | Slider button color when the input i s checked | `--default-primary-color` 34 `--paper-toggle-button-checked-bar-color` | Slider button color when the input i s checked | `--primary-color`
36 `--paper-toggle-button-checked-button-color` | Button color when the input is ch ecked | `--default-primary-color` 35 `--paper-toggle-button-checked-button-color` | Button color when the input is ch ecked | `--primary-color`
37 `--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--default-primary-color` 36 `--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the input is checked | `--primary-color`
38 `--paper-toggle-button-unchecked-bar` | Mixin applied to the slider when the inp ut is not checked | `{}` 37 `--paper-toggle-button-unchecked-bar` | Mixin applied to the slider when the inp ut is not checked | `{}`
39 `--paper-toggle-button-unchecked-button` | Mixin applied to the slider button wh en the input is not checked | `{}` 38 `--paper-toggle-button-unchecked-button` | Mixin applied to the slider button wh en the input is not checked | `{}`
40 `--paper-toggle-button-checked-bar` | Mixin applied to the slider when the input is checked | `{}` 39 `--paper-toggle-button-checked-bar` | Mixin applied to the slider when the input is checked | `{}`
41 `--paper-toggle-button-checked-button` | Mixin applied to the slider button when the input is checked | `{}` 40 `--paper-toggle-button-checked-button` | Mixin applied to the slider button when the input is checked | `{}`
42 `--paper-toggle-button-label-color` | Label color | `--primary-text-color` 41 `--paper-toggle-button-label-color` | Label color | `--primary-text-color`
43 `--paper-toggle-button-label-spacing` | Spacing between the label and the button | `8px` 42 `--paper-toggle-button-label-spacing` | Spacing between the label and the button | `8px`
44 43
44 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`.
46
45 @group Paper Elements 47 @group Paper Elements
46 @element paper-toggle-button 48 @element paper-toggle-button
47 @hero hero.svg 49 @hero hero.svg
48 @demo demo/index.html 50 @demo demo/index.html
49 --> 51 -->
50 52
51 </head><body><dom-module id="paper-toggle-button"> 53 </head><body><dom-module id="paper-toggle-button">
52 <template strip-whitespace=""> 54 <template strip-whitespace="">
53 55
54 <style> 56 <style>
55 :host { 57 :host {
56 display: inline-block; 58 display: inline-block;
57 @apply(--layout-horizontal); 59 @apply(--layout-horizontal);
58 @apply(--layout-center); 60 @apply(--layout-center);
61 @apply(--paper-font-common-base);
59 } 62 }
60 63
61 :host([disabled]) { 64 :host([disabled]) {
62 pointer-events: none; 65 pointer-events: none;
63 } 66 }
64 67
65 :host(:focus) { 68 :host(:focus) {
66 outline:none; 69 outline:none;
67 } 70 }
68 71
69 .toggle-bar { 72 .toggle-bar {
70 position: absolute; 73 position: absolute;
71 height: 100%; 74 height: 100%;
72 width: 100%; 75 width: 100%;
73 border-radius: 8px; 76 border-radius: 8px;
74 pointer-events: none; 77 pointer-events: none;
75 opacity: 0.4; 78 opacity: 0.4;
76 transition: background-color linear .08s; 79 transition: background-color linear .08s;
77 background-color: var(--paper-toggle-button-unchecked-bar-color, #000000 ); 80 background-color: var(--paper-toggle-button-unchecked-bar-color, #000000 );
81
78 @apply(--paper-toggle-button-unchecked-bar); 82 @apply(--paper-toggle-button-unchecked-bar);
79 } 83 }
80 84
81 .toggle-button { 85 .toggle-button {
82 position: absolute; 86 position: absolute;
83 top: -3px; 87 top: -3px;
84 height: 20px; 88 height: 20px;
85 width: 20px; 89 width: 20px;
86 border-radius: 50%; 90 border-radius: 50%;
87 box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6); 91 box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.6);
88 transition: -webkit-transform linear .08s, background-color linear .08s; 92 transition: -webkit-transform linear .08s, background-color linear .08s;
89 transition: transform linear .08s, background-color linear .08s; 93 transition: transform linear .08s, background-color linear .08s;
90 will-change: transform; 94 will-change: transform;
91 background-color: var(--paper-toggle-button-unchecked-button-color, --pa per-grey-50); 95 background-color: var(--paper-toggle-button-unchecked-button-color, --pa per-grey-50);
96
92 @apply(--paper-toggle-button-unchecked-button); 97 @apply(--paper-toggle-button-unchecked-button);
93 } 98 }
94 99
95 .toggle-button.dragging { 100 .toggle-button.dragging {
96 -webkit-transition: none; 101 -webkit-transition: none;
97 transition: none; 102 transition: none;
98 } 103 }
99 104
100 :host([checked]:not([disabled])) .toggle-bar { 105 :host([checked]:not([disabled])) .toggle-bar {
101 opacity: 0.5; 106 opacity: 0.5;
102 background-color: var(--paper-toggle-button-checked-bar-color, --default -primary-color); 107 background-color: var(--paper-toggle-button-checked-bar-color, --primary -color);
108
103 @apply(--paper-toggle-button-checked-bar); 109 @apply(--paper-toggle-button-checked-bar);
104 } 110 }
105 111
106 :host([disabled]) .toggle-bar { 112 :host([disabled]) .toggle-bar {
107 background-color: #000; 113 background-color: #000;
108 opacity: 0.12; 114 opacity: 0.12;
109 } 115 }
110 116
111 :host([checked]) .toggle-button { 117 :host([checked]) .toggle-button {
112 -webkit-transform: translate(16px, 0); 118 -webkit-transform: translate(16px, 0);
113 transform: translate(16px, 0); 119 transform: translate(16px, 0);
114 } 120 }
115 121
116 :host([checked]:not([disabled])) .toggle-button { 122 :host([checked]:not([disabled])) .toggle-button {
117 background-color: var(--paper-toggle-button-checked-button-color, --defa ult-primary-color); 123 background-color: var(--paper-toggle-button-checked-button-color, --prim ary-color);
124
118 @apply(--paper-toggle-button-checked-button); 125 @apply(--paper-toggle-button-checked-button);
119 } 126 }
120 127
121 :host([disabled]) .toggle-button { 128 :host([disabled]) .toggle-button {
122 background-color: #bdbdbd; 129 background-color: #bdbdbd;
123 opacity: 1; 130 opacity: 1;
124 } 131 }
125 132
126 .toggle-ink { 133 .toggle-ink {
127 position: absolute; 134 position: absolute;
128 top: -14px; 135 top: -14px;
129 left: -14px; 136 left: -14px;
130 width: 48px; 137 width: 48px;
131 height: 48px; 138 height: 48px;
132 opacity: 0.5; 139 opacity: 0.5;
133 pointer-events: none; 140 pointer-events: none;
134 color: var(--paper-toggle-button-unchecked-ink-color, --primary-text-col or); 141 color: var(--paper-toggle-button-unchecked-ink-color, --primary-text-col or);
135 } 142 }
136 143
137 :host([checked]) .toggle-ink { 144 :host([checked]) .toggle-ink {
138 color: var(--paper-toggle-button-checked-ink-color, --default-primary-co lor); 145 color: var(--paper-toggle-button-checked-ink-color, --primary-color);
139 } 146 }
140 147
141 .toggle-container { 148 .toggle-container {
142 display: inline-block; 149 display: inline-block;
143 position: relative; 150 position: relative;
144 width: 36px; 151 width: 36px;
145 height: 14px; 152 height: 14px;
146 /* The toggle button has an absolute position of -3px; The extra 1px 153 /* The toggle button has an absolute position of -3px; The extra 1px
147 /* accounts for the toggle button shadow box. */ 154 /* accounts for the toggle button shadow box. */
148 margin: 4px 1px; 155 margin: 4px 1px;
149 } 156 }
150 157
151 .toggle-label { 158 .toggle-label {
152 position: relative; 159 position: relative;
153 display: inline-block; 160 display: inline-block;
154 vertical-align: middle; 161 vertical-align: middle;
155 padding-left: var(--paper-toggle-button-label-spacing, 8px); 162 padding-left: var(--paper-toggle-button-label-spacing, 8px);
156 white-space: normal;
157 pointer-events: none; 163 pointer-events: none;
158 color: var(--paper-toggle-button-label-color, --primary-text-color); 164 color: var(--paper-toggle-button-label-color, --primary-text-color);
159 } 165 }
160 </style> 166 </style>
161 167
162 <div class="toggle-container"> 168 <div class="toggle-container">
163 <div id="toggleBar" class="toggle-bar"></div> 169 <div id="toggleBar" class="toggle-bar"></div>
164 <div id="toggleButton" class="toggle-button"></div> 170 <div id="toggleButton" class="toggle-button"></div>
165 </div> 171 </div>
166 172
167 <div class="toggle-label"><content></content></div> 173 <div class="toggle-label"><content></content></div>
168 174
169 </template> 175 </template>
170 176
171 </dom-module> 177 </dom-module>
172 <script src="paper-toggle-button-extracted.js"></script></body></html> 178 <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/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/paper-tooltip/.bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698