From 46c0bf78277a920a0cf68b75729782dde65fe562 Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Mon, 11 Oct 2021 11:56:56 +0000
Subject: [PATCH] [FIX] website, mass_mailing: remove composed css classes

Recently, [1] broke the style of a few snippets, because it was adding a
:not selector to the parent css class, that was used to define children
classes that were adding a suffix to the parent class name with the &
symbol.

It was decided that every snippet css class should be explicitly
declared to avoid breaking the style when adding selectors to the parent
class. This will also prevent breaking the style when adding a new css
version for the snippet.

task-2660921

[1]: https://github.com/odoo/odoo/pull/77312

closes odoo/odoo#78413

X-original-commit: af6785599358d2dcb9ff811afc2e558a94d9704d
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../mass_mailing/static/src/snippets/s_alert/000.scss | 11 +++++++----
 .../static/src/snippets/s_features_grid/000.scss      |  4 ++--
 addons/website/static/src/snippets/s_alert/000.scss   | 10 +++++-----
 .../static/src/snippets/s_features_grid/000.scss      |  4 ++--
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/addons/mass_mailing/static/src/snippets/s_alert/000.scss b/addons/mass_mailing/static/src/snippets/s_alert/000.scss
index 7b6988a4063..7675235e36a 100644
--- a/addons/mass_mailing/static/src/snippets/s_alert/000.scss
+++ b/addons/mass_mailing/static/src/snippets/s_alert/000.scss
@@ -9,20 +9,23 @@
             margin-bottom: 0;
         }
     }
-    &_sm {
+    &.s_alert_sm {
         padding: $grid-gutter-width/3;
         font-size: $font-size-sm;
     }
-    &_md {
+    &.s_alert_md {
         padding: $grid-gutter-width/2;
         font-size: $font-size-base;
     }
-    &_lg {
+    &.s_alert_lg {
         padding: $grid-gutter-width;
         font-size: $font-size-lg;
     }
-    &_icon {
+    .s_alert_icon {
         float: left;
         margin-right: 10px;
     }
+    .s_alert_content {
+        overflow: hidden;
+    }
 }
diff --git a/addons/mass_mailing/static/src/snippets/s_features_grid/000.scss b/addons/mass_mailing/static/src/snippets/s_features_grid/000.scss
index 7e1343c4f92..11323decaac 100644
--- a/addons/mass_mailing/static/src/snippets/s_features_grid/000.scss
+++ b/addons/mass_mailing/static/src/snippets/s_features_grid/000.scss
@@ -1,12 +1,12 @@
 
 .s_mail_features_grid {
-    &_content {
+    .s_mail_features_grid_content {
         overflow: hidden;
         p {
             margin-bottom: 0;
         }
     }
-    &_icon {
+    .s_mail_features_grid_icon {
         float: left;
     }
 }
diff --git a/addons/website/static/src/snippets/s_alert/000.scss b/addons/website/static/src/snippets/s_alert/000.scss
index a44d1d2db66..11522e163e9 100644
--- a/addons/website/static/src/snippets/s_alert/000.scss
+++ b/addons/website/static/src/snippets/s_alert/000.scss
@@ -8,23 +8,23 @@
             margin-bottom: 0;
         }
     }
-    &_sm {
+    &.s_alert_sm {
         padding: $grid-gutter-width/3;
         font-size: $font-size-sm;
     }
-    &_md {
+    &.s_alert_md {
         padding: $grid-gutter-width/2;
         font-size: $font-size-base;
     }
-    &_lg {
+    &.s_alert_lg {
         padding: $grid-gutter-width;
         font-size: $font-size-lg;
     }
-    &_icon {
+    .s_alert_icon {
         float: left;
         margin-right: 10px;
     }
-    &_content {
+    .s_alert_content {
         overflow: hidden;
     }
 }
diff --git a/addons/website/static/src/snippets/s_features_grid/000.scss b/addons/website/static/src/snippets/s_features_grid/000.scss
index d66d72c5932..358f4bed29f 100644
--- a/addons/website/static/src/snippets/s_features_grid/000.scss
+++ b/addons/website/static/src/snippets/s_features_grid/000.scss
@@ -1,12 +1,12 @@
 
 .s_features_grid {
-    &_content {
+    .s_features_grid_content {
         overflow: hidden;
         p {
             margin-bottom: 0;
         }
     }
-    &_icon {
+    .s_features_grid_icon {
         float: left;
         margin-right: $grid-gutter-width/2;
     }