diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css index 68e556d53..c81dda28e 100644 --- a/public/css/hop-styling.css +++ b/public/css/hop-styling.css @@ -39,27 +39,36 @@ body input, body select { margin-top: 4px; } -body input { +body input, +body select { border-radius: 8px; border: 1px solid #8E9292; padding: 16px; font-size: 16px; color: #000; + background-color: #fff; } -body input:focus, body input:focus-visible { +body input:focus, body input:focus-visible, +body select:focus, +body select:focus-visible { box-shadow: 0 0 0 2.5px #1574a1; - border: none; + border: 1px solid transparent; outline: none; } -body input:disabled, body input.disabled { +body input:disabled, body input.disabled, +body select:disabled, +body select.disabled { background-color: #f5f5f5; filter: grayscale(100%); } -body input:disabled:hover, body input.disabled:hover { +body input:disabled:hover, body input.disabled:hover, +body select:disabled:hover, +body select.disabled:hover { box-shadow: 0 0 0 4px transparent; border: 1px solid #8e9292; } -body input:hover { +body input:hover, +body select:hover { border: 1px solid #8e9292; box-shadow: 0 0 0 4px #9fcee6; } @@ -171,7 +180,7 @@ body .has-error select { } body .has-error input:focus, body .has-error select:focus { - border: 1px solid transparent; + box-shadow: 0 0 0 2.5px #fcbfbb; } body .has-error input:hover, body .has-error select:hover { diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss index ed8e8e14c..a71e4aa41 100644 --- a/public/scss/hop-styling.scss +++ b/public/scss/hop-styling.scss @@ -48,16 +48,18 @@ body { margin-top: 4px; } - input { + input, + select { border-radius: 8px; border: 1px solid #8E9292; padding: 16px; font-size: 16px; color: #000; + background-color: #fff; &:focus, &:focus-visible { box-shadow: 0 0 0 2.5px #1574a1; - border: none; + border: 1px solid transparent; outline: none; } &:disabled, @@ -191,7 +193,7 @@ body { select { border: 1px solid #d4281c; &:focus { - border: 1px solid transparent; + box-shadow: 0 0 0 2.5px #fcbfbb; } &:hover { border: 1px solid #d4281c; diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue index 46c6a5b61..1292983f1 100644 --- a/src/layouts/vehicle/vehicle.vue +++ b/src/layouts/vehicle/vehicle.vue @@ -17,7 +17,7 @@ cmsWidgetName="VehicleYearQuestion" validationRules="year-required" placeHolderText="Select year" - inputId="yearQuestionField" /> + customDropdownId="yearQuestionField" /> + customDropdownId="makeQuestionField" /> + customDropdownId="modelQuestionField" /> + customDropdownId="styleQuestionField" /> { if (isInIframe && notToPIAReturn) { const newUrl = `${window.top.location.origin}${to.href}`; window.top.location.href = newUrl; - } else if (toQueryPage === fromQueryPage) { + // Refresh page if navigating to self to prevent locking. + // For now only carved out for vehicle; all modals are opened through anchor tags at the moment, + // which also self navigate, but relied on the page remaining the same on self-navigation. + } else if (toQueryPage === fromQueryPage && toQueryPage === "vehicle") { router.go(0); } else { next();