diff --git a/src/assets/img/icons/select-error.png b/src/assets/img/icons/select-error.png new file mode 100644 index 00000000..9e971ee9 Binary files /dev/null and b/src/assets/img/icons/select-error.png differ diff --git a/src/assets/img/icons/select-error.svg b/src/assets/img/icons/select-error.svg new file mode 100644 index 00000000..c2bb165d --- /dev/null +++ b/src/assets/img/icons/select-error.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/img/icons/select.png b/src/assets/img/icons/select.png new file mode 100644 index 00000000..0845f753 Binary files /dev/null and b/src/assets/img/icons/select.png differ diff --git a/src/assets/img/icons/select.svg b/src/assets/img/icons/select.svg new file mode 100644 index 00000000..31dc193b --- /dev/null +++ b/src/assets/img/icons/select.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue index 341120a5..f0634855 100644 --- a/src/digital-components/dropdown-question/dropdown-question.vue +++ b/src/digital-components/dropdown-question/dropdown-question.vue @@ -132,29 +132,23 @@ 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"); + border: $border-input; + background-image: url(~@/assets/img/icons/select.png); + background-size: 0.625rem 1rem; color: $gray-600; - border-radius: 0.5rem; + border-radius: $border-radius; min-height: 3rem; letter-spacing: inherit; + box-shadow: $box-shadow-input; &:focus, &:focus-visible { - box-shadow: 0 0 0 2.5px $blue; + border: $border-input-focus; } &:disabled, &.disabled { background-color: $gray-100; color: $gray-500; filter: grayscale(100%); - &:hover { - box-shadow: 0 0 0 4px transparent; - border: 1px solid $gray-500; - } - } - &:hover { - border: 1px solid $gray-500; - box-shadow: 0 0 0 4px $blue-300; } } } diff --git a/src/digital-components/textarea-question/textarea-question.vue b/src/digital-components/textarea-question/textarea-question.vue index 152b86de..a7f777fe 100644 --- a/src/digital-components/textarea-question/textarea-question.vue +++ b/src/digital-components/textarea-question/textarea-question.vue @@ -153,27 +153,20 @@ export default { .form-control { max-height: 30rem; - border: 1px solid $gray-500; - border-radius: 0.5rem; + border: $border-input; + border-radius: $border-radius; padding: 12px 16px; letter-spacing: inherit; + box-shadow: $box-shadow-input; &::placeholder { color: $gray-500; } &:focus { - box-shadow: 0 0 0 2.5px $blue; + border: $border-input-focus; } &:disabled, &.disabled { background-color: $gray-100; - &:hover { - box-shadow: 0 0 0 4px transparent; - border: 1px solid $gray-500; - } - } - &:hover { - border: 1px solid $gray-500; - box-shadow: 0 0 0 4px $blue-300; } } } diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue index 8b5c6c84..31402629 100644 --- a/src/digital-components/textbox-question/textbox-question.vue +++ b/src/digital-components/textbox-question/textbox-question.vue @@ -275,7 +275,7 @@ input::-webkit-date-and-time-value { position: relative; &.has-search-icon { input[type='text'] { - border-radius: $border-radius-lg; + border-radius: $border-radius; } button[type='submit'] { position: absolute; @@ -329,29 +329,22 @@ input::-webkit-date-and-time-value { margin-bottom: 0.25rem; } .form-control { - border: 1px solid $gray-500; - border-radius: 0.5rem; + border: $border-input; + border-radius: $border-radius; min-height: 3rem; max-height: 3rem; padding: 0.75rem 1rem; letter-spacing: inherit; + box-shadow: $box-shadow-input; &::placeholder { color: $gray-500; } - &:focus { - box-shadow: 0 0 0 2.5px $blue; + &:focus, &:focus-within { + border: $border-input-focus; } &:disabled, &.disabled { background-color: $gray-100; - &:hover { - box-shadow: 0 0 0 4px transparent; - border: 1px solid $gray-500; - } - } - &:hover { - border: 1px solid $gray-500; - box-shadow: 0 0 0 4px $blue-300; } } p { diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index 1fe0d071..d1d5bf91 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -1,3 +1,5 @@ + +@import "@/styles/ux-variables-svg-strings.scss"; html { .has-error { @@ -111,27 +113,20 @@ html { input, input.form-control, select, - select.form-select { - border: 1px solid $red; - - &:focus { - border: 1px solid transparent; - box-shadow: 0 0 0 2.5px $red; - } - - &:hover { - box-shadow: 0px 0px 0px 4px $red-200; - border-radius: 0.5rem; - border: 1px solid $red; - } + select.form-select, + input:focus, + input.form-control:focus, + input.form-control:focus-within, + select:focus, + select.form-select:focus { + border-color: $red; } select, - select.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='%23d4281c'/%3e%3c/svg%3e"); - background-repeat: no-repeat; - background-position: right 0.75rem center; - background-size: 16px 12px; + select.form-select, + select:focus, + select.form-select:focus { + background-image: url(~@/assets/img/icons/select-error.png); } } } diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss index 409fc9e5..02d29d6c 100644 --- a/src/styles/ux-variables.scss +++ b/src/styles/ux-variables.scss @@ -193,6 +193,7 @@ $box-shadow: 0 0.5rem 1rem rgba($black, 0.15); $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075); $box-shadow-lg: 0 1rem 3rem rgba($black, 0.25); //Safelite default $box-shadow-inset: inset 0 1px 2px rgba($black, 0.075); +$box-shadow-input: rgba($black, 0.2) 0rem 0.0625rem 0.3125rem 0rem; //Alerts $alert-bg-scale: -90%; @@ -209,3 +210,7 @@ $enable-important-utilities: false; // Letter Spacing $letter-spacing-primary: 0.03em; + +// Borders +$border-input: 1px solid rgba(179, 180, 181); +$border-input-focus: 2.5px solid $blue; \ No newline at end of file