From 6551c0bdd795b8ce1188d439dc4046203fedd657 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Mon, 28 Aug 2017 14:44:08 +0200
Subject: [PATCH] [FIX] web: fix kanban card color

Since the new kanban design, the cards' colors are shown as a
border-left color. Since all the cards have a small gray border,
a combination of inset box-shadow and border-left was used to display
the colored left border. There were two bugs with this system:

- The border-left was overflowing the box-shadow of 1px, making the
  border look weird
- The box shadow was always below the content (graphs, progressbar, etc)

The first problem is resolved by leaving the border-left property
untouched (the natural border is not really visible anyway), the second
problem is resolved by using the ::after element to create the border
instead of using a box-shadow.
---
 addons/web/static/src/less/kanban_view.less | 30 +++++++++++++--------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/addons/web/static/src/less/kanban_view.less b/addons/web/static/src/less/kanban_view.less
index ff1b474a061..5b89d89330f 100644
--- a/addons/web/static/src/less/kanban_view.less
+++ b/addons/web/static/src/less/kanban_view.less
@@ -7,6 +7,7 @@
 @o-kanban-image-width: 64px;
 @o-kanban-inside-vgutter: 8px;
 @o-kanban-inside-hgutter: 8px;
+@o-kanban-color-border-width: 3px;
 @o-kanban-inside-hgutter-mobile: @odoo-horizontal-padding;
 @o-kanban-inner-hmargin: 5px;
 @o-kanban-progressbar-height: 20px;
@@ -35,9 +36,8 @@
 }
 .o-kanban-record-color(@size) when (@size > 0) {
     .o-kanban-record-color(@size - 1);
-    .oe_kanban_color_@{size} {
-        box-shadow: inset 2px 0 0 0 ~"@{odoo-color-@{size}}";
-        border-left-color: ~"@{odoo-color-@{size}}";
+    .oe_kanban_color_@{size}::after {
+        background-color: ~"@{odoo-color-@{size}}";
     }
 }
 .o-kanban-slim-col() {
@@ -107,17 +107,21 @@
 
         > a {
             display: block;
-            height: 15px;
-            border-width: 0 0 0 20px;
-            border-style: solid;
+
+            &::after {
+                content: "";
+                display: block;
+                width: 20px;
+                height: 15px;
+            }
         }
 
         // No Color
         &:first-child > a {
             position: relative;
-            &:before {
+            &::before {
                 content: "";
-                .o-position-absolute(-2px, @left: -10px);
+                .o-position-absolute(-2px, @left: 10px);
                 display: block;
                 width: 1px;
                 height: 20px;
@@ -167,6 +171,13 @@
         margin: 0 @o-kanban-record-margin -1px;
 
         // ------- Kanban Record, v11 Layout -------
+        // Records colours
+        &::after {
+            content: "";
+            .o-position-absolute(0, auto, 0, 0);
+            width: @o-kanban-color-border-width;
+        }
+
         // Inner Sections
         .o_kanban_record_top, .o_kanban_record_body  {
             margin-bottom: @o-kanban-inner-hmargin;
@@ -645,9 +656,6 @@
     }
 
     // Records colours
-    .oe_kanban_color_0 {
-        border-left: 1px solid @gray-lighter-dark;
-    }
     .o-kanban-record-color(12);
 }