From 0e6dbae541551df3547fcdbdc29da9df28f5a40d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20M=C3=BCller?= Date: Thu, 7 Nov 2024 20:49:22 +0100 Subject: [PATCH 1/7] =?UTF-8?q?=E2=9E=95=20Add=20tab=20component=20(wip)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/pages/components/tab.md | 29 +++++++++++++++++++++++++++++ src/_components.css | 2 +- src/components/_tab.css | 10 ++++++++++ 3 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 docs/pages/components/tab.md create mode 100644 src/components/_tab.css diff --git a/docs/pages/components/tab.md b/docs/pages/components/tab.md new file mode 100644 index 0000000..6098566 --- /dev/null +++ b/docs/pages/components/tab.md @@ -0,0 +1,29 @@ +--- +title: 'Components: Tab - Sloth.css' +description: Navigation for quickly switching between content sections +tags: variants accent neutral success alert size outline pill +--- + +## Tab + +A tab navigation lets users quickly switch between content sections. + +### Colors + +Use the `tag` class to created a neutral label element. In addition, you can use `accent`, `success` and `alert` classes for the corresponding colors. + +
+ +
+ Lorem ipsum +
+
+ +```html +``` diff --git a/src/_components.css b/src/_components.css index 4510454..4526e4a 100644 --- a/src/_components.css +++ b/src/_components.css @@ -10,7 +10,7 @@ @import 'components/_separator.css'; @import 'components/_sequence.css'; @import 'components/_state.css'; -/* @import 'components/_tab.css'; */ +@import 'components/_tab.css'; @import 'components/_tag.css'; @import 'components/_toast.css'; @import 'components/_tooltip.css'; diff --git a/src/components/_tab.css b/src/components/_tab.css new file mode 100644 index 0000000..ef11456 --- /dev/null +++ b/src/components/_tab.css @@ -0,0 +1,10 @@ +.tab-group { + background-color: var(--color-bg-base); + align-items: center; + display: flex; + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); + border: 1px solid var(--color-neutral); + gap: .25rem; + padding: .125rem; +} From 96ed46975f6694319e0b5aa968c08e3d9c75520c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20M=C3=BCller?= Date: Fri, 8 Nov 2024 20:06:44 +0100 Subject: [PATCH 2/7] =?UTF-8?q?=F0=9F=92=9A=20Tab=20styling=20(wip)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/pages/components/tab.md | 3 ++- src/components/_tab.css | 44 ++++++++++++++++++++++++++++++++---- 2 files changed, 41 insertions(+), 6 deletions(-) diff --git a/docs/pages/components/tab.md b/docs/pages/components/tab.md index 6098566..8de4158 100644 --- a/docs/pages/components/tab.md +++ b/docs/pages/components/tab.md @@ -21,7 +21,8 @@ Use the `tag` class to created a neutral label element. In addition, you can use
- Lorem ipsum +

Sales numbers

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at. In eu iaculis lorem. In vehicula sed mauris et suscipit. Vivamus pellentesque non massa sit amet ornare. Integer placerat est vitae nisl molestie, eget rhoncus erat vulputate. Proin ornare massa eget bibendum faucibus.

diff --git a/src/components/_tab.css b/src/components/_tab.css index ef11456..c62b6a5 100644 --- a/src/components/_tab.css +++ b/src/components/_tab.css @@ -1,10 +1,44 @@ .tab-group { background-color: var(--color-bg-base); - align-items: center; - display: flex; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); - border: 1px solid var(--color-neutral); - gap: .25rem; - padding: .125rem; + padding: .5rem .5rem 0 .5rem; + + & > ol { + gap: .5rem; + align-items: center; + display: flex; + list-style-type: none; + padding: 0; + margin: 0; + + & > li { + padding: .5rem .75rem; + cursor: default; + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); + border-top: 2px solid transparent; + opacity: .75; + transition: var(--transition-color), var(--transition-opacity); + + &:not(.active) { + cursor: pointer; + + &:hover { + opacity: 1; + border-top-color: var(--color-neutral); + } + } + + &.active { + opacity: 1; + border-top-color: var(--color-accent); + background-color: var(--color-bg-page); + } + } + } +} + +.tab-panel { + padding: 1rem .5rem 0 .5rem; } From f0c9e2b1cfc0e84226da6903776f015f68456de2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20M=C3=BCller?= Date: Fri, 8 Nov 2024 23:32:18 +0100 Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=93=9C=20Update=20tab=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/pages/components/tab.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/pages/components/tab.md b/docs/pages/components/tab.md index 8de4158..3982b3e 100644 --- a/docs/pages/components/tab.md +++ b/docs/pages/components/tab.md @@ -8,9 +8,9 @@ tags: variants accent neutral success alert size outline pill A tab navigation lets users quickly switch between content sections. -### Colors +### Position -Use the `tag` class to created a neutral label element. In addition, you can use `accent`, `success` and `alert` classes for the corresponding colors. +Use the `tab-group` class containing an ordered list for the tab bar and the `tab-panel` class on the actual section content. The `disabled` calls can be used to style a tab inactive.
-
+

Sales numbers

...

@@ -61,3 +67,31 @@ Use the `tab-group` class containing an ordered list for the tab bar and the `ta ``` ### Badge + +The `badge` class can be used to show [badges](/components/badge) on tab list elements. + +
+
+ +
+
+ +```html +
+ +
+``` + +### Position diff --git a/src/components/_tab.css b/src/components/_tab.css index e874bea..b202486 100644 --- a/src/components/_tab.css +++ b/src/components/_tab.css @@ -3,10 +3,10 @@ background-color: var(--color-bg-base); border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); - padding: .5rem .5rem 0 .5rem; + padding: .75rem .75rem 0 .75rem; & > ol { - gap: .5rem; + gap: .75rem; align-items: center; display: flex; list-style-type: none; @@ -23,7 +23,7 @@ transition: var(--transition-color), var(--transition-opacity); user-select: none; - &:not(.active) { + &:not(.active):not(.disabled) { cursor: pointer; &:hover { @@ -37,12 +37,21 @@ border-top-color: var(--color-accent); background-color: var(--color-bg-page); } + + &.disabled { + opacity: .4; + cursor: not-allowed; + } } } } & > section { display: none; - padding: 1rem .5rem 0 .5rem; + padding: 1rem .75rem 0 .75rem; + + &.active { + display: block; + } } } From 9379a505d0bb08b6da638425f6bd2080aa335a57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20M=C3=BCller?= Date: Sat, 9 Nov 2024 21:54:47 +0100 Subject: [PATCH 6/7] =?UTF-8?q?=E2=9E=95=20Add=20tab=20position?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/assets/scripts/docs.js | 2 +- docs/pages/components/tab.md | 157 ++++++++++++++++++++++++++++++----- src/components/_tab.css | 120 +++++++++++++++++++++++++- 3 files changed, 254 insertions(+), 25 deletions(-) diff --git a/docs/assets/scripts/docs.js b/docs/assets/scripts/docs.js index eae1b74..57ce7d2 100644 --- a/docs/assets/scripts/docs.js +++ b/docs/assets/scripts/docs.js @@ -88,7 +88,7 @@ const colorToast = (col) => { // Component: Tab const tabList = document.querySelector('#tab-demo > nav > ol'); -const tabPanels = document.querySelectorAll('#tab-demo > section'); +const tabPanels = document.querySelectorAll('#tab-demo > section > div'); const tabs = tabList ? [...tabList.querySelectorAll('li')].filter(t => !t.classList.contains('disabled')) : []; diff --git a/docs/pages/components/tab.md b/docs/pages/components/tab.md index a77695d..4f7f2a1 100644 --- a/docs/pages/components/tab.md +++ b/docs/pages/components/tab.md @@ -1,12 +1,12 @@ --- title: 'Components: Tab - Sloth.css' -description: Navigation for quickly switching between content sections +description: Navigation for quickly switching between content divs tags: variants accent neutral success alert size outline pill --- ## Tab -A tab navigation lets users quickly switch between content sections. +A tab navigation lets users quickly switch between content divs.

Sloth.css is a CSS only library and does not ship any JavaScript. To handle appearance, and manual or autmatic closing of toast messages, you'll need to implement that with JavaScript. @@ -14,7 +14,7 @@ A tab navigation lets users quickly switch between content sections. ### Basic tab navigation -Use the `tab-group` class on a parent element containing a `