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 tabbox { | 5 tabbox { |
6 -webkit-box-orient: vertical; | 6 -webkit-box-orient: vertical; |
7 display: -webkit-box; | 7 display: -webkit-box; |
8 } | 8 } |
9 | 9 |
10 tabs { | 10 tabs { |
(...skipping 11 matching lines...) Expand all Loading... |
22 * (crbug.com/247772). */ | 22 * (crbug.com/247772). */ |
23 tabs.new-style-tabs { | 23 tabs.new-style-tabs { |
24 -webkit-padding-start: 9px; | 24 -webkit-padding-start: 9px; |
25 background: #fbfbfb; | 25 background: #fbfbfb; |
26 border-bottom: 1px solid #c8c8c8; | 26 border-bottom: 1px solid #c8c8c8; |
27 padding-top: 14px; | 27 padding-top: 14px; |
28 } | 28 } |
29 | 29 |
30 tabs > * { | 30 tabs > * { |
31 -webkit-margin-start: 5px; | 31 -webkit-margin-start: 5px; |
32 -webkit-transition: border-color 150ms, background-color 150ms; | |
33 background: rgba(160, 160, 160, .3); | 32 background: rgba(160, 160, 160, .3); |
34 border: 1px solid rgba(160, 160, 160, .3); | 33 border: 1px solid rgba(160, 160, 160, .3); |
35 border-bottom: 0; | 34 border-bottom: 0; |
36 border-top-left-radius: 3px; | 35 border-top-left-radius: 3px; |
37 border-top-right-radius: 3px; | 36 border-top-right-radius: 3px; |
38 cursor: default; | 37 cursor: default; |
39 display: block; | 38 display: block; |
40 min-width: 4em; | 39 min-width: 4em; |
41 padding: 2px 10px; | 40 padding: 2px 10px; |
42 text-align: center; | 41 text-align: center; |
| 42 transition: border-color 150ms, background-color 150ms; |
43 } | 43 } |
44 | 44 |
45 tabs.new-style-tabs > * { | 45 tabs.new-style-tabs > * { |
46 -webkit-margin-start: 0; | 46 -webkit-margin-start: 0; |
47 -webkit-transition: none; | |
48 background: #fbfbfb; | 47 background: #fbfbfb; |
49 border: 1px solid #fbfbfb; | 48 border: 1px solid #fbfbfb; |
50 border-bottom: 0; | 49 border-bottom: 0; |
51 border-radius: 0; | 50 border-radius: 0; |
52 min-width: 0; | 51 min-width: 0; |
53 padding: 4px 9px 4px 10px; | 52 padding: 4px 9px 4px 10px; |
| 53 transition: none; |
54 } | 54 } |
55 | 55 |
56 tabs > :not([selected]) { | 56 tabs > :not([selected]) { |
57 background: rgba(238, 238, 238, .3); | 57 background: rgba(238, 238, 238, .3); |
58 } | 58 } |
59 | 59 |
60 tabs.new-style-tabs > :not([selected]) { | 60 tabs.new-style-tabs > :not([selected]) { |
61 background: #fbfbfb; | 61 background: #fbfbfb; |
62 color: #646464; | 62 color: #646464; |
63 } | 63 } |
64 | 64 |
65 tabs > :not([selected]):hover { | 65 tabs > :not([selected]):hover { |
66 background: rgba(247, 247, 247, .3); | 66 background: rgba(247, 247, 247, .3); |
67 } | 67 } |
68 | 68 |
69 tabs.new-style-tabs > :not([selected]):hover { | 69 tabs.new-style-tabs > :not([selected]):hover { |
70 background: #fbfbfb; | 70 background: #fbfbfb; |
71 color: black; | 71 color: black; |
72 } | 72 } |
73 | 73 |
74 tabs > [selected] { | 74 tabs > [selected] { |
75 -webkit-transition: none; | |
76 background: white; | 75 background: white; |
77 border-color: rgb(160, 160, 160); | 76 border-color: rgb(160, 160, 160); |
78 margin-bottom: -1px; | 77 margin-bottom: -1px; |
79 position: relative; | 78 position: relative; |
| 79 transition: none; |
80 z-index: 0; | 80 z-index: 0; |
81 } | 81 } |
82 | 82 |
83 tabs.new-style-tabs > [selected] { | 83 tabs.new-style-tabs > [selected] { |
84 background: #fbfbfb; | 84 background: #fbfbfb; |
85 border-color: #c8c8c8; | 85 border-color: #c8c8c8; |
86 font-weight: bold; | 86 font-weight: bold; |
87 } | 87 } |
88 | 88 |
89 tabs:focus { | 89 tabs:focus { |
(...skipping 20 matching lines...) Expand all Loading... |
110 } | 110 } |
111 | 111 |
112 tabpanels > * { | 112 tabpanels > * { |
113 -webkit-box-flex: 1; | 113 -webkit-box-flex: 1; |
114 display: none; | 114 display: none; |
115 } | 115 } |
116 | 116 |
117 tabpanels > [selected] { | 117 tabpanels > [selected] { |
118 display: block; | 118 display: block; |
119 } | 119 } |
OLD | NEW |