diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 91c83fc2a..e29f1fd93 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -35,6 +35,7 @@ :selectedValues="selectedValues" data-test="button" :validationRules="validationRules" + :class="[suppressError ? 'alertError' : '']" /> diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index f15b862ac..543a02bef 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -281,7 +281,7 @@ export default { navigateForward(partsData){ // Temporary easter egg to navigate to heritage funnel. - const vehicleYearsToShowHeritageFunnel = [ 2001, 2002, 2010 ]; + const vehicleYearsToShowHeritageFunnel = [ 2001, 2002, 2010, 2016 ]; if (vehicleYearsToShowHeritageFunnel.includes(store.getters.vehicle.year)) { navigateToHeritageFunnel(); return; diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index 1602778d3..f99dc4751 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -1,85 +1,114 @@ -.has-error { - &.list-button, - &.list-card { - border: 1px solid $red; - color: $red; - input[type=checkbox]:focus + label, - input[type=radio]:focus + label { - box-shadow: 0 0 0 2.5px $red; - } - input[type=checkbox]:checked + label { - box-shadow: 0 0 0 1px $red !important; - } - &:hover { - box-shadow: 0px 0px 0px 4px $red-200; - border-radius: 10px !important; - } - } - &.list-button-horizontal { - color: $red; - label { +html { + .has-error { + &.list-button, + &.list-card { border: 1px solid $red; + color: $red; + input[type=checkbox]:focus + label, + input[type=radio]:focus + label { + box-shadow: 0 0 0 2.5px $red; + } + input[type=checkbox]:checked + label { + box-shadow: 0 0 0 1px $red; + } &:hover { box-shadow: 0px 0px 0px 4px $red-200; + border-radius: 10px; } } - input[type=checkbox]:focus + label, - input[type=radio]:focus + label { - box-shadow: 0 0 1px $red !important; - } - } - &.ui-radio, - &.ui-checkbox { - input[type=checkbox], - input[type=radio], - input[type=radio]+label:before, - input[type=checkbox]+label:before { - border: 1px solid $red; - } - input[type=checkbox]:checked + label:before { - border: 1px solid $blue; - } - } - &.textbox-question, - &.dropdown-question { - p { + &.list-button-horizontal { color: $red; - } - input, - select { - border: 1px solid $red; - &:focus { - border: 1px solid transparent; + label { + border: 1px solid $red; + &:hover { + box-shadow: 0px 0px 0px 4px $red-200; + } + } + input[type=checkbox]:focus + label, + input[type=radio]:focus + label { + box-shadow: 0 0 1px $red; } } - select { - background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%23d4281c'/%3e%3c/svg%3e"); - background-repeat: no-repeat; - background-position: right 0.75rem center; - background-size: 16px 12px; + &.ui-radio, + &.ui-checkbox { + input[type=checkbox], + input[type=radio], + input[type=radio]+label:before, + input[type=checkbox]+label:before { + border: 1px solid $red; + } + input[type=checkbox]:checked + label:before { + border: 1px solid $blue; + } + } + &.textbox-question, + &.dropdown-question { + p { + color: $red; + } + input, + select { + border: 1px solid $red; + &:focus { + border: 1px solid transparent; + } + } + select { + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%23d4281c'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right 0.75rem center; + background-size: 16px 12px; + } + } + } + //Restore to default style if alert box is present + .alertError { + .has-error { + &.list-button, + &.list-card { + border: 1px solid $gray-500; + input:not(:focus) { + + label { + box-shadow: 0 0 0 1px $gray-500; + border-radius: .5rem; + } + } + input:focus { + border: 1px solid $gray-500; + + label { + box-shadow: 0 0 0 2.5px transparent; + } + } + &:hover { + box-shadow: 0 0 0 4px $blue-300; + + label { + box-shadow: 0 0 0 2.5px transparent; + border: 1px solid $blue; + } + } + } + } + } + + .form-test-error { + color: $red; + font-size: .875rem; + font-weight: 500; + } + + .form-test-invalid { + &.btn.btn-primary { + color: $gray; + background: $gray-200; + cursor: pointer; + pointer-events: all; + } + &.btn.btn-primary:hover, + &.btn.btn-primary:focus, + &.btn.btn-primary:focus-visible { + color: $gray !important; + background: $gray-200; + box-shadow: none; } } } - -.form-test-error { - color: $red; - font-size: .875rem; - font-weight: 500; -} - -.form-test-invalid { - &.btn.btn-primary { - color: $gray; - background: $gray-200; - cursor: pointer; - pointer-events: all; - } - &.btn.btn-primary:hover, - &.btn.btn-primary:focus, - &.btn.btn-primary:focus-visible { - color: $gray !important; - background: $gray-200 !important; - box-shadow: none !important; - } - -}