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

Side by Side Diff: chrome/browser/resources/ntp4/tile_page.css

Issue 2535573002: Reduce usage of webkit CSS prefixes in chrome/browser/resources (Closed)
Patch Set: rebase Created 3 years, 10 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 .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 75 matching lines...) Expand 10 before | Expand all | Expand 10 after
86 left: 0 !important; 86 left: 0 !important;
87 right: 0 !important; 87 right: 0 !important;
88 top: 0 !important; 88 top: 0 !important;
89 } 89 }
90 90
91 .tile.dragging { 91 .tile.dragging {
92 opacity: 0; 92 opacity: 0;
93 } 93 }
94 94
95 .tile.drag-representation { 95 .tile.drag-representation {
96 -webkit-transition: opacity 200ms;
97 pointer-events: none; 96 pointer-events: none;
98 position: fixed; 97 position: fixed;
98 transition: opacity 200ms;
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 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 transform: scale(0) rotate(360deg);
114 -webkit-transition: -webkit-transform 600ms; 114 transition: transform 600ms;
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 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 transition: margin-bottom 200ms;
128 } 128 }
129 129
130 @-webkit-keyframes bounce { 130 @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 animation: bounce 500ms ease-in-out;
146 } 146 }
147 147
148 @-webkit-keyframes blipout { 148 @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 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 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 animation: blipout 300ms;
173 -webkit-animation-fill-mode: forwards; 173 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 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 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698