From ddc201472885ecdbd7616ee4a19ab1a237f694d9 Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Thu, 29 Dec 2022 09:35:58 +0100
Subject: [PATCH] [IMP][CSS] Improve literals styling (o_code, .sig-*)

---
 .../odoo_theme/static/scss/_mixins.scss       |  10 ++
 extensions/odoo_theme/static/style.scss       | 117 ++++++++----------
 2 files changed, 64 insertions(+), 63 deletions(-)

diff --git a/extensions/odoo_theme/static/scss/_mixins.scss b/extensions/odoo_theme/static/scss/_mixins.scss
index 651e51a78..f2d583b77 100644
--- a/extensions/odoo_theme/static/scss/_mixins.scss
+++ b/extensions/odoo_theme/static/scss/_mixins.scss
@@ -99,3 +99,13 @@
     border-left: 1px solid $o-gray-border;
     border-right: 1px solid $o-gray-border;
 }
+
+@mixin o-code {
+    display: inline-block;
+    color: inherit;
+    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: $fw_regular;
+}
diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss
index 82f048e38..d5f20dcd6 100644
--- a/extensions/odoo_theme/static/style.scss
+++ b/extensions/odoo_theme/static/style.scss
@@ -36,10 +36,6 @@ body {
         }
     }
 
-    dd {
-        margin-left: $margin-s;
-    }
-
     // This fixes the scroll position on all elements, including refs
     :target {
         &:before {
@@ -435,12 +431,7 @@ header {
 
     // Literals Styles (ex: https://www.odoo.com/documentation/master/developer/reference/backend/orm.html#fields)
     .o_code, .sig [class^="sig-"] {
-        display: inline-block;
-        color: inherit;
-        overflow-wrap: anywhere;
-        background: $o-literals-bg;
-        font-size: 0.875em;
-        font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
+        @include o-code;
     }
 
     .o_code {
@@ -456,14 +447,64 @@ header {
     }
 
     .sig {
-        [class^="sig-"]:first-of-type, span[id] + [class^="sig-"]{
-                padding-left: .3rem;
+        .sig-prename {
+            padding-left: .3rem;
+            &+ .sig-name {
+                padding-right: .3rem;
+            }
         }
-        [class^="sig-"]:last-of-type {
+        em.property + .sig-name {
+            padding-left: .3rem;
+        }
+        .sig-paren:last-of-type {
             padding-right: .3rem;
         }
     }
 
+    dl.py, dl.js, dl.o-definition-list {
+        > dd {
+            border-left: 3px solid $o-literals-border;
+            margin-top: -0.075rem;
+            padding-left: $padding-s;
+            padding-top: $padding-xs;
+        }
+        &.class em.property {
+            font-size: $font-size-sm;
+            &:first-child {
+                border-bottom: 3px solid $o-literals-border;
+            }
+            &:not(:first-child) {
+                @include o_code;
+                padding: 0 .3rem;
+                // &:last-of-type {
+                //     padding-right: .3rem;
+                // }
+            }
+        }
+    }
+
+    dl.field-list {
+        @include font-size($font-size-sm);
+        padding: .5rem;
+        border: 1px solid $o-gray-border;
+        @include media-breakpoint-down(lg) {
+            display: block;
+        }
+
+        > dt {
+            padding-left: 0;
+        }
+
+        ul {
+            list-style: none;
+            padding-left: 0;
+
+            li:not(:last-child) {
+                padding-bottom: $padding-xs;
+            }
+        }
+    }
+
     iframe {
         max-width: 100%;
     }
@@ -657,56 +698,6 @@ header {
                 }
             }
 
-            dl.py, dl.js, dl.o-definition-list {
-                > dd {
-                    border-left: 3px solid $o-literals-border;
-                    margin: 0;
-                    padding-left: $padding-s;
-                    padding-top: $padding-xs;
-                }
-                &.class em.property {
-                    font-size: $font-size-sm;
-                    &:first-child {
-                        border-bottom: 3px solid $o-literals-border;
-                        + [class^=sig] {
-                            padding-left: .3rem;
-                        }
-                    }
-                    &:not(:first-child) {
-                        @extend .o_code;
-                        &:last-of-type {
-                            padding-right: .3rem;
-                        }
-                    }
-                }
-            }
-
-            dl.field-list {
-                @include font-size($font-size-sm);
-                padding: .5rem;
-                border: 1px solid $o-gray-border;
-                @include media-breakpoint-down(lg) {
-                    display: block;
-                }
-
-                > dt {
-                    padding-left: 0;
-                }
-
-                > dd {
-                    padding-right: 0;
-                }
-
-                ul {
-                    list-style: none;
-                    padding-left: 0;
-
-                    li {
-                        padding-bottom: $padding-xs;
-                    }
-                }
-            }
-
             // Search items highlighted
             span.highlighted {
                 background-color: lighten($warning, 15%);