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