Skip to content

Commit 5088d69

Browse files
EricDunsworthEricDunsworth
committed
Tabbed interface: Use flexbox for tab markers
Previously, in medium view and over, if any tab markers wrapped across multiple lines, "short" tab markers behaved strangely compared to "tall" ones. Specifically: * Short tab markers didn't use 100% height and looked bottom-aligned * If the active tab used a short tab marker: * The marker's thick top grey border wasn't top-aligned (vs tall tab markers) * A thin grey border appeared above the marker * The "linked area" of inactive short tab markers was misleading (looked as if marker links used 100% height, but didn't really): * Caused by hover/focus effects (like background colours and cursor: pointer;) being set on li elements instead of a elements. This resolves it by: * Adding a second line to the third tab marker ("Example 3"/"Exemple 3") in the tabbed interface demo's first example * Adjusting tab markers to use flexbox (to make short tab markers match the height/alignment of tall ones) * Adjusting margins where necessary * Tying hover/focus styles solely to links (not their parent elements) * Removing irrelevant hover/focus styles (e.g. cursor properties, placeholder selector for a hidden element) Notes: * Flexbox changed carousel spacing slightly (for the better): * Carousel style 1: * Removed 10px space above the carousel * Reduced spacing between the next and play/pause buttons from 10px to 5px * Carousel style 2: * Added 10px space between previous button and tab counter (matches space between counter and next button) (deliberate change) * Fully-aligned play/pause button to the right (previously had extra space on the far right side) * Added hover background colour to "show-thumbs" class' thumbnails (byproduct of hover/focus style changes)
1 parent 5c0d9c5 commit 5088d69

3 files changed

Lines changed: 32 additions & 55 deletions

File tree

‎src/plugins/tabs/_base.scss‎

Lines changed: 26 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -141,11 +141,6 @@ $tab-margin-width: 10px;
141141
box-shadow: none;
142142
}
143143

144-
%tabs-carousel-border-top-none-padding-top-1 {
145-
border-top: 0;
146-
padding-top: 10px;
147-
}
148-
149144
%tabs-display-inline-block {
150145
display: inline-block;
151146
}
@@ -208,7 +203,7 @@ $tab-margin-width: 10px;
208203

209204
[role="tablist"] {
210205
border-spacing: $tab-margin-width 0;
211-
display: table;
206+
display: flex;
212207
list-style: none;
213208
margin: 0;
214209
padding: 0;
@@ -220,9 +215,7 @@ $tab-margin-width: 10px;
220215

221216
background: $tablist-bg-color;
222217
color: $carousel-tablist-tabcount-color;
223-
cursor: pointer;
224-
display: table-cell;
225-
left: -$tab-margin-width;
218+
display: flex;
226219
position: relative;
227220
text-align: center;
228221
border: {
@@ -239,31 +232,31 @@ $tab-margin-width: 10px;
239232
// changed padding and margin from em to px to fix web-kit layout issue
240233
padding: 10px;
241234
text-decoration: none;
242-
}
243235

244-
&:focus,
245-
&:hover {
246-
background: $tablist-hover-bg-color;
247-
background: color.adjust($tablist-hover-bg-color, $alpha: -.1);
236+
&:focus,
237+
&:hover {
238+
background: $tablist-hover-bg-color;
239+
background: color.adjust($tablist-hover-bg-color, $alpha: -.1);
240+
}
248241
}
249242

250243
&.active {
251-
@if $tablist-active-bg-color {
252-
background: $tablist-active-bg-color;
253-
} @else if $main-bg {
254-
background: $main-bg
255-
} @else if $content-bg {
256-
background: $content-bg
257-
} @else {
258-
background: $body-bg;
259-
}
260-
261244
border-bottom: 0;
262245
cursor: default;
263246
padding-bottom: 1px;
264247
z-index: 2;
265248

266249
a {
250+
@if $tablist-active-bg-color {
251+
background: $tablist-active-bg-color;
252+
} @else if $main-bg {
253+
background: $main-bg
254+
} @else if $content-bg {
255+
background: $content-bg
256+
} @else {
257+
background: $body-bg;
258+
}
259+
267260
border: {
268261
color: $tablist-active-link-border-color;
269262
style: $tablist-active-link-border-style;
@@ -288,12 +281,10 @@ $tab-margin-width: 10px;
288281
.curr-count {
289282
font-size: 1.5em;
290283
}
284+
}
291285

292-
&:focus,
293-
&:hover {
294-
background: transparent;
295-
cursor: default;
296-
}
286+
& + li {
287+
margin-left: $tab-margin-width;
297288
}
298289
}
299290
}
@@ -348,30 +339,11 @@ $tab-margin-width: 10px;
348339
@extend %tabs-display-inline-block;
349340
}
350341

351-
&.prv {
352-
margin-right: 5px;
353-
}
354-
355342
&.tab-count {
356343
background: none;
357344
border: 0;
358345
font-size: .9em;
359346
padding: 0 .1em;
360-
top: .55em;
361-
362-
&.active,
363-
&:focus,
364-
&:hover {
365-
cursor: default;
366-
}
367-
}
368-
369-
&.active,
370-
&:focus,
371-
&:hover {
372-
a {
373-
@extend %tabs-carousel-border-top-none-padding-top-1;
374-
}
375347
}
376348
}
377349
}
@@ -444,6 +416,10 @@ $tab-margin-width: 10px;
444416
}
445417
}
446418

419+
&.tab-count {
420+
margin: $tab-margin-width;
421+
}
422+
447423
&.nxt {
448424
@extend %carousel-s2-prv-nxt-common;
449425

@@ -470,9 +446,10 @@ $tab-margin-width: 10px;
470446
&.plypause {
471447
background: none;
472448
border: 0;
473-
float: right;
449+
flex-grow: 1;
474450
margin-right: 0;
475451
padding: 2px 0;
452+
text-align: right;
476453

477454
a {
478455
@extend %carousel-s2-btn-common;

‎src/plugins/tabs/tabs-en.hbs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"tag": "tabs",
88
"parentdir": "tabs",
99
"altLangPrefix": "tabs",
10-
"dateModified": "2015-02-24"
10+
"dateModified": "2025-10-14"
1111
}
1212
---
1313
<span class="wb-prettify all-pre hide"></span>
@@ -25,7 +25,7 @@
2525
<details id="details-panel1">
2626
<summary>Example 1</summary>
2727
<p>
28-
From time immemorial the Norsemen <a href="#details-panel3">Example 3</a> were among the most daring and
28+
From time immemorial the Norsemen <a href="#details-panel3">Example 3<br>(line 2)</a> were among the most daring and
2929
skilful mariners ever known. They built great wooden boats with tall,
3030
sweeping bows and sterns. These ships, though open and without decks,
3131
were yet stout and seaworthy. Their remains have been found, at times
@@ -52,7 +52,7 @@
5252
</p>
5353
</details>
5454
<details id="details-panel3">
55-
<summary>Example 3</summary>
55+
<summary>Example 3<br>(line 2)</summary>
5656
<p>
5757
The story of the Norsemen runs thus. Towards the end of the ninth
5858
century, or nearly two hundred years before the Norman conquest, there

‎src/plugins/tabs/tabs-fr.hbs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"tag": "tabs",
88
"parentdir": "tabs",
99
"altLangPrefix": "tabs",
10-
"dateModified": "2015-02-24"
10+
"dateModified": "2025-10-14"
1111
}
1212
---
1313
<span class="wb-prettify all-pre hide"></span>
@@ -25,7 +25,7 @@
2525
<details id="details-panel1">
2626
<summary>Exemple 1</summary>
2727
<p>
28-
Texte d'exemple. Autre texte d'exemple. Texte d'exemple différent. <a href="#details-panel3">Exemple 3</a> Texte d'exemple. Autre texte d'exemple.
28+
Texte d'exemple. Autre texte d'exemple. Texte d'exemple différent. <a href="#details-panel3">Exemple 3<br>(ligne 2)</a> Texte d'exemple. Autre texte d'exemple.
2929
Texte d'exemple. Autre texte d'exemple. Texte d'exemple différent.Texte d'exemple. Autre texte d'exemple. Texte d'exemple différent.
3030
Texte d'exemple. Autre texte d'exemple. Texte d'exemple différent.Texte d'exemple. Autre texte d'exemple. Texte d'exemple différent.
3131
Texte d'exemple. Autre texte d'exemple. Texte d'exemple différent.Texte d'exemple. Autre texte d'exemple. Texte d'exemple différent.
@@ -56,7 +56,7 @@
5656
</details>
5757
</details>
5858
<details id="details-panel3">
59-
<summary>Exemple 3</summary>
59+
<summary>Exemple 3<br>(ligne 2)</summary>
6060
<p>
6161
Texte d'exemple. Autre texte d'exemple. Texte d'exemple différent.Texte d'exemple. Autre texte d'exemple. Texte d'exemple différent.
6262
Texte d'exemple. Autre texte d'exemple. Texte d'exemple différent.Texte d'exemple. Autre texte d'exemple. Texte d'exemple différent.

0 commit comments

Comments
 (0)