From 20a7d0ddbfcbc7eaab6f3ad47db0483d39b36107 Mon Sep 17 00:00:00 2001
From: machiav3lli <antonios.hazim@tutanota.com>
Date: Thu, 17 Aug 2023 09:55:14 +0000
Subject: [PATCH] Add: Tabs shortcode (inspired by https://rayramble.com/blog/test-tab-group/)
---
assets/sass/_components.sass | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 56 insertions(+), 0 deletions(-)
diff --git a/assets/sass/_components.sass b/assets/sass/_components.sass
index bdcb13e..ffa7d4f 100644
--- a/assets/sass/_components.sass
+++ b/assets/sass/_components.sass
@@ -321,3 +321,59 @@
background-size: 12%
background-position: 50% 50%
background-repeat: no-repeat
+
+.tabs
+ display: flex
+ flex-wrap: wrap
+ margin: 2rem 0 2rem 0
+ position: relative
+
+ &.tabs-left
+ justify-content: flex-start
+
+ label.tab-label
+ margin-right: 0.5rem
+
+ .tab-content
+ border-radius: 0px 6px 6px 6px
+
+ &.tabs-right
+ justify-content: flex-end
+
+ label.tab-label
+ margin-left: 0.5rem
+
+ .tab-content
+ border-radius: 6px 6px 6px 6px
+
+ input.tab-input
+ display: none
+
+ label.tab-label
+ background-color: var(--accent) transparent
+ border-color: var(--theme)
+ border-radius: 6px 6px 0px 0px
+ border-style: solid
+ border-bottom-style: hidden
+ border-width: 2px
+ cursor: pointer
+ display: inline-block
+ order: 1
+ padding: 0.3rem 0.6rem
+ position: relative
+ top: 2px
+ user-select: none
+
+ input.tab-input:checked + label.tab-label
+ background-color: var(--accent)
+ border-color: var(--theme)
+
+ .tab-content
+ background-color: var(--accent)
+ border-color: var(--theme)
+ border-style: solid
+ border-width: 2px
+ display: none
+ order: 2
+ padding: 1rem
+ width: 100%
--
Gitblit v1.10.0