├── src ├── resources │ ├── fonts │ │ ├── .gitkeep │ │ ├── PublicSans │ │ │ ├── PublicSans-Bold.ttf │ │ │ ├── PublicSans-Medium.ttf │ │ │ ├── PublicSans-Regular.ttf │ │ │ └── PublicSans-SemiBold.ttf │ │ ├── SourceSansPro │ │ │ ├── SourceSansPro-Black.ttf │ │ │ ├── SourceSansPro-Bold.ttf │ │ │ ├── SourceSansPro-Light.ttf │ │ │ ├── SourceSansPro-Italic.ttf │ │ │ ├── SourceSansPro-Regular.ttf │ │ │ ├── SourceSansPro-BoldItalic.ttf │ │ │ ├── SourceSansPro-ExtraLight.ttf │ │ │ ├── SourceSansPro-SemiBold.ttf │ │ │ ├── SourceSansPro-BlackItalic.ttf │ │ │ ├── SourceSansPro-LightItalic.ttf │ │ │ ├── SourceSansPro-SemiBoldItalic.ttf │ │ │ └── SourceSansPro-ExtraLightItalic.ttf │ │ └── SourceSerifPro │ │ │ ├── SourceSerifPro-Black.ttf │ │ │ ├── SourceSerifPro-Bold.ttf │ │ │ ├── SourceSerifPro-Light.ttf │ │ │ ├── SourceSerifPro-Italic.ttf │ │ │ ├── SourceSerifPro-Regular.ttf │ │ │ ├── SourceSerifPro-SemiBold.ttf │ │ │ ├── SourceSerifPro-BoldItalic.ttf │ │ │ ├── SourceSerifPro-ExtraLight.ttf │ │ │ ├── SourceSerifPro-BlackItalic.ttf │ │ │ ├── SourceSerifPro-LightItalic.ttf │ │ │ ├── SourceSerifPro-SemiBoldItalic.ttf │ │ │ └── SourceSerifPro-ExtraLightItalic.ttf │ └── images │ │ ├── .gitkeep │ │ ├── favicon.png │ │ ├── busy-state.gif │ │ ├── Chevron-Left.svg │ │ ├── Chevron-Left-White.svg │ │ ├── Chevron-Right-White.svg │ │ ├── check.svg │ │ ├── add-button-white.svg │ │ ├── add-button.svg │ │ ├── check-white.svg │ │ ├── chevron-down.svg │ │ ├── Chevron-Right.svg │ │ ├── remove-button-black.svg │ │ ├── remove-button.svg │ │ ├── long-description.svg │ │ ├── error.svg │ │ ├── question-clicked.svg │ │ ├── question-default.svg │ │ ├── question-hover.svg │ │ ├── file-attach.svg │ │ └── file-attach-white.svg ├── components │ ├── emailinput │ │ └── _emailinput.scss │ ├── numberinput │ │ └── _numberinput.scss │ ├── telephoneinput │ │ └── _telephoneinput.scss │ ├── text │ │ └── _text.scss │ ├── datepicker │ │ └── _datepicker.scss │ ├── textinput │ │ └── _textinput.scss │ ├── title │ │ └── _title.scss │ ├── image │ │ └── _image.scss │ ├── footer │ │ └── _footer.scss │ ├── tabsontop │ │ └── _tabsontop.scss │ ├── panelcontainer │ │ └── _panelcontainer.scss │ ├── pageheader │ │ └── _pageheader.scss │ ├── dropdown │ │ └── _dropdown.scss │ ├── container │ │ └── _container.scss │ ├── button │ │ └── _button.scss │ ├── wizard │ │ └── _wizard.scss │ ├── checkboxgroup │ │ └── _checkboxgroup.scss │ ├── verticaltabs │ │ └── _verticaltabs.scss │ ├── radiobutton │ │ └── _radiobutton.scss │ ├── fileinput │ │ └── _fileinput.scss │ └── accordion │ │ └── _accordion.scss ├── site │ ├── _base.scss │ ├── _fonts.scss │ ├── _variables.scss │ ├── _grid.scss │ └── _mixins.scss ├── theme.ts └── theme.scss ├── .parcelrc ├── env_template ├── post-css.js ├── LICENSE ├── clientlib-generator.js ├── .github ├── PULL_REQUEST_TEMPLATE.md ├── workflows │ └── publish.yml ├── CODE_OF_CONDUCT.md └── CONTRIBUTING.md ├── package.json ├── .gitignore └── README.md /src/resources/fonts/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/resources/images/.gitkeep: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/emailinput/_emailinput.scss: -------------------------------------------------------------------------------- 1 | .cmp-adaptiveform-emailinput{ 2 | @include input; 3 | } -------------------------------------------------------------------------------- /src/components/numberinput/_numberinput.scss: -------------------------------------------------------------------------------- 1 | .cmp-adaptiveform-numberinput{ 2 | @include input; 3 | } -------------------------------------------------------------------------------- /.parcelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@parcel/config-default", 3 | "namers": [ "parcel-namer-rewrite" ] 4 | } 5 | -------------------------------------------------------------------------------- /src/components/telephoneinput/_telephoneinput.scss: -------------------------------------------------------------------------------- 1 | .cmp-adaptiveform-telephoneinput{ 2 | @include input; 3 | } -------------------------------------------------------------------------------- /src/components/text/_text.scss: -------------------------------------------------------------------------------- 1 | .cmp-adaptiveform-text { 2 | color: $mid-gray; 3 | font-size: $font-m; 4 | } -------------------------------------------------------------------------------- /src/resources/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/images/favicon.png -------------------------------------------------------------------------------- /src/resources/images/busy-state.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/images/busy-state.gif -------------------------------------------------------------------------------- /env_template: -------------------------------------------------------------------------------- 1 | # AEM url 2 | AEM_URL= 3 | 4 | # AEM site name 5 | AEM_SITE= 6 | 7 | # AEM proxy port 8 | AEM_PROXY_PORT=7000 9 | -------------------------------------------------------------------------------- /src/components/datepicker/_datepicker.scss: -------------------------------------------------------------------------------- 1 | .cmp-adaptiveform-datepicker{ 2 | @include input; 3 | } 4 | .datepicker-calendar-icon{ 5 | top: 38px; 6 | } -------------------------------------------------------------------------------- /src/resources/fonts/PublicSans/PublicSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/PublicSans/PublicSans-Bold.ttf -------------------------------------------------------------------------------- /src/resources/fonts/PublicSans/PublicSans-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/PublicSans/PublicSans-Medium.ttf -------------------------------------------------------------------------------- /src/resources/fonts/PublicSans/PublicSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/PublicSans/PublicSans-Regular.ttf -------------------------------------------------------------------------------- /src/resources/fonts/PublicSans/PublicSans-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/PublicSans/PublicSans-SemiBold.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSansPro/SourceSansPro-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSansPro/SourceSansPro-Black.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSansPro/SourceSansPro-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSansPro/SourceSansPro-Bold.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSansPro/SourceSansPro-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSansPro/SourceSansPro-Light.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSansPro/SourceSansPro-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSansPro/SourceSansPro-Italic.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSansPro/SourceSansPro-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSansPro/SourceSansPro-Regular.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSerifPro/SourceSerifPro-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSerifPro/SourceSerifPro-Black.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSerifPro/SourceSerifPro-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSerifPro/SourceSerifPro-Bold.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSerifPro/SourceSerifPro-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSerifPro/SourceSerifPro-Light.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSansPro/SourceSansPro-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSansPro/SourceSansPro-BoldItalic.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSansPro/SourceSansPro-ExtraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSansPro/SourceSansPro-ExtraLight.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSansPro/SourceSansPro-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSansPro/SourceSansPro-SemiBold.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSerifPro/SourceSerifPro-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSerifPro/SourceSerifPro-Italic.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSerifPro/SourceSerifPro-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSerifPro/SourceSerifPro-Regular.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSerifPro/SourceSerifPro-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSerifPro/SourceSerifPro-SemiBold.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSansPro/SourceSansPro-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSansPro/SourceSansPro-BlackItalic.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSansPro/SourceSansPro-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSansPro/SourceSansPro-LightItalic.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSerifPro/SourceSerifPro-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSerifPro/SourceSerifPro-BoldItalic.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSerifPro/SourceSerifPro-ExtraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSerifPro/SourceSerifPro-ExtraLight.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSansPro/SourceSansPro-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSansPro/SourceSansPro-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSerifPro/SourceSerifPro-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSerifPro/SourceSerifPro-BlackItalic.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSerifPro/SourceSerifPro-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSerifPro/SourceSerifPro-LightItalic.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSansPro/SourceSansPro-ExtraLightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSansPro/SourceSansPro-ExtraLightItalic.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSerifPro/SourceSerifPro-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSerifPro/SourceSerifPro-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /src/resources/fonts/SourceSerifPro/SourceSerifPro-ExtraLightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/aem-forms-theme-public/main/src/resources/fonts/SourceSerifPro/SourceSerifPro-ExtraLightItalic.ttf -------------------------------------------------------------------------------- /src/components/textinput/_textinput.scss: -------------------------------------------------------------------------------- 1 | .cmp-adaptiveform-textinput { 2 | @include input; 3 | } 4 | 5 | textarea.cmp-adaptiveform-textinput__widget { 6 | @include widget; 7 | height: 80px; 8 | padding-top: $space-xs; 9 | } -------------------------------------------------------------------------------- /src/components/title/_title.scss: -------------------------------------------------------------------------------- 1 | .cmp-title__text{ 2 | font-size: $font-xl; 3 | color: $mid-gray; 4 | font-weight: $font-weight-semi-bold; 5 | letter-spacing: -1; 6 | line-height: 1.1; 7 | 8 | @media (max-width: 640px) { 9 | font-size: $font-l; 10 | } 11 | } -------------------------------------------------------------------------------- /src/components/image/_image.scss: -------------------------------------------------------------------------------- 1 | /* ===============Imaget================== */ 2 | .cmp-image { 3 | 4 | &__image { 5 | border-radius: 8px; 6 | display: block; 7 | height: auto; 8 | max-width: 100%; 9 | width: inherit; 10 | margin: 0; 11 | padding: 0; 12 | } 13 | } -------------------------------------------------------------------------------- /src/components/footer/_footer.scss: -------------------------------------------------------------------------------- 1 | .cmp-adaptiveform-footer { 2 | color: $mid-gray; 3 | background-color: $white; 4 | font-size: $font-s; 5 | min-height: 80px; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | 10 | &__text { 11 | padding: $space-s; 12 | } 13 | } -------------------------------------------------------------------------------- /post-css.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs') 2 | var postcss = require('postcss') 3 | var minmax = require('postcss-media-minmax') 4 | var themeCss = 'dist/theme.css' 5 | 6 | 7 | fs.readFile(themeCss, 'utf8', function (err,data) { 8 | if (err) { 9 | return console.log(err); 10 | } 11 | var output = postcss() 12 | .use(minmax()) 13 | .process(data) 14 | .css 15 | 16 | fs.writeFile(themeCss, output, 'utf8', function (err) { 17 | if (err) return console.log(err); 18 | }); 19 | }); -------------------------------------------------------------------------------- /src/components/tabsontop/_tabsontop.scss: -------------------------------------------------------------------------------- 1 | .cmp-tabs { 2 | @include container; 3 | 4 | &__label-container { 5 | margin-block-end: $space-s; 6 | } 7 | 8 | &__label { 9 | @include panel-label; 10 | } 11 | 12 | @include description; 13 | 14 | & &__tablist { 15 | @include tab-list; 16 | @media(max-width: 768px) { 17 | padding-inline: 0; 18 | } 19 | } 20 | 21 | &__tablist &__tab { 22 | @include tab; 23 | } 24 | 25 | &__tabpanel { 26 | @include tab-panel; 27 | } 28 | } -------------------------------------------------------------------------------- /src/components/panelcontainer/_panelcontainer.scss: -------------------------------------------------------------------------------- 1 | /* ===============Panel Container================== */ 2 | .cmp-container { 3 | position: relative; 4 | display: flex; 5 | flex-direction: column; 6 | 7 | &[data-cmp-is="adaptiveFormPanel"] { 8 | @include tab-panel; 9 | margin: 0 0 $space-l 0; 10 | } 11 | 12 | &__label-container { 13 | margin-block-end: $space-s; 14 | } 15 | 16 | &__label { 17 | @include panel-label; 18 | } 19 | 20 | @include description; 21 | } 22 | 23 | .panelcontainer:last-child>[data-cmp-is="adaptiveFormPanel"] { 24 | margin-block-end: 0; 25 | } -------------------------------------------------------------------------------- /src/resources/images/Chevron-Left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 8 | -------------------------------------------------------------------------------- /src/resources/images/Chevron-Left-White.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 8 | -------------------------------------------------------------------------------- /src/resources/images/Chevron-Right-White.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 8 | -------------------------------------------------------------------------------- /src/resources/images/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/resources/images/add-button-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/resources/images/add-button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/resources/images/check-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/resources/images/chevron-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/pageheader/_pageheader.scss: -------------------------------------------------------------------------------- 1 | .cmp-adaptiveform-pageheader { 2 | display: flex; 3 | width: 100%; 4 | align-items: center; 5 | min-height: 80px; 6 | column-gap: $space-s; 7 | padding: 24px; 8 | color: $mid-gray; 9 | font-size: $font-m; 10 | border-radius: 0; 11 | word-break: break-all; 12 | background-color: $common-panel-background; 13 | box-sizing: border-box; 14 | 15 | img { 16 | height: $tap-height; 17 | margin: 0; 18 | width: auto; 19 | color: white; 20 | display: block; 21 | } 22 | 23 | div:last-child { 24 | display: flex; 25 | align-items: center; 26 | } 27 | 28 | p { 29 | margin: 0; 30 | } 31 | } -------------------------------------------------------------------------------- /src/resources/images/Chevron-Right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/dropdown/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .cmp-adaptiveform-dropdown { 2 | @include input; 3 | 4 | &__widget { 5 | @include widget; 6 | appearance: none; 7 | cursor: pointer; 8 | background: url(./resources/images/chevron-down.svg); 9 | background-repeat: no-repeat; 10 | background-position: right 10px center; 11 | &::after { 12 | content: ''; 13 | background: url(./resources/images/chevron-down.svg) center center / cover no-repeat; 14 | position: relative; 15 | } 16 | } 17 | [dir='rtl'] &__widget { 18 | background-position: left 10px center; 19 | } 20 | } 21 | 22 | .cmp-adaptiveform-dropdown__widget[multiple='multiple'] { 23 | height: 80px; 24 | } -------------------------------------------------------------------------------- /src/site/_base.scss: -------------------------------------------------------------------------------- 1 | //== Defaults 2 | html, 3 | html body { 4 | color: $mid-gray; 5 | font-size: $font-m; 6 | background-color: white; 7 | font-family: $font-family-title; 8 | 9 | } 10 | 11 | *,*:before,*:after { 12 | box-sizing: inherit; 13 | } 14 | 15 | .aem-Grid { 16 | @include generate-grid(default, $max_col, left); 17 | } 18 | 19 | // Phone breakpoint 20 | @media (max-width: 768px) { 21 | .aem-Grid { 22 | @include generate-grid(phone, $max_col, left); 23 | } 24 | } 25 | 26 | [dir="rtl"] { 27 | .aem-Grid { 28 | @include generate-grid(default, $max_col, right); 29 | } 30 | // Phone breakpoint 31 | @media (max-width: 768px) { 32 | .aem-Grid { 33 | @include generate-grid(phone, $max_col, right); 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/components/container/_container.scss: -------------------------------------------------------------------------------- 1 | .cmp-adaptiveform-container { 2 | &__wrapper { 3 | margin: 0 auto; 4 | padding: 0 $space-m; 5 | box-sizing: border-box; 6 | width: 100%; 7 | label > p:first-child, span > p:first-child { 8 | display: inline; 9 | } 10 | padding: $space-s; 11 | padding-inline: 20%; 12 | @media(max-width: 768px) { 13 | padding-inline: $space-s; 14 | } 15 | } 16 | 17 | &--loading { 18 | background: rgb(255, 255, 255) url(./resources/images/busy-state.gif) no-repeat fixed center; 19 | position: fixed; 20 | pointer-events: none; 21 | left: 0; 22 | right: 0; 23 | top: 0; 24 | bottom: 0; 25 | width: 100%; 26 | height: 100%; 27 | cursor: wait; 28 | z-index: 100000; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/resources/images/remove-button-black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/resources/images/remove-button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/button/_button.scss: -------------------------------------------------------------------------------- 1 | .cmp-adaptiveform-button { 2 | position: relative; 3 | border: none; 4 | margin: $space-s 0; 5 | @include container; 6 | 7 | &__widget:not(.reset .cmp-adaptiveform-button__widget) { 8 | @include primary-button; 9 | } 10 | 11 | @include description; 12 | &__shortdescription, &__longdescription{ 13 | margin-block-start: 8px; 14 | } 15 | &__questionmark{ 16 | @media (max-width: 640px) { 17 | inset-block-start: -20px; 18 | } 19 | } 20 | @media (max-width: 640px) { 21 | margin-block-start: 32px; 22 | } 23 | } 24 | 25 | .submit { 26 | border-radius: 0; 27 | width: 100%; 28 | padding: $space-m 0; 29 | z-index: 12; 30 | } 31 | 32 | .reset { 33 | .cmp-adaptiveform-button { 34 | &__widget { 35 | @include secondary-button; 36 | height: $button-height; 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /src/resources/images/long-description.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/site/_fonts.scss: -------------------------------------------------------------------------------- 1 | 2 | //== Font loading 3 | 4 | @mixin fontface($name, $file, $weight: normal, $style: normal) { 5 | @font-face { 6 | font-weight: $weight; 7 | font-family: '#{$name}'; 8 | font-style: $style; 9 | src: url('resources/fonts/#{$file}.ttf') format('truetype'); 10 | } 11 | } 12 | 13 | @include fontface("defaultFont", 'SourceSansPro/SourceSansPro-Regular', normal); 14 | @include fontface("defaultFont", 'SourceSansPro/SourceSansPro-SemiBold', bold); 15 | @include fontface("defaultFont", 'SourceSansPro/SourceSansPro-Bold', bolder); 16 | @include fontface("PublicSans", 'PublicSans/PublicSans-Regular', normal); 17 | @include fontface("PublicSans", 'PublicSans/PublicSans-Medium', medium); 18 | @include fontface("PublicSans", 'PublicSans/PublicSans-SemiBold', bold); 19 | @include fontface("PublicSans", 'PublicSans/PublicSans-Bold', bolder); 20 | 21 | -------------------------------------------------------------------------------- /src/resources/images/error.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/resources/images/question-clicked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/resources/images/question-default.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/resources/images/question-hover.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/wizard/_wizard.scss: -------------------------------------------------------------------------------- 1 | .cmp-adaptiveform-wizard { 2 | @include container; 3 | 4 | &__label-container { 5 | margin-bottom: $space-s; 6 | } 7 | 8 | &__label { 9 | @include panel-label; 10 | } 11 | 12 | @include description; 13 | 14 | &__tabs-container { 15 | max-width: 100%; 16 | overflow: auto; 17 | scrollbar-width: none; 18 | } 19 | 20 | &__tabList { 21 | @include tab-list; 22 | } 23 | 24 | &__tab { 25 | @include wizard-tab; 26 | } 27 | 28 | &__wizardpanel { 29 | @include tab-panel; 30 | } 31 | 32 | &__previousNav { 33 | @include wizard-previous-button; 34 | } 35 | 36 | &__nextNav { 37 | @include wizard-next-button; 38 | } 39 | &__containerNav { 40 | display: flex; 41 | justify-content: end; 42 | gap: 20px; 43 | position: absolute; 44 | width: 100%; 45 | inset-block-end: -80px; 46 | } 47 | 48 | &__nav { 49 | &--previous { 50 | @include wizard-previous-button; 51 | 52 | } 53 | &--next { 54 | @include wizard-next-button; 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /src/resources/images/file-attach.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Adobe, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/theme.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * MIT License 4 | * 5 | * © Copyright 2024 Adobe, Inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person obtaining a copy 8 | * of this software and associated documentation files (the "Software"), to deal 9 | * in the Software without restriction, including without limitation the rights 10 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | * copies of the Software, and to permit persons to whom the Software is 12 | * furnished to do so, subject to the following conditions: 13 | * 14 | * The above copyright notice and this permission notice shall be included in all 15 | * copies or substantial portions of the Software. 16 | * 17 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | * SOFTWARE. 24 | */ 25 | 26 | 27 | // Stylesheets 28 | import "./theme.scss"; 29 | import "./resources/images/favicon.png" 30 | -------------------------------------------------------------------------------- /src/theme.scss: -------------------------------------------------------------------------------- 1 | //== Variables 2 | @import 'site/variables'; 3 | @import 'site/_mixins'; 4 | 5 | //== fonts 6 | @import 'site/fonts'; 7 | 8 | 9 | //== base 10 | @import 'site/_grid.scss'; 11 | @import 'site/_base'; 12 | 13 | //== Core components 14 | @import './components/button/_button.scss'; 15 | @import './components/checkboxgroup/_checkboxgroup.scss'; 16 | @import './components/container/_container.scss'; 17 | @import './components/datepicker/_datepicker.scss'; 18 | @import './components/dropdown/_dropdown.scss'; 19 | @import './components/fileinput/_fileinput.scss'; 20 | @import './components/footer/_footer.scss'; 21 | @import './components/image/_image.scss'; 22 | @import './components/numberinput/_numberinput.scss'; 23 | @import './components/panelcontainer/_panelcontainer.scss'; 24 | @import './components/radiobutton/_radiobutton.scss'; 25 | @import './components/text/_text.scss'; 26 | @import './components/textinput/_textinput.scss'; 27 | @import './components/accordion/_accordion.scss'; 28 | @import './components/tabsontop/_tabsontop.scss'; 29 | @import './components/pageheader/_pageheader.scss'; 30 | @import './components/wizard/_wizard.scss'; 31 | @import './components/title/_title.scss'; 32 | @import './components/telephoneinput/_telephoneinput.scss'; 33 | @import './components/emailinput/_emailinput.scss'; 34 | @import './components/verticaltabs/_verticaltabs.scss'; 35 | -------------------------------------------------------------------------------- /clientlib-generator.js: -------------------------------------------------------------------------------- 1 | var clientlib = require("aem-clientlib-generator"); 2 | var path = require("path"); 3 | var process = require("process"); 4 | 5 | 6 | const CLIENTLIB_DIR = process.env.npm_config_directory || "theme-clientlibs" 7 | const CLIENTLIB_CATEGORY = process.env.npm_config_category 8 | 9 | if(!CLIENTLIB_CATEGORY){ 10 | throw 'category parameter should be present' 11 | } 12 | clientlib( 13 | [ 14 | { 15 | categories: [CLIENTLIB_CATEGORY], 16 | name: CLIENTLIB_CATEGORY, 17 | cssProcessor: ["default:none", "min:none"], 18 | jsProcessor: ["default:none", "min:gcc;compilationLevel=whitespace"], 19 | allowProxy: true, 20 | customProperties: [ 21 | "formsTheme" 22 | ], 23 | formsTheme: "true", 24 | serializationFormat: "xml", 25 | assets: { 26 | resources: { 27 | base: "css/resources/images", 28 | files: ["dist/**/*.svg", "dist/**/*.gif", "dist/**/*.png"] 29 | }, 30 | js: [ 31 | { src: "dist/theme.js", dest: "theme.js" }, 32 | { 33 | src: "dist/theme.js.map", 34 | dest: "theme.js.map", 35 | }, 36 | ], 37 | css: ["dist/theme.css", "dist/theme.css.map"], 38 | }, 39 | } 40 | ], 41 | { 42 | cwd: __dirname, 43 | clientLibRoot: path.join(__dirname, CLIENTLIB_DIR), 44 | }, 45 | function () { 46 | console.log("clientlibs created"); 47 | } 48 | ); -------------------------------------------------------------------------------- /src/components/checkboxgroup/_checkboxgroup.scss: -------------------------------------------------------------------------------- 1 | .cmp-adaptiveform-checkboxgroup { 2 | @include container; 3 | 4 | &__label { 5 | @include label; 6 | } 7 | 8 | &__widget { 9 | @include list-container; 10 | } 11 | 12 | @include description; 13 | 14 | &__errormessage { 15 | @include error-message 16 | } 17 | 18 | &-item { 19 | @include list-item; 20 | } 21 | 22 | &-item &__label,&__option-label { 23 | @include checkbox-label; 24 | } 25 | 26 | &[data-cmp-enabled=true] &-item,&[data-cmp-enabled=true] &__option-label { 27 | &:hover { 28 | cursor: pointer; 29 | } 30 | } 31 | 32 | &__option__widget { 33 | height: 1rem; 34 | width: 1rem; 35 | padding: 0; 36 | margin: 0; 37 | appearance: none; 38 | display: flex; 39 | align-items: center; 40 | justify-content: center; 41 | background-color: $white; 42 | border-radius: 2px; 43 | border: 1px solid $very-light-gray; 44 | background: white; 45 | &:hover:not([disabled]):not(:checked) { 46 | cursor: pointer; 47 | border: 1px solid $light-gray; 48 | background: linear-gradient(0deg, rgba(34, 107, 249, 0.10) 0%, rgba(34, 107, 249, 0.10) 100%), #FFF; 49 | } 50 | &:checked { 51 | background-color: $primary; 52 | &::after { 53 | content: ''; 54 | background-image: url(resources/images/check-white.svg); 55 | background-position: center; 56 | background-repeat: no-repeat; 57 | width: 1rem; 58 | height: 1rem; 59 | } 60 | } 61 | } 62 | } -------------------------------------------------------------------------------- /src/components/verticaltabs/_verticaltabs.scss: -------------------------------------------------------------------------------- 1 | .cmp-verticaltabs{ 2 | font-size: $font-m; 3 | margin: $space-s; 4 | position: relative; 5 | 6 | &__label { 7 | @include panel-label; 8 | } 9 | 10 | &__tabs-container{ 11 | display: flex; 12 | margin-block-start: 16px; 13 | @media(max-width: 768px) { 14 | flex-direction: column; 15 | } 16 | } 17 | 18 | &__label-container { 19 | margin-block-end: $space-s; 20 | } 21 | 22 | &__tabpanel{ 23 | @include panel-label; 24 | flex:1; 25 | } 26 | 27 | &__tablist{ 28 | 29 | 30 | @media(min-width: 768px) { 31 | width: 150px; 32 | list-style: none; 33 | padding: 0; 34 | margin: 0; 35 | margin-inline-end: $space-m; 36 | border-inline-end: $border-very-light; 37 | } 38 | @media(max-width: 768px) { 39 | @include tab-list; 40 | padding-inline: 0; 41 | } 42 | } 43 | &__tab { 44 | cursor: pointer; 45 | @media(min-width: 768px) { 46 | padding-inline: $space-s 4px; 47 | padding-block: $space-s; 48 | margin-block-start: 8px; 49 | color: $mid-gray; 50 | &:hover { 51 | color: $black; 52 | border-inline-end: 2px solid $border-hover; 53 | } 54 | &--active { 55 | border-inline-end: 4px solid $primary; 56 | color: $primary; 57 | &:hover{ 58 | border-inline-end: 4px solid $primary; 59 | } 60 | } 61 | } 62 | @media(max-width: 768px) { 63 | @include tab; 64 | } 65 | } 66 | 67 | @include description 68 | } -------------------------------------------------------------------------------- /src/components/radiobutton/_radiobutton.scss: -------------------------------------------------------------------------------- 1 | .cmp-adaptiveform-radiobutton { 2 | @include container; 3 | 4 | &__label { 5 | @include label; 6 | } 7 | 8 | &__widget { 9 | @include list-container; 10 | } 11 | 12 | @include description; 13 | 14 | &__errormessage { 15 | @include error-message; 16 | } 17 | 18 | &__option { 19 | @include list-item; 20 | &-label { 21 | display: flex; 22 | column-gap: $space-s; 23 | align-items: center; 24 | width: 100%; 25 | } 26 | } 27 | 28 | &[data-cmp-enabled=true] &__option,&[data-cmp-enabled=true] &__option-label { 29 | &:hover { 30 | cursor: pointer; 31 | } 32 | } 33 | 34 | &__option__widget { 35 | display: flex; 36 | appearance: none; 37 | height: 1rem; 38 | width: 1rem; 39 | cursor: pointer; 40 | outline: none; 41 | background: $white; 42 | border-radius: 1rem; 43 | border: 1px solid $very-light-gray; 44 | background: white; 45 | align-items: center; 46 | justify-content: center; 47 | 48 | &:checked { 49 | border: 1px solid $checked-border; 50 | 51 | &::after { 52 | content: ''; 53 | background: $primary; 54 | border-radius: 1rem; 55 | width: 0.75rem; 56 | height: 0.75rem; 57 | } 58 | } 59 | 60 | &:hover:not([disabled]):not(:checked) { 61 | cursor: pointer; 62 | border: 1px solid $light-gray; 63 | background: linear-gradient(0deg, rgba(34, 107, 249, 0.10) 0%, rgba(34, 107, 249, 0.10) 100%), #FFF; 64 | } 65 | } 66 | 67 | span { 68 | opacity: 1; 69 | } 70 | } -------------------------------------------------------------------------------- /src/components/fileinput/_fileinput.scss: -------------------------------------------------------------------------------- 1 | .cmp-adaptiveform-fileinput { 2 | @include input; 3 | 4 | &__widgetlabel { 5 | @include secondary-button; 6 | margin: $space-xs 0; 7 | display: flex; 8 | column-gap: $space-xs; 9 | align-items: center; 10 | pointer-events: all; 11 | height: 43px; 12 | padding-block: 8px; 13 | 14 | &::before { 15 | content: ''; 16 | display: block; 17 | width: 16px; 18 | height: 16px; 19 | background: url(./resources/images/file-attach.svg) center center / cover no-repeat; 20 | } 21 | 22 | &:active::before { 23 | background: url(./resources/images/file-attach-white.svg) center center / cover no-repeat; 24 | } 25 | } 26 | 27 | &__filelist { 28 | padding: 0; 29 | @include list-container; 30 | } 31 | // To be removed once CSS support is added for drag and drop 32 | &__dragtext { 33 | display: none; 34 | } 35 | 36 | &__fileitem { 37 | @include list-item; 38 | justify-content: space-between; 39 | width: 100%; 40 | } 41 | 42 | &__fileendcontainer { 43 | display: flex; 44 | justify-content: space-between; 45 | gap: $space-s; 46 | align-items: center; 47 | } 48 | 49 | input[type="file"] { 50 | column-gap: $space-l; 51 | } 52 | 53 | &__filedelete { 54 | float: right; 55 | font-size: $font-m; 56 | text-transform: uppercase; 57 | line-height: 1; 58 | font-weight: $font-weight-semi-bold; 59 | color: $error; 60 | cursor: pointer; 61 | border: none; 62 | background: none; 63 | } 64 | 65 | [dir='rtl'] &__filedelete { 66 | float: left; 67 | } 68 | 69 | br { 70 | display: none; 71 | } 72 | } -------------------------------------------------------------------------------- /src/site/_variables.scss: -------------------------------------------------------------------------------- 1 | //== Font 2 | 3 | $font-family-title: 'Public Sans','SF Pro','Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; 4 | $font-family-default: 'SF Pro','Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | 6 | $font-weight-normal: 400; 7 | $font-weight-semi-bold: 500; 8 | $font-weight-bold: 600; 9 | 10 | 11 | // ====== font size====== 12 | $font-xl: 40px; 13 | $font-l: 24px; 14 | $font-m: 16px; 15 | $font-s: 12px; 16 | 17 | // ====== colors====== 18 | $dark-gray: #242424; 19 | $gray: rgba(0,0,0,0.90); 20 | $mid-gray: #505050; 21 | $light-gray: #949494; 22 | $very-light-gray: #D6D6D6; 23 | $translucent-gray:#ddd; 24 | $background-color: #eee; 25 | $blue: #336AD3; 26 | $light-blue: #226BF9FC; 27 | $white: #fff; 28 | $error: #AE0D0D; 29 | $light-error: rgba(235, 60, 54, 0.05); 30 | $primary: $blue; 31 | $dark-primary: $mid-gray; 32 | $whitish-gray: #F5F5F5; 33 | $clicked-button: #2A2B48; 34 | $common-panel-background: #FAFAFA; 35 | $black: #000; 36 | $border-hover: #CCCCCC; 37 | $hover-secondary: #EBEBEB; 38 | $tab-active: #255ECC; 39 | $checked-border: #B8D1DF; 40 | 41 | $focus-outline: 2px $primary solid; 42 | $error-outline: 2px $error solid; 43 | $border-very-light: 2px $background-color solid; 44 | $border-error: 2px $error solid; 45 | $box-shadhow-hover: 0px 3px 12px #00000033; 46 | 47 | $border-default: 1px solid $very-light-gray; 48 | $border-light: 1px solid $light-gray; 49 | 50 | 51 | 52 | // ====== space ====== 53 | $space-xs: 6px; 54 | $space-s: 12px; 55 | $space-m: 24px; 56 | $space-l: 48px; 57 | $space-xl: 144px; 58 | 59 | $field-radius: 6px; 60 | $button-radius: 6px; 61 | $tap-height: 48px; 62 | $standard-height: 43px; 63 | $button-height: 52px; 64 | 65 | 66 | //== Grid 67 | 68 | $max_col: 12; -------------------------------------------------------------------------------- /src/components/accordion/_accordion.scss: -------------------------------------------------------------------------------- 1 | .cmp-accordion { 2 | @include container; 3 | @include description; 4 | 5 | &__item { 6 | opacity: 1; 7 | } 8 | 9 | &__header { 10 | padding: 0 0; 11 | display: flex; 12 | } 13 | 14 | &__label-container { 15 | margin-bottom: $space-s; 16 | } 17 | 18 | &__label { 19 | @include panel-label; 20 | } 21 | 22 | &__header { 23 | &:hover { 24 | background-color: $whitish-gray; 25 | } 26 | } 27 | 28 | /* Parent selector included to avoid style from being overridden in few cases*/ 29 | &__header &__button { 30 | @include tab; 31 | flex: 1; 32 | border: none; 33 | border-width: 2px; 34 | flex-direction: row-reverse; 35 | justify-content: flex-end; 36 | margin-inline-end: unset; 37 | cursor: pointer; 38 | font-weight: $font-weight-bold; 39 | column-gap: $space-s; 40 | border-bottom: 1px solid $translucent-gray; 41 | 42 | &:hover { 43 | color: $mid-gray; 44 | background-color: $whitish-gray; 45 | border-bottom: 1px solid $translucent-gray; 46 | } 47 | 48 | &--expanded { 49 | color: $primary; 50 | border: none; 51 | 52 | &:hover { 53 | color: $primary; 54 | } 55 | } 56 | } 57 | 58 | &__button &__icon { 59 | display: inline-block; 60 | background: url(./resources/images/chevron-down.svg) center center / cover no-repeat; 61 | margin: 0; 62 | height: 16px; 63 | width: 16px; 64 | } 65 | 66 | &__title { 67 | display: flex; 68 | align-items: center; 69 | } 70 | 71 | .cmp-accordion__button.cmp-accordion__button--expanded &__icon { 72 | transform: rotate(180deg); 73 | -webkit-transform: rotate(180deg); 74 | } 75 | 76 | &__panel { 77 | &--hidden { 78 | display: none; 79 | } 80 | } 81 | 82 | @include repeatability-buttons 83 | } -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Description 4 | 5 | 6 | 7 | ## Related Issue 8 | 9 | 10 | 11 | 12 | 13 | 14 | ## Motivation and Context 15 | 16 | 17 | 18 | ## How Has This Been Tested? 19 | 20 | 21 | 22 | 23 | 24 | ## Screenshots (if appropriate): 25 | 26 | ## Types of changes 27 | 28 | 29 | 30 | - [ ] Bug fix (non-breaking change which fixes an issue) 31 | - [ ] New feature (non-breaking change which adds functionality) 32 | - [ ] Breaking change (fix or feature that would cause existing functionality to change) 33 | 34 | ## Checklist: 35 | 36 | 37 | 38 | 39 | - [ ] I have signed the [Adobe Open Source CLA](http://opensource.adobe.com/cla.html). 40 | - [ ] My change requires a change to the documentation. 41 | - [ ] I have updated the documentation accordingly. 42 | - [ ] I have read the **CONTRIBUTING** document. 43 | - [ ] I have added tests to cover my changes and the overall coverage did not decrease. 44 | - [ ] All unit tests pass on CircleCi. 45 | - [ ] I ran all tests locally and they pass. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "af-public-theme", 3 | "version": "0.0.8", 4 | "description": "Standard AEM Forms Public theme", 5 | "license": "MIT License, Copyright 2022 Adobe Systems Incorporated", 6 | "scripts": { 7 | "build": "rimraf dist && mkdir dist && parcel build src/theme.ts --no-cache --dist-dir dist && npm run postcss", 8 | "postcss": "node post-css.js", 9 | "watch": "parcel watch src/theme.ts", 10 | "proxy": "aem-site-theme-builder live", 11 | "live": "npm-run-all -p watch proxy", 12 | "create-zip": "cd dist/ && zip ./theme.zip ./* -r", 13 | "clientlib-generator": "node clientlib-generator.js", 14 | "create-clientlib": "npm run build && npm run clientlib-generator" 15 | }, 16 | "devDependencies": { 17 | "@adobe/aem-site-theme-builder": "6.0.0", 18 | "@parcel/transformer-sass": "^2.0.1", 19 | "aem-clientlib-generator": "^1.8.0", 20 | "autoprefixer": "^10.3.7", 21 | "browser-sync": "^3.0.4", 22 | "install": "^0.13.0", 23 | "jszip": "^3.10.1", 24 | "normalize.css": "^8.0.1", 25 | "npm": "^11.4.2", 26 | "npm-run-all": "^4.1.5", 27 | "parcel": "^2.0.1", 28 | "parcel-namer-rewrite": "^2.0.0-rc.1", 29 | "path": "^0.12.7", 30 | "postcss": "^8.3.11", 31 | "postcss-media-minmax": "^5.0.0", 32 | "rimraf": "^3.0.2", 33 | "typescript": "^4.5.2" 34 | }, 35 | "parcel-namer-rewrite": { 36 | "chain": "@parcel/namer-default", 37 | "rules": { 38 | "(.*?)(\\.[a-f0-9]{8})?\\.(ttf|woff2?)": "resources/fonts/$1.$3", 39 | "(.*?)(\\.[a-f0-9]{8})?\\.(svg|png|gif|jpg|jpeg|webp)": "resources/images/$1.$3" 40 | } 41 | }, 42 | "postcss": { 43 | "plugins": { 44 | "autoprefixer": { 45 | "overrideBrowserslist": [ 46 | "> 1%", 47 | "last 2 versions" 48 | ] 49 | } 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # dont include parcel cache into the final theme.zip file 3 | .parcel-cache 4 | .DS_Store 5 | 6 | # make sure no .env file is present in the theme.zip file - AEM adds this file when downloading the theme 7 | .env 8 | 9 | 10 | # Logs 11 | logs 12 | *.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | lerna-debug.log* 17 | 18 | # Diagnostic reports (https://nodejs.org/api/report.html) 19 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 20 | 21 | # Runtime data 22 | pids 23 | *.pid 24 | *.seed 25 | *.pid.lock 26 | 27 | # Directory for instrumented libs generated by jscoverage/JSCover 28 | lib-cov 29 | 30 | # Coverage directory used by tools like istanbul 31 | coverage 32 | *.lcov 33 | 34 | # nyc test coverage 35 | .nyc_output 36 | 37 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 38 | .grunt 39 | 40 | # Bower dependency directory (https://bower.io/) 41 | bower_components 42 | 43 | # node-waf configuration 44 | .lock-wscript 45 | 46 | # Compiled binary addons (https://nodejs.org/api/addons.html) 47 | build/Release 48 | 49 | # Dependency directories 50 | node_modules/ 51 | jspm_packages/ 52 | 53 | # TypeScript v1 declaration files 54 | typings/ 55 | 56 | # TypeScript cache 57 | *.tsbuildinfo 58 | 59 | # Optional npm cache directory 60 | .npm 61 | 62 | # Optional eslint cache 63 | .eslintcache 64 | 65 | # Microbundle cache 66 | .rpt2_cache/ 67 | .rts2_cache_cjs/ 68 | .rts2_cache_es/ 69 | .rts2_cache_umd/ 70 | 71 | # Optional REPL history 72 | .node_repl_history 73 | 74 | # Output of 'npm pack' 75 | *.tgz 76 | 77 | # Yarn Integrity file 78 | .yarn-integrity 79 | 80 | # dotenv environment variables file 81 | .env 82 | .env.test 83 | 84 | # parcel-bundler cache (https://parceljs.org/) 85 | .cache 86 | 87 | # Next.js build output 88 | .next 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # Serverless directories 104 | .serverless/ 105 | 106 | # FuseBox cache 107 | .fusebox/ 108 | 109 | # DynamoDB Local files 110 | .dynamodb/ 111 | 112 | # TernJS port file 113 | .tern-port 114 | 115 | theme-clientlibs -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish On NPMJS 2 | 3 | on: 4 | pull_request: 5 | types: 6 | - closed 7 | branches: 8 | - main 9 | 10 | jobs: 11 | publish: 12 | if: github.event.pull_request.merged == true 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - name: Checkout code 17 | uses: actions/checkout@v2 18 | with: 19 | fetch-depth: 0 20 | 21 | - name: Set up Node.js 22 | uses: actions/setup-node@v2 23 | with: 24 | node-version: '20' 25 | registry-url: https://registry.npmjs.org/ 26 | 27 | - name: Set Git Config 28 | run: | 29 | git config --global user.email "ci-build@aemforms" 30 | git config --global user.name "ci-build" 31 | env: 32 | GITHUB_TOKEN: ${{ secrets.ADOBE_GH_TOKEN }} 33 | GH_TOKEN: ${{ secrets.ADOBE_GH_TOKEN }} 34 | 35 | - name: Install dependencies 36 | run: npm install 37 | 38 | - name: Build theme 39 | run: npm run build 40 | 41 | - name: Authenticate with NPM Registry 42 | run: | 43 | echo "registry=https://registry.npmjs.org/" >> .npmrc 44 | echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc 45 | npm whoami 46 | env: 47 | NPM_TOKEN: ${{ secrets.NPM_DEPLOY_TOKEN }} 48 | 49 | - name: Discard Uncommitted Changes 50 | run: git reset --hard 51 | 52 | - name: Get current version 53 | id: get_version 54 | run: echo ::set-output name=version::$(node -p "require('./package.json').version") 55 | 56 | - name: Bump version 57 | id: bump_version 58 | run: | 59 | npm version patch -m "Bump version to %s" 60 | 61 | - name: Backup original package.json 62 | run: cp package.json package.json.bak 63 | 64 | - name: Modify package.json for scoped publish 65 | run: | 66 | jq '.name = "@aemforms/af-public-theme"' package.json > package.json.tmp && mv package.json.tmp package.json 67 | 68 | - name: Publish to npm 69 | run: | 70 | npm publish --access public 71 | env: 72 | NODE_AUTH_TOKEN: ${{ secrets.NPM_DEPLOY_TOKEN }} 73 | NPM_TOKEN: ${{ secrets.NPM_DEPLOY_TOKEN }} 74 | 75 | - name: Restore original package.json 76 | run: mv package.json.bak package.json 77 | 78 | - name: Push changes to remote repository 79 | run: git push origin HEAD:main 80 | env: 81 | GITHUB_TOKEN: ${{ secrets.ADOBE_GH_TOKEN }} 82 | GH_TOKEN: ${{ secrets.ADOBE_GH_TOKEN }} 83 | -------------------------------------------------------------------------------- /src/resources/images/file-attach-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # af2-public-theme 2 | 3 | This is the standard Public theme for Adobe Experience Manager (AEM) Forms. 4 | 5 | This theme can be modified to customize the visual appearance of Adaptive Form. 6 | 7 | ## Structure 8 | 9 | * `src/theme.ts`: This is the main entry point of your JS & CSS theme. 10 | * `src/site`: Files that are generic to the entire site. 11 | * `src/components`: Files that are specific to components. 12 | * `src/resources`: Associated files, like icons, logos, fonts. 13 | 14 | 15 | ## Complete development workflow 16 | 17 | In order to make best use of theme-builder you have to run the live preview which provides proxy and browser sync functionalities. On top of that you need to make sure that you have additional watcher for your source files that triggers your theme build process which produces changes in the `dist` folder of your theme. This way after making change in your source file you will get your proxy page refreshed via browser sync. 18 | 19 | ### NodeJS Version 20 | This theme has been developed and tested with node version 20.13.1. 21 | 22 | ### Build 23 | 24 | Initialize the project with following command executed at the theme root: 25 | 26 | ``` 27 | npm install 28 | ``` 29 | 30 | ### Creating Clientlib for AEM 65 31 | In AEM 65, core-component themes are deployed as clientlibs. To create clientlib from theme: 32 | ``` 33 | npm run create-clientlib --category="adaptiveform.theme.yourtheme" 34 | ``` 35 | This takes to args 36 | 1. category [Required] : Clientlib category 37 | 2. directory : Where should the clientlib be created 38 | 39 | ### Environment Variables 40 | 41 | Theme Builder scripts are based on the environment variables you provide. These variables are used to properly provide live preview and deploy functionality of the AEM Site Theme Builder. 42 | 43 | Here is the list of required variables: 44 | 45 | ``` 46 | AEM_URL= 47 | AEM_SITE= 48 | AEM_PROXY_PORT= 49 | ``` 50 | Here is the list of optional variables: 51 | 52 | ``` 53 | AEM_ADAPTIVE_FORM= 54 | ``` 55 | Recommended way to define site variables is to use / create `.env` file within your theme project repository. 56 | 57 | ### Launch 58 | 59 | Run the local proxy server while working to preview your changes with the content from the production environment. 60 | 61 | ``` 62 | npm run live 63 | ``` 64 | 65 | Once your work completed, check your changes into GitHub, and execute the deployment pipeline in Cloud Manager. 66 | 67 | ## Contributing 68 | 69 | Contributions are welcomed! Read the [Contributing Guide](.github/CONTRIBUTING.md) for more information. 70 | 71 | ## Licensing 72 | 73 | This project is licensed under the MIT License. See [LICENSE](LICENSE.md) for more information. 74 | -------------------------------------------------------------------------------- /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Adobe Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language. 18 | * Being respectful of differing viewpoints and experiences. 19 | * Gracefully accepting constructive criticism. 20 | * Focusing on what is best for the community. 21 | * Showing empathy towards other community members. 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances. 27 | * Trolling, insulting/derogatory comments, and personal or political attacks. 28 | * Public or private harassment. 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission. 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting. 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at Grp-opensourceoffice@adobe.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at [https://contributor-covenant.org/version/1/4][version]. 72 | 73 | [homepage]: https://contributor-covenant.org 74 | [version]: https://contributor-covenant.org/version/1/4/ -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Thanks for choosing to contribute! 4 | 5 | The following are a set of guidelines to follow when contributing to this project. 6 | 7 | ## Code Of Conduct 8 | 9 | This project adheres to the Adobe [code of conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to the team. 10 | 11 | ## Contributor License Agreement 12 | 13 | All third-party contributions to this project must be accompanied by a signed contributor license agreement. This gives Adobe permission to redistribute your contributions as part of the project. [Sign our CLA](http://opensource.adobe.com/cla.html). You only need to submit an Adobe CLA one time, so if you have submitted one previously, you are good to go! 14 | 15 | ## How to contribute 16 | 17 | New code contributions should be made primarily using GitHub pull requests. This involves creating a fork of the project in your personal space, adding your new code in a branch and triggering a pull request. 18 | 19 | See how to perform pull requests at https://help.github.com/articles/using-pull-requests. 20 | 21 | Please follow the [pull request template](PULL_REQUEST_TEMPLATE.md) when submitting a pull request! 22 | 23 | To ease the review process of pull requests, we ask you to please follow a number of guidelines and recommendations. This will speed up the review process and ensure that a pull request does not break any existing functionality. 24 | * **Keep it small!** Reviewing a large pull request is very difficult and time consuming. Try to keep your contribution small, maybe to a maximum of a dozen files with maximum a few hundred lines of code in total. Do not combine multiple new features or bug fixes into one single pull request: if one PR needs another one, simply create multiple PRs, and open "nested PRs" that depend on each other. 25 | * **Do not remove tests!** If your feature breaks a test, do NOT remove that test, unless there is a very good reason that the test is no longer needed. If there is a test for something, there is usually a good reason for that. If you break a test, make sure that you fix the test, but make sure that the original feature still does what it is expected to do! 26 | * **Add your own tests!**: We will not consider pull requests that do not include a minimum of 80% test coverage. Make sure that your tests follow the same design and format than similar tests, and be consistent with our existing tests. 27 | * **Do not "pollute" your pull request!**: Avoid unneeded changes in your pull request, for example, code formatting changes or changes not related to your feature or bug fix. Make sure that your IDE is configured to **not** reformat the entire files you are editing, but only the lines you change. This will ensure that different formatting rules will not affect code that you do not change! 28 | * **Follow master!**: Make sure that your pull request is up-to-date with respect to our `master` branch. It is your responsibility to ensure that the latest commits in our `master` branch are always merged into your code, and that merge conflicts are resolved. Please make sure that your pull request follows our recommendations, in order to speed up the review process and hopefully reduce the number of times you will have to merge our latest changes into your branch. 29 | * **Format your code!**: Our maven build can automatically format java files, make sure you do that. For other file formats like `.js`, `.xml` and `.html`, make sure that you use a 4-space indentation, do not use tabs. For `.json` files, we use a 2-space indentation. 30 | * **Use common sense!**: Use common sense to increase the quality of your contribution. Do not duplicate code, use constants instead of hard-coded strings where appropriate, add javadoc documentation, use comments (sparingly!) where the code could be difficult to understand, and keep in mind that the Forms components can be reused and extended by others so make sure the code is readable and follows the latest AEM development guidelines. 31 | 32 | ## New Feature request 33 | Please follow the [feature template](ISSUE_TEMPLATE/FEATURE_REQUEST.md) to open new feature requests. 34 | 35 | 36 | ## Issues 37 | 38 | Please follow the [issue template](ISSUE_TEMPLATE/BUG_REPORT.md) to open new [issues](https://github.com/adobe/aem-core-forms-components/issues) and join the conversations to provide feedback. -------------------------------------------------------------------------------- /src/site/_grid.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * MIT License 4 | * 5 | * © Copyright 2024 Adobe, Inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person obtaining a copy 8 | * of this software and associated documentation files (the "Software"), to deal 9 | * in the Software without restriction, including without limitation the rights 10 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | * copies of the Software, and to permit persons to whom the Software is 12 | * furnished to do so, subject to the following conditions: 13 | * 14 | * The above copyright notice and this permission notice shall be included in all 15 | * copies or substantial portions of the Software. 16 | * 17 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | * SOFTWARE. 24 | */ 25 | 26 | /* grid component */ 27 | .aem-Grid { 28 | display: block; 29 | inline-size: 100%; 30 | } 31 | 32 | .aem-Grid::before, 33 | .aem-Grid::after { 34 | display: table; 35 | content: ' '; 36 | } 37 | 38 | .aem-Grid::after { 39 | clear: both; 40 | } 41 | 42 | /* placeholder for new components */ 43 | .aem-Grid-newComponent { 44 | clear: both; 45 | margin: 0; 46 | } 47 | 48 | /* column of a grid */ 49 | .aem-GridColumn { 50 | clear: both; 51 | box-sizing: border-box; 52 | } 53 | 54 | /* force showing hidden */ 55 | .aem-GridShowHidden > .aem-Grid > .aem-GridColumn { 56 | display: block !important; 57 | } 58 | 59 | /* force showing hidden components in unhide mode */ 60 | .aem-GridShowHidden > .cmp-container > .aem-Grid > .aem-GridColumn { 61 | display: block !important; 62 | } 63 | 64 | /* Generates all the rules for the grid columns up to the given amount of column */ 65 | @mixin generate-columns($breakPoint, $columnTotal, $column: 1, $direction) { 66 | @if ($column <= $columnTotal) { 67 | & > .aem-GridColumn.aem-GridColumn--#{$breakPoint}--#{$column} { 68 | float: $direction; 69 | clear: none; 70 | inline-size: ($column * 100% / $columnTotal); 71 | } 72 | 73 | @include generate-columns($breakPoint, $columnTotal, ($column + 1), $direction); 74 | } 75 | } 76 | 77 | /* Generates all the rules for the grid column offset up to the given amount of column */ 78 | @mixin generate-offsets($breakPoint, $columnTotal, $column: 0) { 79 | @if ($column <= $columnTotal) { 80 | & > .aem-GridColumn.aem-GridColumn--offset--#{$breakPoint}--#{$column} { 81 | margin-inline-start: ($column * 100% / $columnTotal); 82 | } 83 | 84 | @include generate-offsets($breakPoint, $columnTotal, ($column + 1)); 85 | } 86 | } 87 | 88 | /* Generates all the rules for the grid and columns for the given break point and total of columns */ 89 | @mixin generate-grid-columns($breakPoint, $columnTotal, $direction) { 90 | @if ($columnTotal > 0) { 91 | &.aem-Grid--#{$columnTotal} { 92 | @include generate-columns($breakPoint, $columnTotal, 1, $direction); 93 | @include generate-offsets($breakPoint, $columnTotal); 94 | } 95 | 96 | &.aem-Grid--#{$breakPoint}--#{$columnTotal} { 97 | @include generate-columns($breakPoint, $columnTotal, 1, $direction); 98 | @include generate-offsets($breakPoint, $columnTotal); 99 | } 100 | } 101 | } 102 | 103 | /* Generates all the rules for the grids and columns */ 104 | @mixin grid-loop($breakPoint, $columnTotal, $column: 1, $direction) { 105 | @if ($column <= $columnTotal) { 106 | @include generate-grid-columns($breakPoint, $column, $direction); 107 | @include grid-loop($breakPoint, $columnTotal, ($column + 1), $direction); 108 | } 109 | } 110 | 111 | /* API function to be called to generate a grid config */ 112 | @mixin generate-grid($breakPoint, $columnTotal, $direction) { 113 | @include grid-loop($breakPoint, $columnTotal, 1, $direction); 114 | 115 | & > .aem-GridColumn.aem-GridColumn--#{$breakPoint}--newline { 116 | /* newline behavior */ 117 | display: block; 118 | clear: both !important; 119 | } 120 | 121 | & > .aem-GridColumn.aem-GridColumn--#{$breakPoint}--none { 122 | /* none behavior */ 123 | display: block; 124 | float: $direction; // Enforce the float positioning to maintain the column height and position relative to previous columns 125 | clear: none !important; // Prevent the clear:both effect of another breakpoint new line 126 | } 127 | 128 | & > .aem-GridColumn.aem-GridColumn--#{$breakPoint}--hide { 129 | /* hide behavior */ 130 | display: none; 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /src/site/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin container { 2 | position: relative; 3 | display: flex; 4 | flex-direction: column; 5 | 6 | &[data-cmp-valid=false] input, 7 | &[data-cmp-valid=false] textarea, 8 | &[data-cmp-valid=false] select { 9 | background: $light-error ; 10 | border: $border-error ; 11 | outline-color: $error; 12 | } 13 | 14 | &[data-cmp-valid=false]>&__shortdescription { 15 | display: none; 16 | } 17 | 18 | &[data-cmp-valid=false]>&__errormessage { 19 | display: flex; 20 | align-items: center; 21 | } 22 | 23 | @include required-field-style; 24 | 25 | // remove this code 26 | &.cmp-tabs, 27 | &.cmp-adaptiveform-wizard, 28 | &.cmp-accordion { 29 | margin: $space-l 0; 30 | } 31 | 32 | } 33 | 34 | @mixin required-field-style { 35 | &[data-cmp-required=true] &__label { 36 | display: flex; 37 | justify-content: flex-start; 38 | column-gap: $space-xs; 39 | &::after { 40 | content: '*'; 41 | font-weight: bold; 42 | color: $error; 43 | } 44 | } 45 | } 46 | 47 | @mixin label { 48 | padding-inline-end: $space-m; 49 | box-sizing: border-box; 50 | opacity: 1; 51 | color: $mid-gray; 52 | padding: 0; 53 | font-size: $font-m; 54 | pointer-events: none; 55 | z-index: 11; 56 | font-weight: $font-weight-normal; 57 | } 58 | 59 | @mixin checkbox-label { 60 | pointer-events: all; 61 | display: flex; 62 | align-items: center; 63 | gap: $space-s; 64 | width: 100%; 65 | } 66 | 67 | @mixin panel-label { 68 | font-size: $font-l; 69 | font-weight: $font-weight-bold; 70 | color: $mid-gray; 71 | opacity: 1; 72 | margin-top: 0; 73 | margin-bottom: $space-s; 74 | position: static; 75 | } 76 | 77 | @mixin widget { 78 | border-radius: 0; 79 | font-size: $font-m; 80 | height: $standard-height; 81 | background-color: $white; 82 | border: $border-default; 83 | border-radius: $field-radius; 84 | padding: 0 $space-s; 85 | margin: $space-xs 0; 86 | outline: $focus-outline; 87 | outline-width: 0px; 88 | box-sizing: border-box; 89 | font-family: $font-family-default; 90 | 91 | &:hover:not([disabled]) { 92 | border: $border-light; 93 | background: linear-gradient(0deg, rgba(34, 107, 249, 0.05) 0%, rgba(34, 107, 249, 0.05) 100%), #FFF; 94 | } 95 | 96 | &:focus:not([disabled]) { 97 | background-color: white; 98 | border-color: transparent; 99 | outline-offset: 0; 100 | outline: $focus-outline; 101 | transition: outline 0.1s ease-out, border 0.1s ease-out; 102 | } 103 | 104 | &:disabled { 105 | background-color: $whitish-gray; 106 | } 107 | 108 | &[readonly] { 109 | background-color: $whitish-gray; 110 | } 111 | } 112 | 113 | @mixin long-description { 114 | display: flex; 115 | align-items: flex-start; 116 | background-color: rgba(34, 107, 249, 0.10); 117 | border-radius: $field-radius; 118 | opacity: 1; 119 | color: $mid-gray; 120 | padding: $space-s; 121 | font-size: $font-s; 122 | font-weight: $font-weight-normal; 123 | pointer-events: none; 124 | margin: $space-xs 0; 125 | column-gap: $space-s; 126 | 127 | &::before { 128 | content: ''; 129 | background: url(./resources/images/long-description.svg) center center / cover no-repeat; 130 | height: 16px; 131 | min-width: 16px; 132 | } 133 | 134 | p { 135 | margin: 0; 136 | } 137 | } 138 | 139 | @mixin short-description { 140 | display: flex; 141 | position: static; 142 | font-size: $font-s; 143 | font-weight: $font-weight-normal; 144 | color: $gray; 145 | margin: 0 0 $space-s 0; 146 | } 147 | 148 | @mixin question-mark { 149 | position: absolute; 150 | display: flex; 151 | top: 0; 152 | inset-inline-end: 0; 153 | padding: 0; 154 | width: $font-m; 155 | height: $font-m; 156 | border-radius: 9px; 157 | background: url(./resources/images/question-default.svg) center center / cover no-repeat; 158 | cursor: pointer; 159 | border: none; 160 | color: $blue; 161 | 162 | &:hover { 163 | background: url(./resources/images/question-hover.svg) center center / cover no-repeat; 164 | } 165 | &:active { 166 | background: url(./resources/images/question-clicked.svg) center center / cover no-repeat; 167 | } 168 | } 169 | 170 | @mixin error-message { 171 | display: none; 172 | color: $error; 173 | font-size: $font-s; 174 | font-weight: $font-weight-semi-bold; 175 | margin: 0; 176 | 177 | &::before { 178 | content: ''; 179 | background: url(./resources/images/error.svg) center center / cover no-repeat; 180 | margin-inline-end: $space-xs; 181 | height: 14px; 182 | min-width: 16px; 183 | } 184 | } 185 | 186 | // description contains the long-description, short-description, question-mark 187 | @mixin description { 188 | &__longdescription { 189 | @include long-description; 190 | } 191 | 192 | &__shortdescription { 193 | @include short-description; 194 | } 195 | 196 | &__questionmark { 197 | @include question-mark; 198 | } 199 | 200 | &__label-container { 201 | display: flex; 202 | justify-content: space-between; 203 | &>button[class*=__questionmark] { 204 | position: unset; 205 | inset-inline-end: unset; 206 | } 207 | } 208 | } 209 | 210 | // input contains the container, label, widget, description, error 211 | @mixin input { 212 | @include container; 213 | 214 | &__label { 215 | @include label; 216 | } 217 | 218 | &__widget { 219 | @include widget; 220 | } 221 | 222 | @include description; 223 | 224 | &__errormessage { 225 | @include error-message 226 | } 227 | } 228 | 229 | @mixin primary-button { 230 | width: 100%; 231 | display: block; 232 | background: $primary; 233 | border: none; 234 | border-radius: $button-radius; 235 | height: $button-height; 236 | padding: 8px $space-m; 237 | cursor: pointer; 238 | color: white; 239 | font-size: $font-m; 240 | font-weight: $font-weight-normal; 241 | 242 | &:hover:not([disabled]) { 243 | background-color: $light-blue; 244 | } 245 | 246 | &:active:not([disabled]) { 247 | background-color: $clicked-button; 248 | } 249 | 250 | &:disabled { 251 | opacity: 50%; 252 | cursor: default; 253 | } 254 | 255 | &[data-cmp-enabled=false] { 256 | opacity: 50%; 257 | } 258 | 259 | @media (min-width: 640px) { 260 | width: fit-content; 261 | } 262 | } 263 | 264 | @mixin secondary-base-button { 265 | width: 100%; 266 | display: flex; 267 | justify-content: center; 268 | position: static; 269 | align-self: flex-start; 270 | border: 1px solid $light-gray; 271 | border-radius: $button-radius; 272 | background-color: $white; 273 | vertical-align: text-bottom; 274 | cursor: pointer; 275 | color:$mid-gray; 276 | font-size: $font-m; 277 | padding: $space-s $space-m; 278 | font-weight: $font-weight-normal; 279 | margin: $space-s 0; 280 | opacity: 1; 281 | align-items: center; 282 | 283 | @media (min-width: 640px) { 284 | width: fit-content; 285 | } 286 | } 287 | 288 | @mixin secondary-button { 289 | @include secondary-base-button; 290 | 291 | &:hover { 292 | border: 1px solid $light-gray; 293 | background-color: $hover-secondary; 294 | } 295 | 296 | &:active { 297 | background-color: $clicked-button; 298 | color: $white; 299 | } 300 | 301 | &:disabled { 302 | background-color: $whitish-gray; 303 | cursor: default; 304 | opacity: 0.5; 305 | } 306 | 307 | } 308 | 309 | // for tabs on top & wizard 310 | @mixin tab-list { 311 | padding-block: 0 2*$space-xs; 312 | padding-inline: $space-s; 313 | counter-reset: section; 314 | display: flex; 315 | flex-wrap: nowrap; 316 | list-style: none; 317 | margin: 0; 318 | margin-bottom: 0; 319 | overflow: auto; 320 | } 321 | 322 | @mixin tab { 323 | padding: 0; 324 | background-color: transparent; 325 | min-height: $tap-height; 326 | line-height: 1.2; 327 | color: $mid-gray; 328 | margin-inline-end: $space-m; 329 | font-size: $font-m; 330 | display: flex; 331 | align-items: center; 332 | border-radius: 0; 333 | border-width: 2px; 334 | white-space: nowrap; 335 | font-weight: $font-weight-bold; 336 | 337 | &:hover { 338 | color: $black; 339 | border-bottom-color: $border-hover; 340 | border-bottom-style: solid; 341 | } 342 | 343 | &--active,&--active:hover { 344 | color: $tab-active; 345 | border-color: $primary; 346 | border-bottom-style: solid; 347 | display: flex; 348 | align-items: center; 349 | } 350 | 351 | &--active::after { 352 | content: '—'; 353 | display: none; 354 | color: $primary; 355 | } 356 | 357 | } 358 | 359 | @mixin tab-panel { 360 | padding: $space-l; 361 | background-color: $common-panel-background; 362 | 363 | @media (max-width: 480px) { 364 | padding-block: $space-l; 365 | padding-inline: $space-m; 366 | width: 100%; 367 | } 368 | } 369 | 370 | // wizard tab 371 | @mixin wizard-tab { 372 | @include tab; 373 | column-gap: $space-s; 374 | padding: 0; 375 | border-bottom-width: 2px; 376 | box-sizing: border-box; 377 | display: flex; 378 | align-items: center; 379 | font-size: $font-m; 380 | transition: flex-grow ease .3s; 381 | border-radius: 0; 382 | border-bottom-width: 2px; 383 | border-bottom-style: solid; 384 | border-color: transparent; 385 | &:last-child { 386 | margin: 0; 387 | } 388 | 389 | &--active { 390 | transition: flex-grow ease .3s; 391 | //color: $primary; 392 | //border-bottom: $focus-outline; 393 | background-color: transparent; 394 | } 395 | } 396 | 397 | @mixin wizard-next-button { 398 | @include primary-button; 399 | margin: $space-s 0; 400 | display: flex; 401 | justify-content: center; 402 | align-items: center; 403 | height: 43px; 404 | position: static; 405 | cursor: pointer; 406 | padding-block: 8px; 407 | 408 | &::before { 409 | content: 'Next'; 410 | position: static; 411 | } 412 | } 413 | 414 | @mixin wizard-previous-button { 415 | display: flex; 416 | justify-content: center; 417 | align-items: center; 418 | position: static; 419 | cursor: pointer; 420 | @include secondary-button; 421 | height: 43px; 422 | padding-block: 8px; 423 | 424 | &::before { 425 | content: 'Previous'; 426 | position: static; 427 | } 428 | } 429 | 430 | @mixin list-container { 431 | pointer-events: all; 432 | margin: 0; 433 | display: flex; 434 | margin: $space-xs 0; 435 | 436 | &.VERTICAL { 437 | flex-direction: column; 438 | row-gap: 0; 439 | } 440 | 441 | &.HORIZONTAL { 442 | flex-direction: row; 443 | column-gap: 0; 444 | flex-wrap: wrap; 445 | } 446 | } 447 | 448 | @mixin list-item { 449 | pointer-events: all; 450 | display: flex; 451 | align-items: center; 452 | color: $mid-gray; 453 | column-gap: $space-s; 454 | position: static; 455 | opacity: 1; 456 | border-radius: $button-radius; 457 | border: none; 458 | cursor: pointer; 459 | margin: 0; 460 | padding: $space-s; 461 | font-size: $font-m; 462 | 463 | } 464 | 465 | @mixin repeatability-icon-default { 466 | background-color: $very-light-gray; 467 | width: 1.75rem; 468 | border: 0; 469 | height: 1.75rem; 470 | border-radius: 50%; 471 | padding: 5px 5px; 472 | cursor: pointer; 473 | } 474 | 475 | @mixin repeatability-buttons { 476 | &__repeatable-buttons { 477 | display: flex; 478 | align-items: center; 479 | background: transparent; 480 | gap: 5px; 481 | 482 | .cmp-accordion__add-button { 483 | background: url('./resources/images/add-button.svg') 50% 50% no-repeat; 484 | @include repeatability-icon-default; 485 | 486 | &:hover { 487 | background: url('./resources/images/add-button-white.svg') 50% 50% no-repeat; 488 | background-color: $primary; 489 | box-shadow: $box-shadhow-hover; 490 | } 491 | } 492 | 493 | .cmp-accordion__remove-button { 494 | background: url('./resources/images/remove-button-black.svg') 50% 50% no-repeat; 495 | @include repeatability-icon-default; 496 | 497 | &:hover { 498 | background: url('./resources/images/remove-button.svg') 50% 50% no-repeat; 499 | background-color: $error; 500 | box-shadow: $box-shadhow-hover; 501 | } 502 | } 503 | } 504 | } 505 | 506 | div[data-cmp-is="adaptiveFormDropDown"], 507 | div[data-cmp-is="adaptiveFormDatePicker"], 508 | div[data-cmp-is="adaptiveFormNumberInput"], 509 | div[data-cmp-is="adaptiveFormTextInput"], 510 | div[data-cmp-is="adaptiveFormCheckBoxGroup"], 511 | div[data-cmp-is="adaptiveFormFileInput"], 512 | div[data-cmp-is="adaptiveFormRadioButton"], 513 | div[data-cmp-is="adaptiveFormEmailInput"], 514 | div[data-cmp-is="adaptiveFormTelephoneInput"] { 515 | border: none; 516 | margin: $space-s 0; 517 | } --------------------------------------------------------------------------------