[IMP] mass_mailing: amend icons alignment

Since removing the "Styles" option and the CSS that went with it, 
there is an issue with the center alignment on icons. 
Indeed, having a fixed width/height value on `fa.rounded` allowed the 
icon to be centered along with its background. 
By removing the fixed with/height values, the center alignment 
(using `.mx-auto` and `.d-block`) would center the icon but stretch the 
background color to the full width of the parent.

To achieve the same result, the cheat is to set the
default value of the wrapping block to text-center and remove 
`.mx-auto` and `.d-block`.

closes odoo/odoo#95974

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit is contained in:
Elisabeth Dickinson
2022-08-09 11:32:08 +02:00
committed by David Monjoie
parent 907211dce2
commit 7b370d28f7
2 changed files with 7 additions and 8 deletions
@@ -14,7 +14,7 @@
</div>
</div>
<div class="row">
<div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
<div class="col-lg-2 px-0 text-center s_mail_features_grid_icon">
<i class="fa fa-2x fa-font-awesome bg-primary" style="padding: 10px; border-radius: 50px !important;"></i>
</div>
<div class="col-lg-10 s_mail_features_grid_content pb16">
@@ -23,7 +23,7 @@
</div>
</div>
<div class="row">
<div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
<div class="col-lg-2 px-0 text-center s_mail_features_grid_icon">
<i class="fa fa-2x fa-files-o bg-primary" style="padding: 10px; border-radius: 50px !important;"></i>
</div>
<div class="col-lg-10 s_mail_features_grid_content pb16">
@@ -32,7 +32,7 @@
</div>
</div>
<div class="row">
<div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
<div class="col-lg-2 px-0 text-center s_mail_features_grid_icon">
<i class="fa fa-2x fa-trash bg-primary" style="padding: 10px; border-radius: 50px !important;"></i>
</div>
<div class="col-lg-10 s_mail_features_grid_content pb16">
@@ -51,7 +51,7 @@
</div>
</div>
<div class="row">
<div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
<div class="col-lg-2 px-0 text-center s_mail_features_grid_icon">
<i class="fa fa-2x fa-magic bg-secondary" style="padding: 10px; border-radius: 3px !important;"></i>
</div>
<div class="col-lg-10 s_mail_features_grid_content pb16">
@@ -60,7 +60,7 @@
</div>
</div>
<div class="row">
<div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
<div class="col-lg-2 px-0 text-center s_mail_features_grid_icon">
<i class="fa fa-2x fa-eyedropper bg-secondary" style="padding: 10px; border-radius: 3px !important;"></i>
</div>
<div class="col-lg-10 s_mail_features_grid_content pb16">
@@ -69,7 +69,7 @@
</div>
</div>
<div class="row">
<div class="col-lg-2 px-0 text-end s_mail_features_grid_icon">
<div class="col-lg-2 px-0 text-center s_mail_features_grid_icon">
<i class="fa fa-2x fa-picture-o bg-secondary" style="padding: 10px; border-radius: 3px !important;"></i>
</div>
<div class="col-lg-10 s_mail_features_grid_content pb16">
@@ -361,9 +361,8 @@
<xpath expr="//div[hasclass('o_we_image_options')]" position="replace">
<div data-selector="span.fa, i.fa, img">
<we-select string="Alignment" data-state-to-first-class="true">
<we-button data-select-class="" title="Unalign">None</we-button>
<we-button data-select-class="float-start" title="Align Left">Left</we-button>
<we-button data-select-class="mx-auto d-block" title="Align Center">Center</we-button>
<we-button data-select-class="" title="Align Center">Center</we-button>
<we-button data-select-class="float-end" title="Align Right">Right</we-button>
</we-select>