remove specificity and update layout setting

assets/component-image-with-text.css

@@ -87,7 +87,7 @@
 }
 
 .image-with-text__content--mobile-right > * {
-  align-self: end;
+  align-self: flex-end;
   text-align: right;
 }
 
@@ -96,7 +96,7 @@
   text-align: center;
 }
 
-.image-with-text--overlay .image-with-text__content {
+.image-with-text--overlap .image-with-text__content {
   transform: translate(0 , -3rem);
   width: 90%;
   margin: 0 auto; 
@@ -118,12 +118,12 @@
   }
 
   .image-with-text__content--desktop-right > * {
-    align-self: end;
+    align-self: flex-end;
     text-align: right; 
   }
 
   .image-with-text__content--desktop-left > * {
-    align-self: start;
+    align-self: flex-start;
     text-align: left;
   }
 
@@ -132,41 +132,41 @@
     text-align: center;
   }
 
-  .image-with-text--overlay .image-with-text__text-item {
+  .image-with-text--overlap .image-with-text__text-item {
     display: flex;
     padding: 3rem 0; 
   }
 
-  .image-with-text--overlay .image-with-text__content {
+  .image-with-text--overlap .image-with-text__content {
     height: auto;
     min-width: calc(100% + 4rem);
     max-width: calc(100% + 4rem);
     transform: translate(-4rem, 0);
   }
 
-  .image-with-text--overlay .image-with-text__grid--reverse .image-with-text__content {
-    transform: translate(3rem, 0);
+  .image-with-text--overlap .image-with-text__grid--reverse .image-with-text__content {
+    transform: translate(4rem, 0);
   }
 
-  .image-with-text--overlay .image-with-text__grid--reverse .image-with-text__text-item {
+  .image-with-text--overlap .image-with-text__grid--reverse .image-with-text__text-item {
     justify-content: flex-end;
   }
 
-  .image-with-text--overlay .image-with-text__media-item--top { 
+  .image-with-text--overlap .image-with-text__media-item--top { 
     align-self: flex-start;
   }
 
-  .image-with-text--overlay .image-with-text__media-item--middle {
+  .image-with-text--overlap .image-with-text__media-item--middle {
     align-self: center;
   }
 
-  .image-with-text--overlay .image-with-text__media-item--bottom {
+  .image-with-text--overlap .image-with-text__media-item--bottom {
     align-self: flex-end;
   } 
 
-  .grid--3-col-tablet .image-with-text__media-item--small,
-  .grid--3-col-tablet .image-with-text__media-item--large + .image-with-text__text-item {
-    flex-grow: 0;
+  .image-with-text__media-item--small,
+  .image-with-text__media-item--large + .image-with-text__text-item {
+    flex-grow: 0; 
   }
 }
 

config/settings_data.json

@@ -60,4 +60,4 @@
       }
     }
   }
-}
+}

locales/en.default.schema.json

@@ -1024,8 +1024,14 @@
           },
           "label": "Desktop content position"
         },
-        "text_overlay": {
-          "label": "Display textbox as overlay"
+        "section_layout": {
+          "options__1": {
+            "label": "Standard"
+          },
+          "options__2": {
+            "label": "Overlap"
+          },
+          "label": "Section layout"
         },
         "mobile_content_alignment": {
           "options__1": {

sections/image-with-text.liquid

@@ -1,6 +1,6 @@
 {{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}
 
-<div class="image-with-text {% if section.settings.full_width %}image-with-text--full-width{% else %}page-width{% endif %}{% if section.settings.text_overlay %} image-with-text--overlay{% endif %} color-scheme-{{ section.settings.color_scheme }}">
+<div class="image-with-text {% if section.settings.full_width %}image-with-text--full-width{% else %}page-width{% endif %} image-with-text--{{ section.settings.section_layout }} color-scheme-{{ section.settings.color_scheme }}">
   <div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">
     <div class="image-with-text__media-item image-with-text__media-item--{{ section.settings.desktop_image_width }} image-with-text__media-item--{{ section.settings.desktop_content_position }} grid__item">
       <div class="image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %} gradient color-{{ section.settings.color_scheme }}"
@@ -158,10 +158,20 @@
       "label": "t:sections.image-with-text.settings.desktop_content_position.label"
     },
     {
-      "type": "checkbox",
-      "id": "text_overlay",
-      "default": false,
-      "label": "t:sections.image-with-text.settings.text_overlay.label"
+      "type": "select",
+      "id": "section_layout",
+      "options": [
+        {
+          "value": "standard",
+          "label": "t:sections.image-with-text.settings.section_layout.options__1.label"
+        },
+        {
+          "value": "overlap",
+          "label": "t:sections.image-with-text.settings.section_layout.options__2.label"
+        }
+      ],
+      "default": "standard",
+      "label": "t:sections.image-with-text.settings.section_layout.label"
     },
     {
       "type": "select",

templates/index.json

@@ -103,4 +103,4 @@
     "video",
     "multi_column"
   ]
-}
+}