sapphire.tabs.css
2.73 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
.ui-tabs-hide {
display: none;
}
}
/* Hide useless elements in print layouts... */
@media print {
.ui-tabs-nav {
display: none;
}
}
/* Skin */
.ui-tabs-nav {
list-style: none;
margin: 0;
padding: 0 0 0 3px;
border-bottom: 1px #AAA solid;
padding: 0;
margin: 0 !important;
clear: left;
float: left;
width: 100%;
/* Need this to stop tabs from disappearing sometimes */
position: relative;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: " ";
}
/* If I just say li I get into problems with ".ul-tabs-nav .ui-tabs-active" below */
.ui-tabs-nav li {
float: left;
list-style: none;
background: url(images/norm_li_bg.gif) no-repeat left 3px;
margin: 0 2px 0 0;
padding: 0 0 0 9px;
cursor: pointer;
position: relative;
top: 1px;
}
.ui-tabs-nav a, .ui-tabs-nav a span {
}
.ui-tabs-nav a {
background: url(images/norm_a_bg.gif) no-repeat right 3px;
display: block;
float: left;
outline: none;
padding: 7px 9px 3px 0;
text-decoration: none;
color: #555;
font-size: 11px;
font-weight: bold;
}
.ui-tabs-nav li.ui-tabs-active {
background: url(images/sel_li_bg.gif) no-repeat left top;
top: 1px;
}
.ui-tabs-nav li.ui-tabs-active a {
background: url(images/sel_a_bg.gif) no-repeat right top;
padding: 6px 9px 5px 0;
color: #0074c6;
}
.ui-tabs-nav .ui-tabs-active a:link, .ui-tabs-nav .ui-tabs-active a:visited,
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */
cursor: pointer;
}
.ui-tabs-disabled {
opacity: .4;
filter: alpha(opacity=40);
}
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited {
color: #000;
}
.ui-tabs-panel {
clear: left;
overflow: auto;
border: 1px solid #aaa;
border-top: none;
position: relative;
top: 0;
margin: 0;
padding: 10px;
}
/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear @ IE 6 & IE 7 Quirks Mode */
display: inline-block;
}
*:first-child+html .ui-tabs-nav { /* auto clear @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */
display: inline-block;
}