Skip to content

Commit 42dca5b

Browse files
lamATnginxlamATnginx
committed
Mainframe: Fixed tab groups
1 parent 9139655 commit 42dca5b

File tree

2 files changed

+101
-161
lines changed

2 files changed

+101
-161
lines changed

‎assets/css/v2/style.css‎

Lines changed: 43 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1419,142 +1419,69 @@ li:has(> div > blockquote) {
14191419
/* MARK: Tabs
14201420
*/
14211421
.tabs-container {
1422-
/* border-bottom: 1px solid black; */
1423-
white-space: nowrap;
1424-
position: relative;
1425-
1426-
/* Move to gutter */
14271422
width: calc(100% + 2rem);
14281423
margin-left: -1rem;
14291424

1430-
&::after {
1431-
content: "";
1432-
position: absolute;
1433-
display: block;
1434-
border-bottom: 1px solid oklch(var(--color-foreground));
1435-
bottom: 0;
1436-
right: 0;
1437-
width: 2rem;
1425+
input[type="radio"] {
1426+
display: none;
14381427
}
1439-
}
14401428

1441-
.nav-tabs {
1442-
overflow-x: scroll;
1443-
overflow-y: hidden;
1444-
height: 100%;
1445-
scrollbar-width: none;
1429+
.tab-labels {
1430+
display: flex;
1431+
position: relative;
1432+
flex-wrap: wrap;
1433+
flex-direction: row;
1434+
margin: 0;
14461435

1447-
list-style: none;
1448-
display: flex;
1449-
justify-content: start;
1450-
margin: 0;
1451-
padding: 0 2rem;
1452-
position: relative;
1436+
> :not(:last-child) {
1437+
border-right: none;
1438+
}
14531439

1454-
> :not(:last-child) {
1455-
border-right: none;
1456-
}
1440+
li {
1441+
list-style: none;
1442+
border: 1px solid oklch(var(--color-tabs-inactive-border));
1443+
border-bottom: 1px solid oklch(var(--color-foreground));
1444+
color: oklch(var(--color-brand));
1445+
padding: 10px;
1446+
margin: 0;
14571447

1458-
&::before {
1459-
/* Horizontal line before tab blocks */
1460-
content: "";
1461-
position: absolute;
1462-
display: block;
1463-
border-bottom: 1px solid oklch(var(--color-foreground));
1464-
bottom: 0;
1465-
left: 0;
1466-
width: 2rem;
1448+
label {
1449+
cursor: pointer;
1450+
}
1451+
}
14671452
}
14681453

1469-
&::after {
1470-
/* Horizontal line after tab blocks */
1471-
content: "";
1472-
position: relative;
1473-
display: block;
1474-
border-bottom: 1px solid oklch(var(--color-foreground));
1475-
bottom: 0;
1476-
left: 0;
1454+
.tab-content {
1455+
display: none;
1456+
margin-top: 1rem;
1457+
margin-left: 0;
14771458
width: 100%;
1478-
}
1479-
1480-
--scrollbar-width: 1px;
1481-
--mask-height: 32px;
1482-
--mask-image-content: linear-gradient(
1483-
to right,
1484-
transparent,
1485-
oklch(var(--color-foreground)) var(--mask-height),
1486-
oklch(var(--color-foreground)) calc(100% - var(--mask-height)),
1487-
transparent
1488-
);
1489-
1490-
--mask-size-content: 100% calc(100% - var(--scrollbar-width));
1491-
1492-
--mask-image-scrollbar: linear-gradient(
1493-
oklch(var(--color-foreground)),
1494-
oklch(var(--color-foreground))
1495-
);
1496-
--mask-size-scrollbar: 100% var(--scrollbar-width);
1497-
mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
1498-
mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
1499-
mask-position: 0 0, 0 100%;
1500-
mask-repeat: no-repeat, no-repeat;
1501-
}
1502-
1503-
.nav-item {
1504-
border: 1px solid oklch(var(--color-tabs-inactive-border));
1505-
border-bottom: 1px solid oklch(var(--color-foreground));
1506-
padding: 10px;
1507-
margin-bottom: 0;
1508-
1509-
a {
1510-
text-decoration: none;
1511-
}
15121459

1513-
.active {
1514-
color: oklch(var(--color-foreground));
1515-
}
1516-
}
1517-
1518-
.nav-item:has(.active) {
1519-
/* Change the border colors of li that is has a child with a class "active" */
1520-
border-top: 1px solid oklch(var(--color-foreground));
1521-
border-left: 1px solid oklch(var(--color-foreground));
1522-
border-bottom: none;
1460+
padding: 1rem;
1461+
border-bottom: 1px solid oklch(var(--color-foreground));
15231462

1524-
/* Change the border of next child */
1525-
+ li {
1526-
border-left: 1px solid oklch(var(--color-foreground));
1463+
& > * {
1464+
margin: 0 0 var(--flow-gap) 0;
1465+
}
15271466
}
1528-
}
1529-
1530-
.nav-item:last-child:has(.active) {
1531-
/* If on last tab, change the right border since it does not have a next sibling */
1532-
border-right: 1px solid oklch(var(--color-foreground));
1533-
}
15341467

1535-
.tab-content {
1536-
border-bottom: 1px solid oklch(var(--color-foreground));
1537-
padding-bottom: 1rem;
1538-
padding-left: 1rem;
1539-
padding-right: 1rem;
1540-
1541-
/* Move to gutter */
1542-
width: calc(100% + 2rem);
1543-
margin-left: -1rem;
1544-
1545-
.tab-pane {
1546-
display: none;
1468+
.tab-labels:before {
1469+
content: "";
1470+
position: relative;
1471+
width: 2rem;
1472+
border-bottom: 1px solid oklch(var(--color-foreground));
15471473
}
15481474

1549-
.active {
1550-
display: block !important;
1475+
.tab-labels:after {
1476+
content: "";
1477+
position: relative;
1478+
bottom: 0;
1479+
left: 0;
1480+
flex-grow: 1;
1481+
border-bottom: 1px solid oklch(var(--color-foreground));
15511482
}
15521483
}
15531484

1554-
.tab-content > div > * {
1555-
margin: 0 0 var(--flow-gap) 0;
1556-
}
1557-
15581485
/* MARK: Codeblocks
15591486
*/
15601487
code {

‎layouts/shortcodes/tabs.html‎

Lines changed: 58 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,64 @@
11
{{- .Page.Scratch.Add "tabset-counter" 1 -}}
22
{{- $tab_set_id := .Get "name" | default (printf "tabset-%s-%d" (.Page.RelPermalink) (.Page.Scratch.Get "tabset-counter") ) | anchorize -}}
33
{{- $tabs := .Scratch.Get "tabs" -}}
4-
{{- if .Inner -}}{{- /* We don't use the inner content, but Hugo will complain if we don't reference it. */ -}}{{- end -}}
5-
<div class="tabs-container">
6-
<ul class="nav nav-tabs" id="{{ $tab_set_id }}" role="tablist">
7-
{{- range $i, $e := $tabs -}}
8-
{{- $id := printf "%s-%d" $tab_set_id $i -}}
9-
{{- if (eq $i 0) -}}
10-
<li class="nav-item"><a data-toggle="tab" class="nav-link active" href="#{{ $id }}" role="tab" aria-controls="{{ $id }}" aria-selected="true">{{- trim .name " " -}}</a></li>
11-
{{ else }}
12-
<li class="nav-item"><a data-toggle="tab" class="nav-link" href="#{{ $id }}" role="tab" aria-controls="{{ $id }}">{{- trim .name " " -}}</a></li>
13-
{{- end -}}
4+
{{- if .Inner -}}
5+
<div class="tabs-container" id="{{ $tab_set_id }}">
6+
{{- range $i, $e := $tabs -}}
7+
{{- $id := printf "%s-tab%d" $tab_set_id $i -}}
8+
{{- if eq $i 0 -}}
9+
<input type="radio" name="{{$tab_set_id}}" id="{{$id}}" aria-hidden="true" checked="checked">
10+
{{- else -}}
11+
<input type="radio" name="{{$tab_set_id}}" id="{{$id}}" aria-hidden="true">
12+
{{- end -}}
1413
{{- end -}}
14+
<ul class="tab-labels" role="tablist" id="{{ $tab_set_id }}">
15+
{{- range $i, $e := $tabs -}}
16+
{{- $id := printf "%s-tab%d" $tab_set_id $i -}}
17+
<li>
18+
{{- if eq $i 0 -}}
19+
<label class="tab-label" role="tab" id="{{$id}}" for="{{$id}}" aria-controls="{{ $id }}" aria-selected="true" tabindex="0">
20+
{{- trim .name " " -}}
21+
</label>
22+
{{- else -}}
23+
<label class="tab-label" role="tab" id="{{$id}}" for="{{$id}}" aria-controls="{{ $id }}" tabindex="0">
24+
{{- trim .name " " -}}
25+
</label>
26+
{{- end -}}
27+
</li>
28+
{{- end -}}
1529
</ul>
16-
</div>
17-
<div class="tab-content" id="{{ $tab_set_id }}">
18-
{{- range $i, $e := $tabs -}}
19-
{{- $id := printf "%s-%d" $tab_set_id $i -}}
20-
{{- if (eq $i 0) -}}
21-
<div id="{{ $id }}" class="tab-pane show active" role="tabpanel" aria-labelledby="{{ $id }}">
22-
{{ else }}
23-
<div id="{{ $id }}" class="tab-pane" role="tabpanel" aria-labelledby="{{ $id }}">
30+
<div class="tabs-content">
31+
{{- range $i, $e := $tabs -}}
32+
{{- $id := printf "%s-panel%d" $tab_set_id $i -}}
33+
<div class="tab-content" role="tabpanel" id="{{ $tab_set_id }}-panel{{ $i }}" aria-labelledby="{{ $id }}">
34+
{{ with .content }}
35+
{{ . }}
36+
{{ end }}
37+
</div>
38+
{{- end -}}
39+
</div>
40+
</div>
2441
{{ end }}
25-
{{- with .content -}}
26-
{{- . -}}
27-
{{- else -}}
28-
{{- if eq $.Page.BundleType "leaf" -}}
29-
{{- /* find the file somewhere inside the bundle. Note the use of double asterisk */ -}}
30-
{{- with $.Page.Resources.GetMatch (printf "**%s*" .include) -}}
31-
{{- if ne .ResourceType "page" -}}
32-
{{- /* Assume it is a file that needs code highlighting. */ -}}
33-
{{- $codelang := $e.codelang | default ( path.Ext .Name | strings.TrimPrefix ".") -}}
34-
{{- highlight .Content $codelang "" -}}
35-
{{- else -}}
36-
{{- .Content -}}
37-
{{- end -}}
38-
{{- end -}}
39-
{{- else -}}
40-
{{- $path := path.Join $.Page.File.Dir .include -}}
41-
{{- $page := site.GetPage "page" $path -}}
42-
{{- with $page -}}
43-
{{- .Content -}}
44-
{{- else -}}
45-
{{- errorf "[%s] tabs include not found for path %q" site.Language.Lang $path -}}
46-
{{- end -}}
47-
{{- end -}}
48-
{{- end -}}
49-
</div>
50-
{{- end -}}
51-
</div>
42+
<style>
43+
{{- range $i, $e := $tabs -}}
44+
.tabs-container input[type="radio"]:checked:nth-of-type({{ add $i 1 }}) ~ .tab-labels li:nth-of-type({{ add $i 1 }}) {
45+
border: none;
46+
border-top: 1px solid oklch(var(--color-foreground));
47+
border-left: 1px solid oklch(var(--color-foreground));
48+
border-bottom: none;
49+
color: oklch(var(--color-foreground));
50+
51+
+ li {
52+
border-left: 1px solid oklch(var(--color-foreground));
53+
}
54+
55+
&:last-of-type {
56+
border-right: 1px solid oklch(var(--color-foreground));
57+
}
58+
}
59+
60+
.tabs-container input[type="radio"]:checked:nth-of-type({{ add $i 1 }}) ~ .tabs-content div:nth-of-type({{ add $i 1 }}) {
61+
display: block;
62+
}
63+
{{- end -}}
64+
</style>

0 commit comments

Comments
 (0)