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

Side by Side Diff: chrome/browser/resources/ntp4/nav_dot.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 /* TODO(estade): handle overflow better? I tried overflow-x: hidden and 5 /* TODO(estade): handle overflow better? I tried overflow-x: hidden and
6 * overflow-y: visible (for the new dot animation), but this makes a scroll 6 * overflow-y: visible (for the new dot animation), but this makes a scroll
7 * bar appear */ 7 * bar appear */
8 #dot-list { 8 #dot-list {
9 /* Expand to take up all available horizontal space. */ 9 /* Expand to take up all available horizontal space. */
10 -webkit-box-flex: 1; 10 -webkit-box-flex: 1;
11 /* Center child dots. */ 11 /* Center child dots. */
12 -webkit-box-pack: center; 12 -webkit-box-pack: center;
13 display: -webkit-flex; 13 display: -webkit-flex;
14 height: 100%; 14 height: 100%;
15 list-style-type: none; 15 list-style-type: none;
16 margin: 0; 16 margin: 0;
17 padding: 0; 17 padding: 0;
18 } 18 }
19 19
20 html.starting-up #dot-list { 20 html.starting-up #dot-list {
21 display: none; 21 display: none;
22 } 22 }
23 23
24 .dot { 24 .dot {
25 -webkit-margin-end: 10px; 25 -webkit-margin-end: 10px;
26 -webkit-padding-start: 2px; 26 -webkit-padding-start: 2px;
27 -webkit-transition: -webkit-margin-end 250ms, max-width 250ms, opacity 250ms;
28 box-sizing: border-box; 27 box-sizing: border-box;
29 cursor: pointer; 28 cursor: pointer;
30 /* max-width: Set in new_tab.js. See measureNavDots() */ 29 /* max-width: Set in new_tab.js. See measureNavDots() */
31 outline: none; 30 outline: none;
32 text-align: left; 31 text-align: left;
32 transition: -webkit-margin-end 250ms, max-width 250ms, opacity 250ms;
33 } 33 }
34 34
35 .dot:last-child { 35 .dot:last-child {
36 -webkit-margin-end: 0; 36 -webkit-margin-end: 0;
37 } 37 }
38 38
39 .dot:only-of-type { 39 .dot:only-of-type {
40 cursor: default; 40 cursor: default;
41 opacity: 0; 41 opacity: 0;
42 pointer-events: none; 42 pointer-events: none;
43 } 43 }
44 44
45 .dot.small { 45 .dot.small {
46 -webkit-margin-end: 0; 46 -webkit-margin-end: 0;
47 max-width: 0; 47 max-width: 0;
48 } 48 }
49 49
50 .dot .selection-bar { 50 .dot .selection-bar {
51 -webkit-transition: border-color 200ms;
52 border-bottom: 5px solid; 51 border-bottom: 5px solid;
53 border-color: rgba(0, 0, 0, 0.1); 52 border-color: rgba(0, 0, 0, 0.1);
54 height: 10px; 53 height: 10px;
54 transition: border-color 200ms;
55 } 55 }
56 56
57 .dot input { 57 .dot input {
58 -webkit-appearance: caret; 58 -webkit-appearance: caret;
59 -webkit-margin-start: 2px; 59 -webkit-margin-start: 2px;
60 -webkit-transition: color 200ms;
61 background-color: transparent; 60 background-color: transparent;
62 cursor: inherit; 61 cursor: inherit;
63 font: inherit; 62 font: inherit;
64 height: auto; 63 height: auto;
65 margin-top: 2px; 64 margin-top: 2px;
66 padding: 1px 0; 65 padding: 1px 0;
66 transition: color 200ms;
67 width: 90%; 67 width: 90%;
68 } 68 }
69 69
70 .dot input:focus { 70 .dot input:focus {
71 cursor: auto; 71 cursor: auto;
72 } 72 }
73 73
74 /* Everything below here should be themed but we don't have appropriate colors 74 /* Everything below here should be themed but we don't have appropriate colors
75 * yet. */ 75 * yet. */
76 .dot input { 76 .dot input {
77 color: #b2b2b2; 77 color: #b2b2b2;
78 } 78 }
79 79
80 .dot:focus input, 80 .dot:focus input,
81 .dot:hover input, 81 .dot:hover input,
82 .dot.selected input { 82 .dot.selected input {
83 color: #7f7f7f; 83 color: #7f7f7f;
84 } 84 }
85 85
86 .dot:focus .selection-bar, 86 .dot:focus .selection-bar,
87 .dot:hover .selection-bar, 87 .dot:hover .selection-bar,
88 .dot.drag-target .selection-bar { 88 .dot.drag-target .selection-bar {
89 border-color: #b2b2b2; 89 border-color: #b2b2b2;
90 } 90 }
91 91
92 .dot.selected .selection-bar { 92 .dot.selected .selection-bar {
93 border-color: #7f7f7f; 93 border-color: #7f7f7f;
94 } 94 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698