[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>

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;
+    }
 }

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;
     }
 }

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;
     }
 }

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;
     }