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

Side by Side Diff: third_party/polymer/components-chromium/paper-checkbox/paper-checkbox.css

Issue 913353002: Update paper-checkbox to 0.5.4. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Applying sed to remove cr's. Created 5 years, 10 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 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6 Code distributed by Google as part of the polymer project is also 6 Code distributed by Google as part of the polymer project is also
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
8 */ 8 */
9 9
10 :host { 10 :host {
11 display: inline-block; 11 display: inline-block;
12 white-space: nowrap; 12 white-space: nowrap;
13 } 13 }
14 14
15 :host(:focus) { 15 :host(:focus) {
16 outline: 0; 16 outline: 0;
17 } 17 }
18 18
19 .hidden {
20 display: none;
21 }
22
19 #checkboxContainer { 23 #checkboxContainer {
20 position: relative; 24 position: relative;
21 width: 18px; 25 width: 18px;
22 height: 18px; 26 height: 18px;
23 cursor: pointer; 27 cursor: pointer;
24 -webkit-transform: translateZ(0); 28 -webkit-transform: translateZ(0);
25 transform: translateZ(0); 29 transform: translateZ(0);
26 } 30 }
27 31
28 #checkboxContainer.labeled { 32 #checkboxContainer.labeled {
29 display: inline-block; 33 display: inline-block;
30 vertical-align: middle; 34 vertical-align: middle;
31 } 35 }
32 36
33 #ink { 37 #ink {
34 position: absolute; 38 position: absolute;
35 top: -15px; 39 top: -15px;
36 left: -15px; 40 left: -15px;
37 width: 48px; 41 width: 48px;
38 height: 48px; 42 height: 48px;
39 color: #5a5f5a; 43 color: #5a5f5a;
40 } 44 }
41 45
42 #ink[checked] { 46 #ink[checked] {
43 color: #0f9d58; 47 color: #B2DFDB;
44 } 48 }
45 49
46 #checkbox { 50 #checkbox {
47 position: absolute; 51 position: relative;
48 box-sizing: border-box; 52 box-sizing: border-box;
49 top: 0px; 53 height: 100%;
50 left: 0px; 54 border: solid 2px #5a5a5a;
51 width: 18px; 55 border-radius: 2px;
52 height: 18px;
53 border: solid 2px;
54 border-color: #5a5a5a;
55 pointer-events: none; 56 pointer-events: none;
57 -webkit-transition: background-color 140ms, border-color 140ms;
58 transition: background-color 140ms, border-color 140ms;
56 } 59 }
57 60
58 /* checkbox checked animations */ 61 /* checkbox checked animations */
59 #checkbox.checked.box { 62 :host([checked]) #checkmark {
60 border: solid 2px;
61 -webkit-animation: box-shrink 140ms ease-out forwards;
62 animation: box-shrink 140ms ease-out forwards;
63 }
64
65 @-webkit-keyframes box-shrink {
66 0% {
67 -webkit-transform: rotate(0deg);
68 top: 0px;
69 left: 0px;
70 width: 18px;
71 height: 18px;
72 }
73 100% {
74 -webkit-transform: rotate(45deg);
75 top: 13px;
76 left: 5px;
77 width: 4px;
78 height: 4px;
79 }
80 }
81
82 @keyframes box-shrink {
83 0% {
84 transform: rotate(0deg);
85 top: 0px;
86 left: 0px;
87 width: 18px;
88 height: 18px;
89 }
90 100% {
91 transform: rotate(45deg);
92 top: 13px;
93 left: 5px;
94 width: 4px;
95 height: 4px;
96 }
97 }
98
99 #checkbox.checked.checkmark {
100 border-left: none;
101 border-top: none;
102 -webkit-animation: checkmark-expand 140ms ease-out forwards; 63 -webkit-animation: checkmark-expand 140ms ease-out forwards;
103 animation: checkmark-expand 140ms ease-out forwards; 64 animation: checkmark-expand 140ms ease-out forwards;
104 } 65 }
105 66
106 @-webkit-keyframes checkmark-expand { 67 @-webkit-keyframes checkmark-expand {
107 0% { 68 0% {
108 -webkit-transform: rotate(45deg); 69 top: 9px;
109 top: 13px; 70 left: 6px;
110 left: 5px; 71 width: 0px;
111 width: 4px; 72 height: 0px;
112 height: 4px;
113 } 73 }
114 100% { 74 100% {
115 -webkit-transform: rotate(45deg); 75 top: -1px;
116 top: -4px; 76 left: 4px;
117 left: 6px; 77 width: 5px;
118 width: 10px; 78 height: 10px;
119 height: 21px;
120 border-right-width: 2px;
121 border-bottom-width: 2px;
122 } 79 }
123 } 80 }
124 81
125 @keyframes checkmark-expand { 82 @keyframes checkmark-expand {
126 0% { 83 0% {
127 transform: rotate(45deg); 84 top: 9px;
128 top: 13px; 85 left: 6px;
129 left: 5px; 86 width: 0px;
130 width: 4px; 87 height: 0px;
131 height: 4px;
132 } 88 }
133 100% { 89 100% {
134 transform: rotate(45deg); 90 top: -1px;
135 top: -4px; 91 left: 4px;
136 left: 6px; 92 width: 5px;
137 width: 10px; 93 height: 10px;
138 height: 21px;
139 border-right-width: 2px;
140 border-bottom-width: 2px;
141 } 94 }
142 } 95 }
143 96
144 #checkbox.checked { 97 #checkbox.checked {
98 background-color: #009688;
99 border-color: #009688;
100 }
101
102 #checkmark {
145 -webkit-transform: rotate(45deg); 103 -webkit-transform: rotate(45deg);
146 transform: rotate(45deg); 104 transform: rotate(45deg);
147 top: -4px; 105 position: absolute;
148 left: 6px; 106 top: -1px;
149 width: 10px; 107 left: 4px;
150 height: 21px; 108 width: 5px;
109 height: 10px;
110 border-style: solid;
151 border-top: none; 111 border-top: none;
152 border-left: none; 112 border-left: none;
153 border-right-width: 2px; 113 border-right-width: 2px;
154 border-bottom-width: 2px; 114 border-bottom-width: 2px;
155 border-color: #0f9d58; 115 border-color: white;
156 }
157
158 /* checkbox unchecked animations */
159 #checkbox.unchecked.checkmark {
160 -webkit-transform: rotate(45deg);
161 transform: rotate(45deg);
162 border-left: none;
163 border-top: none;
164 -webkit-animation: checkmark-shrink 140ms ease-out forwards;
165 animation: checkmark-shrink 140ms ease-out forwards;
166 }
167
168 @-webkit-keyframes checkmark-shrink {
169 0% {
170 top: -4px;
171 left: 6px;
172 width: 10px;
173 height: 21px;
174 border-right-width: 2px;
175 border-bottom-width: 2px;
176 }
177 100% {
178 top: 13px;
179 left: 5px;
180 width: 4px;
181 height: 4px;
182 }
183 }
184
185 @keyframes checkmark-shrink {
186 0% {
187 top: -4px;
188 left: 6px;
189 width: 10px;
190 height: 21px;
191 border-right-width: 2px;
192 border-bottom-width: 2px;
193 }
194 100% {
195 top: 13px;
196 left: 5px;
197 width: 4px;
198 height: 4px;
199 }
200 }
201
202 #checkbox.unchecked.box {
203 -webkit-animation: box-expand 140ms ease-out forwards;
204 animation: box-expand 140ms ease-out forwards;
205 }
206
207 @-webkit-keyframes box-expand {
208 0% {
209 -webkit-transform: rotate(45deg);
210 top: 13px;
211 left: 5px;
212 width: 4px;
213 height: 4px;
214 }
215 100% {
216 -webkit-transform: rotate(0deg);
217 top: 0px;
218 left: 0px;
219 width: 18px;
220 height: 18px;
221 }
222 }
223
224 @keyframes box-expand {
225 0% {
226 transform: rotate(45deg);
227 top: 13px;
228 left: 5px;
229 width: 4px;
230 height: 4px;
231 }
232 100% {
233 transform: rotate(0deg);
234 top: 0px;
235 left: 0px;
236 width: 18px;
237 height: 18px;
238 }
239 } 116 }
240 117
241 /* label */ 118 /* label */
242 #checkboxLabel { 119 #checkboxLabel {
243 position: relative; 120 position: relative;
244 display: inline-block; 121 display: inline-block;
245 vertical-align: middle; 122 vertical-align: middle;
246 padding-left: 8px; 123 padding-left: 8px;
247 white-space: normal; 124 white-space: normal;
248 pointer-events: none; 125 pointer-events: none;
249 } 126 }
250 127
251 #checkboxLabel[hidden] { 128 #checkboxLabel[hidden] {
252 display: none; 129 display: none;
253 } 130 }
254 131
255 /* disabled state */ 132 /* disabled state */
256 :host([disabled]) { 133 :host([disabled]) {
257 pointer-events: none; 134 pointer-events: none;
258 } 135 }
259 136
260 :host([disabled]) #checkbox { 137 :host([disabled]) #checkbox {
261 opacity: 0.33; 138 opacity: 0.33;
262 border-color: #5a5a5a; 139 border-color: #5a5a5a;
263 } 140 }
141
142 :host([disabled][checked]) #checkbox {
143 background-color: #5a5a5a;
144 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698