OLD | NEW |
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 } |
OLD | NEW |