From 9c56734a3afa0b675a43c645881f3ccf76e6414b Mon Sep 17 00:00:00 2001
From: Carlos Valverde <cvs@odoo.com>
Date: Tue, 1 Mar 2022 15:10:16 +0000
Subject: [PATCH] [IMP] documentation: content tabs design

This commit improves current css style added by default to the Odoo
Documentation's content tabs.

This design improvement has been made by following the current theme's
style, especially in terms of palette and borders.

Tabs are responsive and have been optimised in order to have a
cross-browser compatibility.

--
Task-2755240

closes odoo/documentation#1666

X-original-commit: 7250f88b8d6cc7f1aec9946406447f888fd576a7
Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
---
 conf.py                                 |  2 +-
 extensions/odoo_theme/static/style.scss | 93 +++++++++++++++++++++++++
 2 files changed, 94 insertions(+), 1 deletion(-)

diff --git a/conf.py b/conf.py
index 31568edd8..ca94dfe11 100644
--- a/conf.py
+++ b/conf.py
@@ -185,7 +185,7 @@ languages_names = {
 redirects_file = 'redirects.txt'
 
 sphinx_tabs_disable_tab_closing = True
-sphinx_tabs_disable_css_loading = False
+sphinx_tabs_disable_css_loading = True
 
 #=== Options for HTML output ===#
 
diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss
index a1538bfb8..e3492b5bf 100644
--- a/extensions/odoo_theme/static/style.scss
+++ b/extensions/odoo_theme/static/style.scss
@@ -997,6 +997,99 @@ header.o_main_header {
         }
     }
 }
+//------------------------------------------------------------------------------
+// Content Tabs
+//------------------------------------------------------------------------------
+
+@mixin o-content-tab-selected {
+    font-weight: 700;
+    background: $doc-paper;
+    border-bottom: 1px solid $doc-paper;
+    border-left: 1px solid $gray-light;
+    border-right: 1px solid $gray-light;
+}
+
+.sphinx-tabs {
+    padding: 0;
+    margin-bottom: 1rem;
+
+    div[role="tablist"] {
+        border-color: $gray-light;
+        display: inline-flex;
+        width: 100%;
+    }
+
+    *:focus-visible {
+        outline: none;
+    }
+
+    button {
+        display: inline;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .sphinx-tabs-tab {
+        background: $gray-lightest;
+        color: $gray-900;
+        border: 0;
+        border-top: solid 1px $gray-light;
+        padding: .5rem 1rem;
+
+        &:hover {
+            &:not([aria-selected="true"]) {
+                cursor: pointer;
+                background: hsl(317deg, 16%, 90%);
+                color: #7A436B;
+                transition: color .15s, background .15s;
+                border-radius: 0;
+            }
+        }
+
+        &:first-of-type {
+            border-left: solid 1px $gray-light;
+            margin-left: -1px;
+        }
+
+        &:last-of-type {
+            border-right: solid 1px $gray-light;
+            margin-right: -1px;
+        }
+
+        &:focus {
+            z-index: unset;
+        }
+
+        &[aria-selected="true"] {
+            @include o-content-tab-selected();
+            margin-top: 0;
+            margin-bottom: -1px;
+
+            &:hover {
+                cursor: unset;
+            }
+
+            &:first-of-type {
+                @include o-content-tab-selected();
+            }
+        }
+    }
+
+    .sphinx-tabs-panel {
+        background: $doc-paper;
+        color: $gray-900;
+        border: 1px solid $gray-light;
+        padding: 1rem;
+        margin: 0 -1px -1px -1px;
+
+        &:focus {
+            outline: none;
+        }
+    }
+}
+
 //------------------------------------------------------------------------------
 // Footer
 //------------------------------------------------------------------------------