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

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

Issue 9325059: [Clean up] Fix style guide nits in chrome/browser/resources/ntp4. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: fixing margin Created 8 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 | Annotate | Revision Log
« no previous file with comments | « chrome/browser/resources/ntp4/recently_closed.css ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* Copyright (c) 2011 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 */
5 4
6 .tile-page { 5 .tile-page {
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%;
11 -webkit-box-orient: vertical;
12 } 11 }
13 12
14 .tile-page-scrollbar { 13 .tile-page-scrollbar {
14 -webkit-box-sizing: border-box;
15 margin: 0 4px; 15 margin: 0 4px;
16 pointer-events: none; 16 pointer-events: none;
17 position: absolute; 17 position: absolute;
18 right: 0; 18 right: 0;
19 width: 5px; 19 width: 5px;
20 z-index: 5; 20 z-index: 5;
21 -webkit-box-sizing: border-box;
22 } 21 }
23 22
24 .tile-page-content { 23 .tile-page-content {
25 overflow-y: scroll; 24 -webkit-box-flex: 1;
26 /* This value is mirrored in TilePage.updateTopMargin_ */ 25 /* Don't apply clip mask to padding. */
27 padding-top: 60px; 26 -webkit-mask-clip: content-box;
28 position: relative;
29 text-align: center;
30 width: 100%;
31 /* TODO(estade): this mask is disabled for technical reasons. It negatively 27 /* TODO(estade): this mask is disabled for technical reasons. It negatively
32 * impacts performance of page switching, also it causes problems with Mac 28 * impacts performance of page switching, also it causes problems with Mac
33 * text: http://crbug.com/86955 29 * text: http://crbug.com/86955
34 -webkit-mask-image: -webkit-linear-gradient(bottom, transparent, black 30px); 30 -webkit-mask-image: -webkit-linear-gradient(bottom, transparent, black 30px);
35 */ 31 */
36 /* The following four properties are necessary so that the mask won't clip 32 /* The following four properties are necessary so that the mask won't clip
37 * the scrollbar. */ 33 * the scrollbar. */
38 box-sizing: border-box; 34 box-sizing: border-box;
35 overflow-y: scroll;
39 /* Scrollbar width(13px) + balance right padding. */ 36 /* Scrollbar width(13px) + balance right padding. */
40 padding-left: 93px; 37 padding-left: 93px;
41 padding-right: 80px; 38 padding-right: 80px;
42 -webkit-box-flex: 1; 39 /* This value is mirrored in TilePage.updateTopMargin_ */
43 /* Don't apply clip mask to padding. */ 40 padding-top: 60px;
44 -webkit-mask-clip: content-box; 41 position: relative;
42 text-align: center;
43 width: 100%;
45 } 44 }
46 45
47 .tile-grid { 46 .tile-grid {
48 position: relative; 47 position: relative;
49 width: 100%; 48 width: 100%;
50 } 49 }
51 50
52 .tile { 51 .tile {
53 display: inline-block;
54 position: absolute;
55 -webkit-print-color-adjust: exact; 52 -webkit-print-color-adjust: exact;
56 /* Don't offer the context menu on long-press. */ 53 /* Don't offer the context menu on long-press. */
57 -webkit-touch-callout: none; 54 -webkit-touch-callout: none;
58 -webkit-user-drag: element; 55 -webkit-user-drag: element;
56 display: inline-block;
57 position: absolute;
59 } 58 }
60 59
61 /* I don't know why this is necessary. -webkit-user-drag: element on .tile 60 /* I don't know why this is necessary. -webkit-user-drag: element on .tile
62 * should be enough. If we don't do this, we get 2 drag representations for 61 * should be enough. If we don't do this, we get 2 drag representations for
63 * the image. */ 62 * the image. */
64 .tile img { 63 .tile img {
65 -webkit-user-drag: none; 64 -webkit-user-drag: none;
66 } 65 }
67 66
68 .doppleganger { 67 .doppleganger {
69 left: 0 !important; 68 left: 0 !important;
70 right: 0 !important; 69 right: 0 !important;
71 top: 0 !important; 70 top: 0 !important;
72 } 71 }
73 72
74 .tile.dragging { 73 .tile.dragging {
75 opacity: 0; 74 opacity: 0;
76 } 75 }
77 76
78 .tile.drag-representation { 77 .tile.drag-representation {
78 -webkit-transition: opacity 200ms;
79 pointer-events: none; 79 pointer-events: none;
80 position: fixed; 80 position: fixed;
81 z-index: 3; 81 z-index: 3;
82 -webkit-transition: opacity 200ms;
83 } 82 }
84 83
85 .tile.drag-representation.placing > * { 84 .tile.drag-representation.placing > * {
86 -webkit-transition: -webkit-transform 200ms; 85 -webkit-transition: -webkit-transform 200ms;
87 } 86 }
88 87
89 /* When a drag finishes while we're not showing the page where the tile 88 /* When a drag finishes while we're not showing the page where the tile
90 * belongs, the tile shrinks to a dot. */ 89 * belongs, the tile shrinks to a dot. */
91 .tile.drag-representation.dropped-on-other-page > * { 90 .tile.drag-representation.dropped-on-other-page > * {
92 -webkit-transform: scale(0) rotate(0); 91 -webkit-transform: scale(0) rotate(0);
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after
127 .tile > .new-tile-contents { 126 .tile > .new-tile-contents {
128 -webkit-animation: bounce 500ms ease-in-out; 127 -webkit-animation: bounce 500ms ease-in-out;
129 } 128 }
130 129
131 @-webkit-keyframes blipout { 130 @-webkit-keyframes blipout {
132 0% { 131 0% {
133 -webkit-transform: scale(1, 1); 132 -webkit-transform: scale(1, 1);
134 } 133 }
135 134
136 60% { 135 60% {
137 opacity: 1;
138 -webkit-animation-timing-function: ease-in; 136 -webkit-animation-timing-function: ease-in;
139 -webkit-transform: scale(1.3, 0.02); 137 -webkit-transform: scale(1.3, 0.02);
138 opacity: 1;
140 } 139 }
141 140
142 90% { 141 90% {
143 opacity: 0.7;
144 -webkit-animation-timing-function: default; 142 -webkit-animation-timing-function: default;
145 -webkit-transform: scale(0.3, 0.02); 143 -webkit-transform: scale(0.3, 0.02);
144 opacity: 0.7;
146 } 145 }
147 146
148 100% { 147 100% {
149 opacity: 0;
150 -webkit-animation-timing-function: linear; 148 -webkit-animation-timing-function: linear;
151 -webkit-transform: scale(0.3, 0.02); 149 -webkit-transform: scale(0.3, 0.02);
150 opacity: 0;
152 } 151 }
153 } 152 }
154 153
155 .tile > .removing-tile-contents { 154 .tile > .removing-tile-contents {
155 -webkit-animation: blipout 300ms;
156 pointer-events: none; 156 pointer-events: none;
157 -webkit-animation: blipout 300ms;
158 } 157 }
159 158
160 .tile-page:not(.selected-card) * { 159 .tile-page:not(.selected-card) * {
161 -webkit-transition: none !important; 160 -webkit-transition: none !important;
162 } 161 }
163 162
164 /** Scrollbars ****************************************************************/ 163 /** Scrollbars ****************************************************************/
165 164
166 .tile-page-content::-webkit-scrollbar { 165 .tile-page-content::-webkit-scrollbar {
167 width: 13px; 166 width: 13px;
168 } 167 }
169 168
170 .tile-page-content::-webkit-scrollbar-button { 169 .tile-page-content::-webkit-scrollbar-button {
171 display: none; 170 display: none;
172 } 171 }
OLDNEW
« no previous file with comments | « chrome/browser/resources/ntp4/recently_closed.css ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698