[FIX] *: fix ribbons position and size

This commit fixes the ribbons used in `kanban` and `form` views.

The SCSS uses the square root of the parent `div.ribbon` to calculate its
diagonal width and applies that width to the child `span`.

After changing the ribbon's transform-origin, we calculate the ribbon's
position based on CSS variables of the view's top padding,the height of
the ribbon and the shadow's size (to avoid it being cropped by
overflow-hidden).

By changing the values of a few of these variables in the kanban view,
we were able to remove all the specific SCSS related to ribbons in the
modules.

Other changes were applied inside some of the modules to make this
work:

- `event`: padding corrections on the kanban's cards;
- `hr_holidays: replaced `margin:0` in the SCSS with negative margin
utility classes on the element to achieve the same visual result;
- `discuss`: moved the ribbon to the parent element;
- this was also done to `discuss`, `survey` and `helpdesk`;
- `crm_team_view` in `sales_team`: the ribbon's height made it overflow
from the kanban's card. We fixed this by changing the value of one of
the CSS variables in the view's SCSS file;
- the same thing was done in `survey` and `appointment`;
- `website_event_exhibitor` had some SCSS that wasn't being used because
it uses `.o_ribbon` instead of `.ribbon`

task-2818586

Part-of: odoo/odoo#116641

addons/web/static/src/views/kanban/kanban_controller.scss

@@ -36,6 +36,17 @@
     --KanbanColumn__highlight-border: #{$o-action};
 
     --o-view-nocontent-zindex: 1;
+
+    // ----------------------------------------------------------------------------
+    // Inner components contextual adaptations
+
+    --Ribbon-font-size: #{$font-size-sm};
+    --Ribbon-gap-top: calc(var(--KanbanRecord-padding-v) * -1 - #{$border-width});
+    --Ribbon-gap-right: 0;
+    --Ribbon-wrapper-width: 6.5rem;
+    --Ribbon-height:  calc(var(--Ribbon-font-size) * 2);
+    --Ribbon-z-index: 0;
+
     // ----------------------------------------------------------------------------
 
     border-top: $border-width solid var(--Kanban-background);

addons/web/static/src/views/widgets/ribbon/ribbon.scss

@@ -1,50 +1,57 @@
 .ribbon {
-    width: 150px;
-    height: 150px;
+    --Ribbon-wrapper-width-default: 10rem;
+    --Ribbon-wrapper-height: var(--Ribbon-wrapper-width, var(--Ribbon-wrapper-width-default));
+
+    width: var(--Ribbon-wrapper-width, var(--Ribbon-wrapper-width-default));
+    height: var(--Ribbon-wrapper-height);
     overflow: hidden;
     position: absolute;
 
     & span {
-        z-index: 1;
+        --Ribbon-font-size-default: #{$font-size-lg};
+        --Ribbon-height-default: calc(var(--Ribbon-font-size, var(--Ribbon-font-size-default)) * 2.5);
+        --Ribbon-shadow-distance: .25rem;
+        --Ribbon-shadow-blur: .5rem;
+        --Ribbon-z-index: 1;
+
+        z-index: var( --Ribbon-z-index);
         position: absolute;
-        display: grid;
-        align-items: center;
-        width: 225px;
-        height: 48px;
-        padding: 0 44px;
-        box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
-        color: #fff;
-        font: 700 18px/1 'Lato', sans-serif;
+        width: 141.421%; //Square root of 2 to get the diagonal of the parent
+        height: var(--Ribbon-height, var(--Ribbon-height-default));
+        box-shadow: 0 var(--Ribbon-shadow-distance) var(--Ribbon-shadow-blur) rgba(0, 0, 0, .1);
+        color: $white;
+        font-size: var(--Ribbon-font-size, var(--Ribbon-font-size-default));
+        line-height: var(--Ribbon-height, var(--Ribbon-height-default));
+        font-weight: $font-weight-bolder;
+        font-family: 'Lato', sans-serif;
         text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
         text-transform: uppercase;
         text-align: center;
         overflow: hidden;
         user-select: none;
+        transform-origin: left bottom;
+        pointer-events: none;
         &.o_small {
-            font-size: 12px;
+            font-size: $font-size-sm
         }
         &.o_medium {
-            font-size: 15px;
+            font-size: $font-size-base;
         }
     }
 
     &-top-right {
-        margin-top: -$o-sheet-vpadding;
-        right: 0;
+        --Ribbon-gap-top-default: calc(var(--formView-sheet-padding-y, 0) * -1 - #{$border-width});
+        --Ribbon-gap-right-default: -#{$border-width};
 
-        &::before {
-            top: 0;
-            left: 0;
-        }
-
-        &::after {
-            bottom: 0;
-            right: 0;
-        }
+        margin-top: var(--Ribbon-gap-top, var(--Ribbon-gap-top-default));
+        right: var(--Ribbon-gap-right, var(--Ribbon-gap-right-default));
 
         & span {
-            left: -15px;
-            top: 30px;
+            --Ribbon-top-position-default: calc((var(--Ribbon-height-default) * -1));
+            --Ribbon-left-position-default: calc(var(--Ribbon-shadow-distance) + var(--Ribbon-shadow-blur));
+
+            left: var(--Ribbon-left-position, var(--Ribbon-left-position-default));
+            top: var(--Ribbon-top-position, var(--Ribbon-top-position-default));
             transform: rotate(45deg);
         }
     }