|
1 /* |
|
2 * Tabs |
|
3 */ |
|
4 |
|
5 .nav-tabs { |
|
6 |
|
7 .tabs-below >&, |
|
8 .tabs-left >&, |
|
9 .tabs-right >& { |
|
10 border-bottom: 0; |
|
11 } |
|
12 &.bordered { |
|
13 background: #fff; |
|
14 border: 1px solid #ddd; |
|
15 |
|
16 >:first-child a { |
|
17 border-left-width: 0!important; |
|
18 } |
|
19 +.tab-content { |
|
20 border: 1px solid #ddd; |
|
21 border-top: 0; |
|
22 } |
|
23 } |
|
24 >li { |
|
25 >a { |
|
26 padding: 4px 10px; |
|
27 border-radius: 0; |
|
28 color: #333; |
|
29 |
|
30 &.xsmall { |
|
31 line-height: 1.0; |
|
32 padding: 3px 8px; |
|
33 } |
|
34 .label { |
|
35 display: inline-block; |
|
36 font-size: 11px; |
|
37 margin-left: 5px; |
|
38 opacity: .5; |
|
39 } |
|
40 .badge { |
|
41 font-size: 11px; |
|
42 padding: 4px 5px 2px; |
|
43 opacity: .5; |
|
44 margin-left: 5px; |
|
45 min-width: 17px; |
|
46 font-weight: 400; |
|
47 |
|
48 .tabs-left & { |
|
49 margin-right: 5px; |
|
50 margin-left: 0; |
|
51 } |
|
52 } |
|
53 >.fa { |
|
54 opacity: .5; |
|
55 } |
|
56 } |
|
57 } |
|
58 &.small { |
|
59 >li { |
|
60 >a { |
|
61 padding: 2px 8px; |
|
62 font-size: 90%; |
|
63 } |
|
64 } |
|
65 } |
|
66 &.tiny { |
|
67 >li { |
|
68 >a { |
|
69 padding: 1px 6px; |
|
70 font-size: 75%; |
|
71 } |
|
72 } |
|
73 } |
|
74 >li.active { |
|
75 >a { |
|
76 -webkit-box-shadow: 0 -2px 0 @activeTabBorder; |
|
77 box-shadow: 0 -2px 0 @activeTabBorder; |
|
78 border-top-width: 0!important; |
|
79 margin-top: 1px!important; |
|
80 font-weight: 700; |
|
81 |
|
82 .badge, |
|
83 .label, |
|
84 >.fa { |
|
85 opacity: 1; |
|
86 } |
|
87 .tabs-left & { |
|
88 -webkit-box-shadow: -2px 0 0 @activeTabBorder; |
|
89 box-shadow: -2px 0 0 @activeTabBorder; |
|
90 border-top-width: 1px!important; |
|
91 border-left: 0!important; |
|
92 margin-left: 1px!important; |
|
93 } |
|
94 .tabs-right & { |
|
95 -webkit-box-shadow: 2px 0 0 @activeTabBorder; |
|
96 box-shadow: 2px 0 0 #57889c; |
|
97 border-top-width: 1px!important; |
|
98 border-right: 0!important; |
|
99 margin-right: 1px!important; |
|
100 } |
|
101 .tabs-below & { |
|
102 -webkit-box-shadow: 0 2px 0 @activeTabBorder; |
|
103 box-shadow: 0 2px 0 @activeTabBorder; |
|
104 border-bottom-width: 0!important; |
|
105 border-top: 0!important; |
|
106 margin-top: 0!important; |
|
107 } |
|
108 } |
|
109 } |
|
110 } |
|
111 .tabs-left, |
|
112 .tabs-right { |
|
113 >.nav-tabs >li, |
|
114 >.nav-pills >li { |
|
115 float: none; |
|
116 |
|
117 >a { |
|
118 min-width: 74px; |
|
119 margin-right: 0; |
|
120 margin-bottom: 3px; |
|
121 } |
|
122 } |
|
123 } |
|
124 .tabs-left { |
|
125 .nav-pills >li.active >a { |
|
126 border: 0!important; |
|
127 box-shadow: none!important; |
|
128 -webkit-box-shadow: none!important; |
|
129 } |
|
130 >.nav-pills, |
|
131 >.nav-tabs { |
|
132 float: left; |
|
133 margin-right: 19px; |
|
134 border-right: 1px solid #ddd; |
|
135 } |
|
136 >.nav-pills { |
|
137 border-right: 0; |
|
138 } |
|
139 >.nav-tabs >li >a { |
|
140 margin-right: -1px; |
|
141 } |
|
142 >.nav-tabs >li >a:focus, |
|
143 >.nav-tabs >li >a:hover { |
|
144 border-color: #eee #d5d5d5 #eee #eee; |
|
145 } |
|
146 >.nav-tabs .active >a, |
|
147 >.nav-tabs .active >a:focus, |
|
148 >.nav-tabs .active >a:hover { |
|
149 border-color: #d5d5d5 transparent #d5d5d5 #ddd; |
|
150 *border-right-color: #fff; |
|
151 } |
|
152 >.tab-content { |
|
153 margin-left: 109px; |
|
154 } |
|
155 } |
|
156 .tabs-right { |
|
157 >.nav-tabs { |
|
158 float: right; |
|
159 margin-left: 19px; |
|
160 border-left: 1px solid #ddd; |
|
161 |
|
162 >li >a { |
|
163 margin-left: -1px; |
|
164 |
|
165 &:focus, |
|
166 &:hover { |
|
167 border-color: #eee #eee #eee #ddd; |
|
168 } |
|
169 } |
|
170 .active { |
|
171 >a, |
|
172 >a:focus, |
|
173 >a:hover { |
|
174 border-color: #ddd #ddd #ddd transparent; |
|
175 *border-left-color: #fff; |
|
176 } |
|
177 } |
|
178 } |
|
179 } |
|
180 .tabs-pull-right { |
|
181 &.nav-tabs, |
|
182 &.nav-pills { |
|
183 >li { |
|
184 float: right; |
|
185 |
|
186 &:first-child >a { |
|
187 margin-right: 1px; |
|
188 } |
|
189 } |
|
190 } |
|
191 &.bordered.nav-pills, |
|
192 &.bordered.nav-tabs { |
|
193 >li:first-child >a { |
|
194 border-left-width: 1px!important; |
|
195 margin-right: 0; |
|
196 border-right-width: 0; |
|
197 } |
|
198 } |
|
199 } |
|
200 .tabs-below { |
|
201 >.nav-tabs { |
|
202 border-top: 1px solid #ddd; |
|
203 |
|
204 >li { |
|
205 margin-top: -1px; |
|
206 margin-bottom: 0; |
|
207 |
|
208 >a:focus, |
|
209 >a:hover { |
|
210 border-top-color: #ddd; |
|
211 border-bottom-color: transparent; |
|
212 } |
|
213 } |
|
214 >.active >a, |
|
215 >.active >a:focus, |
|
216 >.active >a:hover { |
|
217 border-color: transparent #ddd #ddd; |
|
218 } |
|
219 } |
|
220 } |
|
221 |
|
222 .pill-content, |
|
223 .tab-content { |
|
224 >.pill-pane, |
|
225 >.tab-pane { |
|
226 display: none; |
|
227 } |
|
228 >.active, |
|
229 >.active { |
|
230 display: block; |
|
231 } |
|
232 &.transparent { |
|
233 background-color: transparent; |
|
234 } |
|
235 &.bordered, |
|
236 &.bordered:hover { |
|
237 border-color: #ddd; |
|
238 border-top: 0; |
|
239 } |
|
240 } |
|
241 |
|
242 .ams-widget >header >.nav-tabs.pull-left >li:first-child a { |
|
243 border-left-width: 0!important; |
|
244 } |