NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] documentation: content tabs design

Browse Source 
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>
This commit is contained in:
Carlos Valverde 2022-03-01 15:10:16 +00:00
parent b83df4f6d2
commit 7250f88b8d
2 changed files with 94 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
conf.py
View File

@ -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 ===#

93
extensions/odoo_theme/static/style.scss
View File

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