From 7fdfb993f95c680e081a1249f480ebd89b292e65 Mon Sep 17 00:00:00 2001 From: Dan M Date: Wed, 7 Jan 2026 16:32:20 -0500 Subject: [PATCH 1/5] Create overlay component --- resources/styles/molecules/index.scss | 1 + resources/styles/molecules/overlay/index.scss | 95 +++++++++++++++++++ .../styles/molecules/overlay/overlay.html | 26 +++++ 3 files changed, 122 insertions(+) create mode 100644 resources/styles/molecules/overlay/index.scss create mode 100644 resources/styles/molecules/overlay/overlay.html diff --git a/resources/styles/molecules/index.scss b/resources/styles/molecules/index.scss index c8ac016..a85a2ad 100644 --- a/resources/styles/molecules/index.scss +++ b/resources/styles/molecules/index.scss @@ -9,6 +9,7 @@ @forward "mediaBanner"; @forward "mobileNavigation"; @forward "navigation"; +@forward "overlay"; @forward "pagination"; @forward "sitemap"; @forward "tabs"; diff --git a/resources/styles/molecules/overlay/index.scss b/resources/styles/molecules/overlay/index.scss new file mode 100644 index 0000000..153ec71 --- /dev/null +++ b/resources/styles/molecules/overlay/index.scss @@ -0,0 +1,95 @@ +.overlay { + background: rgba(13, 0, 26, 0.70); + border: 0; + border-radius: 0; + box-shadow: none; + display: grid; + height: 100%; + inset: 0; + justify-items: center; + max-height: 100%; + max-width: 100%; + padding: var(--root-gap); + place-content: center; + position: fixed; + width: 100%; + + &::backdrop { + backdrop-filter: blur(12px); + background: rgba(13, 0, 26, 0.70); + } + + &:not([open]) { + display: none; + } + + /** + * Note: This sibling element is only needed for static HTML demos using the `open` attribute. + * For production, use showModal() to open the dialog and the ::backdrop pseudo-element above + * will provide the blur effect. The .overlay__backdrop element can be omitted. + */ + &__backdrop { + backdrop-filter: blur(12px); + background: rgba(13, 0, 26, 0.70); + inset: 0; + position: fixed; + + &:not(:has(+ .overlay[open])) { + display: none; + } + } + + &__close { + appearance: none; + background: transparent; + border: 0; + color: #fff; + cursor: pointer; + height: 5.25rem; + padding: 0; + position: absolute; + right: 1rem; + top: 1rem; + transition: opacity var(--root-ease-out-fast), + transform var(--root-ease-out-fast); + width: 5.25rem; + z-index: 1; + + &:hover { + opacity: 0.8; + transform: scale(1.1); + } + } + + &__content { + display: grid; + gap: 1rem; + justify-items: center; + max-height: calc(100vh - var(--root-gap) * 2); + max-width: min(90vw, 56rem); + } + + &__figure { + display: grid; + gap: 1rem; + justify-items: center; + margin: 0; + } + + &__image { + border-radius: 0.25rem; + box-shadow: var(--root-box-shadow-high); + display: block; + height: auto; + max-height: calc(100vh - 8rem); + max-width: 100%; + object-fit: contain; + } + + &__caption { + color: rgba(255, 255, 255, 0.9); + font-size: 1rem; + text-align: center; + } +} + diff --git a/resources/styles/molecules/overlay/overlay.html b/resources/styles/molecules/overlay/overlay.html new file mode 100644 index 0000000..afcf75d --- /dev/null +++ b/resources/styles/molecules/overlay/overlay.html @@ -0,0 +1,26 @@ +
+

Background Content

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

+
+ + +
+ + +
+
+ Example landscape image +
Eget nibh pretium ipsum auctor pharetra.
+
+
+ From 0ea26e1f9ed00315c283d9ae8a89c9c679d3863c Mon Sep 17 00:00:00 2001 From: Dan M Date: Fri, 16 Jan 2026 16:24:53 -0500 Subject: [PATCH 2/5] Create opened overlay option / move dialog to molecule --- .../dialog/dialog.html | 0 .../dialog/index.scss | 0 resources/styles/molecules/index.scss | 1 + .../molecules/overlay/overlay--opened.html | 30 +++++++++++++++++++ .../styles/molecules/overlay/overlay.html | 11 +++---- resources/styles/organisms/index.scss | 1 - 6 files changed, 35 insertions(+), 8 deletions(-) rename resources/styles/{organisms => molecules}/dialog/dialog.html (100%) rename resources/styles/{organisms => molecules}/dialog/index.scss (100%) create mode 100644 resources/styles/molecules/overlay/overlay--opened.html diff --git a/resources/styles/organisms/dialog/dialog.html b/resources/styles/molecules/dialog/dialog.html similarity index 100% rename from resources/styles/organisms/dialog/dialog.html rename to resources/styles/molecules/dialog/dialog.html diff --git a/resources/styles/organisms/dialog/index.scss b/resources/styles/molecules/dialog/index.scss similarity index 100% rename from resources/styles/organisms/dialog/index.scss rename to resources/styles/molecules/dialog/index.scss diff --git a/resources/styles/molecules/index.scss b/resources/styles/molecules/index.scss index a85a2ad..a092685 100644 --- a/resources/styles/molecules/index.scss +++ b/resources/styles/molecules/index.scss @@ -3,6 +3,7 @@ @forward "banner"; @forward "card"; @forward "checklist"; +@forward "dialog"; @forward "field"; @forward "list"; @forward "logoCloud"; diff --git a/resources/styles/molecules/overlay/overlay--opened.html b/resources/styles/molecules/overlay/overlay--opened.html new file mode 100644 index 0000000..3c315e8 --- /dev/null +++ b/resources/styles/molecules/overlay/overlay--opened.html @@ -0,0 +1,30 @@ +
+

Background Content

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

+
+ +
+
+ + +
+ + +
+
+ Example landscape image +
Eget nibh pretium ipsum auctor pharetra.
+
+
+ + \ No newline at end of file diff --git a/resources/styles/molecules/overlay/overlay.html b/resources/styles/molecules/overlay/overlay.html index afcf75d..21f0fc9 100644 --- a/resources/styles/molecules/overlay/overlay.html +++ b/resources/styles/molecules/overlay/overlay.html @@ -2,15 +2,12 @@

Background Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

+
+ +
- -
- + -
- - + - -