WIP update focus and hover styles.

This commit is contained in:
Bryan Mauger 2023-05-16 13:27:35 -04:00
parent b054afaf9a
commit ca05c03fc5
3 changed files with 21 additions and 6 deletions

View file

@ -102,13 +102,13 @@ export default {
border-radius: 0.5rem;
border: 1px solid $gray-500;
height: 48px;
&:hover {
box-shadow: 0 0 0 4px #9fcee6;
}
&:focus {
box-shadow: 0 0 0 2.5px $blue;
outline: none;
}
&:hover {
box-shadow: 0 0 0 4px $blue-300;
}
}
}
</style>

View file

@ -109,13 +109,13 @@ export default {
border-radius: 0.5rem;
border: 1px solid $gray-500;
height: 88px;
&:hover {
box-shadow: 0 0 0 4px #9fcee6;
}
&:focus {
box-shadow: 0 0 0 2.5px $blue;
outline: none;
}
&:hover {
box-shadow: 0 0 0 4px $blue-300;
}
}
p {
color: $gray-500;

View file

@ -51,6 +51,7 @@ import { errorMessages } from "@/constants/error-messages";
import { routerParams } from "@/router/router-constants/router-params";
import { required, regex } from "@/helpers/validation-rules";
import { Form, defineRule } from "vee-validate";
import { useField, validate } from "vee-validate";
// DEFINE VALIDATION RULES
defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
@ -86,6 +87,20 @@ export default {
vm.setCmsContent(resultMap.cmsContent);
});
},
setup(props) {
const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
props.validationRules,
);
return {
errorMessage,
handleBlur,
handleChange,
validate,
meta,
errors,
};
},
data() {
return {
techNotes: "",