diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue index 87b432b5..cbca8c8f 100644 --- a/src/digital-components/dropdown-question/dropdown-question.vue +++ b/src/digital-components/dropdown-question/dropdown-question.vue @@ -140,6 +140,8 @@ export default { margin-bottom: 0.25rem; } .form-select { + border: 1px solid $gray-500; + 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='%231474a2'/%3e%3c/svg%3e"); color: $gray-600; border-radius: 0.5rem; min-height: 3rem; diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue index 0de58727..21453a6c 100644 --- a/src/digital-components/textbox-question/textbox-question.vue +++ b/src/digital-components/textbox-question/textbox-question.vue @@ -1,7 +1,5 @@ @@ -116,12 +107,12 @@ export default { let initialValue; switch (typeof modelValue) { - case 'number': - initialValue = modelValue; - break; - default: - initialValue = modelValue && modelValue.length > 0 ? modelValue : ''; - break; + case 'number': + initialValue = modelValue; + break; + default: + initialValue = modelValue && modelValue.length > 0 ? modelValue : ''; + break; } const fieldOptions = { @@ -131,9 +122,11 @@ export default { }; // eslint-disable-next-line no-shadow - const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(props.inputId, + const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField( + props.inputId, props.validationRules, - fieldOptions); + fieldOptions + ); return { errorMessage, @@ -322,6 +315,7 @@ input[type='date']::-webkit-calendar-picker-indicator { margin-bottom: 0.25rem; } .form-control { + border: 1px solid $gray-500; border-radius: 0.5rem; min-height: 3rem; max-height: 3rem; diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index 2f529ac6..66e6fd9a 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -95,8 +95,11 @@ html { color: $red; } input, - select { + input.form-control, + select, + select.form-select { border: 1px solid $red; + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 8.89%27 xml:space=%27preserve%27%3e%3cpath d=%27M8 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%27 fill=%27%23d4281c%27/%3e%3c/svg%3e"); &:focus { border: 1px solid transparent; box-shadow: 0 0 0 2.5px $red; diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss index 2bbaa3ea..80654ed8 100644 --- a/src/styles/common-styles.scss +++ b/src/styles/common-styles.scss @@ -73,13 +73,4 @@ body { line-height: 24px; font-weight: 500; } - - // Set default border for form-control and form select - .form-control, .form-select { - border: 1px solid $gray-500 - } - - .form-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='%231474a2'/%3e%3c/svg%3e"); - } }