From 9c41002b3968f95adcfcc17c7c4ae3208282d4a3 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Wed, 16 Mar 2022 12:29:30 +0000
Subject: [PATCH] [FIX] web: review fixed-width icons

Prior to this commit an 'oi-fw' icon width was assigned directly to its
:pseudoelement and eventually refined according to sizes classes.

Despite being useful in some circumstances, this behavior was causing
inconsistencies when 'oi-fw' icons were rendered beside 'fa-fw' ones.

This commit reviews how fixed-width icons are achieved, providing a more
consistent visual result between '.fa' and '.oi' classes.

task-2795108

closes odoo/odoo#86508

Signed-off-by: Pierre Paridans (app) <app@odoo.com>
---
 addons/web/static/src/webclient/icons.scss | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/addons/web/static/src/webclient/icons.scss b/addons/web/static/src/webclient/icons.scss
index eed3c018465..db1393a0d3e 100644
--- a/addons/web/static/src/webclient/icons.scss
+++ b/addons/web/static/src/webclient/icons.scss
@@ -6,6 +6,7 @@
 // ----------------------------------------------------------------------------
 
 $oi-default-size: 1em;   // Normally 13px
+$oi-fw-ratio: 1.28571429; // Matches .fa-fw
 
 $oi-sizes: (
     'small': (
@@ -37,12 +38,10 @@ $oi-sizes: (
     }
 }
 
-.oi-fw, .fa-fw {
-    &:before {
-        display: inline-block;
-        width: var(--oi-fw-width, $oi-default-size * 1.3);
-        text-align: center;
-    }
+.oi-fw {
+    display: inline-block;
+    width: calc($oi-fw-ratio * var(--oi-font-size, #{$oi-default-size}));
+    text-align: center;
 }
 
 // Print CSS variables for each size/breakpoint
@@ -53,14 +52,8 @@ $oi-sizes: (
 
         @each $-key, $-values in $oi-sizes {
             .oi#{$-infix}-#{$-key} {
-                &:before {
-                    @each $-rule, $-value in $-values {
-                        @include print-variable('oi-#{$-rule}', $-value);
-                    }
-                }
-
-                &.oi-fw:before {
-                    @include print-variable('oi-fw-width', map-get($-values, 'font-size') * 1.3);
+                @each $-rule, $-value in $-values {
+                    @include print-variable('oi-#{$-rule}', $-value);
                 }
             }
         }