diff --git a/demo/modals/index.html b/demo/modals/index.html index c6b11a48..695839c5 100644 --- a/demo/modals/index.html +++ b/demo/modals/index.html @@ -11,7 +11,7 @@ Modals / CSS Components / Zendesk Garden - + @@ -116,6 +116,27 @@

Dialog with Centered Backdrop Layout

.l-backdrop.l-backdrop--center Backdrop +

Various Dialog Layouts

+
+ Open Dialog with No Footer +
+
+ Open Dialog with Form Content +
+
+ Open Dialog with Overflowing Body Content +
+
+ Open Large Dialog with Overflowing Body Content +

Close button states

.c-dialog__close

@@ -413,9 +434,286 @@

Big

+ + + + + + + + + diff --git a/packages/modals/src/_body.css b/packages/modals/src/_body.css index 6f60e2b4..0e44303f 100644 --- a/packages/modals/src/_body.css +++ b/packages/modals/src/_body.css @@ -4,9 +4,7 @@ --zd-dialog__body-color: var(--zd-color-grey-800); --zd-dialog__body-font-size: var(--zd-font-size-md); --zd-dialog__body-line-height: calc(20 / 14); - --zd-dialog__body-padding: var(--zd-spacing) var(--zd-spacing-xl) 0; - --zd-dialog__body--last-child-padding: var(--zd-dialog__footer-padding-top); - --zd-dialog--large__body-padding: var(--zd-spacing) var(--zd-spacing-xl); + --zd-dialog__body-padding: 20px 40px; } /* 1. Reset for

, etc. */ @@ -21,11 +19,3 @@ color: var(--zd-dialog__body-color); font-size: var(--zd-dialog__body-font-size); } - -.c-dialog__body:last-child { - padding-bottom: var(--zd-dialog__body--last-child-padding); -} - -.c-dialog--large .c-dialog__body { - padding: var(--zd-dialog--large__body-padding); -} diff --git a/packages/modals/src/_footer.css b/packages/modals/src/_footer.css index 3bb8076f..3b1e4ffd 100644 --- a/packages/modals/src/_footer.css +++ b/packages/modals/src/_footer.css @@ -1,15 +1,15 @@ @import '@zendeskgarden/css-variables'; :root { - --zd-dialog__footer-padding-top: var(--zd-spacing-xl); - --zd-dialog__footer-padding: var(--zd-dialog__footer-padding-top) var(--zd-spacing-xl) 32px; + --zd-dialog__footer-padding: 20px 40px 32px; --zd-dialog__footer__item-margin: 20px; - --zd-dialog--large__footer-padding: 32px var(--zd-spacing-xl); + --zd-dialog--large__footer-padding: 32px 40px; --zd-dialog--large__footer-border-top: var(--zd-dialog__header-border-bottom); } .c-dialog__footer { display: flex; + flex-shrink: 0; align-items: center; justify-content: flex-end; padding: var(--zd-dialog__footer-padding);