media-object-refinement

rei · Dec 27, 2024 · 93b52eb · 93b52eb
1 parent 1f13dc5
commit 93b52eb
Showing 1 changed file with 18 additions and 5 deletions.
diff --git a/src/components/mediaObject/styles/vars/CdrMediaObject.vars.scss b/src/components/mediaObject/styles/vars/CdrMediaObject.vars.scss
@@ -2,13 +2,26 @@
 
 $media-object-component: 'media-object';
 
+@mixin media() {
+  & > *:first-child {
+    @content;
+  }
+}
+
+@mixin content() {
+  & > *:last-child {
+    @content;
+  }
+}
+
 // Base mixin for media object
 @mixin cdr-media-object-base-mixin($component) {
-  & > .cdr-#{$component}__media {
+  // & > .cdr-#{$component}__media {
+  @include media {
     grid-area: media;
   }
 
-  & > .cdr-#{$component}__content {
+  @include content {
     grid-area: content;
     container-type: size;
     width: 100%;
@@ -31,7 +44,7 @@ $media-object-component: 'media-object';
 // Allow for media to cover entire container
 @mixin cdr-media-object-cover-mixin($component) {
   &--cover {
-    & > .cdr-#{$component}__media {
+    @include media {
       width: 100%;
       height: 100%;
       display: flex;
@@ -53,7 +66,7 @@ $media-object-component: 'media-object';
   &--overlay {
     position: relative;
 
-    & > .cdr-#{$component}__content {
+    @include content {
       position: absolute;
       left: 0;
       right: 0;
@@ -70,7 +83,7 @@ $media-object-component: 'media-object';
 @mixin cdr-media-object-content-padding-mixin($component) {
   @include cdr-cq-mixin($component, 'content-padding');
 
-  & > .cdr-#{$component}__content {
+  @include content {
     padding: var(--cdr-#{$component}-content-padding);
   }
 }