media-object-refinement

rei · Jan 2, 2025 · 3e21dc3 · 3e21dc3
1 parent 26973e5
commit 3e21dc3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/src/components/mediaObject/examples/MediaObject.vue b/src/components/mediaObject/examples/MediaObject.vue
@@ -149,7 +149,7 @@ const examples: MediaObjectExample[] = [
     props: {
       background: 'brand-spruce',
       gap: 'two-x',
-      contentPadding: 'none',
+      contentPadding: 'zero',
     },
     flags: ['color-inverse'],
   },

diff --git a/src/components/mediaObject/styles/vars/CdrMediaObject.vars.scss b/src/components/mediaObject/styles/vars/CdrMediaObject.vars.scss
@@ -2,21 +2,21 @@
 
 $media-object-component: 'media-object';
 
-@mixin media() {
+@mixin cdr-media-object-media-mixin() {
   & > *:first-child {
     @content;
   }
 }
 
-@mixin content() {
+@mixin cdr-media-object-content-mixin() {
   & > *:last-child {
     @content;
   }
 }
 
 // Base mixin for media object
 @mixin cdr-media-object-base-mixin($component) {
-  @include media {
+  @include cdr-media-object-media-mixin {
     grid-area: media;
 
     & > img,
@@ -26,7 +26,7 @@ $media-object-component: 'media-object';
     }
   }
 
-  @include content {
+  @include cdr-media-object-content-mixin {
     grid-area: content;
     container-type: inline-size;
     width: 100%;
@@ -48,7 +48,7 @@ $media-object-component: 'media-object';
 
 // Allow for media to cover entire container
 @mixin cdr-media-object-cover-mixin($component) {
-  @include media {
+  @include cdr-media-object-media-mixin {
     width: 100%;
     height: 100%;
     display: flex;
@@ -70,7 +70,7 @@ $media-object-component: 'media-object';
   grid-template-areas: 'media';
   position: relative;
 
-  @include content {
+  @include cdr-media-object-content-mixin {
     position: absolute;
     left: 0;
     right: 0;
@@ -86,7 +86,7 @@ $media-object-component: 'media-object';
 @mixin cdr-media-object-content-padding-mixin($component) {
   @include cdr-cq-mixin($component, 'content-padding');
 
-  @include content {
+  @include cdr-media-object-content-mixin {
     padding: var(--cdr-#{$component}-content-padding);
   }
 }
diff --git a/src/types/interfaces.ts b/src/types/interfaces.ts
@@ -362,7 +362,7 @@ export interface MediaObject extends Layout {
    */
   mediaCover?: boolean;
   /**
-   * Determines if content will overlay the media. A default media height is set, but it is suggested to apply your own using container width units (cqw) or pixels (px).
+   * Determines if content will overlay the media. A default media height is set, but it is suggested to apply your own using as value such as container width units (cqw) or rem.
    */
   overlay?: boolean;
   /**