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 //------------------------------------------------------------------------------