[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.
This commit is contained in:
qsm-odoo
2017-08-28 15:13:37 +02:00
parent 55c6785c93
commit 6551c0bdd7
+19 -11
View File
@@ -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);
}