← Index · ← File index · ← Prev · Next → · 📄 source

#4170: modal.scss

site/_sass/uikit/theme/modal.scss

Path: site/_sass/uikit/theme/modal.scss · Lines: 84 · Active vars: 8 · Hooks: 14

Purpose: Themes modal dialogs — full-screen overlay with centered card. Controls: unified header/body/footer backgrounds (all matching for seamlessness), border separators, close button position/size/background for 3 variants (default inside, outside, fullscreen). Cookie consent banner and image lightboxes depend on this.

Source: GitHub

84 lines · 8 code · 36 comments · 40 blank
CommitMessage
ac75fabf3Github pages migrated to Asciidoc
$modal-header-background: $modal-dialog-background !default;  // Header = body = seamless
$modal-footer-background: $modal-dialog-background !default;  // Footer matches too
$modal-header-border:     $global-border !default;            // Thin separator line
$modal-close-full-padding: $global-margin !default;           // Fullscreen close button spacing

Unified background design: Both header and footer backgrounds match the dialog body — the modal appears as one seamless card rather than distinct sections. This is appropriate for the ProjectForge site's minimal use of modals (cookie consent, lightbox). A visually distinct header/body/footer would be appropriate for complex modals with forms.

14 hooks — second most of any component after button — because close buttons have 5 positioning variants (default inside corner, outside dialog, fullscreen corner) + hover states for each. Fullscreen close button gets extra theming (background matching dialog for blend-in effect).

← #4059 · #4061 →
← Index · ← File index · ← Prev · Next → · 📄 source

#4170: modal.scss

Path: site/_sass/uikit/theme/modal.scss · Lines: 84 · Active vars: 8 · Hooks: 14

Purpose: Themes modal dialogs — full-screen overlay with centered card. Controls: unified header/body/footer backgrounds (all matching for seamlessness), border separators, close button position/size/background for 3 variants (default inside, outside, fullscreen). Cookie consent banner and image lightboxes depend on this.

Source: GitHub

CommitMessage
ac75fabf3Github pages migrated to Asciidoc
$modal-header-background: $modal-dialog-background !default;  // Header = body = seamless
$modal-footer-background: $modal-dialog-background !default;  // Footer matches too
$modal-header-border:     $global-border !default;            // Thin separator line
$modal-close-full-padding: $global-margin !default;           // Fullscreen close button spacing

Unified background design: Both header and footer backgrounds match the dialog body — the modal appears as one seamless card rather than distinct sections. This is appropriate for the ProjectForge site's minimal use of modals (cookie consent, lightbox). A visually distinct header/body/footer would be appropriate for complex modals with forms.

14 hooks — second most of any component after button — because close buttons have 5 positioning variants (default inside corner, outside dialog, fullscreen corner) + hover states for each. Fullscreen close button gets extra theming (background matching dialog for blend-in effect).

← #4059 · #4061 →