From 54fc47e601c1fabfc0e0ef7067b9e05df101e4a6 Mon Sep 17 00:00:00 2001
From: Daniel-I-Am <djdecloet@gmail.com>
Date: Tue, 14 Jun 2022 18:40:35 +0200
Subject: [PATCH] Fix tabbed styling

---
 assets/sass/_tabbed.scss          | 36 +++++++++++++++++++++++++++++++
 assets/sass/app.scss              |  3 ++-
 layouts/shortcodes/codegroup.html |  4 ++--
 3 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 assets/sass/_tabbed.scss

diff --git a/assets/sass/_tabbed.scss b/assets/sass/_tabbed.scss
new file mode 100644
index 0000000..7aba840
--- /dev/null
+++ b/assets/sass/_tabbed.scss
@@ -0,0 +1,36 @@
+.tabbed {
+    background-color: rgba(black, 0.25);
+    border-radius: 1rem;
+    padding: 1rem;
+
+    .tab-header {
+        display: flex;
+        flex-direction: row;
+
+        div {
+            user-select: none;
+            cursor: pointer;
+
+            padding: 0 0.25rem;
+            margin: 0 0.25rem;
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &.active {
+                border-bottom: 1px solid $accent-color;
+            }
+        }
+    }
+
+    .tab-content {
+        &>div {
+            .highlight {
+                pre {
+                    background-color: transparent !important;
+                }
+            }
+        }
+    }
+}
diff --git a/assets/sass/app.scss b/assets/sass/app.scss
index 0b38da1..24ee75e 100644
--- a/assets/sass/app.scss
+++ b/assets/sass/app.scss
@@ -17,6 +17,7 @@
 // Component-specific styling
 @import "compact-list";
 @import "pagination";
-@import "list";
+@import "tabbed";
 @import "code";
 @import "copy";
+@import "list";
diff --git a/layouts/shortcodes/codegroup.html b/layouts/shortcodes/codegroup.html
index 966170d..2764b92 100644
--- a/layouts/shortcodes/codegroup.html
+++ b/layouts/shortcodes/codegroup.html
@@ -4,9 +4,9 @@
         {{ $lines := split . "\n" }}
         {{ $title := index $lines 1}}
 
-        <span role="button" data-tab-index="{{ $index }}">
+        <div role="button" data-tab-index="{{ $index }}" tabindex="0">
             {{ $title }}
-        </span>
+        </div>
 
         {{ end }}
     </div>