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

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: Improving comments 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 padding-bottom: 10px; 10 padding-bottom: 10px;
(...skipping 15 matching lines...) Expand all
26 margin: 0 auto; 26 margin: 0 auto;
27 width: 732px; 27 width: 732px;
28 } 28 }
29 29
30 .tile-grid-content { 30 .tile-grid-content {
31 -webkit-transform: translate3d(0, 0, 0); 31 -webkit-transform: translate3d(0, 0, 0);
32 -webkit-transition: -webkit-transform 200ms; 32 -webkit-transition: -webkit-transform 200ms;
33 } 33 }
34 34
35 .tile-row { 35 .tile-row {
36 -webkit-transition: opacity 200ms ease-in-out; 36 -webkit-transition: opacity 200ms;
37 height: 105px; 37 height: 105px;
38 text-align: start; 38 text-align: start;
39 white-space: nowrap; 39 white-space: nowrap;
40 } 40 }
41 41
42 /* ----------------------------------------------------------------------------- 42 /* -----------------------------------------------------------------------------
43 Tile Grid Animation 43 Tile Grid Animation
44 ----------------------------------------------------------------------------- */ 44 ----------------------------------------------------------------------------- */
45 45
46 .animate-grid-width { 46 .animate-grid-width {
47 -webkit-transform: translate3d(0, 0, 0); 47 -webkit-transform: translate3d(0, 0, 0);
48 -webkit-transition: width 200ms; 48 -webkit-transition: width 200ms;
49 } 49 }
50 50
51 .animate-page-height { 51 .animate-page-height {
52 /* TODO(pedrosimonetti): Confirm the easing function with Marcin. */ 52 /* TODO(pedrosimonetti): Confirm the easing function with Marcin. */
53 -webkit-transition: height 200ms ease-in-out; 53 -webkit-transition: height 200ms;
54 } 54 }
55 55
56 /* ----------------------------------------------------------------------------- 56 /* -----------------------------------------------------------------------------
57 Tile Cell 57 Tile Cell
58 ----------------------------------------------------------------------------- */ 58 ----------------------------------------------------------------------------- */
59 59
60 .tile-cell { 60 .tile-cell {
61 -webkit-transform: translate3d(0, 0, 0); 61 -webkit-transform: translate3d(0, 0, 0);
62 display: inline-block; 62 display: inline-block;
63 position: relative; 63 position: relative;
64 } 64 }
65 65
66 .tile-cell:first-child { 66 .tile-cell:first-child {
67 -webkit-margin-start: 0; 67 -webkit-margin-start: 0;
68 } 68 }
69 69
70 /* ----------------------------------------------------------------------------- 70 /* -----------------------------------------------------------------------------
71 Tile Cell Animation 71 Tile Cell Animation
72 ----------------------------------------------------------------------------- */ 72 ----------------------------------------------------------------------------- */
73 73
74 .animate-grid-width .tile-cell { 74 .animate-grid-width .tile-cell {
75 -webkit-transition: margin 200ms ease-out; 75 -webkit-transition: margin 200ms;
76 -webkit-transition-property: margin, opacity, width; 76 -webkit-transition-property: margin, opacity, width;
77 } 77 }
78 78
79 /* Animates entire columns of Tiles at once.*/ 79 /* Animates entire columns of Tiles at once.*/
80 .hide-col-0 .tile-cell:nth-child(1), 80 .hide-col-0 .tile-cell:nth-child(1),
81 .hide-col-1 .tile-cell:nth-child(2), 81 .hide-col-1 .tile-cell:nth-child(2),
82 .hide-col-2 .tile-cell:nth-child(3), 82 .hide-col-2 .tile-cell:nth-child(3),
83 .hide-col-3 .tile-cell:nth-child(4), 83 .hide-col-3 .tile-cell:nth-child(4),
84 .hide-col-4 .tile-cell:nth-child(5), 84 .hide-col-4 .tile-cell:nth-child(5),
85 .hide-col-5 .tile-cell:nth-child(6), 85 .hide-col-5 .tile-cell:nth-child(6),
86 .hide-col-6 .tile-cell:nth-child(7), 86 .hide-col-6 .tile-cell:nth-child(7),
87 .hide-col-7 .tile-cell:nth-child(8), 87 .hide-col-7 .tile-cell:nth-child(8),
88 .hide-col-8 .tile-cell:nth-child(9), 88 .hide-col-8 .tile-cell:nth-child(9),
89 .hide-col-9 .tile-cell:nth-child(10) { 89 .hide-col-9 .tile-cell:nth-child(10) {
90 -webkit-margin-end: -10px; 90 -webkit-margin-end: -10px;
91 opacity: 0; 91 opacity: 0;
92 width: 10px !important; 92 width: 10px !important;
93 } 93 }
94 94
95 .hide-row { 95 .hide-row {
96 opacity: 0; 96 opacity: 0;
97 } 97 }
98 98
99 .tile-grid .hide-row .tile-cell { 99 .tile-grid .hide-row .tile-cell {
100 opacity: 1; 100 opacity: 1;
101 } 101 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698