diff --git a/src/components/adobesignblock/_adobesignblock.scss b/src/components/adobesignblock/_adobesignblock.scss new file mode 100644 index 0000000..bc0e7d8 --- /dev/null +++ b/src/components/adobesignblock/_adobesignblock.scss @@ -0,0 +1,90 @@ +// ============================================================================ +// Adobe Sign Block — Core Adaptive Form Component +// Renders rich text with data-adobesigntype placeholder spans. +// ============================================================================ + +.cmp-adaptiveform-adobesignblock { + display: block; + font-family: $font-family; + font-size: $font-md; + color: $dark-gray; + margin: $field-margin; +} + +.cmp-adaptiveform-adobesignblock__label-container { + margin-bottom: 0.5rem; +} + +.cmp-adaptiveform-adobesignblock__label { + font-family: $font-family; + font-size: $font-md; + font-weight: normal; + color: $dark-gray; +} + +.cmp-adaptiveform-adobesignblock__value { + line-height: 1.5; + border: 1px solid $very-light-gray; + border-radius: 8px; + background-color: $panel-bg-color; + padding: 1.25rem 1.5rem; + min-height: 5rem; + + p { + margin: 0 0 0.5rem; + + &:last-child { + margin-bottom: 0; + } + } + + // Hide raw {{…}} token text in placeholders (authoring + runtime) + [data-adobesigntype]::selection { + color: rgba(0, 0, 0, 0); + } + + [data-adobesigntype]::-moz-selection { + color: rgba(0, 0, 0, 0); + } + + // Default field placeholder (signature, text, number, date, etc.) + [data-adobesigntype] { + width: 6rem; + display: inline-block; + color: rgba(0, 0, 0, 0); + border-bottom-style: solid; + border-bottom-width: 1px; + border-bottom-color: rgba(0, 0, 0, 0.3); + margin-left: 0.5rem; + margin-right: 0.5rem; + white-space: nowrap; + overflow: hidden; + cursor: pointer; + vertical-align: bottom; + min-height: 1em; + } + + // Radio and checkbox: icon + label bar, no underline + [data-adobesigntype='radio'], + [data-adobesigntype='checkbox'] { + border-bottom-width: 0; + background-repeat: no-repeat; + background-position: left center; + width: 3rem; + min-width: 3rem; + } + + [data-adobesigntype='radio'] { + background-image: url(./resources/images/radiobutton.svg); + } + + [data-adobesigntype='checkbox'] { + background-image: url(./resources/images/checkbox.svg); + } + + [data-adobesigntype='dropdown'] { + background-image: url(./resources/images/dropdown_chevron.svg); + background-repeat: no-repeat; + background-position: right center; + } +} \ No newline at end of file diff --git a/src/resources/images/checkbox.svg b/src/resources/images/checkbox.svg new file mode 100644 index 0000000..97bd161 --- /dev/null +++ b/src/resources/images/checkbox.svg @@ -0,0 +1,16 @@ + + + + CheckBox + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/src/resources/images/dropdown_chevron.svg b/src/resources/images/dropdown_chevron.svg new file mode 100644 index 0000000..8f0b32b --- /dev/null +++ b/src/resources/images/dropdown_chevron.svg @@ -0,0 +1,12 @@ + + + + DropdownChevron + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/resources/images/radiobutton.svg b/src/resources/images/radiobutton.svg new file mode 100644 index 0000000..1c4efaf --- /dev/null +++ b/src/resources/images/radiobutton.svg @@ -0,0 +1,18 @@ + + + + RadioButton + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/theme.scss b/src/theme.scss index cde1c81..d23b6fd 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -45,4 +45,5 @@ @import './components/scribble/_scribble.scss'; @import './components/datetime/_datetime.scss'; @import './components/imagechoice/_imagechoice.scss'; +@import './components/adobesignblock/_adobesignblock.scss'; @import './components/table/_table.scss';