[FIX] odoo_theme: design fixes
- change button color (in line with odoo.com) - adapt margin above h2 - change gray variable on footer (to use the same as everywhere else) - fix grey background in nav - fix opacity on icon when active in nav - add icons on mobile homepage - fix missing homepage separator in mobile - fix nav top padding on mobile (hidden by searchbar) - adjust nav's active links styles - adjust margin on version switcher - hide toctree-wrapper when show-content is in meta - fix highlighted-link on tablet screen - style toctree-wrapper (a lil bit) - hide local toc while page is loading - SCSS linting
This commit is contained in:
parent
74e7da5694
commit
fa267e5cfc
@ -79,6 +79,10 @@
|
||||
{%- set main_classes = main_classes + ['o_index'] %}
|
||||
{%- endif %}
|
||||
|
||||
{%- if 'show-content' in meta %} {# The page is an accessible toctree #}
|
||||
{%- set main_classes = main_classes + ['o_hide_toc'] %}
|
||||
{%- endif %}
|
||||
|
||||
{%- if 'code-column' in meta %} {# The page contains a 'memento' (dynamic side block) #}
|
||||
{%- set main_classes = main_classes + ['o_has_code_column'] %}
|
||||
{%- endif %}
|
||||
@ -110,7 +114,8 @@
|
||||
{%- endif %}
|
||||
</main>
|
||||
{%- if 'hide-page-toc' not in meta %}
|
||||
<aside id="o_page_toc" class="o_page_toc">
|
||||
{# Shown when the JS has properly set all the classes on the TOC elements #}
|
||||
<aside id="o_page_toc" class="o_page_toc" hidden>
|
||||
{%- include "layout_templates/page_toc.html" %}
|
||||
</aside>
|
||||
{%- endif %}
|
||||
|
@ -11,7 +11,7 @@
|
||||
<section>
|
||||
<div class="row gx-lg-5">
|
||||
<div class="col-lg-6">
|
||||
<h2>Applications</h2>
|
||||
<h2><i class="i-doc-apps d-lg-none me-2"></i>Applications</h2>
|
||||
<p class="text-muted">Master any app thanks to their end-user guides. Our wide array of functional workflows and processes are designed to help you unleash Odoo's potential.</p>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_semibold">Top Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
@ -37,7 +37,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h2>Administration</h2>
|
||||
<h2 class="border-top pt-4 pt-lg-0"><i class="i-doc-admin d-lg-none me-2"></i>Administration</h2>
|
||||
<p class="text-muted">Easily setup your first Odoo installation. From downloads to day-to-day database administration, the dedicated tutorials have got you covered.</p>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_semibold">Top Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
@ -66,7 +66,7 @@
|
||||
</div>
|
||||
<div class="row gx-lg-5">
|
||||
<div class="col-lg-6">
|
||||
<h2 class="border-top pt-4">Developer</h2>
|
||||
<h2 class="border-top pt-4"><i class="i-doc-dev d-lg-none me-2"></i>Developer</h2>
|
||||
<p class="text-muted">Learn to develop in Odoo by reading the framework references and programmer tutorials.</p>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_semibold">Top Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
@ -93,7 +93,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h2 class="border-top pt-4">Services</h2>
|
||||
<h2 class="border-top pt-4"><i class="i-doc-services d-lg-none me-2"></i>Services</h2>
|
||||
<p class="text-muted">Find out how to open a support ticket should you need to contact a Customer Service Representative.</p>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_semibold">Top Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
@ -117,7 +117,7 @@
|
||||
</div>
|
||||
<div class="row gx-lg-5">
|
||||
<div class="col-lg-6">
|
||||
<h2 class="border-top pt-4">Contributing</h2>
|
||||
<h2 class="border-top pt-4"><i class="i-doc-contribute d-lg-none me-2"></i>Contributing</h2>
|
||||
<p class="text-muted">You want to contribute to Odoo but don't know where to start? The tutorials and guidelines are there to help you make Odoo even better.</p>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_semibold">Top Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
|
@ -1,6 +1,6 @@
|
||||
<div class="o_versions row gx-2 me-3">
|
||||
<div class="col col-form-label">
|
||||
<label class="fw_bold small me-2">Version</label>
|
||||
<label class="fw_bold small ms-2">Version</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="dropdown">
|
||||
|
@ -22,6 +22,9 @@
|
||||
|
||||
// Allow to hide the TOC entry referring the title (<h1> heading)
|
||||
_flagFirstHeadingRef();
|
||||
|
||||
// Show hidden menu when the css classes have been properly specified
|
||||
this.pageToc.removeAttribute('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -173,7 +173,7 @@ $o-inverse-dark: #5b7687;
|
||||
$o-inverse-darker: #485761;
|
||||
|
||||
$color-alpha: #00A19B;
|
||||
$color-alpha-dark: #00807D;
|
||||
$color-alpha-dark: #017e84;
|
||||
$color-alpha-light: #26d1af;
|
||||
$color-alpha-lightest: #2aebc4;
|
||||
|
||||
@ -205,8 +205,6 @@ $gray-light: #d5d5d5;
|
||||
$gray: #888888;
|
||||
$gray-dark: #707070;
|
||||
$gray-darker: #282F33;
|
||||
$gray-darkest: shade-color($gray-darker, 30%);
|
||||
|
||||
|
||||
$primary: $color-alpha-dark;
|
||||
$secondary: $o-violet-dark;
|
||||
|
@ -14,15 +14,18 @@ body {
|
||||
a:not(:hover), a.o_logo {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
// This fixes the scroll position on all elements, including refs
|
||||
:target {
|
||||
&:before {
|
||||
@include o-scroll-padding()
|
||||
}
|
||||
}
|
||||
|
||||
abbr[title="Pull Request"] {
|
||||
@include o-easter-egg();
|
||||
}
|
||||
@ -37,7 +40,7 @@ body {
|
||||
// Header with logo, searchbar and switchers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
header.o_main_header{
|
||||
header.o_main_header {
|
||||
width: 100%;
|
||||
height: $o-header-mobile-height;
|
||||
position: fixed;
|
||||
@ -50,13 +53,16 @@ header.o_main_header{
|
||||
height: $o-header-height;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.o_logo_wrapper {
|
||||
padding: 0 1rem;
|
||||
|
||||
> .o_logo {
|
||||
img {
|
||||
margin-bottom: -2px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
span {
|
||||
@include font-size($font-size-base);
|
||||
color: $o-violet;
|
||||
@ -95,26 +101,34 @@ header.o_main_header{
|
||||
|
||||
|
||||
.highlight-link {
|
||||
@media only screen and (max-width: 1242px) and (min-width: 992px){
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
margin-bottom: 0;
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
|
||||
a {
|
||||
@include font-size($font-size-secondary);
|
||||
}
|
||||
}
|
||||
.navbar-toggler {
|
||||
border: none;
|
||||
|
||||
&[aria-expanded="true"] {
|
||||
.icon-bar {
|
||||
&:nth-of-type(1) {
|
||||
@include o-transform(rotate(45deg));;
|
||||
@include o-transform-origin(10%, 10%)
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
@include o-transform(rotate(-45deg));
|
||||
@include o-transform-origin(10%, 90%)
|
||||
@ -127,20 +141,25 @@ header.o_main_header{
|
||||
height: 2px;
|
||||
background-color: $gray-dark;
|
||||
@include o-transition(all, .2s);
|
||||
|
||||
&+ .icon-bar {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
&:nth-of-type(1) {
|
||||
@include o-transform(rotate(0));
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
@include o-transform(rotate(0));
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
outline:none;
|
||||
@ -161,7 +180,8 @@ header.o_main_header{
|
||||
@include media-breakpoint-up(lg) {
|
||||
max-width: 500px;
|
||||
}
|
||||
.btn{
|
||||
|
||||
.btn {
|
||||
@include o-position-absolute($top: 50%, $right: 1rem);
|
||||
@include o-transform (translateY(-50%)) ;
|
||||
padding: 0;
|
||||
@ -182,6 +202,7 @@ header.o_main_header{
|
||||
position: fixed;
|
||||
top: -100%;
|
||||
left:0;
|
||||
|
||||
&.show {
|
||||
top: $o-header-mobile-height;
|
||||
}
|
||||
@ -193,7 +214,7 @@ header.o_main_header{
|
||||
padding-left: 3rem;
|
||||
}
|
||||
@include o-transition(all, .3s);
|
||||
padding-top: 1rem;
|
||||
padding-top: 4rem;
|
||||
padding-left: 1rem;
|
||||
background-color: lighten($o-violet-dark, 70%) ;
|
||||
z-index: 10;
|
||||
@ -205,37 +226,35 @@ header.o_main_header{
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
.toctree-l1 > ul {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
.o_deepest_active_toc_entry {
|
||||
background-color: $gray-lightest;
|
||||
background-color: $gray-lighter;
|
||||
border-left: 3px solid $gray-lighter;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
> .toctree-l1 {
|
||||
|
||||
&[class*="o_menu_"] > .o_toc_entry_wrapper > i {
|
||||
opacity: .75;
|
||||
&:before {
|
||||
@include o-inline-icon($i-doc-apps, 0 1rem 0 0);
|
||||
color: $o-violet-dark;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
&[class*="o_menu_"] > .o_toc_entry_wrapper > i:before {
|
||||
@include o-inline-icon($i-doc-apps, 0 5px 0 0);
|
||||
color: $o-violet-dark;
|
||||
}
|
||||
|
||||
&.o_menu_applications > .o_toc_entry_wrapper > i:before{
|
||||
content:'#{$i-doc-apps}';
|
||||
}
|
||||
|
||||
&.o_menu_administration > .o_toc_entry_wrapper > i:before{
|
||||
content:'#{$i-doc-admin}';
|
||||
}
|
||||
|
||||
&.o_menu_developer > .o_toc_entry_wrapper > i:before{
|
||||
content:'#{$i-doc-dev}';
|
||||
}
|
||||
|
||||
&.o_menu_services > .o_toc_entry_wrapper > i:before{
|
||||
content:'#{$i-doc-services}';
|
||||
}
|
||||
|
||||
&.o_menu_contributing > .o_toc_entry_wrapper > i:before{
|
||||
content:'#{$i-doc-contribute}';
|
||||
}
|
||||
@ -244,12 +263,15 @@ header.o_main_header{
|
||||
}
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: $o-violet-darker transparent;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $o-violet-darker ;
|
||||
border-radius: 0;
|
||||
@ -262,21 +284,28 @@ header.o_main_header{
|
||||
padding-left: 1rem;
|
||||
|
||||
li {
|
||||
padding-left: .2rem;
|
||||
&.toctree_l2 {
|
||||
padding-left: .2rem;
|
||||
}
|
||||
> a.reference {
|
||||
padding-left: 1.2rem;
|
||||
padding-left: .8rem;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: .5rem 0;
|
||||
padding: .4rem 0;
|
||||
color: inherit;
|
||||
opacity: .75;
|
||||
|
||||
&.current, &:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
> .o_toc_entry_wrapper i {
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
&:not(.toctree-l1) {
|
||||
.o_toc_entry_wrapper {
|
||||
&:not(.o_page_toc_title) {
|
||||
@ -288,6 +317,7 @@ header.o_main_header{
|
||||
display: inline-block;
|
||||
margin-right: .2rem;
|
||||
@include o-transition(rotate, .3s);
|
||||
font-size: .75rem;
|
||||
font-weight: $fw_bold;
|
||||
color: inherit;
|
||||
|
||||
@ -297,19 +327,21 @@ header.o_main_header{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.o_active_toc_entry {
|
||||
&:not(.toctree-l1) > .o_toc_entry_wrapper {
|
||||
i[class^="i-"]:not(.collapsed) {
|
||||
@include o-transform(rotate(90deg));
|
||||
}
|
||||
}
|
||||
> a , > .o_toc_entry_wrapper a {
|
||||
> a , > .o_toc_entry_wrapper a, > .o_toc_entry_wrapper i {
|
||||
font-weight: $fw_bold;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> ul { //is first ul in toc
|
||||
padding-left: 0;
|
||||
}
|
||||
@ -344,11 +376,12 @@ header.o_main_header{
|
||||
|
||||
a {
|
||||
font-weight: $fw_regular;
|
||||
color: $gray-darkest;
|
||||
color: $gray-darker;
|
||||
}
|
||||
|
||||
.o_page_toc_title {
|
||||
display:none;
|
||||
|
||||
+ ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
@ -361,7 +394,6 @@ header.o_main_header{
|
||||
|
||||
#wrap {
|
||||
margin-top: $o-header-mobile-height;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -390,7 +422,6 @@ header.o_main_header{
|
||||
padding-top: 7rem;
|
||||
}
|
||||
padding-bottom: 3rem;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
left: $o-side-nav-width;
|
||||
max-width: calc(100vw - (#{$o-side-nav-width} + var(--bs-gutter-x, 1.5rem)) - #{$o-on-page-width});
|
||||
@ -416,11 +447,18 @@ header.o_main_header{
|
||||
margin: -3rem -3rem 3rem;
|
||||
padding: 2rem 3rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #00A09D;
|
||||
border-color: #00A09D;
|
||||
}
|
||||
}
|
||||
.row:first-of-type h2.border-top {
|
||||
@include media-breakpoint-up(lg) {
|
||||
border-top: 0 solid transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
@ -431,6 +469,7 @@ header.o_main_header{
|
||||
padding-bottom: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:before {
|
||||
@include o-inline-icon($i-article, 0 .2rem 0 0);
|
||||
color: $gray-light;
|
||||
@ -446,7 +485,6 @@ header.o_main_header{
|
||||
}
|
||||
|
||||
// pages with full width: Legal
|
||||
|
||||
&.o_fullwidth_page {
|
||||
.toctree-l1 > a {
|
||||
display: block;
|
||||
@ -459,11 +497,9 @@ header.o_main_header{
|
||||
}
|
||||
|
||||
// pages with column for code on the right
|
||||
|
||||
&.o_has_code_column {
|
||||
|
||||
article.doc-body {
|
||||
> *{
|
||||
> * {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@ -494,13 +530,11 @@ header.o_main_header{
|
||||
@include o-code-col();
|
||||
}
|
||||
|
||||
|
||||
|
||||
.o_git_link {
|
||||
right: calc(#{$o-codecol-width} + 2rem);
|
||||
}
|
||||
section {
|
||||
|
||||
section {
|
||||
> * {
|
||||
width: $o-halfpage-width;
|
||||
float: left;
|
||||
@ -541,13 +575,34 @@ header.o_main_header{
|
||||
}
|
||||
}
|
||||
|
||||
article.doc-body {
|
||||
position: relative;
|
||||
|
||||
// hide ugly toctree on "in between" pages (e.g.: /applications.html, /administration.html, ...)
|
||||
&.o_hide_toc {
|
||||
.toctree-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toctree-wrapper {
|
||||
> ul {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.toctree-l1 > a[href="#"] {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid $gray-darker;
|
||||
}
|
||||
|
||||
a[href="#"] {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
color: $gray-darker;
|
||||
font-weight: $fw_regular;
|
||||
}
|
||||
}
|
||||
|
||||
article.doc-body {
|
||||
position: relative;
|
||||
|
||||
.o_git_link {
|
||||
@include font-size($font-size-secondary);
|
||||
@ -559,6 +614,7 @@ header.o_main_header{
|
||||
margin-right: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.command {
|
||||
font-family: var(--bs-font-monospace);
|
||||
}
|
||||
@ -598,7 +654,7 @@ header.o_main_header{
|
||||
> h2 {
|
||||
font-family: $font-family-serif;
|
||||
color: $gray-darker;
|
||||
margin-top: 3rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: .3rem;
|
||||
border-bottom: 1px solid $gray-light;
|
||||
@ -634,14 +690,17 @@ header.o_main_header{
|
||||
}
|
||||
|
||||
.figure {
|
||||
|
||||
.caption, .caption-text {
|
||||
font-weight: $fw_semibold;
|
||||
color: $gray;
|
||||
}
|
||||
.caption, .caption-text, .legend, .legend p{
|
||||
|
||||
.caption, .caption-text, .legend, .legend p {
|
||||
font-style: italic;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&:not([class^="col"]) .legend {
|
||||
max-width: 60%;
|
||||
@ -653,9 +712,11 @@ header.o_main_header{
|
||||
text-decoration: none;
|
||||
font-size: 0;
|
||||
visibility: hidden !important;
|
||||
|
||||
&:before {
|
||||
content: "\a0";
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '#{$i-link}';
|
||||
font-family: icomoon !important;
|
||||
@ -667,11 +728,13 @@ header.o_main_header{
|
||||
@include o-transition(all, .1s)
|
||||
}
|
||||
}
|
||||
*:hover > a.headerlink:after{
|
||||
|
||||
*:hover > a.headerlink:after {
|
||||
// This makes permalinks only visible on hover.
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
table.table {
|
||||
@include media-breakpoint-down(lg){
|
||||
display: block;
|
||||
@ -680,10 +743,8 @@ header.o_main_header{
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
div[class^="highlight"] {
|
||||
@ -691,7 +752,6 @@ header.o_main_header{
|
||||
overflow-x: auto;
|
||||
border: 1px solid $gray-light;
|
||||
margin: 1px 0 24px 0;
|
||||
/* max-width: 90vw; */
|
||||
|
||||
div[class^="highlight"] {
|
||||
padding: 0px;
|
||||
@ -706,7 +766,7 @@ header.o_main_header{
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
// fixes on pages
|
||||
|
||||
.guilabel, .menuselection {
|
||||
font-weight: $fw_semibold;
|
||||
}
|
||||
@ -750,19 +810,7 @@ header.o_main_header{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// restyle numbers on lists
|
||||
ol {
|
||||
/* list-style: none;
|
||||
counter-reset: a;
|
||||
> li {
|
||||
position: relative;
|
||||
counter-increment: a;
|
||||
&:before {
|
||||
content: counter(a) '.';
|
||||
font-weight: $fw_semibold;
|
||||
@include o-position-absolute(auto, auto, auto, -1.8rem);
|
||||
}
|
||||
} */
|
||||
ol {
|
||||
list-style: lower-alpha;
|
||||
> li:before {
|
||||
@ -791,7 +839,7 @@ header.o_main_header{
|
||||
background-color: $white !important;
|
||||
}
|
||||
|
||||
> p , > ul{
|
||||
> p , > ul {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
> *:last-child {
|
||||
@ -836,8 +884,6 @@ header.o_main_header{
|
||||
content: '#{$i-note}';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&.alert-tip, &.tip {
|
||||
@ -896,7 +942,8 @@ header.o_main_header{
|
||||
@include media-breakpoint-up(lg){
|
||||
display: inline-block;
|
||||
width: calc(50% - 1rem);
|
||||
}s
|
||||
}
|
||||
|
||||
a {
|
||||
color: $o-violet-dark;
|
||||
}
|
||||
@ -919,7 +966,7 @@ footer {
|
||||
.o_get_help {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
background: $gray-100;
|
||||
background: $gray-lighter;
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-left: calc(#{$o-side-nav-width} + 3rem)
|
||||
}
|
||||
@ -932,4 +979,4 @@ footer {
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user