From 7c1000c1b5d89560e0082370108c26d518f80f76 Mon Sep 17 00:00:00 2001 From: Ikshu Jain Date: Fri, 15 May 2026 00:44:57 +0530 Subject: [PATCH 1/2] FORMS-25002: Adding styles for Signature Step, Summary Step, Adobe Sign Block --- .../adobesignblock/_adobesignblock.scss | 46 +++++ .../signaturestep/_signaturestep.scss | 58 ++++++ src/components/signing/_signing.scss | 165 ++++++++++++++++++ src/components/summarystep/_summarystep.scss | 38 ++++ src/theme.scss | 4 + 5 files changed, 311 insertions(+) create mode 100644 src/components/adobesignblock/_adobesignblock.scss create mode 100644 src/components/signaturestep/_signaturestep.scss create mode 100644 src/components/signing/_signing.scss create mode 100644 src/components/summarystep/_summarystep.scss diff --git a/src/components/adobesignblock/_adobesignblock.scss b/src/components/adobesignblock/_adobesignblock.scss new file mode 100644 index 0000000..c58c61e --- /dev/null +++ b/src/components/adobesignblock/_adobesignblock.scss @@ -0,0 +1,46 @@ +/* =============== Adobe Sign Block ================== */ +/* Matches foundation .adobeSignBlockText + styles.css [data-adobesigntype] */ + +/* Container wrapping inline Adobe Sign signature fields in the form body */ +.adobeSignBlockText { + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; + padding: 0.5rem; + background: rgba(0, 0, 0, 0.02); +} + +/* Adobe Sign field placeholders — rendered as inline elements by the signing JS */ + +/* Prevent text selection from revealing the transparent placeholder text */ +[data-adobesigntype]::selection { + color: rgba(0, 0, 0, 0); +} + +[data-adobesigntype]::-moz-selection { + color: rgba(0, 0, 0, 0); +} + +[data-adobesigntype] { + width: 6rem; + display: inline-block; + color: rgba(0, 0, 0, 0); + border-bottom: 1px solid rgba(0, 0, 0, 0.3); + margin-left: 0.5rem; + margin-right: 0.5rem; + white-space: nowrap; + overflow: hidden; + cursor: pointer; +} + +[data-adobesigntype='radio'], +[data-adobesigntype='checkbox'] { + border-bottom-width: 0; + background-repeat: no-repeat; + background-position: left center; + width: 3rem; +} + +[data-adobesigntype='dropdown'] { + background-repeat: no-repeat; + background-position: right center; +} diff --git a/src/components/signaturestep/_signaturestep.scss b/src/components/signaturestep/_signaturestep.scss new file mode 100644 index 0000000..a2ef2bc --- /dev/null +++ b/src/components/signaturestep/_signaturestep.scss @@ -0,0 +1,58 @@ +/* =============== Signature Step (Adobe Sign Block) ================== */ +/* Matches foundation .guideESignComponent + signing.less values */ + +.cmp-adaptiveform-signaturestep { + position: relative; + height: 540px; + border: 1px solid $very-light-gray; + overflow: auto; + max-width: 100%; + text-align: center; +} + +/* Header — mirrors guideESignTitle: 2em, transparent bg, minimal padding */ +.cmp-adaptiveform-signaturestep__header { + font-size: 2em; + padding: 0.05em; + background-color: transparent; +} + +.cmp-adaptiveform-signaturestep__title { + color: $dark-gray; + font-weight: 400; +} + +/* Body — takes remaining height after the 2em header (~3.5em with padding) */ +.cmp-adaptiveform-signaturestep__body { + width: 100%; + height: calc(100% - 3.5em); + overflow: auto; +} + +/* Loading message — mirrors guideESignTemplateMessage: inner border, centred text at 30% */ +.cmp-adaptiveform-signaturestep__template-message { + width: 100%; + height: 90%; + border: 1px solid $gray; + font-size: 1.2em; + color: $dark-gray; + text-align: center; + padding-top: 30%; + overflow: auto; + box-sizing: border-box; +} + +/* Adobe Sign iframe fills the body when shown (JS toggles display) */ +.cmp-adaptiveform-signaturestep__iframe { + width: 100%; + height: 100%; +} + +.cmp-adaptiveform-signaturestep__error { + padding: 1em; + font-size: 1.2em; + color: $error; + background-color: $light-error; + text-align: center; + border-radius: 4px; +} diff --git a/src/components/signing/_signing.scss b/src/components/signing/_signing.scss new file mode 100644 index 0000000..4c87c27 --- /dev/null +++ b/src/components/signing/_signing.scss @@ -0,0 +1,165 @@ +/* ======= Foundation Signing Components (esign / summary / adobeSignBlock) ======= + * Matches canvas-3-0 theme.css + signing.less values for guideESignComponent, + * guideSummaryComponent, and adobeSignBlockText CSS classes rendered by the + * foundation fd/afaddon components in the current test form. + * ================================================================================ */ + +/* --- Functional visibility classes (signing.less) --- */ + +.signing_hidden { + display: none !important; +} + +.signing_client_error { + text-align: center; + color: $error; +} + +.maximized_view { + position: fixed; + height: 100%; + width: 100%; + left: 0; + top: 0; + z-index: 1100; +} + +.hidePdfFrame { + height: 0 !important; +} + +/* --- Signature Step (foundation esign) --- */ + +.guideESignComponent { + text-align: center; + position: relative; + height: 540px; + border: 1px solid $very-light-gray; + overflow: auto; + max-width: 100%; +} + +.guideESignTitle { + font-size: 2em; + padding: 0.05em; + background-color: transparent; + color: $dark-gray; +} + +.guideESignTemplateMessage { + width: 100%; + height: 90%; + border: 1px solid $gray; + font-size: 1.2em; + overflow: auto; + box-sizing: border-box; + text-align: center; + padding-top: 30%; + color: $dark-gray; +} + +.guideESignSignablePdf { + width: 100%; + height: calc(100% - 3.5em); +} + +.guideESignErrorMessage { + text-align: center; + color: $error; + padding: 1em; +} + +.guideESignWarningMessage { + display: inline-block; + float: left; + margin: 10px 0 0 10px; + height: 20px; + width: 20px; +} + +.guideESignMaxResize, +.guideESignMinResize { + float: left; + height: 30px; + width: 30px; + margin: 10px 0 0 10px; + cursor: pointer; +} + +/* --- Summary Step (foundation summary) --- */ + +.guideSummaryComponent { + text-align: center; + max-width: 100%; + position: relative; + height: 500px; + border: 1px solid $very-light-gray; + overflow: auto; +} + +.guideSummaryTitle { + font-size: 2em; + padding: 0.05em; + background-color: transparent; + color: $dark-gray; + font-weight: 400; +} + +.guideSummaryMessage, +.guideSummaryErrorMessage { + width: 100%; + height: calc(100% - 3.5em); + overflow: auto; + color: $dark-gray; + font-size: $font-md; + line-height: 1.5; + + a { + color: $vivid-blue; + text-decoration: underline; + } +} + +/* --- Adobe Sign Block (inline signature field container) --- */ + +.adobeSignBlockText { + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; + padding: 0.5rem; + background: rgba(0, 0, 0, 0.02); +} + +/* Adobe Sign field placeholders rendered by signing JS */ + +[data-adobesigntype]::selection { + color: rgba(0, 0, 0, 0); +} + +[data-adobesigntype]::-moz-selection { + color: rgba(0, 0, 0, 0); +} + +[data-adobesigntype] { + width: 6rem; + display: inline-block; + color: rgba(0, 0, 0, 0); + border-bottom: 1px solid rgba(0, 0, 0, 0.3); + margin-left: 0.5rem; + margin-right: 0.5rem; + white-space: nowrap; + overflow: hidden; + cursor: pointer; +} + +[data-adobesigntype='radio'], +[data-adobesigntype='checkbox'] { + border-bottom-width: 0; + background-repeat: no-repeat; + background-position: left center; + width: 3rem; +} + +[data-adobesigntype='dropdown'] { + background-repeat: no-repeat; + background-position: right center; +} diff --git a/src/components/summarystep/_summarystep.scss b/src/components/summarystep/_summarystep.scss new file mode 100644 index 0000000..6762a87 --- /dev/null +++ b/src/components/summarystep/_summarystep.scss @@ -0,0 +1,38 @@ +/* =============== Summary Step ================== */ +/* Matches foundation .guideSummaryComponent + signing.less values */ + +.cmp-adaptiveform-summarystep { + position: relative; + height: 500px; + border: 1px solid $very-light-gray; + overflow: auto; + max-width: 100%; + text-align: center; +} + +/* Title — mirrors guideESignTitle / guideSummaryTitle: 2em, transparent bg */ +.cmp-adaptiveform-summarystep__title { + font-size: 2em; + padding: 0.05em; + background-color: transparent; + color: $dark-gray; + font-weight: 400; +} + +/* Content area — mirrors guideSummaryMessage: full width, remaining height */ +.cmp-adaptiveform-summarystep__content { + width: 100%; + height: calc(100% - 3.5em); + overflow: auto; +} + +.cmp-adaptiveform-summarystep__message { + color: $dark-gray; + font-size: $font-md; + line-height: 1.5; + + a { + color: $vivid-blue; + text-decoration: underline; + } +} diff --git a/src/theme.scss b/src/theme.scss index 3f94c08..1901ccc 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -43,5 +43,9 @@ @import './components/turnstile/_turnstile.scss'; @import './components/review/_review.scss'; @import './components/scribble/_scribble.scss'; +@import './components/signaturestep/_signaturestep.scss'; +@import './components/summarystep/_summarystep.scss'; +@import './components/adobesignblock/_adobesignblock.scss'; +@import './components/signing/_signing.scss'; @import './components/datetime/_datetime.scss'; @import './components/imagechoice/_imagechoice.scss'; From 8d1c46c49361e6cd318438e23d54340b1623d02c Mon Sep 17 00:00:00 2001 From: Ikshu Jain Date: Sun, 17 May 2026 22:04:44 +0530 Subject: [PATCH 2/2] FORMS-25002: Component level container fixes --- .../adobesignblock/_adobesignblock.scss | 5 +- .../signaturestep/_signaturestep.scss | 7 +- src/components/signing/_signing.scss | 165 ------------------ src/components/summarystep/_summarystep.scss | 3 - src/theme.scss | 1 - 5 files changed, 3 insertions(+), 178 deletions(-) delete mode 100644 src/components/signing/_signing.scss diff --git a/src/components/adobesignblock/_adobesignblock.scss b/src/components/adobesignblock/_adobesignblock.scss index c58c61e..594905c 100644 --- a/src/components/adobesignblock/_adobesignblock.scss +++ b/src/components/adobesignblock/_adobesignblock.scss @@ -1,8 +1,7 @@ /* =============== Adobe Sign Block ================== */ -/* Matches foundation .adobeSignBlockText + styles.css [data-adobesigntype] */ -/* Container wrapping inline Adobe Sign signature fields in the form body */ -.adobeSignBlockText { +.adobeSignBlockText, +.cmp-adaptiveform-adobesignblock { border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; padding: 0.5rem; diff --git a/src/components/signaturestep/_signaturestep.scss b/src/components/signaturestep/_signaturestep.scss index a2ef2bc..1bdae48 100644 --- a/src/components/signaturestep/_signaturestep.scss +++ b/src/components/signaturestep/_signaturestep.scss @@ -1,5 +1,4 @@ -/* =============== Signature Step (Adobe Sign Block) ================== */ -/* Matches foundation .guideESignComponent + signing.less values */ +/* =============== Signature Step ================== */ .cmp-adaptiveform-signaturestep { position: relative; @@ -10,7 +9,6 @@ text-align: center; } -/* Header — mirrors guideESignTitle: 2em, transparent bg, minimal padding */ .cmp-adaptiveform-signaturestep__header { font-size: 2em; padding: 0.05em; @@ -22,14 +20,12 @@ font-weight: 400; } -/* Body — takes remaining height after the 2em header (~3.5em with padding) */ .cmp-adaptiveform-signaturestep__body { width: 100%; height: calc(100% - 3.5em); overflow: auto; } -/* Loading message — mirrors guideESignTemplateMessage: inner border, centred text at 30% */ .cmp-adaptiveform-signaturestep__template-message { width: 100%; height: 90%; @@ -42,7 +38,6 @@ box-sizing: border-box; } -/* Adobe Sign iframe fills the body when shown (JS toggles display) */ .cmp-adaptiveform-signaturestep__iframe { width: 100%; height: 100%; diff --git a/src/components/signing/_signing.scss b/src/components/signing/_signing.scss deleted file mode 100644 index 4c87c27..0000000 --- a/src/components/signing/_signing.scss +++ /dev/null @@ -1,165 +0,0 @@ -/* ======= Foundation Signing Components (esign / summary / adobeSignBlock) ======= - * Matches canvas-3-0 theme.css + signing.less values for guideESignComponent, - * guideSummaryComponent, and adobeSignBlockText CSS classes rendered by the - * foundation fd/afaddon components in the current test form. - * ================================================================================ */ - -/* --- Functional visibility classes (signing.less) --- */ - -.signing_hidden { - display: none !important; -} - -.signing_client_error { - text-align: center; - color: $error; -} - -.maximized_view { - position: fixed; - height: 100%; - width: 100%; - left: 0; - top: 0; - z-index: 1100; -} - -.hidePdfFrame { - height: 0 !important; -} - -/* --- Signature Step (foundation esign) --- */ - -.guideESignComponent { - text-align: center; - position: relative; - height: 540px; - border: 1px solid $very-light-gray; - overflow: auto; - max-width: 100%; -} - -.guideESignTitle { - font-size: 2em; - padding: 0.05em; - background-color: transparent; - color: $dark-gray; -} - -.guideESignTemplateMessage { - width: 100%; - height: 90%; - border: 1px solid $gray; - font-size: 1.2em; - overflow: auto; - box-sizing: border-box; - text-align: center; - padding-top: 30%; - color: $dark-gray; -} - -.guideESignSignablePdf { - width: 100%; - height: calc(100% - 3.5em); -} - -.guideESignErrorMessage { - text-align: center; - color: $error; - padding: 1em; -} - -.guideESignWarningMessage { - display: inline-block; - float: left; - margin: 10px 0 0 10px; - height: 20px; - width: 20px; -} - -.guideESignMaxResize, -.guideESignMinResize { - float: left; - height: 30px; - width: 30px; - margin: 10px 0 0 10px; - cursor: pointer; -} - -/* --- Summary Step (foundation summary) --- */ - -.guideSummaryComponent { - text-align: center; - max-width: 100%; - position: relative; - height: 500px; - border: 1px solid $very-light-gray; - overflow: auto; -} - -.guideSummaryTitle { - font-size: 2em; - padding: 0.05em; - background-color: transparent; - color: $dark-gray; - font-weight: 400; -} - -.guideSummaryMessage, -.guideSummaryErrorMessage { - width: 100%; - height: calc(100% - 3.5em); - overflow: auto; - color: $dark-gray; - font-size: $font-md; - line-height: 1.5; - - a { - color: $vivid-blue; - text-decoration: underline; - } -} - -/* --- Adobe Sign Block (inline signature field container) --- */ - -.adobeSignBlockText { - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 4px; - padding: 0.5rem; - background: rgba(0, 0, 0, 0.02); -} - -/* Adobe Sign field placeholders rendered by signing JS */ - -[data-adobesigntype]::selection { - color: rgba(0, 0, 0, 0); -} - -[data-adobesigntype]::-moz-selection { - color: rgba(0, 0, 0, 0); -} - -[data-adobesigntype] { - width: 6rem; - display: inline-block; - color: rgba(0, 0, 0, 0); - border-bottom: 1px solid rgba(0, 0, 0, 0.3); - margin-left: 0.5rem; - margin-right: 0.5rem; - white-space: nowrap; - overflow: hidden; - cursor: pointer; -} - -[data-adobesigntype='radio'], -[data-adobesigntype='checkbox'] { - border-bottom-width: 0; - background-repeat: no-repeat; - background-position: left center; - width: 3rem; -} - -[data-adobesigntype='dropdown'] { - background-repeat: no-repeat; - background-position: right center; -} diff --git a/src/components/summarystep/_summarystep.scss b/src/components/summarystep/_summarystep.scss index 6762a87..33c8cca 100644 --- a/src/components/summarystep/_summarystep.scss +++ b/src/components/summarystep/_summarystep.scss @@ -1,5 +1,4 @@ /* =============== Summary Step ================== */ -/* Matches foundation .guideSummaryComponent + signing.less values */ .cmp-adaptiveform-summarystep { position: relative; @@ -10,7 +9,6 @@ text-align: center; } -/* Title — mirrors guideESignTitle / guideSummaryTitle: 2em, transparent bg */ .cmp-adaptiveform-summarystep__title { font-size: 2em; padding: 0.05em; @@ -19,7 +17,6 @@ font-weight: 400; } -/* Content area — mirrors guideSummaryMessage: full width, remaining height */ .cmp-adaptiveform-summarystep__content { width: 100%; height: calc(100% - 3.5em); diff --git a/src/theme.scss b/src/theme.scss index 1901ccc..f52014c 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -46,6 +46,5 @@ @import './components/signaturestep/_signaturestep.scss'; @import './components/summarystep/_summarystep.scss'; @import './components/adobesignblock/_adobesignblock.scss'; -@import './components/signing/_signing.scss'; @import './components/datetime/_datetime.scss'; @import './components/imagechoice/_imagechoice.scss';