diff --git a/src/assets/img/icons/select-disabled.png b/src/assets/img/icons/select-disabled.png new file mode 100644 index 00000000..03ac8316 Binary files /dev/null and b/src/assets/img/icons/select-disabled.png differ diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue index 0a25d34b..733f33d9 100644 --- a/src/digital-components/dropdown-question/dropdown-question.vue +++ b/src/digital-components/dropdown-question/dropdown-question.vue @@ -156,8 +156,8 @@ export default { &:disabled, &.disabled { background-color: $gray-100; - color: $gray-500; - filter: grayscale(100%); + background-image: url(~@/assets/img/icons/select-disabled.png); + cursor: not-allowed; } } &.dropdown-compact { diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue index 7c09f33d..2443d67a 100644 --- a/src/digital-components/textbox-question/textbox-question.vue +++ b/src/digital-components/textbox-question/textbox-question.vue @@ -402,6 +402,7 @@ input::-webkit-date-and-time-value { &:disabled, &.disabled { background-color: $gray-100; + cursor: not-allowed; } } p { diff --git a/src/layouts/contact-details/contact-details.vue b/src/layouts/contact-details/contact-details.vue index ce4781ef..021fabd0 100644 --- a/src/layouts/contact-details/contact-details.vue +++ b/src/layouts/contact-details/contact-details.vue @@ -59,7 +59,7 @@ inputId="state" class="form-group" :cmsWidgetName="widget.stateQuestion" - :options="states" + :options="getStates" isDisabled /> { + // eslint-disable-next-line no-param-reassign + acc[key] = states[key].toUpperCase(); + return acc; + }, {}); + }, }, watch: { isSameAsPolicyAddress(newValue) { diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue index 71be3bf5..6c0ba950 100644 --- a/src/ux-components/alert/alert.vue +++ b/src/ux-components/alert/alert.vue @@ -7,7 +7,12 @@ alertClass, cssClassNameForCmsWidget, ]"> -
+
+ type="button"> + class="alert-body collapse" + :class="{ 'show': !startCollapsed }">