Skip to content

feat(NcDialog): expose modal container padding as CSS variables #8767

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
skjnldsv wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat(NcDialog): expose modal container padding as CSS variables #8767

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions src/components/NcDialog/NcDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -566,10 +566,18 @@ const modalProps = computed(() => ({
overflow: hidden;

&__modal {
// Padding of the modal container around the dialog. Exposed as custom
// properties so consumers can adjust it without overriding internals.
// Defaults: 4px block-start to align with the close button (0 block-end so
// overflowing content looks nice on scroll), 12px inline-start to align
// with the modal padding (0 inline-end to keep the actions' outline margin).
--dialog-padding-block: 4px 0;
--dialog-padding-inline: 12px 0;

:deep(.modal-wrapper .modal-container) {
display: flex !important;
padding-block: 4px 0; // 4px to align with close button, 0 block-end to make overflowing content on scroll look nice
padding-inline: 12px 0; // Same as with padding-block, we need the actions to have a margin of 4px for the button outline
padding-block: var(--dialog-padding-block);
padding-inline: var(--dialog-padding-inline);
}
:deep(.modal-wrapper .modal-container__content) {
display: flex;
Expand Down
Loading