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

Side by Side Diff: chrome/browser/resources/ntp_search/tile_page.css

Issue 10867021: NTP5: Improving the Tile Page resize logic (Closed) Base URL: http://git.chromium.org/chromium/src.git@master
Patch Set: Created 8 years, 4 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 (c) 2012 The Chromium Authors. All rights reserved. 1 /* Copyright (c) 2012 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 /* ----------------------------------------------------------------------------- 5 /* -----------------------------------------------------------------------------
6 Tile Page 6 Tile Page
7 ----------------------------------------------------------------------------- */ 7 ----------------------------------------------------------------------------- */
8 8
9 #page-list { 9 #page-list {
10 /* TODO(pedrosimonetti): Confirm the easing function with Marcin. */ 10 /* TODO(pedrosimonetti): Confirm the easing function with Marcin. */
11 -webkit-transition: height 200ms ease-in-out; 11 -webkit-transition: height 200ms;
12 padding-bottom: 10px; 12 padding-bottom: 10px;
13 } 13 }
14 14
15 .tile-page { 15 .tile-page {
16 overflow: hidden; 16 overflow: hidden;
17 position: relative; 17 position: relative;
18 } 18 }
19 19
20 .tile-page-content { 20 .tile-page-content {
21 margin: 0 auto; 21 margin: 0 auto;
22 overflow: hidden; 22 overflow: hidden;
23 width: 748px; 23 width: 748px;
24 } 24 }
25 25
26 .tile-grid { 26 .tile-grid {
27 -webkit-transform: translate3d(0, 0, 0); 27 -webkit-transform: translate3d(0, 0, 0);
28 -webkit-transition: width 200ms ease-in-out; 28 -webkit-transition: width 200ms;
29 display: block; 29 display: block;
30 margin: 0 auto; 30 margin: 0 auto;
31 width: 732px; 31 width: 732px;
32 } 32 }
33 33
34 .tile-grid-content { 34 .tile-grid-content {
35 -webkit-transform: translate3d(0, 0, 0); 35 -webkit-transform: translate3d(0, 0, 0);
36 -webkit-transition: -webkit-transform 200ms ease-in-out; 36 -webkit-transition: -webkit-transform 200ms;
37 } 37 }
38 38
39 .tile-row { 39 .tile-row {
40 -webkit-transform: translate3d(0, 0, 0); 40 -webkit-transform: translate3d(0, 0, 0);
41 -webkit-transition: opacity 200ms ease-in-out; 41 -webkit-transition: opacity 200ms;
42 height: 105px; 42 height: 105px;
43 text-align: start; 43 text-align: start;
44 white-space: nowrap; 44 white-space: nowrap;
45 } 45 }
46 46
47 /* ----------------------------------------------------------------------------- 47 /* -----------------------------------------------------------------------------
48 Tile Cell 48 Tile Cell
49 ----------------------------------------------------------------------------- */ 49 ----------------------------------------------------------------------------- */
50 50
51 .tile-cell { 51 .tile-cell {
52 -webkit-transform: translate3d(0, 0, 0); 52 -webkit-transform: translate3d(0, 0, 0);
53 display: inline-block; 53 display: inline-block;
54 position: relative; 54 position: relative;
55 } 55 }
56 56
57 .tile-cell:first-child { 57 .tile-cell:first-child {
58 -webkit-margin-start: 0; 58 -webkit-margin-start: 0;
59 } 59 }
60 60
61 /* ----------------------------------------------------------------------------- 61 /* -----------------------------------------------------------------------------
62 Tile Cell Animation 62 Tile Cell Animation
63 ----------------------------------------------------------------------------- */ 63 ----------------------------------------------------------------------------- */
64 64
65 .animate-tile .tile-cell { 65 .animate-tile .tile-cell {
66 -webkit-transition: margin 200ms ease-out; 66 -webkit-transition: margin 200ms;
67 -webkit-transition-property: margin, opacity, width; 67 -webkit-transition-property: margin, opacity, width;
68 } 68 }
69 69
70 /* Animates entire columns of Tiles at once.*/ 70 /* Animates entire columns of Tiles at once.*/
71 .hide-col-0 .tile-cell:nth-child(1), 71 .hide-col-0 .tile-cell:nth-child(1),
72 .hide-col-1 .tile-cell:nth-child(2), 72 .hide-col-1 .tile-cell:nth-child(2),
73 .hide-col-2 .tile-cell:nth-child(3), 73 .hide-col-2 .tile-cell:nth-child(3),
74 .hide-col-3 .tile-cell:nth-child(4), 74 .hide-col-3 .tile-cell:nth-child(4),
75 .hide-col-4 .tile-cell:nth-child(5), 75 .hide-col-4 .tile-cell:nth-child(5),
76 .hide-col-5 .tile-cell:nth-child(6), 76 .hide-col-5 .tile-cell:nth-child(6),
77 .hide-col-6 .tile-cell:nth-child(7), 77 .hide-col-6 .tile-cell:nth-child(7),
78 .hide-col-7 .tile-cell:nth-child(8), 78 .hide-col-7 .tile-cell:nth-child(8),
79 .hide-col-8 .tile-cell:nth-child(9), 79 .hide-col-8 .tile-cell:nth-child(9),
80 .hide-col-9 .tile-cell:nth-child(10) { 80 .hide-col-9 .tile-cell:nth-child(10) {
81 -webkit-margin-end: -10px; 81 -webkit-margin-end: -10px;
82 opacity: 0; 82 opacity: 0;
83 width: 10px !important; 83 width: 10px !important;
84 } 84 }
85 85
86 .hide-row { 86 .hide-row {
87 opacity: 0; 87 opacity: 0;
88 } 88 }
89 89
90 .hide-row .tile-cell { 90 .hide-row .tile-cell {
91 opacity: 1; 91 opacity: 1;
92 } 92 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698