fix(file-preview-card): action with nested button

LuLaValva · LuLaValva · commit 80c8f27919b4 · 2024-10-25T09:03:34.000-07:00
diff --git a/dist/file-preview-card/file-preview-card.css b/dist/file-preview-card/file-preview-card.css
@@ -37,6 +37,7 @@ video.file-preview-card__asset {
 }
 
 .file-preview-card__asset--fade {
+    background-color: inherit;
     opacity: 0.5;
 }
 
@@ -45,16 +46,19 @@ video.file-preview-card__asset {
     width: 40%;
 }
 
-.icon-btn.file-preview-card__action {
+.file-preview-card__body .icon-btn {
     height: var(--spacing-400);
+    width: var(--spacing-400);
+}
+
+.file-preview-card__body > .file-preview-card__action {
     position: absolute;
     right: var(--spacing-100);
     top: var(--spacing-100);
-    width: var(--spacing-400);
     z-index: 1;
 }
 
-.file-preview-card__action:dir(rtl) {
+.file-preview-card__body > .file-preview-card__action:dir(rtl) {
     left: var(--spacing-100);
     right: auto;
 }
diff --git a/src/sass/file-preview-card/file-preview-card.scss b/src/sass/file-preview-card/file-preview-card.scss
@@ -53,16 +53,19 @@ video.file-preview-card__asset {
     width: 40%;
 }
 
-.icon-btn.file-preview-card__action {
+.file-preview-card__body .icon-btn {
     height: var(--spacing-400);
+    width: var(--spacing-400);
+}
+
+.file-preview-card__body > .file-preview-card__action {
     position: absolute;
     right: var(--spacing-100);
     top: var(--spacing-100);
-    width: var(--spacing-400);
     z-index: 1;
 }
 
-.file-preview-card__action:dir(rtl) {
+.file-preview-card__body > .file-preview-card__action:dir(rtl) {
     left: var(--spacing-100);
     right: auto;
 }

Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,7 @@ video.file-preview-card__asset {`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`.file-preview-card__asset--fade {`
	`40`	`+ background-color: inherit;`
`40`	`41`	`opacity: 0.5;`
`41`	`42`	`}`
`42`	`43`
`@@ -45,16 +46,19 @@ video.file-preview-card__asset {`
`45`	`46`	`width: 40%;`
`46`	`47`	`}`
`47`	`48`
`48`		`-.icon-btn.file-preview-card__action {`
	`49`	`+.file-preview-card__body .icon-btn {`
`49`	`50`	`height: var(--spacing-400);`
	`51`	`+ width: var(--spacing-400);`
	`52`	`+}`
	`53`	`+`
	`54`	`+.file-preview-card__body > .file-preview-card__action {`
`50`	`55`	`position: absolute;`
`51`	`56`	`right: var(--spacing-100);`
`52`	`57`	`top: var(--spacing-100);`
`53`		`- width: var(--spacing-400);`
`54`	`58`	`z-index: 1;`
`55`	`59`	`}`
`56`	`60`
`57`		`-.file-preview-card__action:dir(rtl) {`
	`61`	`+.file-preview-card__body > .file-preview-card__action:dir(rtl) {`
`58`	`62`	`left: var(--spacing-100);`
`59`	`63`	`right: auto;`
`60`	`64`	`}`