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 85bef043..2d441edb 100644 --- a/src/digital-components/textbox-question/textbox-question.vue +++ b/src/digital-components/textbox-question/textbox-question.vue @@ -394,6 +394,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 c28d0d3a..0963d216 100644 --- a/src/layouts/contact-details/contact-details.vue +++ b/src/layouts/contact-details/contact-details.vue @@ -57,9 +57,9 @@ ref="stateQuestion" v-model="state" inputId="state" - class="form-group" + class="form-group state-dropdown" :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) { @@ -301,6 +308,11 @@ export default { .form-group { margin-bottom: 1.25rem; } +.state-dropdown { + :deep(option) { + text-transform: uppercase; + } +} .same-address-checkbox { :deep(.form-check-input) { &:checked + label p, diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue index 4d50bc1b..29aa5853 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 }">