diff options
| author | Benjamin Vray <bvr@odoo.com> | 2021-02-22 15:18:08 +0000 |
|---|---|---|
| committer | Benjamin Vray <bvr@odoo.com> | 2021-03-15 07:48:01 +0000 |
| commit | dcddf2125652b03bf4bff385c074fef0b2096f1d (patch) | |
| tree | 55c7f9c02ec3f48f2df56d092d29bce0c79db68e /addons/website/static/src/scss | |
| parent | b88b634a0363a55411290e54e37806cfec1b2de5 (diff) | |
[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>
Diffstat (limited to 'addons/website/static/src/scss')
| -rw-r--r-- | addons/website/static/src/scss/primary_variables.scss | 31 | ||||
| -rw-r--r-- | addons/website/static/src/scss/website.scss | 20 |
2 files changed, 36 insertions, 15 deletions
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 |