| 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 { |
| (...skipping 20 matching lines...) Expand all Loading... |
| 67 | 67 |
| 68 .tile-cell:first-child { | 68 .tile-cell:first-child { |
| 69 -webkit-margin-start: 0; | 69 -webkit-margin-start: 0; |
| 70 } | 70 } |
| 71 | 71 |
| 72 /* ----------------------------------------------------------------------------- | 72 /* ----------------------------------------------------------------------------- |
| 73 Tile Cell Animation | 73 Tile Cell Animation |
| 74 ----------------------------------------------------------------------------- */ | 74 ----------------------------------------------------------------------------- */ |
| 75 | 75 |
| 76 .animate-grid-width .tile-cell { | 76 .animate-grid-width .tile-cell { |
| 77 -webkit-transition: margin 200ms ease-out; | 77 -webkit-transition: margin 200ms; |
| 78 -webkit-transition-property: margin, opacity, width; | 78 -webkit-transition-property: margin, opacity, width; |
| 79 } | 79 } |
| 80 | 80 |
| 81 /* Animates entire columns of Tiles at once.*/ | 81 /* Animates entire columns of Tiles at once.*/ |
| 82 .hide-col-0 .tile-cell:nth-child(1), | 82 .hide-col-0 .tile-cell:nth-child(1), |
| 83 .hide-col-1 .tile-cell:nth-child(2), | 83 .hide-col-1 .tile-cell:nth-child(2), |
| 84 .hide-col-2 .tile-cell:nth-child(3), | 84 .hide-col-2 .tile-cell:nth-child(3), |
| 85 .hide-col-3 .tile-cell:nth-child(4), | 85 .hide-col-3 .tile-cell:nth-child(4), |
| 86 .hide-col-4 .tile-cell:nth-child(5), | 86 .hide-col-4 .tile-cell:nth-child(5), |
| 87 .hide-col-5 .tile-cell:nth-child(6), | 87 .hide-col-5 .tile-cell:nth-child(6), |
| 88 .hide-col-6 .tile-cell:nth-child(7), | 88 .hide-col-6 .tile-cell:nth-child(7), |
| 89 .hide-col-7 .tile-cell:nth-child(8), | 89 .hide-col-7 .tile-cell:nth-child(8), |
| 90 .hide-col-8 .tile-cell:nth-child(9), | 90 .hide-col-8 .tile-cell:nth-child(9), |
| 91 .hide-col-9 .tile-cell:nth-child(10) { | 91 .hide-col-9 .tile-cell:nth-child(10) { |
| 92 -webkit-margin-end: -10px; | 92 -webkit-margin-end: -10px; |
| 93 opacity: 0; | 93 opacity: 0; |
| 94 width: 10px !important; | 94 width: 10px !important; |
| 95 } | 95 } |
| 96 | 96 |
| 97 .hide-row { | 97 .hide-row { |
| 98 opacity: 0; | 98 opacity: 0; |
| 99 } | 99 } |
| 100 | 100 |
| 101 .tile-grid .hide-row .tile-cell { | 101 .tile-grid .hide-row .tile-cell { |
| 102 opacity: 1; | 102 opacity: 1; |
| 103 } | 103 } |
| OLD | NEW |