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 padding-bottom: 10px; | 10 padding-bottom: 10px; |
(...skipping 15 matching lines...) Expand all Loading... |
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 } |
OLD | NEW |