From 7250f88b8d6cc7f1aec9946406447f888fd576a7 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#1641

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 d743bb9ee..18b7ef095 100644
--- a/conf.py
+++ b/conf.py
@@ -180,7 +180,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
 //------------------------------------------------------------------------------