[MERGE] odoo_theme: SCSS code clean up
In order to reduce the size of our css files: Some unused or repeated code was found and removed. Variables have been cleaned up, the way the admonitions (alerts) were created has been modified, Expanding the use of BS variables in order to reduce repeated code and to stay consistent in the general design. Sphinx was updated which made some changes in the DOM, breaking some of the CSS: the literals for example, these have been fixed in this PR. The font sizes were breaking the typescale, this has been fixed by modifying the typescale rather than hardcoding font sizes. closes odoo/documentation#3225 Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
This commit is contained in:
Odoo's Mergebot
GitHub
commit
d6b930b7bb
@ -1,30 +0,0 @@
|
||||
<section class="o_changelog">
|
||||
<h2 class="pt-5">Changelog</h2>
|
||||
{# For each changelog display a row #}
|
||||
<div class="row pt-4">
|
||||
<div class="col-lg-1">
|
||||
<p class="small align-right">Apr 14, 2021</p>
|
||||
</div>
|
||||
<div class="col-lg-11 border-bottom">
|
||||
<h3>Addition of this article and this one</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula nibh in malesuada suscipit. Nulla est neque, euismod sed facilisis vel, mollis et sapien.</p>
|
||||
<div class="pb-4">
|
||||
<span class="badge bg-info text-uppercase">New Article</span>
|
||||
<span class="badge bg-primary text-uppercase">Administration</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-4">
|
||||
<div class="col-lg-1">
|
||||
<p class="small align-right">Apr 03, 2021</p>
|
||||
</div>
|
||||
<div class="col-lg-11 border-bottom">
|
||||
<h3>Update of this article and also the one after</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula nibh in malesuada suscipit. Nulla est neque, euismod sed facilisis vel, mollis et sapien.</p>
|
||||
<div class="pb-4">
|
||||
<span class="badge bg-success text-uppercase">Update</span>
|
||||
<span class="badge bg-primary text-uppercase">Administration</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,6 +1,6 @@
|
||||
<div class="o_get_help container-fluid d-lg-flex">
|
||||
<div class="col-12 col-lg-10">
|
||||
<h5><i class="i-o-help me-2"></i>{{ _("Get Help") }}</h5>
|
||||
<h4><i class="i-o-help me-2"></i>{{ _("Get Help") }}</h4>
|
||||
<div>
|
||||
<a href="https://odoo.com/help" target="_blank" class="btn btn-outline-secondary mb-2">{{ _("Contact Support") }}</a>
|
||||
<a href="https://www.odoo.com/forum/help-1" target="_blank" class="btn btn-outline-secondary mb-2">{{ _("Ask the Odoo Community") }}</a>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</div>
|
||||
<div class="d-flex flex-grow-1">
|
||||
{%- include "layout_templates/searchbox.html" %}
|
||||
<a class="btn btn-primary fw_semibold ms-auto d-none d-lg-inline-block" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a>
|
||||
<a class="btn btn-primary fw_bold ms-auto d-none d-lg-inline-block" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="o_subheader border-bottom d-flex">
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="col-lg-6">
|
||||
<h2><a href="{{ pathto('applications') }}">{{ _("User Docs") }}</a></h2>
|
||||
<p class="text-muted">{{ _("Discover our guide to help you use and configure the platform, by applications.") }}</p>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_semibold">{{ _("Top Apps") }}</h5>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_bold">{{ _("Top Apps") }}</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href="{{ pathto('applications/finance/accounting') }}" class="stretched-link">
|
||||
@ -34,7 +34,7 @@
|
||||
<div class="col-lg-6">
|
||||
<h2 class="border-top pt-4 pt-lg-0"><a href="{{ pathto('administration') }}">{{ _("Install and Maintain") }}</a></h2>
|
||||
<p class="text-muted">{{ _("Learn how to install, deploy and upgrade Odoo on premise or on Odoo.sh.") }}</p>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_semibold">{{ _("Top Links") }}</h5>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_bold">{{ _("Top Links") }}</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href=" {{ pathto('administration/deployment/install') }} " class="stretched-link">
|
||||
@ -63,7 +63,7 @@
|
||||
<div class="col-lg-6">
|
||||
<h2 class="border-top pt-4"><a href="{{ pathto('developer') }}">{{ _("Developer") }}</a></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>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_bold">{{ _("Top Links") }}</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href="{{ pathto('developer/howtos/rdtraining') }}" class="stretched-link">
|
||||
@ -95,7 +95,7 @@
|
||||
<div class="col-lg-6">
|
||||
<h2 class="border-top pt-4"><a href="{{ pathto('contributing') }}">{{ _("Contributing") }}</a></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>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_bold">{{ _("Top Links") }}</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href="{{ pathto('contributing/development/coding_guidelines') }}" class="stretched-link">
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="o_page_toc_nav mt-1">
|
||||
<h3>{{ _("On this page") }}</h3>
|
||||
<h5>{{ _("On this page") }}</h5>
|
||||
{{ toc }} {# this is the page TOC (or local toc) #}
|
||||
</div>
|
||||
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 267 KiB After Width: | Height: | Size: 265 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -6,18 +6,19 @@
|
||||
let imageModalId = 0;
|
||||
content.querySelectorAll('img').forEach(image => {
|
||||
// Enforce the presence of the `img-fluid` class on all images.
|
||||
image.classList.add('img-fluid');
|
||||
image.classList.add('img-fluid', 'img-thumbnail');
|
||||
|
||||
// Add a modal to each image that does not explicitly block it and has no target.
|
||||
if (!image.classList.contains('o-no-modal') && image.parentElement.tagName !== 'A') {
|
||||
const modalContainer = document.createElement('div');
|
||||
modalContainer.classList.add('o_image_modal');
|
||||
modalContainer.innerHTML = `<div class="modal fade" id="modal-${imageModalId}">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<img src="${image.src}" alt="${image.alt}" class="o-no-modal img-fluid"/>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
<img src="${image.src}" alt="${image.alt}" class="o-no-modal img-fluid img-thumbnail"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,54 +8,26 @@
|
||||
@mixin o-position-absolute($top: auto, $right: auto, $bottom: auto, $left: auto){
|
||||
position: absolute;
|
||||
top: $top;
|
||||
left: $left;
|
||||
bottom: $bottom;
|
||||
right: $right;
|
||||
}
|
||||
|
||||
@mixin o-transform-origin($x: 50%, $y: 50%, $z: 0){
|
||||
-ms-transform-origin: $x $y $z;
|
||||
-webkit-transform-origin: $x $y $z;
|
||||
-moz-transform-origin: $x $y $z;
|
||||
transform-origin: $x $y $z;
|
||||
}
|
||||
|
||||
@mixin o-transition($property: all, $duration: 0s, $timing-function: ease, $transition-delay: 0s){
|
||||
-webkit-transition: $property $duration $timing-function $transition-delay;
|
||||
-moz-transition: $property $duration $timing-function $transition-delay;
|
||||
-o-transition: $property $duration $timing-function $transition-delay;
|
||||
transition: $property $duration $timing-function $transition-delay;
|
||||
bottom: $bottom;
|
||||
left: $left;
|
||||
}
|
||||
|
||||
// Backgrounds
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
@mixin o-gradient($deg: 99deg , $startColor: $o-violet, $endColor: #62495B, $startOffset: 10%, $endOffset: 90%){
|
||||
@mixin o-gradient($deg: 99deg , $startColor: $secondary, $endColor: #62495B, $startOffset: 10%, $endOffset: 90%){
|
||||
background: mix($startColor, $endColor);
|
||||
background: -webkit-linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
|
||||
background: -moz-linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
|
||||
background: -ms-linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
|
||||
background: -o-linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
|
||||
background: linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
|
||||
}
|
||||
|
||||
@mixin o-transform($args){
|
||||
-webkit-transform : $args;
|
||||
-moz-transform : $args;
|
||||
-ms-transform : $args;
|
||||
-o-transform : $args;
|
||||
transform : $args;
|
||||
}
|
||||
|
||||
//-- add icon
|
||||
|
||||
@mixin o-inline-icon($icon-content, $margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $fw_regular) {
|
||||
content: '#{$icon-content}';
|
||||
font-family: 'icomoon' !important;
|
||||
@include font-size($font-size);
|
||||
font-weight: $font-weight;
|
||||
@mixin o-inline-icon($margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $font-weight-normal) {
|
||||
vertical-align: $v-align;
|
||||
margin: $margin;
|
||||
@include font-size($font-size);
|
||||
font-family: 'icomoon' !important;
|
||||
font-weight: $font-weight;
|
||||
}
|
||||
|
||||
//-- fix scroll issue
|
||||
@ -65,8 +37,8 @@
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding-top: calc(#{$o-headers-height} + 10px);
|
||||
margin-top: -$o-headers-height - 10px;
|
||||
padding-top: calc(#{$o-headers-height} + 10px);
|
||||
}
|
||||
|
||||
@mixin o-easter-egg($width: 100%, $height: 100%, $img: 'img/poule.svg' ){
|
||||
@ -74,28 +46,38 @@
|
||||
// Easter Egg on hover 5s
|
||||
&:after {
|
||||
content: '';
|
||||
@include o-position-absolute(auto, 0, 0, 0);
|
||||
display: block;
|
||||
width: $width;
|
||||
height: $height;
|
||||
@include o-position-absolute(auto, 0, 0, 0);
|
||||
background-image: url('#{$img}');
|
||||
background-color: $white;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
@include o-transition(all, .5s, ease-out, .5s);
|
||||
transition: all .5s ease-out 5s;
|
||||
}
|
||||
&:hover:after {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
@include o-transition(all, .5s, ease-in, 5s);
|
||||
transition: all .5s ease-in 5s;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin o-content-tab-selected {
|
||||
font-weight: $fw_bold;
|
||||
background: $doc-paper;
|
||||
border-bottom: 1px solid $doc-paper;
|
||||
border-left: 1px solid $gray-light;
|
||||
border-right: 1px solid $gray-light;
|
||||
font-weight: $font-weight-bolder;
|
||||
border-bottom: 1px solid $white;
|
||||
border-left: 1px solid $o-gray-border;
|
||||
border-right: 1px solid $o-gray-border;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
@mixin o-code {
|
||||
display: inline-block;
|
||||
overflow-wrap: anywhere;
|
||||
background: $o-literals-bg;
|
||||
font-size: 0.875rem;
|
||||
font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@ -47,6 +47,71 @@ div.related li.right {
|
||||
margin-right: 5px;
|
||||
} */
|
||||
|
||||
/* -- sidebar --------------------------------------------------------------- */
|
||||
|
||||
div.sphinxsidebarwrapper {
|
||||
padding: 10px 5px 0 10px;
|
||||
}
|
||||
|
||||
div.sphinxsidebar {
|
||||
float: left;
|
||||
width: 230px;
|
||||
margin-left: -100%;
|
||||
font-size: 90%;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap : break-word;
|
||||
}
|
||||
|
||||
div.sphinxsidebar ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
div.sphinxsidebar ul ul,
|
||||
div.sphinxsidebar ul.want-points {
|
||||
margin-left: 20px;
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
div.sphinxsidebar ul ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
div.sphinxsidebar form {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
div.sphinxsidebar input {
|
||||
border: 1px solid #98dbcc;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
div.sphinxsidebar #searchbox form.search {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.sphinxsidebar #searchbox input[type="text"] {
|
||||
float: left;
|
||||
width: 80%;
|
||||
padding: 0.25em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div.sphinxsidebar #searchbox input[type="submit"] {
|
||||
float: left;
|
||||
width: 20%;
|
||||
border-left: none;
|
||||
padding: 0.25em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* -- search page ----------------------------------------------------------- */
|
||||
|
||||
ul.search {
|
||||
@ -156,10 +221,10 @@ table.modindextable td {
|
||||
|
||||
/* -- general body styles --------------------------------------------------- */
|
||||
|
||||
/* div.body {
|
||||
min-width: {{ theme_body_min_width|todim }};
|
||||
max-width: {{ theme_body_max_width|todim }};
|
||||
} */
|
||||
div.body {
|
||||
min-width: 450px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
div.body p, div.body dd, div.body li, div.body blockquote {
|
||||
-moz-hyphens: auto;
|
||||
@ -168,6 +233,9 @@ div.body p, div.body dd, div.body li, div.body blockquote {
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
a.headerlink {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
a.brackets:before,
|
||||
span.brackets > a:before{
|
||||
@ -205,28 +273,29 @@ div.body td {
|
||||
}
|
||||
|
||||
p.rubric {
|
||||
margin-top: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
img.align-left, .figure.align-left, object.align-left {
|
||||
img.align-left, figure.align-left, .figure.align-left, object.align-left {
|
||||
clear: left;
|
||||
float: left;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
img.align-right, .figure.align-right, object.align-right {
|
||||
img.align-right, figure.align-right, .figure.align-right, object.align-right {
|
||||
clear: right;
|
||||
float: right;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
img.align-center, .figure.align-center, object.align-center {
|
||||
img.align-center, figure.align-center, .figure.align-center, object.align-center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
img.align-default, .figure.align-default {
|
||||
img.align-default, figure.align-default, .figure.align-default {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@ -250,7 +319,8 @@ img.align-default, .figure.align-default {
|
||||
|
||||
/* -- sidebars -------------------------------------------------------------- */
|
||||
|
||||
div.sidebar {
|
||||
div.sidebar,
|
||||
aside.sidebar {
|
||||
margin: 0 0 0.5em 1em;
|
||||
border: 1px solid #ddb;
|
||||
padding: 7px;
|
||||
@ -308,12 +378,14 @@ div.body p.centered {
|
||||
/* -- content of sidebars/topics/admonitions -------------------------------- */
|
||||
|
||||
/* div.sidebar > :last-child,
|
||||
aside.sidebar > :last-child,
|
||||
div.topic > :last-child,
|
||||
div.admonition > :last-child {
|
||||
margin-bottom: 0;
|
||||
} */
|
||||
|
||||
/* div.sidebar::after,
|
||||
aside.sidebar::after,
|
||||
div.topic::after,
|
||||
div.admonition::after,
|
||||
blockquote::after {
|
||||
@ -386,21 +458,23 @@ td > :last-child {
|
||||
|
||||
/* -- figures --------------------------------------------------------------- */
|
||||
|
||||
div.figure {
|
||||
div.figure, figure {
|
||||
margin: 0.5em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
/* div.figure p.caption {
|
||||
/* div.figure p.caption, figcaption {
|
||||
padding: 0.3em;
|
||||
} */
|
||||
|
||||
div.figure p.caption span.caption-number {
|
||||
div.figure p.caption span.caption-number,
|
||||
figcaption span.caption-number {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
div.figure p.caption span.caption-text {
|
||||
}
|
||||
/* div.figure p.caption span.caption-text,
|
||||
figcaption span.caption-text {
|
||||
} */
|
||||
|
||||
/* -- field list styles ----------------------------------------------------- */
|
||||
|
||||
@ -434,6 +508,63 @@ table.hlist td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* -- object description styles --------------------------------------------- */
|
||||
|
||||
.sig {
|
||||
font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
|
||||
}
|
||||
|
||||
.sig-name, code.descname {
|
||||
background-color: transparent;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sig-name {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
code.descname {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.sig-prename, code.descclassname {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.optional {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.sig-paren {
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.sig-param.n {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* C++ specific styling */
|
||||
|
||||
.sig-inline.c-texpr,
|
||||
.sig-inline.cpp-texpr {
|
||||
font-family: unset;
|
||||
}
|
||||
|
||||
.sig.c .k, .sig.c .kt,
|
||||
.sig.cpp .k, .sig.cpp .kt {
|
||||
color: #0033B3;
|
||||
}
|
||||
|
||||
.sig.c .m,
|
||||
.sig.cpp .m {
|
||||
color: #1750EB;
|
||||
}
|
||||
|
||||
.sig.c .s, .sig.c .sc,
|
||||
.sig.cpp .s, .sig.cpp .sc {
|
||||
color: #067D17;
|
||||
}
|
||||
|
||||
|
||||
/* -- other body styles ----------------------------------------------------- */
|
||||
|
||||
@ -536,11 +667,11 @@ dd ul, dd table {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
dd {
|
||||
/* dd {
|
||||
margin-top: 3px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
} */
|
||||
|
||||
dl > dd:last-child,
|
||||
dl > dd:last-child > :last-child {
|
||||
@ -560,14 +691,6 @@ dl.glossary dt {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.optional {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.sig-paren {
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.versionmodified {
|
||||
font-style: italic;
|
||||
}
|
||||
@ -608,8 +731,9 @@ dl.glossary dt {
|
||||
|
||||
.classifier:before {
|
||||
font-style: normal;
|
||||
margin: 0.5em;
|
||||
margin: 0 0.5em;
|
||||
content: ":";
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* abbr, acronym {
|
||||
@ -696,8 +820,12 @@ div.code-block-caption code {
|
||||
|
||||
table.highlighttable td.linenos,
|
||||
span.linenos,
|
||||
div.doctest > div.highlight span.gp { /* gp: Generic.Prompt */
|
||||
user-select: none;
|
||||
div.highlight span.gp { /* gp: Generic.Prompt */
|
||||
user-select: none;
|
||||
-webkit-user-select: text; /* Safari fallback only */
|
||||
-webkit-user-select: none; /* Chrome/Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE10+ */
|
||||
}
|
||||
|
||||
div.code-block-caption span.caption-number {
|
||||
@ -712,21 +840,11 @@ div.literal-block-wrapper {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
code.descname {
|
||||
code.xref, a code {
|
||||
background-color: transparent;
|
||||
font-weight: bold;
|
||||
/* font-size: 1.2em; */
|
||||
}
|
||||
|
||||
code.descclassname {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* code.xref, a code {
|
||||
background-color: transparent;
|
||||
font-weight: bold;
|
||||
} */
|
||||
|
||||
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@ -32,50 +32,12 @@ html body{
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Font weight
|
||||
// Font Styling
|
||||
//------------------------------------------------------------------------------
|
||||
b, strong{
|
||||
font-weight: $fw_bold;
|
||||
font-weight: $font-weight-bolder;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: $fw_semibold;
|
||||
}
|
||||
|
||||
.fw_extralight {
|
||||
font-weight: $fw_extralight;
|
||||
}
|
||||
|
||||
.fw_light {
|
||||
font-weight: $fw_light;
|
||||
}
|
||||
|
||||
.fw_extralight, .fw_light{
|
||||
label, b, strong, a {
|
||||
font-weight: $fw_regular;
|
||||
}
|
||||
}
|
||||
|
||||
.fw_regular {
|
||||
font-weight: $fw_regular;
|
||||
}
|
||||
|
||||
.fw_medium {
|
||||
font-weight: $fw_medium;
|
||||
}
|
||||
|
||||
.fw_semibold {
|
||||
font-weight: $fw_semibold;
|
||||
}
|
||||
|
||||
.fw_bold {
|
||||
font-weight: $fw_bold;
|
||||
}
|
||||
|
||||
.fw_extrabold {
|
||||
font-weight: $fw_extrabold;
|
||||
}
|
||||
|
||||
.fw_black {
|
||||
font-weight: $fw_black;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
16
extensions/odoo_theme/static/scss/_utilities_extended.scss
Normal file
16
extensions/odoo_theme/static/scss/_utilities_extended.scss
Normal file
@ -0,0 +1,16 @@
|
||||
// Extend Utilities
|
||||
$utilities: () !default;
|
||||
$utilities: map-merge(
|
||||
$utilities,
|
||||
(
|
||||
"font-weight": map-merge(
|
||||
map-get($utilities, "font-weight"),
|
||||
(
|
||||
values: map-merge(
|
||||
map-get(map-get($utilities, "font-weight"), "values"),
|
||||
("medium" : $o-font-weight-medium)
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
);
|
||||
@ -1,60 +1,15 @@
|
||||
$grid-breakpoint-xxl: 1400px;
|
||||
$grid-breakpoint-xxxl: 1680px;
|
||||
$o-grid-breakpoint-xxl: 1400px;
|
||||
$o-grid-breakpoint-xxxl: 1680px;
|
||||
|
||||
$container-max-width-xxl:1380px;
|
||||
$container-max-width-xxxl: 1560px;
|
||||
|
||||
// Odoo Colours
|
||||
// ==============================================
|
||||
$o-violet-dark : #875A7B;
|
||||
$o-violet-darker : #603c5e;
|
||||
|
||||
$o-inverse-lightest : #98A6B0;
|
||||
$o-inverse-light : #8B979F;
|
||||
$o-inverse : #47738F;
|
||||
$o-inverse-dark : #5B7687;
|
||||
$o-inverse-darker : #485761;
|
||||
|
||||
//== Apps' Families Colours
|
||||
$color-alpha : #00A09D;
|
||||
$color-alpha-dark : #18856F;
|
||||
$color-alpha-light : #26D1AF;
|
||||
$color-alpha-lightest : #2AEBC4;
|
||||
|
||||
$color-beta : #5B899E;
|
||||
$color-beta-dark : #3D5D6B;
|
||||
$color-beta-light : #699FB8;
|
||||
$color-beta-lightest : #77B5D1;
|
||||
|
||||
$color-gamma : #E46F78;
|
||||
$color-gamma-dark : #B0565C;
|
||||
$color-gamma-light : #FC7C84;
|
||||
$color-gamma-lightest : #FC959C;
|
||||
|
||||
$color-delta : #5C5B80;
|
||||
$color-delta-dark : #37364D;
|
||||
$color-delta-light : #6E6D99;
|
||||
$color-delta-lightest : #807FB3;
|
||||
|
||||
$color-epsilon : #D5653E;
|
||||
$color-epsilon-dark : #A34E2F;
|
||||
$color-epsilon-light : #F07346;
|
||||
$color-epsilon-lightest : #FF8D63;
|
||||
$o-container-max-width-xxl:1380px;
|
||||
$o-container-max-width-xxxl: 1560px;
|
||||
|
||||
// Typography
|
||||
// ===============================================
|
||||
$font-family-serif: 'Roboto Slab', Georgia, "Times New Roman", Times, serif;
|
||||
$o-font-family-serif: 'Roboto Slab', Georgia, "Times New Roman", Times, serif;
|
||||
|
||||
$fw_extralight: 200;
|
||||
$fw_light: 300;
|
||||
$fw_regular: 400;
|
||||
$fw_medium: 500;
|
||||
$fw_semibold: 600;
|
||||
$fw_bold: 700;
|
||||
$fw_extrabold: 800;
|
||||
$fw_black: 900;
|
||||
|
||||
$font-size-secondary: .875rem;
|
||||
// Extra font added in custom utilities
|
||||
$o-font-weight-medium: 500;
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// icomoon icons
|
||||
@ -150,67 +105,27 @@ $i-close: "\e942";
|
||||
// Colors
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
$o-violet: #875a7b;
|
||||
$o-violet-dark: #7A436B;
|
||||
$o-violet-darkest: #64305E;
|
||||
$o-gray-light : $gray-400;
|
||||
$o-gray : $gray-600;
|
||||
|
||||
$o-inverse-lightest: #98a6b0;
|
||||
$o-inverse-light: #8b979f;
|
||||
$o-inverse: #47738f;
|
||||
$o-inverse-dark: #5b7687;
|
||||
$o-inverse-darker: #485761;
|
||||
$o-gray-border: $gray-400;
|
||||
$o-gray-bg: $gray-200;
|
||||
$o-gray-color: $gray-900;
|
||||
|
||||
$color-alpha: #00A19B;
|
||||
$color-alpha-dark: #017e84;
|
||||
$color-alpha-light: #26d1af;
|
||||
$color-alpha-lightest: #2aebc4;
|
||||
$o-literals-bg: $gray-200;
|
||||
$o-literals-border: $o-literals-bg;
|
||||
|
||||
$color-beta: #5b899e;
|
||||
$color-beta-dark: #3d5d6b;
|
||||
$color-beta-light: #699fb8;
|
||||
$color-beta-lightest: #77b5d1;
|
||||
$o-toc-bg: $o-gray-bg;
|
||||
$o-toc-border: $o-toc-bg;
|
||||
|
||||
$color-gamma: #e46f78;
|
||||
$color-gamma-dark: #b0565c;
|
||||
$color-gamma-light: #fc7c84;
|
||||
$color-gamma-lightest: #fc959c;
|
||||
$o-alert-note-color: $primary;
|
||||
$o-alert-tip-color: $primary;
|
||||
$o-alert-example-color: $success;
|
||||
$o-alert-warning-color: $success;
|
||||
$o-alert-danger-color: $danger;
|
||||
$o-alert-exercises-color: $dark;
|
||||
|
||||
$color-delta: #5c5b80;
|
||||
$color-delta-dark: #37364d;
|
||||
$color-delta-light: #6e6d99;
|
||||
$color-delta-lightest: #807fb3;
|
||||
|
||||
$color-epsilon: #d5653e;
|
||||
$color-epsilon-dark: #a34e2f;
|
||||
$color-epsilon-light: #f07346;
|
||||
$color-epsilon-lightest: #ff8d63;
|
||||
|
||||
$header-link-normal: #343a40;
|
||||
|
||||
$gray-lightest: #F9F9F9;
|
||||
$gray-lighter: #F2F2F2;
|
||||
$gray-light: #d5d5d5;
|
||||
$gray: #888888;
|
||||
$gray-dark: #707070;
|
||||
$gray-darker: #282F33;
|
||||
|
||||
$primary: $color-alpha-dark;
|
||||
$secondary: $o-violet-dark;
|
||||
|
||||
$brand-primary : $o-violet;
|
||||
$brand-success : #50AF51;
|
||||
$brand-info: #4B9EB6;
|
||||
$brand-warning : #f39c1e;
|
||||
$brand-danger : #D9534F;
|
||||
|
||||
$doc_paper_dark: $gray-lighter;
|
||||
$doc_paper: #ffffff;
|
||||
$doc_example: #519161;
|
||||
$doc_exercise: #938E94;
|
||||
$doc_code-bg: #F8F8F8;
|
||||
$doc_lime: #CDDC39;
|
||||
$doc_orange: #FF5722;
|
||||
$doc_cyan: $color-alpha;
|
||||
$o-accordion-bg: $o-alert-exercises-color!default;
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Misc
|
||||
@ -219,7 +134,7 @@ $doc_cyan: $color-alpha;
|
||||
// Header
|
||||
$o-header-mobile-height: 50px;
|
||||
$o-header-height: 80px;
|
||||
$o-header-white: #ffffff;
|
||||
$o-header-bg: $white;
|
||||
|
||||
$o-subheader-height: 32px;
|
||||
|
||||
@ -234,17 +149,29 @@ $o-halfpage-width: 54%;
|
||||
$o-codecol-width: 43%;
|
||||
|
||||
// Paddings and margins
|
||||
$padding-xs: .5rem;
|
||||
$padding-s: 1rem;
|
||||
$padding-m: 2rem;
|
||||
$padding-l: 3rem;
|
||||
$margin-s: $padding-s;
|
||||
$margin-m: $padding-m;
|
||||
$margin-l: $padding-l;
|
||||
$o-padding-xs: .5rem;
|
||||
$o-padding-s: 1rem;
|
||||
$o-padding-m: 2rem;
|
||||
$o-padding-l: 3rem;
|
||||
$o-margin-s: $o-padding-s;
|
||||
$o-margin-m: $o-padding-m;
|
||||
$o-margin-l: $o-padding-l;
|
||||
|
||||
$o-icon-margin: .2em;
|
||||
//------------------------------------------------------------------------------
|
||||
// Components
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
// Accordion
|
||||
$o-accordion-bg: tint-color($doc_exercise, 90%)!default;
|
||||
// Alerts
|
||||
$o-alert-default-icon: $i-info;
|
||||
$o-alert-code-border-color: $o-gray-border;
|
||||
|
||||
$o-alert-types: (
|
||||
"primary": ("color": $primary, "icon": $i-exercise),
|
||||
"secondary": ("color": $secondary, "icon": $i-arrow-right),
|
||||
"tip": ("color": $primary, "icon": $i-lightbulb),
|
||||
"success": ("color": $success, "icon": $i-knowledge),
|
||||
"warning": ("color": $warning, "icon": $i-warning),
|
||||
"danger": ("color": $danger, "icon": $i-danger),
|
||||
"dark": ("color": $dark, "icon": $i-exercise)
|
||||
);
|
||||
|
||||
@ -3,22 +3,69 @@
|
||||
//
|
||||
/* $enable-responsive-font-sizes: true; */
|
||||
|
||||
// Colors
|
||||
$white: #FFFFFF;
|
||||
$gray-100: #F8F8F8 !default;
|
||||
$gray-200: #F2F2F2 !default;
|
||||
$gray-300: #DEE2E6 !default;
|
||||
$gray-400: #D5D5D5 !default;
|
||||
$gray-500: #ADB5BD !default;
|
||||
$gray-600: #888888 !default;
|
||||
$gray-700: #707070 !default;
|
||||
$gray-800: #343A40 !default;
|
||||
$gray-900: #282F33 !default;
|
||||
|
||||
$blue: #77b5d1;
|
||||
$purple: #714B67;
|
||||
$cyan: #0dcaf0;
|
||||
$red: #D9534F;
|
||||
$orange: #f39c1e;
|
||||
$green: #519161;
|
||||
$teal: #017e84;
|
||||
|
||||
$primary: $teal;
|
||||
$secondary: $purple;
|
||||
$light: $gray-100;
|
||||
$dark: $gray-600;
|
||||
$success: $green;
|
||||
$info: $blue;
|
||||
$warning: $orange;
|
||||
$danger: $red;
|
||||
|
||||
// Fonts
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
$font-family-base: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !default;
|
||||
$h1-font-size: 1.875rem;
|
||||
$h2-font-size: 1.5rem;
|
||||
$h3-font-size: 1.125rem;
|
||||
$h4-font-size: 1rem;
|
||||
$h5-font-size: 1rem;
|
||||
$h6-font-size: $font-size-secondary;
|
||||
$font-family-sans-serif: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !default;
|
||||
|
||||
// Change scale from Major Third to Major Second (ref: https://type-scale.com/)
|
||||
$font-size-base: 1rem;
|
||||
$h1-font-size: $font-size-base * 1.802 !default;
|
||||
$h2-font-size: $font-size-base * 1.602 !default;
|
||||
$h3-font-size: $font-size-base * 1.424 !default;
|
||||
$h4-font-size: $font-size-base * 1.266 !default;
|
||||
$h5-font-size: $font-size-base * 1.125 !default;
|
||||
$h6-font-size: $font-size-base !default;
|
||||
|
||||
|
||||
$font-weight-lighter: 200;
|
||||
$font-weight-light: 300;
|
||||
$font-weight-normal: 400;
|
||||
$font-weight-bold: 600;
|
||||
$font-weight-bolder: 700;
|
||||
|
||||
// Images
|
||||
|
||||
$thumbnail-padding: .5rem;
|
||||
|
||||
// Links
|
||||
$link-decoration: none;
|
||||
$link-hover-decoration: underline;
|
||||
|
||||
// Buttons
|
||||
// For each of Bootstrap's buttons, define text, background, and border color.
|
||||
|
||||
$btn-font-size: $font-size-secondary;
|
||||
$btn-font-weight: $fw_semibold;
|
||||
$btn-focus-box-shadow: 0 0 0 transparent;
|
||||
$btn-close-padding-x: 0;
|
||||
$btn-font-weight: 500;
|
||||
$btn-close-focus-shadow: 0 0 0 0 transparent;
|
||||
$btn-close-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="#000000"><path d="M15,16c-.27,0-.54-.11-.73-.31l-4.21-4.44c-.38-.4-.36-1.03,.04-1.41s1.03-.36,1.41,.04l3.48,3.67,3.42-3.67c.38-.4,1.01-.42,1.41-.05,.4,.38,.42,1.01,.05,1.41l-4.15,4.44c-.19,.2-.45,.32-.73,.32h0Z"/><path d="M10.79,20.44c-.25,0-.49-.09-.69-.27-.4-.38-.42-1.01-.04-1.41l4.21-4.45c.19-.2,.45-.31,.73-.31h0c.28,0,.54,.12,.73,.32l4.15,4.45c.38,.4,.35,1.04-.05,1.41-.41,.38-1.04,.35-1.41-.05l-3.42-3.67-3.48,3.67c-.2,.21-.46,.31-.73,.31Z"/><path d="M15,28.37c-7.37,0-13.37-6-13.37-13.37S7.63,1.63,15,1.63s13.37,6,13.37,13.37-6,13.37-13.37,13.37Zm0-24.74C8.73,3.63,3.63,8.73,3.63,15s5.1,11.37,11.37,11.37,11.37-5.1,11.37-11.37S21.27,3.63,15,3.63Z"/></svg>');
|
||||
$btn-close-width: 2rem;
|
||||
|
||||
@ -28,15 +75,33 @@ $dropdown-min-width: 4.5rem;
|
||||
// Modals
|
||||
$modal-backdrop-opacity: .7;
|
||||
|
||||
$modal-content-bg: transparent;
|
||||
$modal-content-border-color: transparent;
|
||||
$modal-content-border-width: 0;
|
||||
|
||||
$modal-header-padding-y: 0;
|
||||
|
||||
$modal-sm: fit-content;
|
||||
$modal-md: fit-content;
|
||||
$modal-lg: fit-content;
|
||||
$modal-xl: fit-content;
|
||||
|
||||
// Accordion
|
||||
$accordion-body-padding-y: 0 !default;
|
||||
$accordion-body-padding-x: 0 !default;
|
||||
$accordion-color: shade-color($doc_exercise, 35%) !default;
|
||||
$accordion-bg: $o-accordion-bg;
|
||||
$accordion-color: shade-color($gray-200, 60%) !default;
|
||||
$accordion-bg: $gray-200;
|
||||
|
||||
$accordion-button-color: $accordion-color !default;
|
||||
$accordion-button-active-color: $accordion-button-color !default;
|
||||
$accordion-button-bg: $accordion-bg !default;
|
||||
$accordion-button-active-bg: $accordion-button-bg !default;
|
||||
|
||||
$accordion-button-focus-box-shadow: transparent;
|
||||
$accordion-icon-transform: rotate(0deg) !default;
|
||||
|
||||
//Alert
|
||||
$alert-border-width: 3px;
|
||||
$alert-border-scale: 0;
|
||||
$alert-border-radius: 0 3px 3px 0;
|
||||
$alert-bg-scale: -87%;
|
||||
$alert-color-scale: 40%;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -10,15 +10,12 @@ from sphinx.writers.html5 import HTML5Translator
|
||||
# └── Odoo Translator
|
||||
|
||||
ADMONITION_MAPPING = {
|
||||
# ???: 'alert-success',
|
||||
|
||||
'note': 'alert-note',
|
||||
|
||||
'hint': 'alert-info',
|
||||
# The alert classes have been replaced by default BS classes to reduce number of scss lines.
|
||||
'note': 'alert-primary',
|
||||
|
||||
'tip': 'alert-tip',
|
||||
|
||||
'seealso': 'alert-go_to',
|
||||
'seealso': 'alert-secondary',
|
||||
|
||||
'warning': 'alert-warning',
|
||||
'attention': 'alert-warning',
|
||||
@ -28,8 +25,8 @@ ADMONITION_MAPPING = {
|
||||
'danger': 'alert-danger',
|
||||
'error': 'alert-danger',
|
||||
|
||||
'example': 'alert-example',
|
||||
'exercise': 'alert-exercise',
|
||||
'example': 'alert-success',
|
||||
'exercise': 'alert-dark',
|
||||
}
|
||||
|
||||
|
||||
@ -137,6 +134,17 @@ class BootstrapTranslator(HTML5Translator):
|
||||
else:
|
||||
super().depart_title(node)
|
||||
|
||||
def visit_literal(self, node):
|
||||
""" Override to add the class `o_code` to all `literal`, `code`, and `file` roles. """
|
||||
node['classes'].append('o_code')
|
||||
return super().visit_literal(node)
|
||||
|
||||
def visit_literal_strong(self, node):
|
||||
""" Override to add the class `o_code` to all `command` roles. """
|
||||
if 'command' in node['classes']:
|
||||
node['classes'].append('o_code')
|
||||
return super().visit_literal_strong(node)
|
||||
|
||||
# overwritten
|
||||
# Ensure table class is present for tables
|
||||
def visit_table(self, node):
|
||||
|
||||
Loading…
Reference in New Issue
Block a user