OLD | NEW |
1 /* | 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
2 Copyright (c) 2010 The Chromium Authors. All rights reserved. | 2 * Use of this source code is governed by a BSD-style license that can be |
3 Use of this source code is governed by a BSD-style license that can be | 3 * found in the LICENSE file. */ |
4 found in the LICENSE file. | |
5 */ | |
6 | 4 |
7 .subpages-nav-tabs .tab { | 5 .subpages-nav-tabs .tab { |
| 6 padding: 4px 8px; |
8 position: relative; | 7 position: relative; |
9 padding: 4px 8px; | |
10 } | 8 } |
11 | 9 |
12 .subpages-nav-tabs .active-tab { | 10 .subpages-nav-tabs .active-tab { |
13 position: relative; | |
14 background: white; | 11 background: white; |
15 border: 1px solid #A0A0A0; /* light gray */ | 12 border: 1px solid #A0A0A0; /* light gray */ |
16 border-bottom: 2px solid white; | 13 border-bottom: 2px solid white; |
17 border-top-left-radius: 3px; | 14 border-top-left-radius: 3px; |
18 border-top-right-radius: 3px; | 15 border-top-right-radius: 3px; |
| 16 position: relative; |
19 } | 17 } |
20 | 18 |
21 /* To avoid tabs changing size when they are clicked and their labels become | 19 /* To avoid tabs changing size when they are clicked and their labels become |
22 * bold, we actually put two labels inside each tab: an inactive label and an | 20 * bold, we actually put two labels inside each tab: an inactive label and an |
23 * active label. Only one is visible at a time, but the bold label is used to | 21 * active label. Only one is visible at a time, but the bold label is used to |
24 * size the tab even when it's not visible. This keeps the tab size constant. | 22 * size the tab even when it's not visible. This keeps the tab size constant. |
25 */ | 23 */ |
26 .subpages-nav-tabs .active-tab-label { | 24 .subpages-nav-tabs .active-tab-label { |
27 font-weight: bold; | 25 font-weight: bold; |
28 } | 26 } |
29 | 27 |
30 .subpages-nav-tabs .tab-label { | 28 .subpages-nav-tabs .tab-label { |
| 29 left: 9px; |
31 position: absolute; | 30 position: absolute; |
32 top: 5px; | 31 top: 5px; |
33 left: 9px; | |
34 } | 32 } |
35 | 33 |
36 html[dir=rtl] .subpages-nav-tabs .tab-label { | 34 html[dir=rtl] .subpages-nav-tabs .tab-label { |
37 right: 9px; | 35 right: 9px; |
38 } | 36 } |
39 | 37 |
40 .subpages-nav-tabs .active-tab-label, | 38 .subpages-nav-tabs .active-tab-label, |
41 .subpages-nav-tabs .active-tab .tab-label { | 39 .subpages-nav-tabs .active-tab .tab-label { |
42 visibility: hidden; | 40 visibility: hidden; |
43 } | 41 } |
44 | 42 |
45 /* .tab is not removed when .active-tab is added, so we must | 43 /* .tab is not removed when .active-tab is added, so we must |
46 * override the hidden visibility above in the active tab case. | 44 * override the hidden visibility above in the active tab case. |
47 */ | 45 */ |
48 .subpages-nav-tabs .active-tab .active-tab-label { | 46 .subpages-nav-tabs .active-tab .active-tab-label { |
49 visibility: visible; | 47 visibility: visible; |
50 } | 48 } |
51 | 49 |
52 .subpages-nav-tabs { | 50 .subpages-nav-tabs { |
| 51 background: -webkit-linear-gradient(white, #F3F3F3); /* very light gray */ |
| 52 border-bottom: 1px solid #A0A0A0; /* light gray */ |
| 53 margin-bottom: 15px; |
53 padding: 4px; | 54 padding: 4px; |
54 border-bottom: 1px solid #A0A0A0; /* light gray */ | |
55 background: -webkit-linear-gradient(white, #F3F3F3); /* very light gray */ | |
56 margin-bottom: 15px; | |
57 } | 55 } |
58 | 56 |
59 .subpages-tab-contents { | 57 .subpages-tab-contents { |
| 58 -webkit-padding-start: 10px; |
60 display: none; | 59 display: none; |
61 -webkit-padding-start: 10px; | |
62 } | 60 } |
63 | 61 |
64 .active-tab-contents { | 62 .active-tab-contents { |
65 display: block; | 63 display: block; |
66 } | 64 } |
OLD | NEW |