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

INSR-7764: Update input styles and dropdown icons

Browse source 
Updated the styles for dropdown, textbox, and textarea components to
more closely align with heritage design, including the icon for the
dropdown component.
This commit is contained in:
Alex Humphries 2025-12-08 10:00:59 -05:00
parent 1871385109
commit 9c137257aa
9 changed files with 44 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

5
src/assets/img/icons/select-error.svg Normal file
View file

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="51">
<path d="M0 0 C2.71542435 0.28189787 3.8318973 0.83226595 5.78125 2.77734375 C6.3484375 3.49019531 6.915625 4.20304687 7.5 4.9375 C9.80138447 7.81946101 11.57696893 9.56623041 15 11 C15.54269531 10.45730469 16.08539062 9.91460937 16.64453125 9.35546875 C19.76302083 6.23697917 22.88151042 3.11848958 26 0 C26.99 0.33 27.98 0.66 29 1 C29.51189221 3.69906804 29.37732021 5.42276968 27.86181641 7.74121094 C26.2447994 9.69112803 24.55507255 11.53655776 22.8125 13.375 C21.9452832 14.35533203 21.9452832 14.35533203 21.06054688 15.35546875 C16.82647579 19.9005168 16.82647579 19.9005168 13.46875 20.3046875 C9.84893056 18.39168166 7.40844895 15.77180722 4.6875 12.75 C3.86282227 11.88955078 3.86282227 11.88955078 3.02148438 11.01171875 C-0.89121643 6.74420159 -0.89121643 6.74420159 -1.41796875 3.140625 C-1 1 -1 1 0 0 Z " fill="#DC2D20" transform="translate(1,31)"/>
<path d="M0 0 C3.61981944 1.91300584 6.06030105 4.53288028 8.78125 7.5546875 C9.33103516 8.12832031 9.88082031 8.70195312 10.44726562 9.29296875 C14.38100352 13.5834307 14.38100352 13.5834307 14.82421875 17.2265625 C14.70691406 17.91234375 14.58960937 18.598125 14.46875 19.3046875 C13.47875 19.6346875 12.48875 19.9646875 11.46875 20.3046875 C7.80208333 16.63802083 4.13541667 12.97135417 0.46875 9.3046875 C-3.82338446 11.10248943 -5.91021282 13.95824759 -8.75 17.52734375 C-10.6993527 19.47242155 -11.81582565 20.02278963 -14.53125 20.3046875 C-15.53125 19.3046875 -15.53125 19.3046875 -15.98046875 17.203125 C-15.27729167 12.66610417 -12.42969789 10.18541246 -9.34375 6.9296875 C-8.76560547 6.27613281 -8.18746094 5.62257813 -7.59179688 4.94921875 C-3.35772579 0.4041707 -3.35772579 0.4041707 0 0 Z " fill="#DC2D20" transform="translate(15.53125,-0.3046875)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 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

5
src/assets/img/icons/select.svg Normal file
View file

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="51">
<path d="M0 0 C2.71542435 0.28189787 3.8318973 0.83226595 5.78125 2.77734375 C6.3484375 3.49019531 6.915625 4.20304687 7.5 4.9375 C9.80138447 7.81946101 11.57696893 9.56623041 15 11 C15.54269531 10.45730469 16.08539062 9.91460937 16.64453125 9.35546875 C19.76302083 6.23697917 22.88151042 3.11848958 26 0 C26.99 0.33 27.98 0.66 29 1 C29.51189221 3.69906804 29.37732021 5.42276968 27.86181641 7.74121094 C26.2447994 9.69112803 24.55507255 11.53655776 22.8125 13.375 C21.9452832 14.35533203 21.9452832 14.35533203 21.06054688 15.35546875 C16.82647579 19.9005168 16.82647579 19.9005168 13.46875 20.3046875 C9.84893056 18.39168166 7.40844895 15.77180722 4.6875 12.75 C3.86282227 11.88955078 3.86282227 11.88955078 3.02148438 11.01171875 C-0.89121643 6.74420159 -0.89121643 6.74420159 -1.41796875 3.140625 C-1 1 -1 1 0 0 Z " fill="#1A7EAF" transform="translate(1,31)"/>
<path d="M0 0 C3.61981944 1.91300584 6.06030105 4.53288028 8.78125 7.5546875 C9.33103516 8.12832031 9.88082031 8.70195312 10.44726562 9.29296875 C14.38100352 13.5834307 14.38100352 13.5834307 14.82421875 17.2265625 C14.70691406 17.91234375 14.58960937 18.598125 14.46875 19.3046875 C13.47875 19.6346875 12.48875 19.9646875 11.46875 20.3046875 C7.80208333 16.63802083 4.13541667 12.97135417 0.46875 9.3046875 C-3.82338446 11.10248943 -5.91021282 13.95824759 -8.75 17.52734375 C-10.6993527 19.47242155 -11.81582565 20.02278963 -14.53125 20.3046875 C-15.53125 19.3046875 -15.53125 19.3046875 -15.98046875 17.203125 C-15.27729167 12.66610417 -12.42969789 10.18541246 -9.34375 6.9296875 C-8.76560547 6.27613281 -8.18746094 5.62257813 -7.59179688 4.94921875 C-3.35772579 0.4041707 -3.35772579 0.4041707 0 0 Z " fill="#1A7EAF" transform="translate(15.53125,-0.3046875)"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

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

@ -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;
}
}
}

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

@ -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;
}
}
}

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

@ -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 {

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

@ -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);
}
}
}

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-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;