4 .is-collapse-enabled .tabs,
8 .is-collapse-enabled .tabs:before,
9 .is-horizontal .tabs:before {
12 background-color: #A6A6A6;
21 /* Span the full width of the viewport */
22 .content-header .is-horizontal .tabs:before,
23 .content-header .is-collapse-enabled .tabs:before {
31 * 1. Required by some elements such as <button>
32 * 2. Fixed height needed to ensure alignment with absolutely-positioned
39 box-sizing: border-box;
41 padding: 9px 2em 7px 1em; /* LTR */
43 border: 1px solid #bfbfbf;
44 background-color: rgba(242, 242, 240, 0.7);
46 text-overflow: ellipsis;
49 [dir="rtl"] .tabs__tab {
56 background-color: #fafaf7;
62 /* This is required to win over specifity of [dir="rtl"] .tabs__tab */
63 [dir="rtl"] li.tabs__tab {
68 padding: 9px 2em 7px 1em; /* LTR */
70 [dir="rtl"] li.tabs__tab a {
76 text-decoration: none;
85 .tabs.primary .tabs__tab.is-active {
87 border-color: #a6a6a6;
88 border-radius: 4px 0 0 0; /* LTR */
89 background-color: #ffffff;
92 [dir="rtl"] .tabs.primary .tabs__tab.is-active {
93 border-top-left-radius: 0;
94 border-top-right-radius: 4px;
99 .tabs.primary a:focus {
101 background-color: #fafaf7;
102 text-decoration: underline;
104 .tabs.primary .is-active a:focus {
106 text-decoration: underline;
109 /* Only add the arrow if there's space */
110 @media screen and (min-width:18.75em) { /* 300px */
112 background: url(../../../../misc/icons/0074bd/chevron-right.svg) 99% center no-repeat;
114 [dir="rtl"] .tabs.primary a {
115 background: url(../../../../misc/icons/0074bd/chevron-left.svg) 1% center no-repeat;
117 .tabs.primary .tabs__tab.is-active a {
118 background-image: none;
125 /* JS dependent styling */
126 .is-collapse-enabled .tabs__trigger {
127 box-sizing: content-box;
133 left: auto; /* LTR */
137 border-left: 0; /* LTR */
138 border-radius: 0 4px 0 0; /* LTR */
139 font-family: Arial, sans-serif;
141 letter-spacing: 0.1em;
145 [dir="rtl"] .is-collapse-enabled .tabs__trigger {
147 border-left: 1px solid #bfbfbf;
148 border-radius: 4px 0 0 0;
152 .is-collapse-enabled .tabs {
159 padding-bottom: 1rem;
161 .is-collapse-enabled .tabs__tab.is-active {
168 [dir="rtl"] .is-collapse-enabled .tabs__tab.is-active {
172 .is-collapse-enabled .tabs.primary a.is-active:before {
175 .is-open .tabs__tab.is-active {
176 border-color: #a6a6a6;
177 background-color: #ffffff;
179 border-bottom: 1px solid #a6a6a6;
182 /* Styles for the horizontal state always take priority */
183 .is-horizontal .tabs {
184 max-height: none !important;
185 padding-top: 0 !important;
188 .is-horizontal .tabs__tab {
189 float: left; /* LTR */
194 border-bottom-color: #a6a6a6;
196 [dir="rtl"] .is-horizontal .tabs__tab {
198 /* This is required to win over specifity of [dir="rtl"] .tabs > li */
201 .is-horizontal .tabs__tab + .tabs__tab {
202 margin-left: -1px; /* LTR */
204 [dir="rtl"] .is-horizontal .tabs__tab + .tabs__tab {
208 .is-horizontal .tabs.primary .tabs__tab:first-child {
209 border-radius: 4px 0 0 0; /* LTR */
211 [dir="rtl"] .is-horizontal .tabs.primary .tabs__tab:first-child {
212 border-radius: 0 4px 0 0;
214 .is-horizontal .tabs.primary .tabs__tab:last-child {
215 border-radius: 0 4px 0 0; /* LTR */
217 [dir="rtl"] .is-horizontal .tabs.primary .tabs__tab:last-child {
218 border-radius: 4px 0 0 0;
221 /* Override the states above */
222 .is-horizontal .tabs__tab.is-active,
223 .is-horizontal .tabs.primary .tabs__tab.is-active,
224 [dir="rtl"] .is-horizontal .tabs.primary .tabs__tab.is-active {
225 border-radius: 4px 4px 0 0;
232 .is-horizontal .tabs.primary a {
233 background-image: none;
234 padding: 7px 2em 7px 2em;
236 .is-horizontal .tabs__trigger {
246 .tabs.secondary .tabs__tab {
248 padding: 5px 15px 5px 16px; /* LTR */
249 margin-left: -1px; /* LTR */
251 -webkit-transition: border-color 0.2s, background-color 0.2s;
252 transition: border-color 0.2s, background-color 0.2s;
254 [dir="rtl"] .tabs.secondary .tabs__tab {
260 /* This is required to win over specificity of [dir="rtl"] .tabs.secondary .tabs__tab */
261 [dir="rtl"] .views-displays .tabs.secondary li,
262 [dir="rtl"] .views-displays .tabs.secondary li.is-active {
266 .tabs.secondary .tabs__tab + .tabs__tab {
267 border-top: 1px solid #d9d8d4;
269 .tabs.secondary .tabs__tab.is-active {
271 border-left: 2px solid #004f80; /* LTR */
272 padding-left: 15px; /* LTR */
274 [dir="rtl"] .tabs.secondary .tabs__tab.is-active {
275 border-left: 1px solid #bfbfbf;
276 border-right: 2px solid #004f80;
279 /* This is required to win over specificity of [dir="rtl"] .tabs.secondary .tabs__tab.is-active */
280 [dir="rtl"] .views-displays .tabs.secondary li.is-active {
284 .tabs.secondary .tabs__tab:hover,
285 .tabs.secondary .tabs__tab:focus {
287 border-left: 2px solid #008ee6; /* LTR */
288 padding-left: 15px; /* LTR */
290 [dir="rtl"] .tabs.secondary .tabs__tab:hover,
291 [dir="rtl"] .tabs.secondary .tabs__tab:focus {
292 border-left: 1px solid #bfbfbf;
293 border-right: 2px solid #008ee6;
296 /* This is required to win over specificity of [dir="rtl"] .tabs.secondary .tabs__tab:hover */
297 [dir="rtl"] .views-displays .tabs li.tabs__tab:hover {
302 background-color: transparent;
303 padding: 7px 13px 5px;
304 text-decoration: none;
306 /* This is required to win over specificity of [dir="rtl"] li.tabs__tab a */
307 [dir="rtl"] .tabs.secondary a {
311 /* This is required to win over specificity of [dir="rtl"] .tabs.secondary a */
312 [dir="rtl"] .views-displays .tabs.secondary a {
316 .tabs.secondary .is-active a {
319 .tabs.secondary a:focus {
320 text-decoration: underline;
323 /* Styles for the horizontal state */
324 .is-horizontal .tabs.secondary .tabs__tab {
326 float: left; /* LTR */
332 border-bottom: 2px solid transparent;
333 border-left: 1px solid transparent; /* LTR */
334 border-right-color: transparent; /* LTR */
339 * 1. This is required to win over specifity of
340 * [dir="rtl"] .tabs.secondary .tabs__tab:hover,
341 * [dir="rtl"] .tabs.secondary .tabs__tab:focus
343 [dir="rtl"] .is-horizontal .tabs.secondary .tabs__tab {
345 border-right: 1px solid transparent;
346 border-left-color: transparent;
347 padding-right: 0; /* 1 */
349 .is-horizontal .tabs.secondary .tabs__tab.is-active {
350 border-bottom-color: #004f80;
352 .is-horizontal .tabs.secondary .tabs__tab:hover,
353 .is-horizontal .tabs.secondary .tabs__tab:focus {
354 border-bottom-color: #008ee6;