jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into feature/INSR-6708

Browse source
This commit is contained in:
Jeremy-Z 2025-12-09 11:36:58 -05:00
commit dc9be8f0a5
7 changed files with 34 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/img/icons/select-error.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/img/icons/select.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

18
src/digital-components/dropdown-question/dropdown-question.vue
View file

@ -132,29 +132,23 @@ export default {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.form-select { .form-select {
border: 1px solid $gray-500; border: $border-input;
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"); background-image: url(~@/assets/img/icons/select.png);
background-size: 0.625rem 1rem;
color: $gray-600; color: $gray-600;
border-radius: 0.5rem; border-radius: $border-radius;
min-height: 3rem; min-height: 3rem;
letter-spacing: inherit; letter-spacing: inherit;
box-shadow: $box-shadow-input;
&:focus, &:focus,
&:focus-visible { &:focus-visible {
box-shadow: 0 0 0 2.5px $blue; border: $border-input-focus;
} }
&:disabled, &:disabled,
&.disabled { &.disabled {
background-color: $gray-100; background-color: $gray-100;
color: $gray-500; color: $gray-500;
filter: grayscale(100%); 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;
} }
} }
} }

15
src/digital-components/textarea-question/textarea-question.vue
View file

@ -153,27 +153,20 @@ export default {
.form-control { .form-control {
max-height: 30rem; max-height: 30rem;
border: 1px solid $gray-500; border: $border-input;
border-radius: 0.5rem; border-radius: $border-radius;
padding: 12px 16px; padding: 12px 16px;
letter-spacing: inherit; letter-spacing: inherit;
box-shadow: $box-shadow-input;
&::placeholder { &::placeholder {
color: $gray-500; color: $gray-500;
} }
&:focus { &:focus {
box-shadow: 0 0 0 2.5px $blue; border: $border-input-focus;
} }
&:disabled, &:disabled,
&.disabled { &.disabled {
background-color: $gray-100; 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;
} }
} }
} }

19
src/digital-components/textbox-question/textbox-question.vue
View file

@ -275,7 +275,7 @@ input::-webkit-date-and-time-value {
position: relative; position: relative;
&.has-search-icon { &.has-search-icon {
input[type='text'] { input[type='text'] {
border-radius: $border-radius-lg; border-radius: $border-radius;
} }
button[type='submit'] { button[type='submit'] {
position: absolute; position: absolute;
@ -329,29 +329,22 @@ input::-webkit-date-and-time-value {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.form-control { .form-control {
border: 1px solid $gray-500; border: $border-input;
border-radius: 0.5rem; border-radius: $border-radius;
min-height: 3rem; min-height: 3rem;
max-height: 3rem; max-height: 3rem;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
letter-spacing: inherit; letter-spacing: inherit;
box-shadow: $box-shadow-input;
&::placeholder { &::placeholder {
color: $gray-500; color: $gray-500;
} }
&:focus { &:focus, &:focus-within {
box-shadow: 0 0 0 2.5px $blue; border: $border-input-focus;
} }
&:disabled, &:disabled,
&.disabled { &.disabled {
background-color: $gray-100; 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 { p {

31
src/styles/common-error-styles.scss
View file

@ -1,3 +1,5 @@
@import "@/styles/ux-variables-svg-strings.scss";
html { html {
.has-error { .has-error {
@ -111,27 +113,20 @@ html {
input, input,
input.form-control, input.form-control,
select, select,
select.form-select { select.form-select,
border: 1px solid $red; input:focus,
input.form-control:focus,
&:focus { input.form-control:focus-within,
border: 1px solid transparent; select:focus,
box-shadow: 0 0 0 2.5px $red; select.form-select:focus {
} border-color: $red;
&:hover {
box-shadow: 0px 0px 0px 4px $red-200;
border-radius: 0.5rem;
border: 1px solid $red;
}
} }
select, select,
select.form-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"); select:focus,
background-repeat: no-repeat; select.form-select:focus {
background-position: right 0.75rem center; background-image: url(~@/assets/img/icons/select-error.png);
background-size: 16px 12px;
} }
} }
} }

5
src/styles/ux-variables.scss
View file

@ -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-sm: 0 0.125rem 0.25rem rgba($black, 0.075);
$box-shadow-lg: 0 1rem 3rem rgba($black, 0.25); //Safelite default $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-inset: inset 0 1px 2px rgba($black, 0.075);
$box-shadow-input: rgba($black, 0.2) 0rem 0.0625rem 0.3125rem 0rem;
//Alerts //Alerts
$alert-bg-scale: -90%; $alert-bg-scale: -90%;
@ -209,3 +210,7 @@ $enable-important-utilities: false;
// Letter Spacing // Letter Spacing
$letter-spacing-primary: 0.03em; $letter-spacing-primary: 0.03em;
// Borders
$border-input: 1px solid rgba(179, 180, 181);
$border-input-focus: 2.5px solid $blue;