| 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 .tile-page { | 5 .tile-page { |
| 6 -webkit-box-orient: vertical; | 6 -webkit-box-orient: vertical; |
| 7 display: -webkit-box; | 7 display: -webkit-box; |
| 8 height: 100%; | 8 height: 100%; |
| 9 position: relative; | 9 position: relative; |
| 10 width: 100%; | 10 width: 100%; |
| (...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 93 } | 93 } |
| 94 | 94 |
| 95 .tile.drag-representation { | 95 .tile.drag-representation { |
| 96 -webkit-transition: opacity 200ms; | 96 -webkit-transition: opacity 200ms; |
| 97 pointer-events: none; | 97 pointer-events: none; |
| 98 position: fixed; | 98 position: fixed; |
| 99 z-index: 3; | 99 z-index: 3; |
| 100 } | 100 } |
| 101 | 101 |
| 102 .tile.drag-representation.placing > * { | 102 .tile.drag-representation.placing > * { |
| 103 -webkit-transition: -webkit-transform 200ms; | 103 -webkit-transition: transform 200ms; |
| 104 } | 104 } |
| 105 | 105 |
| 106 /* When a drag finishes while we're not showing the page where the tile | 106 /* When a drag finishes while we're not showing the page where the tile |
| 107 * belongs, the tile shrinks to a dot. */ | 107 * belongs, the tile shrinks to a dot. */ |
| 108 .tile.drag-representation.dropped-on-other-page > * { | 108 .tile.drag-representation.dropped-on-other-page > * { |
| 109 -webkit-transform: scale(0) rotate(0); | 109 transform: scale(0) rotate(0); |
| 110 } | 110 } |
| 111 | 111 |
| 112 .tile.drag-representation.deleting > * { | 112 .tile.drag-representation.deleting > * { |
| 113 -webkit-transform: scale(0) rotate(360deg); | 113 -webkit-transition: transform 600ms; |
| 114 -webkit-transition: -webkit-transform 600ms; | 114 transform: scale(0) rotate(360deg); |
| 115 } | 115 } |
| 116 | 116 |
| 117 .animating-tile-page .tile, | 117 .animating-tile-page .tile, |
| 118 .tile.drag-representation.placing { | 118 .tile.drag-representation.placing { |
| 119 -webkit-transition: left 200ms, right 200ms, top 200ms; | 119 -webkit-transition: left 200ms, right 200ms, top 200ms; |
| 120 } | 120 } |
| 121 | 121 |
| 122 .hovering-on-trash { | 122 .hovering-on-trash { |
| 123 opacity: 0.6; | 123 opacity: 0.6; |
| 124 } | 124 } |
| 125 | 125 |
| 126 .animating-tile-page .top-margin { | 126 .animating-tile-page .top-margin { |
| 127 -webkit-transition: margin-bottom 200ms; | 127 -webkit-transition: margin-bottom 200ms; |
| 128 } | 128 } |
| 129 | 129 |
| 130 @-webkit-keyframes bounce { | 130 @-webkit-keyframes bounce { |
| 131 0% { | 131 0% { |
| 132 -webkit-transform: scale(0, 0); | 132 transform: scale(0, 0); |
| 133 } | 133 } |
| 134 | 134 |
| 135 60% { | 135 60% { |
| 136 -webkit-transform: scale(1.2, 1.2); | 136 transform: scale(1.2, 1.2); |
| 137 } | 137 } |
| 138 | 138 |
| 139 100% { | 139 100% { |
| 140 -webkit-transform: scale(1, 1); | 140 transform: scale(1, 1); |
| 141 } | 141 } |
| 142 } | 142 } |
| 143 | 143 |
| 144 .tile > .new-tile-contents { | 144 .tile > .new-tile-contents { |
| 145 -webkit-animation: bounce 500ms ease-in-out; | 145 -webkit-animation: bounce 500ms ease-in-out; |
| 146 } | 146 } |
| 147 | 147 |
| 148 @-webkit-keyframes blipout { | 148 @-webkit-keyframes blipout { |
| 149 0% { | 149 0% { |
| 150 -webkit-transform: scale(1, 1); | 150 transform: scale(1, 1); |
| 151 } | 151 } |
| 152 | 152 |
| 153 60% { | 153 60% { |
| 154 -webkit-animation-timing-function: ease-in; | 154 -webkit-animation-timing-function: ease-in; |
| 155 -webkit-transform: scale(1.3, 0.02); | |
| 156 opacity: 1; | 155 opacity: 1; |
| 156 transform: scale(1.3, 0.02); |
| 157 } | 157 } |
| 158 | 158 |
| 159 90% { | 159 90% { |
| 160 -webkit-transform: scale(0.3, 0.02); | |
| 161 opacity: 0.7; | 160 opacity: 0.7; |
| 161 transform: scale(0.3, 0.02); |
| 162 } | 162 } |
| 163 | 163 |
| 164 100% { | 164 100% { |
| 165 -webkit-animation-timing-function: linear; | 165 -webkit-animation-timing-function: linear; |
| 166 -webkit-transform: scale(0.3, 0.02); | |
| 167 opacity: 0; | 166 opacity: 0; |
| 167 transform: scale(0.3, 0.02); |
| 168 } | 168 } |
| 169 } | 169 } |
| 170 | 170 |
| 171 .tile > .removing-tile-contents { | 171 .tile > .removing-tile-contents { |
| 172 -webkit-animation: blipout 300ms; | 172 -webkit-animation: blipout 300ms; |
| 173 -webkit-animation-fill-mode: forwards; | 173 -webkit-animation-fill-mode: forwards; |
| 174 pointer-events: none; | 174 pointer-events: none; |
| 175 } | 175 } |
| 176 | 176 |
| 177 .tile-page:not(.selected-card) * { | 177 .tile-page:not(.selected-card) * { |
| 178 -webkit-transition: none !important; | 178 -webkit-transition: none !important; |
| 179 } | 179 } |
| 180 | 180 |
| 181 /** Scrollbars ****************************************************************/ | 181 /** Scrollbars ****************************************************************/ |
| 182 | 182 |
| 183 .tile-page-content::-webkit-scrollbar { | 183 .tile-page-content::-webkit-scrollbar { |
| 184 width: 13px; | 184 width: 13px; |
| 185 } | 185 } |
| 186 | 186 |
| 187 .tile-page-content::-webkit-scrollbar-button { | 187 .tile-page-content::-webkit-scrollbar-button { |
| 188 display: none; | 188 display: none; |
| 189 } | 189 } |
| OLD | NEW |