
Prior to this commit, the Odoo documentation was mainly split between two repositories: odoo/odoo/doc and odoo/documentation-user. Some bits of documentation were also hosted elsewhere (e.g., wiki, upgrade, ...). This was causing several problems among which: - The theme, config, Makefile, and similar technical resources had to be duplicated. This resulted in inconsistent layout, features, and build environments from one documentation to another. - Some pages did not fit either documentation as they were relevant for both users and developers. Some were relevant to neither of the two (e.g., DB management). - Cross-doc references had to be absolute links and they broke often. - Merging large image files in the developer documentation would bloat the odoo/odoo repository. Some contributions had to be lightened to avoid merging too many images (e.g., Odoo development tutorials). - Long-time contributors to the user documentation were chilly about going through the merging process of the developer documentation because of the runbot, mergebot, `odoo-dev` repository, etc. - Some contributors would look for the developer documentation in the `odoo/documentation-user` repository. - Community issues about the user documentation were submitted on the `odoo/odoo` repository and vice-versa. Merging all documentations in one repository will allow us to have one place, one theme, one work process, and one set of tools (build environment, ...) for all of the Odoo docs. As this is a good opportunity to revamp the layout of the documentation, a brand new theme replaces the old one. It features a new way to navigate the documentation, centered on the idea of always letting the reader know what is the context (enclosing section, child pages, page structure ...) of the page they are reading. The previous theme would quickly confuse readers as they navigated the documentation and followed cross-application links. The chance is also taken to get rid of all the technical dangling parts, performance issues, and left-overs. Except for some page-specific JS scripts, the Odoo theme Sphinx extension is re-written from scratch based on the latest Sphinx release to benefit from the improvements and ease future contributions. task-2351938 task-2352371 task-2205684 task-2352544 Closes #945
236 lines
5.4 KiB
SCSS
236 lines
5.4 KiB
SCSS
// The dropdown wrapper (`<div>`)
|
|
.dropup,
|
|
.dropend,
|
|
.dropdown,
|
|
.dropstart {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown-toggle {
|
|
white-space: nowrap;
|
|
|
|
// Generate the caret automatically
|
|
@include caret();
|
|
}
|
|
|
|
// The dropdown menu
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
z-index: $zindex-dropdown;
|
|
display: none; // none by default, but block on "open" of the menu
|
|
min-width: $dropdown-min-width;
|
|
padding: $dropdown-padding-y $dropdown-padding-x;
|
|
margin: $dropdown-spacer 0 0; // override default ul
|
|
@include font-size($dropdown-font-size);
|
|
color: $dropdown-color;
|
|
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
|
list-style: none;
|
|
background-color: $dropdown-bg;
|
|
background-clip: padding-box;
|
|
border: $dropdown-border-width solid $dropdown-border-color;
|
|
@include border-radius($dropdown-border-radius);
|
|
@include box-shadow($dropdown-box-shadow);
|
|
|
|
// Reset positioning when positioned with Popper
|
|
&[style] {
|
|
right: auto !important; // stylelint-disable-line declaration-no-important
|
|
}
|
|
}
|
|
|
|
// scss-docs-start responsive-breakpoints
|
|
// We deliberately hardcode the `bs-` prefix because we check
|
|
// this custom property in JS to determine Popper's positioning
|
|
|
|
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
@include media-breakpoint-up($breakpoint) {
|
|
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
|
|
.dropdown-menu#{$infix}-start {
|
|
--bs-position: start;
|
|
right: auto #{"/* rtl:ignore */"};
|
|
left: 0 #{"/* rtl:ignore */"};
|
|
}
|
|
|
|
.dropdown-menu#{$infix}-end {
|
|
--bs-position: end;
|
|
right: 0 #{"/* rtl:ignore */"};
|
|
left: auto #{"/* rtl:ignore */"};
|
|
}
|
|
}
|
|
}
|
|
// scss-docs-end responsive-breakpoints
|
|
|
|
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
|
// Just add .dropup after the standard .dropdown class and you're set.
|
|
.dropup {
|
|
.dropdown-menu {
|
|
top: auto;
|
|
bottom: 100%;
|
|
margin-top: 0;
|
|
margin-bottom: $dropdown-spacer;
|
|
}
|
|
|
|
.dropdown-toggle {
|
|
@include caret(up);
|
|
}
|
|
}
|
|
|
|
.dropend {
|
|
.dropdown-menu {
|
|
top: 0;
|
|
right: auto;
|
|
left: 100%;
|
|
margin-top: 0;
|
|
margin-left: $dropdown-spacer;
|
|
}
|
|
|
|
.dropdown-toggle {
|
|
@include caret(end);
|
|
&::after {
|
|
vertical-align: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropstart {
|
|
.dropdown-menu {
|
|
top: 0;
|
|
right: 100%;
|
|
left: auto;
|
|
margin-top: 0;
|
|
margin-right: $dropdown-spacer;
|
|
}
|
|
|
|
.dropdown-toggle {
|
|
@include caret(start);
|
|
&::before {
|
|
vertical-align: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Dividers (basically an `<hr>`) within the dropdown
|
|
.dropdown-divider {
|
|
height: 0;
|
|
margin: $dropdown-divider-margin-y 0;
|
|
overflow: hidden;
|
|
border-top: 1px solid $dropdown-divider-bg;
|
|
}
|
|
|
|
// Links, buttons, and more within the dropdown menu
|
|
//
|
|
// `<button>`-specific styles are denoted with `// For <button>s`
|
|
.dropdown-item {
|
|
display: block;
|
|
width: 100%; // For `<button>`s
|
|
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
|
clear: both;
|
|
font-weight: $font-weight-normal;
|
|
color: $dropdown-link-color;
|
|
text-align: inherit; // For `<button>`s
|
|
text-decoration: if($link-decoration == none, null, none);
|
|
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
|
background-color: transparent; // For `<button>`s
|
|
border: 0; // For `<button>`s
|
|
|
|
// Prevent dropdown overflow if there's no padding
|
|
// See https://github.com/twbs/bootstrap/pull/27703
|
|
@if $dropdown-padding-y == 0 {
|
|
&:first-child {
|
|
@include border-top-radius($dropdown-inner-border-radius);
|
|
}
|
|
|
|
&:last-child {
|
|
@include border-bottom-radius($dropdown-inner-border-radius);
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $dropdown-link-hover-color;
|
|
text-decoration: if($link-hover-decoration == underline, none, null);
|
|
@include gradient-bg($dropdown-link-hover-bg);
|
|
}
|
|
|
|
&.active,
|
|
&:active {
|
|
color: $dropdown-link-active-color;
|
|
text-decoration: none;
|
|
@include gradient-bg($dropdown-link-active-bg);
|
|
}
|
|
|
|
&.disabled,
|
|
&:disabled {
|
|
color: $dropdown-link-disabled-color;
|
|
pointer-events: none;
|
|
background-color: transparent;
|
|
// Remove CSS gradients if they're enabled
|
|
background-image: if($enable-gradients, none, null);
|
|
}
|
|
}
|
|
|
|
.dropdown-menu.show {
|
|
display: block;
|
|
}
|
|
|
|
// Dropdown section headers
|
|
.dropdown-header {
|
|
display: block;
|
|
padding: $dropdown-header-padding;
|
|
margin-bottom: 0; // for use with heading elements
|
|
@include font-size($font-size-sm);
|
|
color: $dropdown-header-color;
|
|
white-space: nowrap; // as with > li > a
|
|
}
|
|
|
|
// Dropdown text
|
|
.dropdown-item-text {
|
|
display: block;
|
|
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
|
color: $dropdown-link-color;
|
|
}
|
|
|
|
// Dark dropdowns
|
|
.dropdown-menu-dark {
|
|
color: $dropdown-dark-color;
|
|
background-color: $dropdown-dark-bg;
|
|
border-color: $dropdown-dark-border-color;
|
|
@include box-shadow($dropdown-dark-box-shadow);
|
|
|
|
.dropdown-item {
|
|
color: $dropdown-dark-link-color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $dropdown-dark-link-hover-color;
|
|
@include gradient-bg($dropdown-dark-link-hover-bg);
|
|
}
|
|
|
|
&.active,
|
|
&:active {
|
|
color: $dropdown-dark-link-active-color;
|
|
@include gradient-bg($dropdown-dark-link-active-bg);
|
|
}
|
|
|
|
&.disabled,
|
|
&:disabled {
|
|
color: $dropdown-dark-link-disabled-color;
|
|
}
|
|
}
|
|
|
|
.dropdown-divider {
|
|
border-color: $dropdown-dark-divider-bg;
|
|
}
|
|
|
|
.dropdown-item-text {
|
|
color: $dropdown-dark-link-color;
|
|
}
|
|
|
|
.dropdown-header {
|
|
color: $dropdown-dark-header-color;
|
|
}
|
|
}
|