added classname to callout compact for styling

mozilla · Jan 25, 2024 · e702da3 · e702da3
1 parent 83e103e
commit e702da3
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/bedrock/base/templates/macros-protocol.html b/bedrock/base/templates/macros-protocol.html
@@ -159,7 +159,7 @@
 <section class="mzp-c-callout mzp-l-compact {% if class %}{{ class }}{% endif %}">
 
   <div class="mzp-l-content mzp-t-content-lg">
-    <div class="mzp-c-callout-content">
+    <div class="mzp-c-callout-content {% if brand %}mzp-c-callout-content-has-brand{% endif %}">
       {% if brand %}<div class="mzp-t-callout-compact-brand mzp-c-{{ brand_type }} mzp-t-{{ brand_type }}-{{ brand_size }} mzp-t-product-{{ brand_product }}">{{ brand_text }}</div>{% endif %}
       <div class="mzp-c-callout-container">
         <h{{ heading_level }} class="mzp-c-callout-title">{{ title }}</h{{ heading_level }}>

diff --git a/media/css/protocol/components/callout.scss b/media/css/protocol/components/callout.scss
@@ -53,10 +53,10 @@ $image-path: '/media/protocol/img';
 
 .mzp-l-compact {
     .mzp-l-content {
-        .mzp-c-callout-content:has(.mzp-t-callout-compact-brand) {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
+        .mzp-c-callout-content-has-brand {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
 
             .mzp-t-callout-compact-brand {
                 flex-shrink: 0;