From b79d68d666e19b0cc7a6e9f460db4eb103b7892f Mon Sep 17 00:00:00 2001 From: marikannanm Date: Sat, 2 Mar 2024 19:00:17 +0530 Subject: [PATCH 1/3] imagechoice-component - style update --- src/components/imagechoice/_imagechoice.scss | 96 +++++++++++++++++++ .../images/ImageChoiceSelectIcon.svg | 9 ++ src/theme.scss | 1 + 3 files changed, 106 insertions(+) create mode 100644 src/components/imagechoice/_imagechoice.scss create mode 100644 src/resources/images/ImageChoiceSelectIcon.svg diff --git a/src/components/imagechoice/_imagechoice.scss b/src/components/imagechoice/_imagechoice.scss new file mode 100644 index 0000000..f26e745 --- /dev/null +++ b/src/components/imagechoice/_imagechoice.scss @@ -0,0 +1,96 @@ +/* ===============Image choice================== */ +.cmp-adaptiveform-imagechoice { + color: $dark-gray; + font-size: $font-md; + margin: $field-margin; + display: flex; + flex-direction: column; +} +.cmp-adaptiveform-imagechoice__label-container{ + display: flex; + align-items: center; + justify-content: space-between; +} +.cmp-adaptiveform-imagechoice__widget { + font-size: $font-md; + color: $dark-gray; + display: flex; + flex-wrap: wrap; + gap: $radio-checkbox-gap; + margin-top: $label-top-margin; +} +.cmp-adaptiveform-imagechoice__widget.HORIZONTAL{ + min-height: $field-height; +} +.cmp-adaptiveform-imagechoice__widget.VERTICAL{ + flex-direction: column; +} +.cmp-adaptiveform-imagechoice__longdescription { + color: $light-gray; + background-color: $very-light-gray; + font-size: $font-sm; + margin-top: $error-top-margin; + margin-bottom: 5px; + padding: 10px; + p{ + margin: 0; + padding: 0; + } +} +.cmp-adaptiveform-imagechoice__shortdescription { + font-size: $font-sm; + margin-top: $error-top-margin; +} +.cmp-adaptiveform-imagechoice__questionmark { + display:inline-block; + width:1rem; + height:1rem; + border-radius: 9px; + background: url(./resources/images/question.svg) center center / cover no-repeat,#969696; + cursor : pointer; + // below properties for backward compatibility + position: absolute; + right: 20px; +} +// below properties for backward compatibility +.cmp-adaptiveform-imagechoice__label-container .cmp-adaptiveform-imagechoice__questionmark{ + position: unset; + right: unset; +} +.cmp-adaptiveform-imagechoice__errormessage{ + color: $error; + font-size: $font-sm; + margin-top: $error-top-margin; +} +.cmp-adaptiveform-imagechoice__widget.HORIZONTAL .cmp-adaptiveform-imagechoice-option{ + max-width: 240px; +} +.cmp-adaptiveform-imagechoice-option { + color: $dark-gray; +} +.cmp-adaptiveform-imagechoice[data-cmp-valid=false]{ + background: $light-error; + border: 0 solid $error; + border-inline-start-width: 4px; + padding-inline-start: 5px; +} +.cmp-adaptiveform-imagechoice[data-cmp-valid=true]{ + border: 0 solid $success; + border-inline-start-width: 4px; + padding-inline-start: 5px; +} +.cmp-adaptiveform-imagechoice__option__widget__image { + background-repeat: no-repeat; + background-size: contain; + width: 80px; +} +.cmp-adaptiveform-imagechoice__option input[type="checkbox"], +.cmp-adaptiveform-imagechoice__option input[type="radio"] { + position: relative; + float: none; + vertical-align: middle; + display: none; +} +input.cmp-adaptiveform-imagechoice__option__widget:checked + .cmp-adaptiveform-imagechoice__option__widget__image { + background:url(../assets/ImageChoiceSelectIcon.svg) center center no-repeat,rgba(23,107,230,0.5); +} \ No newline at end of file diff --git a/src/resources/images/ImageChoiceSelectIcon.svg b/src/resources/images/ImageChoiceSelectIcon.svg new file mode 100644 index 0000000..4b8a98b --- /dev/null +++ b/src/resources/images/ImageChoiceSelectIcon.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/src/theme.scss b/src/theme.scss index 73a9b5e..3d26074 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -33,3 +33,4 @@ @import 'src/components/recaptcha/_recaptcha.scss'; @import 'src/components/verticaltabs/_verticaltabs.scss'; @import 'src/components/checkbox/_checkbox.scss'; +@import 'src/components/imagechoice/_imagechoice.scss'; From 50a6bdbe85e704c4af9fa5c0952ff04a4416f4c4 Mon Sep 17 00:00:00 2001 From: marikannanm Date: Thu, 1 Aug 2024 17:20:03 +0530 Subject: [PATCH 2/3] ImageChoice-Component-Css Update --- src/components/imagechoice/_imagechoice.scss | 152 ++++++++++--------- 1 file changed, 84 insertions(+), 68 deletions(-) diff --git a/src/components/imagechoice/_imagechoice.scss b/src/components/imagechoice/_imagechoice.scss index f26e745..17e7ba7 100644 --- a/src/components/imagechoice/_imagechoice.scss +++ b/src/components/imagechoice/_imagechoice.scss @@ -1,96 +1,112 @@ /* ===============Image choice================== */ .cmp-adaptiveform-imagechoice { - color: $dark-gray; - font-size: $font-md; - margin: $field-margin; - display: flex; + color: #666; flex-direction: column; -} -.cmp-adaptiveform-imagechoice__label-container{ + margin: 0.25rem 0; + font-size: 1rem; display: flex; - align-items: center; - justify-content: space-between; } .cmp-adaptiveform-imagechoice__widget { - font-size: $font-md; - color: $dark-gray; - display: flex; + color: #666; flex-wrap: wrap; - gap: $radio-checkbox-gap; - margin-top: $label-top-margin; + gap: 20px; + margin-top: 10px; + font-size: 1rem; + display: flex } -.cmp-adaptiveform-imagechoice__widget.HORIZONTAL{ - min-height: $field-height; +.cmp-adaptiveform-imagechoice__label { } -.cmp-adaptiveform-imagechoice__widget.VERTICAL{ - flex-direction: column; +.cmp-adaptiveform-imagechoice__label-container{ + justify-content: space-between; + align-items: center; + display: flex; +} +.cmp-adaptiveform-imagechoice__widget__label { } .cmp-adaptiveform-imagechoice__longdescription { - color: $light-gray; - background-color: $very-light-gray; - font-size: $font-sm; - margin-top: $error-top-margin; + color: #969696; + background-color: #E6E6E6; + margin-top: 10px; margin-bottom: 5px; padding: 10px; - p{ - margin: 0; - padding: 0; - } + font-size: .875rem +} +.cmp-adaptiveform-imagechoice__longdescription p { + margin: 0; + padding: 0 } .cmp-adaptiveform-imagechoice__shortdescription { - font-size: $font-sm; - margin-top: $error-top-margin; + margin-top: 10px; + font-size: .875rem +} +.cmp-adaptiveform-imagechoice__label-container .cmp-adaptiveform-imagechoice__questionmark { + position: unset; + right: unset } .cmp-adaptiveform-imagechoice__questionmark { - display:inline-block; - width:1rem; - height:1rem; + display: inline-block; + cursor: pointer; + background: url(http://localhost:4502/apps/forms-components-examples/clientlibs/forms-clientlib-site/styles/components/adaptive-form/resources/question.svg) 50%/cover no-repeat,#969696; border-radius: 9px; - background: url(./resources/images/question.svg) center center / cover no-repeat,#969696; - cursor : pointer; - // below properties for backward compatibility + width: 1rem; + height: 1rem; + display: inline-block; position: absolute; - right: 20px; -} -// below properties for backward compatibility -.cmp-adaptiveform-imagechoice__label-container .cmp-adaptiveform-imagechoice__questionmark{ - position: unset; - right: unset; -} -.cmp-adaptiveform-imagechoice__errormessage{ - color: $error; - font-size: $font-sm; - margin-top: $error-top-margin; -} -.cmp-adaptiveform-imagechoice__widget.HORIZONTAL .cmp-adaptiveform-imagechoice-option{ - max-width: 240px; -} -.cmp-adaptiveform-imagechoice-option { - color: $dark-gray; -} -.cmp-adaptiveform-imagechoice[data-cmp-valid=false]{ - background: $light-error; - border: 0 solid $error; - border-inline-start-width: 4px; - padding-inline-start: 5px; + right: 20px } -.cmp-adaptiveform-imagechoice[data-cmp-valid=true]{ - border: 0 solid $success; - border-inline-start-width: 4px; - padding-inline-start: 5px; +.cmp-adaptiveform-imagechoice__options { } -.cmp-adaptiveform-imagechoice__option__widget__image { +.cmp-adaptiveform-imagechoice__option { background-repeat: no-repeat; background-size: contain; - width: 80px; + color: #666; +} +.cmp-adaptiveform-imagechoice__option--selected { } .cmp-adaptiveform-imagechoice__option input[type="checkbox"], .cmp-adaptiveform-imagechoice__option input[type="radio"] { - position: relative; - float: none; - vertical-align: middle; - display: none; + position: relative; + float: none; + vertical-align: middle; + display: none; +} +.cmp-adaptiveform-imagechoice__option-label { +} + +.cmp-adaptiveform-imagechoice__option__widget__image { + width: 80px; + height: 80px; +} +.cmp-adaptiveform-imagechoice__widget.HORIZONTAL { + min-height: 40px; +} +.cmp-adaptiveform-imagechoice__widget.VERTICAL { + flex-direction: column +} +.cmp-adaptiveform-imagechoice__widget.HORIZONTAL .cmp-adaptiveform-imagechoice-option { + max-width: 240px +} +.cmp-adaptiveform-imagechoice__errormessage { + color: #EB3C36; + margin-top: 10px; + font-size: .875rem; +} +.cmp-adaptiveform-imagechoice[data-cmp-valid=false] { + -webkit-padding-start: 5px; + border: 0 solid #EB3C36; + background: #eb3c360d; + border-inline-start-width:4px; + padding-inline-start:5px +} + + +.cmp-adaptiveform-imagechoice[data-cmp-valid=true] { + -webkit-padding-start: 5px; + border: 0 solid #23B482; + border-inline-start-width:4px; + padding-inline-start:5px } input.cmp-adaptiveform-imagechoice__option__widget:checked + .cmp-adaptiveform-imagechoice__option__widget__image { - background:url(../assets/ImageChoiceSelectIcon.svg) center center no-repeat,rgba(23,107,230,0.5); -} \ No newline at end of file + z-index: 1; + background: url(/libs/fd/af/runtime/clientlibs/guidetheme2/default/resources/ImageChoiceSelectIcon.svg) center center no-repeat, rgba(23, 107, 230, 0.5); center center no-repeat,rgba(23,107,230,0.5)) center center no-repeat, rgba(23, 107, 230, 0.5); +} From 162a6623e44c9e69625c60155d22e071fa84a24d Mon Sep 17 00:00:00 2001 From: marikannanm Date: Mon, 12 Aug 2024 15:17:59 +0530 Subject: [PATCH 3/3] ImageChoice-XDFeedbackUpdate --- src/components/imagechoice/_imagechoice.scss | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/imagechoice/_imagechoice.scss b/src/components/imagechoice/_imagechoice.scss index 17e7ba7..ba92f95 100644 --- a/src/components/imagechoice/_imagechoice.scss +++ b/src/components/imagechoice/_imagechoice.scss @@ -46,7 +46,7 @@ .cmp-adaptiveform-imagechoice__questionmark { display: inline-block; cursor: pointer; - background: url(http://localhost:4502/apps/forms-components-examples/clientlibs/forms-clientlib-site/styles/components/adaptive-form/resources/question.svg) 50%/cover no-repeat,#969696; + background: url(/apps/forms-components-examples/clientlibs/forms-clientlib-site/styles/components/adaptive-form/resources/question.svg) 50%/cover no-repeat,#969696; border-radius: 9px; width: 1rem; height: 1rem; @@ -68,7 +68,6 @@ position: relative; float: none; vertical-align: middle; - display: none; } .cmp-adaptiveform-imagechoice__option-label { } @@ -77,6 +76,9 @@ width: 80px; height: 80px; } +.cmp-adaptiveform-imagechoice__option__widget{ + top: -69px; +} .cmp-adaptiveform-imagechoice__widget.HORIZONTAL { min-height: 40px; } @@ -99,14 +101,14 @@ padding-inline-start:5px } - .cmp-adaptiveform-imagechoice[data-cmp-valid=true] { -webkit-padding-start: 5px; border: 0 solid #23B482; border-inline-start-width:4px; padding-inline-start:5px } -input.cmp-adaptiveform-imagechoice__option__widget:checked + .cmp-adaptiveform-imagechoice__option__widget__image { - z-index: 1; - background: url(/libs/fd/af/runtime/clientlibs/guidetheme2/default/resources/ImageChoiceSelectIcon.svg) center center no-repeat, rgba(23, 107, 230, 0.5); center center no-repeat,rgba(23,107,230,0.5)) center center no-repeat, rgba(23, 107, 230, 0.5); -} + +.cmp-adaptiveform-imagechoice__option__alt-text { + text-align: center; + margin-left: 25px; +} \ No newline at end of file