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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-checkbox/paper-checkbox.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-checkbox/paper-checkbox.css ('k') | third_party/polymer/v1_0/components-chromium/paper-checkbox/paper-checkbox-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-ripple/paper-ripple.html"> 10 <link rel="import" href="../paper-ripple/paper-ripple.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-styles/color.html">
12 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html"> 13 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
13 14 <link rel="import" href="../iron-checked-element-behavior/iron-checked-element-b ehavior.html">
14 <!-- 15 <!--
15 16
16 `paper-checkbox` is a button that can be either checked or unchecked. User 17 `paper-checkbox` is a button that can be either checked or unchecked. User
17 can tap the checkbox to check or uncheck it. Usually you use checkboxes 18 can tap the checkbox to check or uncheck it. Usually you use checkboxes
18 to allow user to select multiple options from a set. If you have a single 19 to allow user to select multiple options from a set. If you have a single
19 ON/OFF option, avoid using a single checkbox and use `paper-toggle-button` 20 ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
20 instead. 21 instead.
21 22
22 Example: 23 Example:
23 24
24 <paper-checkbox>label</paper-checkbox> 25 <paper-checkbox>label</paper-checkbox>
25 26
26 <paper-checkbox checked> label</paper-checkbox> 27 <paper-checkbox checked> label</paper-checkbox>
27 28
28 ### Styling 29 ### Styling
29 30
30 The following custom properties and mixins are available for styling: 31 The following custom properties and mixins are available for styling:
31 32
32 Custom property | Description | Default 33 Custom property | Description | Default
33 ----------------|-------------|---------- 34 ----------------|-------------|----------
34 `--paper-checkbox-unchecked-background-color` | Checkbox background color when t he input is not checked | `transparent` 35 `--paper-checkbox-unchecked-background-color` | Checkbox background color when t he input is not checked | `transparent`
35 `--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color` 36 `--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color`
36 `--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the in put is not checked | `--primary-text-color` 37 `--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the in put is not checked | `--primary-text-color`
37 `--paper-checkbox-checked-color` | Checkbox color when the input is checked | `- -default-primary-color` 38 `--paper-checkbox-checked-color` | Checkbox color when the input is checked | `- -default-primary-color`
38 `--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the inpu t is checked | `--default-primary-color` 39 `--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the inpu t is checked | `--default-primary-color`
39 `--paper-checkbox-checkmark-color` | Checkmark color | `white` 40 `--paper-checkbox-checkmark-color` | Checkmark color | `white`
40 `--paper-checkbox-label-color` | Label color | `--primary-text-color` 41 `--paper-checkbox-label-color` | Label color | `--primary-text-color`
42 `--paper-checkbox-error-color` | Checkbox color when invalid | `--google-red-500 `
41 43
42 @demo demo/index.html 44 @demo demo/index.html
43 --> 45 -->
44 46
45 </head><body><dom-module id="paper-checkbox"> 47 </head><body><dom-module id="paper-checkbox">
46 <link rel="import" type="css" href="paper-checkbox.css"> 48 <template>
49 <style>
50 :host {
51 display: inline-block;
52 white-space: nowrap;
53 }
47 54
48 <template> 55 :host(:focus) {
56 outline: none;
57 }
58
59 .hidden {
60 display: none;
61 }
62
63 #checkboxContainer {
64 display: inline-block;
65 position: relative;
66 width: 18px;
67 height: 18px;
68 cursor: pointer;
69 -webkit-transform: translateZ(0);
70 transform: translateZ(0);
71 vertical-align: middle;
72 background-color: var(--paper-checkbox-unchecked-background-color, trans parent);
73 }
74
75 :host #ink {
76 position: absolute;
77 top: -15px;
78 left: -15px;
79 width: 48px;
80 height: 48px;
81 color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color);
82 opacity: 0.6;
83 pointer-events: none;
84 }
85
86 :host #ink[checked] {
87 color: var(--paper-checkbox-checked-ink-color, --default-primary-color);
88 }
89
90 :host #checkbox {
91 position: relative;
92 box-sizing: border-box;
93 height: 100%;
94 border: solid 2px;
95 border-color: var(--paper-checkbox-unchecked-color, --primary-text-color );
96 border-radius: 2px;
97 pointer-events: none;
98 -webkit-transition: background-color 140ms, border-color 140ms;
99 transition: background-color 140ms, border-color 140ms;
100 }
101
102 /* checkbox checked animations */
103 #checkbox.checked #checkmark {
104 -webkit-animation: checkmark-expand 140ms ease-out forwards;
105 animation: checkmark-expand 140ms ease-out forwards;
106 }
107
108 @-webkit-keyframes checkmark-expand {
109 0% {
110 top: 9px;
111 left: 6px;
112 width: 0px;
113 height: 0px;
114 }
115 100% {
116 top: -1px;
117 left: 4px;
118 width: 5px;
119 height: 10px;
120 }
121 }
122
123 @keyframes checkmark-expand {
124 0% {
125 top: 9px;
126 left: 6px;
127 width: 0px;
128 height: 0px;
129 }
130 100% {
131 top: -1px;
132 left: 4px;
133 width: 5px;
134 height: 10px;
135 }
136 }
137
138 :host #checkbox.checked {
139 background-color: var(--paper-checkbox-checked-color, --default-primary- color);
140 border-color: var(--paper-checkbox-checked-color, --default-primary-colo r);
141 }
142
143 :host #checkmark {
144 -webkit-transform: rotate(45deg);
145 transform: rotate(45deg);
146 position: absolute;
147 top: -1px;
148 left: 4px;
149 width: 5px;
150 height: 10px;
151 border-style: solid;
152 border-top: none;
153 border-left: none;
154 border-right-width: 2px;
155 border-bottom-width: 2px;
156 border-color: var(--paper-checkbox-checkmark-color, white);
157 }
158
159 /* label */
160 #checkboxLabel {
161 position: relative;
162 display: inline-block;
163 vertical-align: middle;
164 padding-left: 8px;
165 white-space: normal;
166 pointer-events: none;
167 color: var(--paper-checkbox-label-color, --primary-text-color);
168 }
169
170 #checkboxLabel[hidden] {
171 display: none;
172 }
173
174 /* disabled state */
175 :host([disabled]) {
176 pointer-events: none;
177 }
178
179 :host([disabled]) #checkbox {
180 opacity: 0.5;
181 border-color: var(--paper-checkbox-unchecked-color, --primary-text-color );
182 }
183
184 :host([disabled][checked]) #checkbox {
185 background-color: var(--paper-checkbox-unchecked-color, --primary-text-c olor);
186 opacity: 0.5;
187 }
188
189 :host([disabled]) #checkboxLabel {
190 opacity: 0.65;
191 }
192
193 /* invalid state */
194 #checkbox.invalid:not(.checked) {
195 border-color: var(--paper-checkbox-error-color, --google-red-500);
196 }
197 </style>
49 198
50 <div id="checkboxContainer"> 199 <div id="checkboxContainer">
51 <paper-ripple id="ink" class="circle" center="" checked$="[[checked]]"></p aper-ripple> 200 <paper-ripple id="ink" class="circle" center="" checked$="[[checked]]"></p aper-ripple>
52 <div id="checkbox" class$="[[_computeCheckboxClass(checked)]]"> 201 <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
53 <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div> 202 <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
54 </div> 203 </div>
55 </div> 204 </div>
56 205
57 <div id="checkboxLabel" aria-hidden="true"><content></content></div> 206 <div id="checkboxLabel"><content></content></div>
58
59 </template> 207 </template>
60 208
61 </dom-module> 209 </dom-module>
62 <script src="paper-checkbox-extracted.js"></script></body></html> 210 <script src="paper-checkbox-extracted.js"></script></body></html>
OLDNEW
« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-checkbox/paper-checkbox.css ('k') | third_party/polymer/v1_0/components-chromium/paper-checkbox/paper-checkbox-extracted.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698