feat(lightbox): add divider over footer (#2441)

eBay · Sep 20, 2024 · ed9a37a · ed9a37a
1 parent 88c1091
commit ed9a37a
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/.changeset/healthy-eyes-trade.md b/.changeset/healthy-eyes-trade.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(lightbox): add divider over footer
diff --git a/dist/lightbox-dialog/lightbox-dialog.css b/dist/lightbox-dialog/lightbox-dialog.css
@@ -79,6 +79,8 @@
 }
 
 .lightbox-dialog__footer {
+    border-top: 1px solid
+        var(--dialog-lightbox-separator-color, var(--color-stroke-subtle));
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -283,7 +285,6 @@ button.icon-btn.lightbox-dialog__prev {
     .lightbox-dialog__window .lightbox-dialog__footer {
         flex-direction: row;
         justify-content: flex-end;
-        padding: 0 var(--spacing-200) var(--spacing-200);
     }
     .lightbox-dialog__window .lightbox-dialog__footer > :not(:first-child) {
         margin-left: var(--spacing-100);

diff --git a/src/sass/lightbox-dialog/lightbox-dialog.scss b/src/sass/lightbox-dialog/lightbox-dialog.scss
@@ -28,6 +28,9 @@
 
 .lightbox-dialog__footer {
     @include dialog-footer-content();
+
+    border-top: 1px solid
+        var(--dialog-lightbox-separator-color, var(--color-stroke-subtle));
 }
 
 .lightbox-dialog__image {

diff --git a/src/sass/mixins/private/_dialog-mixins.scss b/src/sass/mixins/private/_dialog-mixins.scss
@@ -122,7 +122,6 @@
 @mixin dialog-footer-content-large() {
     flex-direction: row;
     justify-content: flex-end;
-    padding: 0 var(--spacing-200) var(--spacing-200);
 
     & > :not(:first-child) {
         margin-left: var(--spacing-100);