From f6b2b5e18a7b393880902ecdcf79dfb493cd12d8 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Wed, 18 Jan 2023 16:39:18 +0000
Subject: [PATCH] [FIX] web: `ListRenderer`, sticky-header's shadow

Prior to these changes the shadow wasn't rendered on Firefox and Safari.
This commit introduces a pseudo-element that mimics the shadow effect.

Since browsers behave differently when it comes about sticky table's
elements, it's unfortunately not possible to use a simpler approach (eg.
applying a shadow to the <thead> directly).

The commit will also replace raw-CSS with the o-position-sticky() mixin
and provides the CSS hook to handle dark-mode correctly.

original task: task-3126127

task-3141304

closes odoo/odoo#112304

X-original-commit: 108792e29846a6ba944581728702868675208e23
Related: odoo/enterprise#36865
Signed-off-by: Romeo Fragomeli (rfr) <rfr@odoo.com>
---
 .../static/src/views/list/list_renderer.scss    | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/addons/web/static/src/views/list/list_renderer.scss b/addons/web/static/src/views/list/list_renderer.scss
index 7400cfb0968..a1d7f8f7d1b 100644
--- a/addons/web/static/src/views/list/list_renderer.scss
+++ b/addons/web/static/src/views/list/list_renderer.scss
@@ -5,15 +5,26 @@
     --ListRenderer-thead-padding-v: #{$table-cell-padding-y * 1.25};
     --ListRenderer-thead-bg-color: #{$gray-200};
     --ListRenderer-thead-border-end-color: #{$border-color};
+    --ListRenderer-thead-shadow: linear-gradient(180deg, rgba(0, 0, 0, 0.08), transparent);
 
     // sticky header on desktop
     @include media-breakpoint-up(md) {
         height: 100%;
+
         .o_list_table thead {
-            position: sticky;
-            top: 0;
+            @include o-position-sticky(0);
             z-index: 1;
-            box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
+
+            &:after {
+                @include o-position-absolute($left: 0, $right: 0);
+                height: map-get($spacers, 3);
+                border-top: $border-width solid $border-color;
+                background-image: var(--ListRenderer-thead-shadow);
+                transform: translateY(-#{$border-width}); // Compensate rendering misplacement
+                -moz-transform: translateY(0); // Firefox doesn't need rendering adjustments
+                pointer-events: none;
+                content: '';
+            }
         }
     }