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

Side by Side Diff: chrome/browser/resources/local_ntp/most_visited_single.css

Issue 2691883002: Uprefix CSS transitions in ui/ and chrome/ styles (Closed)
Patch Set: transitions only Created 3 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 /* Copyright 2015 The Chromium Authors. All rights reserved. 1 /* Copyright 2015 The Chromium Authors. All rights reserved.
2 * Use of this source code is governed by a BSD-style license that can be 2 * Use of this source code is governed by a BSD-style license that can be
3 * found in the LICENSE file. */ 3 * found in the LICENSE file. */
4 4
5 body { 5 body {
6 -webkit-user-select: none; 6 -webkit-user-select: none;
7 background: none transparent; 7 background: none transparent;
8 color: #323232; 8 color: #323232;
9 margin: 0; 9 margin: 0;
10 overflow: hidden; 10 overflow: hidden;
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after
63 white-space: nowrap; 63 white-space: nowrap;
64 width: calc(156px - 2px); 64 width: calc(156px - 2px);
65 } 65 }
66 66
67 .mv-tile.hidden, 67 .mv-tile.hidden,
68 .mv-empty-tile.hidden { 68 .mv-empty-tile.hidden {
69 display: none; 69 display: none;
70 } 70 }
71 71
72 .mv-tile { 72 .mv-tile {
73 -webkit-transition-duration: 200ms;
74 -webkit-transition-property: transform, border,
75 box-shadow, margin, opacity, width;
76 cursor: pointer; 73 cursor: pointer;
74 transition-duration: 200ms;
75 transition-property: transform, border, box-shadow, margin, opacity, width;
77 } 76 }
78 77
79 .mv-tile:focus:not(:hover) { 78 .mv-tile:focus:not(:hover) {
80 -webkit-filter: brightness(75%); 79 -webkit-filter: brightness(75%);
81 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2); 80 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.2);
82 } 81 }
83 82
84 .mv-tile.blacklisted { 83 .mv-tile.blacklisted {
85 border: none !important; 84 border: none !important;
86 margin: 0; 85 margin: 0;
(...skipping 85 matching lines...) Expand 10 before | Expand all | Expand 10 after
172 border: 8px solid #f2f2f2; 171 border: 8px solid #f2f2f2;
173 border-radius: 50%; 172 border-radius: 50%;
174 content: ''; 173 content: '';
175 display: block; 174 display: block;
176 height: 0; 175 height: 0;
177 margin: 39px 66px; 176 margin: 39px 66px;
178 width: 0; 177 width: 0;
179 } 178 }
180 179
181 .mv-x { 180 .mv-x {
182 -webkit-transition: opacity 150ms;
183 background: linear-gradient(to left, rgb(242,242,242) 60%, transparent); 181 background: linear-gradient(to left, rgb(242,242,242) 60%, transparent);
184 border: none; 182 border: none;
185 cursor: pointer; 183 cursor: pointer;
186 height: 30px; 184 height: 30px;
187 opacity: 0; 185 opacity: 0;
188 position: absolute; 186 position: absolute;
189 right: 0; 187 right: 0;
188 transition: opacity 150ms;
190 width: 40px; 189 width: 40px;
191 } 190 }
192 191
193 /* We use ::after without content to provide the masked X element. The "bottom" 192 /* We use ::after without content to provide the masked X element. The "bottom"
194 * div is actually just the gradient. */ 193 * div is actually just the gradient. */
195 .mv-x::after { 194 .mv-x::after {
196 -webkit-mask-image: -webkit-image-set( 195 -webkit-mask-image: -webkit-image-set(
197 url(chrome-search://local-ntp/images/close_3_mask.png) 1x, 196 url(chrome-search://local-ntp/images/close_3_mask.png) 1x,
198 url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x); 197 url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x);
199 -webkit-mask-position: 12px 10px; 198 -webkit-mask-position: 12px 10px;
(...skipping 21 matching lines...) Expand all
221 220
222 .mv-x:hover::after { 221 .mv-x:hover::after {
223 background-color: rgb(90,90,90); 222 background-color: rgb(90,90,90);
224 } 223 }
225 224
226 .mv-x:active::after { 225 .mv-x:active::after {
227 background-color: rgb(66,133,244); 226 background-color: rgb(66,133,244);
228 } 227 }
229 228
230 .mv-tile:hover .mv-x { 229 .mv-tile:hover .mv-x {
231 -webkit-transition-delay: 500ms;
232 opacity: 1; 230 opacity: 1;
231 transition-delay: 500ms;
233 } 232 }
234 233
235 .mv-x:hover { 234 .mv-x:hover {
236 -webkit-transition: none; 235 transition: none;
237 } 236 }
238 237
239 .mv-favicon { 238 .mv-favicon {
240 background-size: 16px; 239 background-size: 16px;
241 height: 16px; 240 height: 16px;
242 left: 7px; 241 left: 7px;
243 margin: 0; 242 margin: 0;
244 pointer-events: none; 243 pointer-events: none;
245 position: absolute; 244 position: absolute;
246 top: 7px; 245 top: 7px;
(...skipping 14 matching lines...) Expand all
261 } 260 }
262 261
263 .mv-favicon img { 262 .mv-favicon img {
264 height: 100%; 263 height: 100%;
265 width: 100%; 264 width: 100%;
266 } 265 }
267 266
268 .mv-favicon.failed-favicon img { 267 .mv-favicon.failed-favicon img {
269 display: none; 268 display: none;
270 } 269 }
OLDNEW
« no previous file with comments | « chrome/browser/resources/local_ntp/local_ntp.js ('k') | chrome/browser/resources/local_ntp/most_visited_single.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698