From dcddf2125652b03bf4bff385c074fef0b2096f1d Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Mon, 22 Feb 2021 15:18:08 +0000
Subject: [FIX] website, website_sale: fix right corner ribbon

Before this commit, when ribbon was at the right corner of a product
card, this ribbon hid the buttons in list view.

After this commit, in list view, we place the ribbon on the left to
avoid this bug. There was no better solution to fix this in stable.

task-2466120

closes odoo/odoo#66618

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../website/static/src/scss/primary_variables.scss | 31 ++++++++++++++++++++++
 addons/website/static/src/scss/website.scss        | 20 ++++----------
 2 files changed, 36 insertions(+), 15 deletions(-)

(limited to 'addons/website/static/src')

diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index e1b876e3ada..5d1bd417c6b 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -376,3 +376,34 @@ $o-theme-font-configs: (
         'url': 'Arvo:300,300i,400,400i,700,700i',
     ),
 ) !default;
+
+//------------------------------------------------------------------------------
+// Mixins
+//------------------------------------------------------------------------------
+
+@mixin o-ribbon-right() {
+    @include o-position-absolute($top: 0, $right: 0);
+    padding: 0.5rem $ribbon-padding;
+    // 0.708 is 1 - cos(45deg)
+    // Transforms are applied right-to-left
+    // Cannot use matrix because of the use of % values.
+    transform: translateX(calc(-0.708 * (100% - #{2 * $ribbon-padding}))) rotate(45deg) translateX(calc(100% - #{$ribbon-padding}));
+    transform-origin: top right;
+};
+
+@mixin o-ribbon-left() {
+    @include o-position-absolute($top: 0, $left: 0);
+    padding: 0.5rem $ribbon-padding;
+    transform: translateX(calc(0.708 * (100% - #{2 * $ribbon-padding}) - 100%)) rotate(-45deg) translateX($ribbon-padding);
+    transform-origin: top right;
+};
+
+@mixin o-tag-right() {
+    @include o-position-absolute($top: 0, $right: 0);
+    padding: 0.25rem 1rem;
+};
+
+@mixin o-tag-left() {
+    @include o-position-absolute($top: 0, $left: 0);
+    padding: 0.25rem 1rem;
+};
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 3f207b988ee..bbc2767a6ff 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1360,6 +1360,7 @@ span.list-inline-item.o_add_language:last-child {
     }
 }
 
+// Ribbons
 $ribbon-padding: 100px;
 .o_ribbon {
     margin: 0;
@@ -1371,30 +1372,19 @@ $ribbon-padding: 100px;
 }
 
 .o_ribbon_right {
-    @include o-position-absolute($top: 0, $right: 0);
-    padding: 0.5rem $ribbon-padding;
-    // 0.708 is 1 - cos(45deg)
-    // Transforms are applied right-to-left
-    // Cannot use matrix because of the use of % values.
-    transform: translateX(calc(-0.708 * (100% - #{2 * $ribbon-padding}))) rotate(45deg) translateX(calc(100% - #{$ribbon-padding}));
-    transform-origin: top right;
+    @include o-ribbon-right();
 }
 
 .o_ribbon_left {
-    @include o-position-absolute($top: 0, $left: 0);
-    padding: 0.5rem $ribbon-padding;
-    transform: translateX(calc(0.708 * (100% - #{2 * $ribbon-padding}) - 100%)) rotate(-45deg) translateX($ribbon-padding);
-    transform-origin: top right;
+    @include o-ribbon-left();
 }
 
 .o_tag_right {
-    @include o-position-absolute($top: 0, $right: 0);
-    padding: 0.25rem 1rem;
+    @include o-tag-right();
 }
 
 .o_tag_left {
-    @include o-position-absolute($top: 0, $left: 0);
-    padding: 0.25rem 1rem;
+    @include o-tag-left();
 }
 
 // Cookies Bar
-- 
cgit v1.2.3