From 426c64bb57e37bbd8c72dc16395b4e6f308f4144 Mon Sep 17 00:00:00 2001
From: c0ffeeca7 <38767475+c0ffeeca7@users.noreply.github.com>
Date: Wed, 17 May 2023 13:06:24 +0200
Subject: [PATCH] Installation: Add CSS for tabbed-content (#27407)

---
 source/_styles/custom/tabbed-block.css | 44 ++++++++++++++++++++++++++
 source/_styles/main.css                |  1 +
 2 files changed, 45 insertions(+)
 create mode 100644 source/_styles/custom/tabbed-block.css

diff --git a/source/_styles/custom/tabbed-block.css b/source/_styles/custom/tabbed-block.css
new file mode 100644
index 00000000000..a2f3511ec4f
--- /dev/null
+++ b/source/_styles/custom/tabbed-block.css
@@ -0,0 +1,44 @@
+.tabbed-content-block {
+  background-color: #FAFAFA;
+  margin: 16px 0;
+  overflow: hidden;
+  border-radius: 10px;
+  box-shadow: -1px 0px 0px 0px #dfdfdf, 0px 0px 0px 1px #dfdfdf;
+  box-sizing: border-box;
+}
+.tabbed-content-block .tabbed-content-block-tabs {
+  overflow: hidden;
+  padding: 0 8px;
+}
+.tabbed-content-block .tabbed-content-block-tabs label input {
+  display: none;
+}
+.tabbed-content-block .tabbed-content-block-tabs label input:checked + div {
+  opacity: 1;
+  border-bottom: 2px solid --primary-color;
+}
+.tabbed-content-block .tabbed-content-block-tabs label div {
+  float: left;
+  padding: 8px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: 0.3s;
+  border-bottom: 2px solid transparent;
+  font-size: 0.8em;
+}
+.tabbed-content-block .tabbed-content-block-tabs label div:hover {
+  opacity: 1;
+}
+.tabbed-content-block .tabbed-content-block-content {
+  padding: 8px 16px 0;
+  display: none;
+  animation: fadeEffect 0.5s;
+}
+@keyframes fadeEffect {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/source/_styles/main.css b/source/_styles/main.css
index 20914e603c6..bc72f715c56 100644
--- a/source/_styles/main.css
+++ b/source/_styles/main.css
@@ -11,6 +11,7 @@
 @import "./custom/topic.css";
 @import "./custom/integrations.css";
 @import "./custom/getting-started.css";
+@import "./custom/tabbed-block.css";
 
 @import 'home.css';
 @import 'post.css';