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