[FIX] web: review and fix kanban design

- Folded column design
- Adapt progressbar header layout
- Remove custom opacity mixin (use default o-hover-opacity)
- Remove columns' border (increase padding-right)
- Decrease counter opacity if no records
- Refine counter animations
- ...

1 files changed, 42 insertions, 9 deletions

diff --git a/addons/web/static/src/less/kanban_column_progressbar.less b/addons/web/static/src/less/kanban_column_progressbar.less
index 865943567ae..86fe0853de2 100644
--- a/addons/web/static/src/less/kanban_column_progressbar.less
+++ b/addons/web/static/src/less/kanban_column_progressbar.less
@@ -1,3 +1,4 @@
+@o-kanban-counter-header-height: @o-kanban-header-title-height*0.6;
 
 .o-kanban-css-filter(@class, @accent-color) {
     // Provide CSS reordering and highlight
@@ -34,12 +35,22 @@
 
         .o_kanban_record:not(.oe_kanban_card_@{class}) {
             order: 3;
-            opacity: 0.5;
+            .o-hover-opacity(0.5);
             box-shadow: none;
+        }
+    }
+}
 
-            &:hover {
-                opacity: 1;
-            }
+// If columns has the progressbar, adapt the layout
+.o_kanban_view .o_kanban_group.o_kanban_has_progressbar {
+    > .o_kanban_header .o_kanban_header_title {
+        height: @o-kanban-counter-header-height;
+        margin-top: 5px;
+    }
+
+    &.o_kanban_no_records {
+        .o_kanban_counter {
+            opacity: 0.3;
         }
     }
 }
@@ -48,12 +59,12 @@
     position: relative;
     .o-flex-display();
     .o-align-items(center);
-    height: 30px;
+    .o-transition(opacity, 0.3s);
     margin-bottom: @o-kanban-record-margin*2;
 
     > .o_kanban_counter_progress {
         width: 76%;
-        height: @font-size-base;
+        height: @font-size-small;
         margin-bottom: 0;
         background-color: @gray-lighter-dark;
         box-shadow: none;
@@ -80,9 +91,19 @@
         margin-left: 3%;
         color: @headings-color;
         text-align: right;
+        .o-transform-origin(right, center);
 
         &.o_kanban_grow {
-            .o-animation(grow, 400ms, ease-in, 200ms);
+            .o-animation(grow, 1s, ease);
+        }
+
+        &.o_kanban_grow_huge {
+            .o-animation(grow_huge, 1s, ease);
+        }
+
+        // Target currency icon
+        > span {
+            margin-left: 2px;
         }
     }
 }
@@ -109,8 +130,20 @@
     0% {
         transform: scale3d(1, 1, 1);
     }
-    50% {
-        transform: scale3d(1.5, 1.5, 1.5);
+    30% {
+        transform: scale3d(1.1, 1.1, 1.1);
+    }
+    100% {
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+@keyframes grow_huge {
+    0% {
+        transform: scale3d(1, 1, 1);
+    }
+    30% {
+        transform: scale3d(1.3, 1.3, 1.3);
     }
     100% {
         transform: scale3d(1, 1, 1);