Skip to content

Commit 5572682

Browse files
colegoldsmitheric-schneider
colegoldsmith
and
eric-schneider
authored
Tabs improvements (#92)
* testing outlined style tabs * add new styles, optional wrapping text, hover transitions * add js for scrolling buttons * remove vendor css, add resize observer * updated styles, motion safe * better corner styles * Reformat tabset preview-src --------- Co-authored-by: Eric Schneider <[email protected]>
1 parent 7fb2212 commit 5572682

File tree

9 files changed

+236
-97
lines changed

9 files changed

+236
-97
lines changed

‎preview-src/asciidoc/tabsets.adoc‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -36,42 +36,49 @@ Contains more than one block.
3636
--
3737
======
3838

39-
== Tabset w/ overflow tab titles
40-
41-
[tabs.overflow]
39+
.Tabset w/ overflow tab titles (default)
40+
[tabs]
4241
======
4342
Tab Name:: Contents of Tab.
4443
45-
Longer Tab Name::
44+
A Long Tab Name::
45+
+
46+
Contents of Long Tab.
47+
48+
A Really Long Tab Name::
4649
+
47-
Contents of Longer Tab.
50+
Contents of Really Long Tab.
4851
49-
An Even Longer Tab Name::
52+
A Really Really Long Tab Name::
5053
+
51-
Contents of Even Longer Tab.
54+
Contents of Really Really Long Tab.
5255
53-
This Is The Longest Tab Name::
56+
Another Tab Name::
5457
+
55-
Contents of The Longest Tab.
58+
Contents of Another Tab.
5659
======
5760

58-
== Tabset w/ wrapping tab titles
61+
== Experimental: Tabset w/ wrapping tab titles
5962

6063
[tabs.wrapping]
6164
======
6265
Tab Name:: Contents of Tab.
6366
64-
Longer Tab Name::
67+
A Long Tab Name::
68+
+
69+
Contents of Long Tab.
70+
71+
A Really Long Tab Name::
6572
+
66-
Contents of Longer Tab.
73+
Contents of Really Long Tab.
6774
68-
An Even Longer Tab Name::
75+
A Really Really Long Tab Name::
6976
+
70-
Contents of Even Longer Tab.
77+
Contents of Really Really Long Tab.
7178
72-
This Is The Longest Tab Name::
79+
Another Tab Name::
7380
+
74-
Contents of The Longest Tab.
81+
Contents of Another Tab.
7582
======
7683

7784
== Experimental: Tabset icons

‎src/css/asciidoc/tabs.css‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
.doc .tabs {
2+
margin-bottom: 1.25em;
3+
}
4+
5+
.doc .tablist.ulist,
6+
.doc .tablist.ulist > ul,
7+
.doc .tablist.ulist > ul li {
8+
margin: 0;
9+
}
10+
11+
.doc .tablist > ul p {
12+
line-height: inherit;
13+
margin: 0;
14+
}
15+
16+
.tablist.ulist {
17+
@apply relative flex rounded-t border;
18+
}
19+
20+
.tablist.ulist > ul {
21+
@apply no-scrollbar flex overflow-x-auto rounded-t motion-safe:scroll-smooth;
22+
23+
display: flex;
24+
flex-wrap: nowrap;
25+
list-style: none;
26+
margin: 0;
27+
padding: 0;
28+
}
29+
30+
.tablist.ulist > ul li {
31+
@apply hover:bg-level1 transition-colors;
32+
33+
align-items: center;
34+
cursor: pointer;
35+
display: flex;
36+
padding: 0.75rem 1rem;
37+
position: relative;
38+
39+
& > * {
40+
white-space: nowrap;
41+
}
42+
43+
&:first-of-type {
44+
@apply rounded-tl;
45+
}
46+
}
47+
48+
.tablist > .scroll-btn-left,
49+
.tablist > .scroll-btn-right {
50+
@apply invisible absolute opacity-0 motion-safe:transition-all;
51+
52+
&.active {
53+
@apply visible opacity-100;
54+
}
55+
}
56+
57+
.tablist > .scroll-btn-left {
58+
@apply left-0 rounded-tl py-3 pl-2 pr-4;
59+
}
60+
61+
.tablist > .scroll-btn-right {
62+
@apply right-0 rounded-tr py-3 pl-4 pr-2;
63+
}
64+
65+
html[data-theme="light"] .tablist > .scroll-btn-left {
66+
background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgb(255, 255, 255) 50%);
67+
}
68+
69+
html[data-theme="dark"] .tablist > .scroll-btn-left {
70+
background: linear-gradient(to left, rgba(9, 9, 9, 0), rgb(9, 9, 9), rgb(9, 9, 9) 50%);
71+
}
72+
73+
html[data-theme="light"] .tablist > .scroll-btn-right {
74+
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgb(255, 255, 255) 50%);
75+
}
76+
77+
html[data-theme="dark"] .tablist > .scroll-btn-right {
78+
background: linear-gradient(to right, rgba(9, 9, 9, 0), rgb(9, 9, 9), rgb(9, 9, 9) 50%);
79+
}
80+
81+
.tabs .tablist li::after {
82+
@apply transition-colors;
83+
84+
content: "";
85+
display: block;
86+
height: 2px;
87+
position: absolute;
88+
bottom: 0;
89+
left: 0;
90+
right: 0;
91+
}
92+
93+
.tabs.is-loading .tablist li:first-child::after,
94+
.tabs:not(.is-loading) .tablist li.is-selected::after {
95+
background-color: var(--ds-text-primary);
96+
}
97+
98+
.tabs.wrapping .tablist.ulist > ul li > * {
99+
white-space: normal;
100+
}
101+
102+
.tablist > ul li:focus-visible {
103+
outline: none;
104+
}
105+
106+
.tabpanel {
107+
@apply bg-body rounded-b border-x border-b p-6;
108+
}
109+
110+
.tabs.is-loading .tabpanel + .tabpanel,
111+
.tabs:not(.is-loading) .tabpanel.is-hidden {
112+
display: none;
113+
}
114+
115+
.doc .tabpanel > :first-child {
116+
margin-top: 0;
117+
118+
&.olist ol,
119+
&.ulist ul {
120+
margin-top: 0;
121+
122+
& li:first-of-type {
123+
margin-top: 0;
124+
}
125+
}
126+
}
127+
128+
.doc .tabpanel > :last-child {
129+
margin-bottom: 0;
130+
131+
&.olist ol,
132+
&.ulist ul {
133+
margin-bottom: 0;
134+
135+
& li:last-of-type {
136+
margin-bottom: 0;
137+
}
138+
}
139+
}

‎src/css/components/collapse.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88

99
grid-template-rows: 0fr;
1010
transition: grid-template-rows 0.2s;
11+
12+
@media (prefers-reduced-motion: reduce) {
13+
transition-property: none;
14+
}
1115
}
1216

1317
.collapse > .collapse-content > * {

‎src/css/site.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import "vars/dark.css";
44
@import "color.css";
55
@import "base.css";
6+
@import "utilities.css";
67
@import "typography.css";
78
@import "components/btn.css";
89
@import "components/dialog.css";
@@ -18,6 +19,7 @@
1819
@import "asciidoc/ds-layout.css";
1920
@import "asciidoc/source-block.css";
2021
@import "asciidoc/admonition-block.css";
22+
@import "asciidoc/tabs.css";
2123
@import "highlight.css";
2224
@import "print.css";
2325
@import "docsearch.css";

‎src/css/utilities.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@layer utilities {
2+
.no-scrollbar::-webkit-scrollbar {
3+
display: none;
4+
}
5+
6+
.no-scrollbar {
7+
-ms-overflow-style: none; /* IE and Edge */
8+
scrollbar-width: none; /* Firefox */
9+
}
10+
}

‎src/css/vendor/tabs.css‎

Lines changed: 0 additions & 74 deletions
This file was deleted.

‎src/js/08-tab-scroll-buttons.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
;(function () {
2+
'use strict'
3+
4+
document.querySelectorAll('.tabs').forEach((block) => {
5+
const tablist = block.querySelector('.tablist')
6+
const ulist = tablist.querySelector('.tablist > ul')
7+
8+
// Create scroll buttons
9+
const scrollLeftButton = document.createElement('button')
10+
scrollLeftButton.className = 'scroll-btn-left'
11+
const leftIcon = document.createElement('i')
12+
leftIcon.className = 'material-icons'
13+
leftIcon.textContent = 'chevron_left'
14+
scrollLeftButton.appendChild(leftIcon)
15+
tablist.appendChild(scrollLeftButton)
16+
17+
const scrollRightButton = document.createElement('button')
18+
scrollRightButton.className = 'scroll-btn-right'
19+
const rightIcon = document.createElement('i')
20+
rightIcon.className = 'material-icons'
21+
rightIcon.textContent = 'chevron_right'
22+
scrollRightButton.appendChild(rightIcon)
23+
tablist.appendChild(scrollRightButton)
24+
25+
// Function to check scroll and show/hide buttons
26+
const checkScroll = () => {
27+
scrollLeftButton.classList.toggle('active', ulist.scrollLeft > 0)
28+
scrollRightButton.classList.toggle('active', ulist.scrollWidth > (ulist.clientWidth + ulist.scrollLeft + 1))
29+
}
30+
31+
// Check scroll initially
32+
checkScroll()
33+
34+
// Check scroll whenever the tablist is resized
35+
// eslint-disable-next-line no-undef
36+
const resizeObserver = new ResizeObserver(checkScroll)
37+
resizeObserver.observe(ulist)
38+
39+
// Check scroll whenever the block is scrolled
40+
ulist.addEventListener('scroll', checkScroll)
41+
42+
// Scroll when buttons are clicked
43+
scrollLeftButton.addEventListener('click', () => {
44+
ulist.scrollLeft -= 200
45+
})
46+
47+
scrollRightButton.addEventListener('click', () => {
48+
ulist.scrollLeft += 200
49+
})
50+
})
51+
})()

0 commit comments

Comments
 (0)