From 7250f88b8d6cc7f1aec9946406447f888fd576a7 Mon Sep 17 00:00:00 2001 From: Carlos Valverde 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) --- 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 //------------------------------------------------------------------------------