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

[DESIGN]

Browse Source
This commit is contained in:
Elisabeth Dickinson 2021-03-04 16:48:42 +01:00
parent e74e754ace
commit b8288b7fd1
3 changed files with 192 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
extensions/odoo_theme/static/scss/_sphinx_basic.scss
View File

@ -22,7 +22,7 @@ div.section::after {
} }
/* -- relbar ---------------------------------------------------------------- */ /* -- relbar ---------------------------------------------------------------- */
/*
div.related { div.related {
width: 100%; width: 100%;
font-size: 90%; font-size: 90%;
@ -45,7 +45,7 @@ div.related li {
div.related li.right { div.related li.right {
float: right; float: right;
margin-right: 5px; margin-right: 5px;
} } */
/* -- search page ----------------------------------------------------------- */ /* -- search page ----------------------------------------------------------- */
@ -54,12 +54,12 @@ ul.search {
padding: 0; padding: 0;
} }
ul.search li { /* ul.search li {
padding: 5px 0 5px 20px; padding: 5px 0 5px 20px;
background-image: url(file.png); background-image: url(file.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 7px; background-position: 0 7px;
} } */
ul.search li a { ul.search li a {
font-weight: bold; font-weight: bold;
@ -205,7 +205,6 @@ div.body td {
} }
p.rubric { p.rubric {
margin-top: 30px;
font-weight: bold; font-weight: bold;
} }
@ -241,9 +240,9 @@ img.align-default, .figure.align-default {
text-align: center; text-align: center;
} }
.align-default { /* .align-default {
text-align: center; text-align: center;
} } */
.align-right { .align-right {
text-align: right; text-align: right;
@ -266,9 +265,9 @@ p.sidebar-title {
font-weight: bold; font-weight: bold;
} }
div.admonition, div.topic, blockquote { /* div.admonition, div.topic, blockquote {
clear: left; clear: left;
} } */
/* -- topics ---------------------------------------------------------------- */ /* -- topics ---------------------------------------------------------------- */
@ -308,20 +307,20 @@ div.body p.centered {
/* -- content of sidebars/topics/admonitions -------------------------------- */ /* -- content of sidebars/topics/admonitions -------------------------------- */
div.sidebar > :last-child, /* div.sidebar > :last-child,
div.topic > :last-child, div.topic > :last-child,
div.admonition > :last-child { div.admonition > :last-child {
margin-bottom: 0; margin-bottom: 0;
} } */
div.sidebar::after, /* div.sidebar::after,
div.topic::after, div.topic::after,
div.admonition::after, div.admonition::after,
blockquote::after { blockquote::after {
display: block; display: block;
content: ''; content: '';
clear: both; clear: both;
} } */
/* -- tables ---------------------------------------------------------------- */ /* -- tables ---------------------------------------------------------------- */
@ -392,9 +391,9 @@ div.figure {
padding: 0.5em; padding: 0.5em;
} }
div.figure p.caption { /* div.figure p.caption {
padding: 0.3em; padding: 0.3em;
} } */
div.figure p.caption span.caption-number { div.figure p.caption span.caption-number {
font-style: italic; font-style: italic;
@ -548,9 +547,9 @@ dl > dd:last-child > :last-child {
margin-bottom: 0; margin-bottom: 0;
} }
dt:target, span.highlighted { /* dt:target, span.highlighted {
background-color: #fbe54e; background-color: #fbe54e;
} } */
rect.highlighted { rect.highlighted {
fill: #fbe54e; fill: #fbe54e;
@ -595,9 +594,9 @@ dl.glossary dt {
margin-left: 1.5em; margin-left: 1.5em;
} }
.guilabel, .menuselection { /* .guilabel, .menuselection {
font-family: sans-serif; font-family: sans-serif;
} } */
.accelerator { .accelerator {
text-decoration: underline; text-decoration: underline;
@ -613,10 +612,10 @@ dl.glossary dt {
content: ":"; content: ":";
} }
abbr, acronym { /* abbr, acronym {
border-bottom: dotted 1px; border-bottom: dotted 1px;
cursor: help; cursor: help;
} } */
/* -- code displays --------------------------------------------------------- */ /* -- code displays --------------------------------------------------------- */
@ -672,9 +671,9 @@ table.highlighttable td.code {
overflow: hidden; overflow: hidden;
} }
.highlight .hll { /* .highlight .hll {
display: block; display: block;
} } */
div.highlight pre, div.highlight pre,
table.highlighttable pre { table.highlighttable pre {
@ -716,17 +715,17 @@ div.literal-block-wrapper {
code.descname { code.descname {
background-color: transparent; background-color: transparent;
font-weight: bold; font-weight: bold;
font-size: 1.2em; /* font-size: 1.2em; */
} }
code.descclassname { code.descclassname {
background-color: transparent; background-color: transparent;
} }
code.xref, a code { /* code.xref, a code {
background-color: transparent; background-color: transparent;
font-weight: bold; font-weight: bold;
} } */
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
background-color: transparent; background-color: transparent;

1
extensions/odoo_theme/static/scss/bootstrap_overridden.scss vendored
View File

@ -28,6 +28,7 @@ $display-line-height: 1;
// //
// For each of Bootstrap's buttons, define text, background, and border color. // For each of Bootstrap's buttons, define text, background, and border color.
$btn-font-size: $font-size-secondary;
$btn-font-weight: $fw_semibold; $btn-font-weight: $fw_semibold;
$btn-focus-box-shadow: 0 0 0 transparent; $btn-focus-box-shadow: 0 0 0 transparent;

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

@ -70,32 +70,12 @@ header.o_main_header{
} }
.highlight-link { .highlight-link {
cursor: pointer;
margin-bottom: 0; margin-bottom: 0;
display: inline-flex; display: flex;
align-items: center; align-items: center;
a { a {
color: transparent; padding: 0 1rem;
text-decoration: none; @include font-size($font-size-secondary);
transition: .3s;
transition-delay: .5s;
&:before {
content:'\00d7';
display: inline-block;
font-weight: $fw_bold;
@include font-size($font-size-base);
width: 21px;
border-radius: 30px;
line-height: 21px;
background: $gray-light;
color: $white;
text-align: center;
margin: auto .5rem;
}
}
a:hover {
color: $gray
} }
} }
.o_languages { .o_languages {
@ -220,6 +200,11 @@ header.o_main_header{
&:not(.toctree-l1) { &:not(.toctree-l1) {
.o_toc_entry_wrapper { .o_toc_entry_wrapper {
&:not(.o_page_toc_title) {
display: flex;
align-items: baseline;
}
> i[class^="i-"] { > i[class^="i-"] {
display: inline-block; display: inline-block;
margin-right: .2rem; margin-right: .2rem;
@ -268,7 +253,7 @@ header.o_main_header{
font-weight: $fw_bold; font-weight: $fw_bold;
color: $gray-darker; color: $gray-darker;
padding-left: .5rem; padding-left: .5rem;
margin-bottom: 0; margin-bottom: .5rem;
} }
a { a {
@ -395,6 +380,8 @@ header.o_main_header{
&.has_code_col { &.has_code_col {
article.doc-body { article.doc-body {
padding-left: 1rem;
padding-right: 1rem;
> *{ > *{
max-width: 100%; max-width: 100%;
@ -415,8 +402,11 @@ header.o_main_header{
@include code-col(); @include code-col();
} }
.o_git_link { .o_git_link {
left: 53%; top: .5rem;
right: calc(43% + 1rem);
} }
section { section {
@ -427,6 +417,10 @@ header.o_main_header{
clear: left; clear: left;
} }
> h1 {
max-width: calc(54% - 120px);
}
> h1, > h2, > h3, > h4, > h5, > h6 { > h1, > h2, > h3, > h4, > h5, > h6 {
float: none; float: none;
clear: none; clear: none;
@ -440,15 +434,10 @@ header.o_main_header{
padding: 1rem; padding: 1rem;
blockquote { blockquote {
font-family: $font-family-serif;
font-weight: $fw_semibold; font-weight: $fw_semibold;
font-style: italic; font-style: italic;
} }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: $white;
}
pre { pre {
font-size: 12px; font-size: 12px;
} }
@ -483,29 +472,47 @@ header.o_main_header{
} }
} }
article { article.doc-body {
position: relative; position: relative;
.o_git_link { .o_git_link {
@include font-size($font-size-secondary); @include font-size($font-size-secondary);
@include o-position-absolute($top: 1rem, $right: 1rem); @include o-position-absolute($top: calc(#{$o-header-height} + 1rem), $right: 1rem);
i { i {
margin-right: .2rem; margin-right: .2rem;
} }
} }
.command {
font-family: var(--bs-font-monospace);
}
.field-list {
@include font-size($font-size-secondary);
padding: .5rem;
border: 1px solid $gray-light;
ul {
list-style: none;
}
}
code { code {
display: inline-block; display: inline-block;
color: inherit;
background: $doc_code-bg; background: $doc_code-bg;
padding: 0 .3rem; padding: 0 .3rem;
margin: 0.1rem; margin: 0.1rem;
border: 1px solid $gray-light; border: 1px solid $gray-light;
} }
dt { /* dt {
&:before { &:before {
@include scroll-padding() @include scroll-padding()
} }
} */
// Search items highlighted
dt:target, span.highlighted {
background-color: lighten($color-alpha, 50%);
} }
section { section {
@ -521,17 +528,27 @@ header.o_main_header{
color: $o-violet-dark; color: $o-violet-dark;
font-weight: $fw_bold; font-weight: $fw_bold;
max-width: calc(100% - 120px); max-width: calc(100% - 120px);
+ p {
margin-top: 1rem;
}
} }
> h2 { > h2 {
font-family: $font-family-serif;
color: $gray-darker; color: $gray-darker;
padding-bottom: .5rem; margin-top: .5rem;
margin-bottom: 1.5rem;
padding-bottom: .3rem;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
} }
> h3 { > h3 {
color: $gray-darkest; color: $gray-darkest;
font-weight: $fw_extrabold; font-weight: $fw_bold;
}
> h4, > h5, > h6 {
font-weight: $fw_semibold;
} }
a.headerlink { a.headerlink {
@ -549,19 +566,15 @@ header.o_main_header{
@include o-transition(all, .1s) @include o-transition(all, .1s)
} }
} }
// This makes permalinks only visible on hover.
h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption { h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption {
&:hover > a.headerlink:after{ &:hover > a.headerlink:after{
// This makes permalinks only visible on hover.
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
} }
} }
.img-fluid {
margin-bottom: 1rem;
}
} }
div[class^="highlight"] { div[class^="highlight"] {
@ -569,6 +582,7 @@ header.o_main_header{
overflow-x: auto; overflow-x: auto;
border: 1px solid $gray-light; border: 1px solid $gray-light;
margin: 1px 0 24px 0; margin: 1px 0 24px 0;
max-width: 90vw;
div[class^="highlight"] { div[class^="highlight"] {
padding: 0px; padding: 0px;
@ -583,29 +597,87 @@ header.o_main_header{
overflow: auto; overflow: auto;
} }
} }
// fixes on pages
.guilabel, .menuselection {
font-weight: $fw_semibold;
}
.dfn{
@include font-size($font-size-secondary);
line-height: 1;
color: $o-violet;
font-weight: $fw_semibold;
&:before {
content:'?';
display: inline-block;
width: 15px;
height: 15px;
background-color: $o-violet;
border: 1px solid $o-violet;
border-radius: 20px;
text-align: center;
color: $white;
font-weight: $fw_extrabold;
margin: 0 .2rem;
}
}
.pq-patch em {
display: block;
border-radius: 4px 4px 0 0;
background: $gray-lighter;
padding: .2rem 1rem;
@include font-size($font-size-secondary);
font-weight: 600;
}
img.img-fluid:not([alt="green"]):not([alt="orange"]):not([alt="red"]) {
border: 1px solid $gray-lighter;
background: $white;
margin-bottom: 1rem;
padding: .5rem;
}
.container .container:not([class^="col"]) {
padding: 0;
margin: 0;
}
ul, ol { ul, ol {
text-align: left; text-align: left;
} }
.figure {
.caption, .caption-text {
font-weight: $fw_semibold;
color: $gray;
}
.caption, .caption-text, .legend, .legend p{
font-style: italic;
margin: 0 auto;
}
&:not([class^="col"]) .legend {
max-width: 60%;
}
}
// restyle numbers on lists // restyle numbers on lists
ol { ol {
list-style: none; /* list-style: none;
counter-reset: a; counter-reset: a;
> li { > li {
position: relative; position: relative;
counter-increment: a; counter-increment: a;
&:before { &:before {
content: counter(a); content: counter(a) '.';
color: $o-violet; font-weight: $fw_semibold;
border: 2px solid $o-violet; @include o-position-absolute(auto, auto, auto, -1.8rem);
@include font-size($font-size-secondary); }
font-weight: bold; } */
line-height: 1; ol {
text-align: center; list-style: lower-alpha;
padding: 1px 0; > li:before {
width: 20px; content: none;
height: 20px;
border-radius: 10px;
@include o-position-absolute(2px, auto, auto, -2rem);
} }
} }
} }
@ -618,7 +690,7 @@ header.o_main_header{
// alert-danger // alert-danger
// alert-go_to // alert-go_to
// alert-exercise // alert-exercise
// alert-success // alert-success // removed : never used in doc
.alert { .alert {
position: relative; position: relative;
display: block; display: block;
@ -626,7 +698,14 @@ header.o_main_header{
border-width: 0 0 0 3px; border-width: 0 0 0 3px;
@include font-size($font-size-secondary); @include font-size($font-size-secondary);
code {
background-color: $white !important;
}
> p , > ul{ > p , > ul{
margin-bottom: .5rem;
}
> *:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -637,106 +716,76 @@ header.o_main_header{
font-weight: $fw_bold; font-weight: $fw_bold;
&:before { &:before {
@include inline-icomoon($i-info, 0 .2rem 0 0); @include inline-icomoon($i-info, 0 .2rem 0 0, baseline, $font-size-base, inherit);
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
display:none; display:none;
} }
} }
} }
&.alert-success { &.alert-info, &[class^="admonition"] {
border-color: lighten($brand-success, 30%);
background-color: lighten($brand-success, 45%);
color: darken($brand-success, 35%);
> .alert-title, > h3 {
color: $brand-success
}
> .alert-title:before, > h3:before {
content: '#{$i-check}';
}
}
&.alert-info {
border-color: tint-color($brand-info, 30%); border-color: tint-color($brand-info, 30%);
background-color: tint-color($brand-info, 85%); background-color: tint-color($brand-info, 85%);
color: shade-color($brand-info, 35%); color: shade-color($brand-info, 35%);
> .alert-title, > h3 { > .alert-title, > h3 {
color: $brand-info color: $brand-info;
} &:before {
> .alert-title:before, > h3:before {
content: '#{$i-info}'; content: '#{$i-info}';
} }
} }
}
&.alert-note { &.alert-note {
border-color: tint-color($brand-info, 30%); border-color: shade-color($info, 30%);
background-color: tint-color($brand-info, 85%); background-color: $gray-lightest;
color: shade-color($brand-info, 35%); color: shade-color($info, 55%);
> .alert-title, > h3 { > .alert-title, > h3 {
color: $brand-info color: shade-color($info, 45%);
} &:before {
> .alert-title:before, > h3:before {
content: '#{$i-note}'; content: '#{$i-note}';
} }
} }
}
&.alert-tip, &.tip { &.alert-tip, &.tip {
border: none; border-color: shade-color($color-alpha, 10%);
background-color: tint-color($info, 85%); background-color: $gray-lightest;
color: shade-color($info, 65%); color: shade-color($color-alpha, 55%);
padding-left:3rem;
padding-right: 2rem;
margin-left: -3rem;
margin-right: -2rem;
> .alert-title, > h3 { > .alert-title, > h3 {
color: shade-color($info, 50%); color: shade-color($color-alpha, 40%);
display: inline-block;
margin-bottom: 0;
margin-right: .5rem;
&:before { &:before {
content: '#{$i-lightbulb}'; content: '#{$i-lightbulb}';
vertical-align: text-top; @include font-size(1.2rem);
} }
&:after {
content: ':';
}
}
> p {
display: inline-block;
} }
} }
&.alert-warning, &.warning { &.alert-warning, &.warning {
border-color: $warning; border-color: $brand-warning;
> .alert-title, > h3 { > .alert-title, > h3 {
color: $brand-warning; color: shade-color($brand-warning, 10%);
} &:before {
> .alert-title:before, > h3:before {
content: '#{$i-warning}'; content: '#{$i-warning}';
} }
} }
}
&.alert-danger { &.alert-danger {
border-color: $danger; border-color: $danger;
> .alert-title, > h3 { > .alert-title, > h3 {
color: $brand-danger color: darken($brand-danger,20%);
} &:before {
> .alert-title:before, > h3:before {
content: '#{$i-danger}'; content: '#{$i-danger}';
} }
} }
}
&.alert-exercise { &.alert-exercise {
border-color: tint-color($doc_exercise, 30%); border-color: tint-color($doc_exercise, 30%);
@ -754,20 +803,19 @@ header.o_main_header{
&.alert-go_to { &.alert-go_to {
display: inline-block; display: inline-block;
border-color: tint-color($secondary, 60%); border-color: $o-violet;
background-color: tint-color($secondary, 80%); background-color: $gray-lightest;
border-width: 2px;
width: calc(50% - 1rem); width: calc(50% - 1rem);
a { a {
color: shade-color($secondary, 35%); color: $o-violet-dark;
} }
> .alert-title, > h3 { > .alert-title, > h3 {
color: $secondary; color: $o-violet-dark;
} }
> .alert-title:before, > h3:before { > .alert-title:before, > h3:before {
content: '#{$i-view-more}'; content: '#{$i-arrow-right}';
} }
} }
} }