From 9c137257aaa67893ad23753c3ab2f33803752103 Mon Sep 17 00:00:00 2001 From: Alex Humphries Date: Mon, 8 Dec 2025 10:00:59 -0500 Subject: [PATCH] INSR-7764: Update input styles and dropdown icons Updated the styles for dropdown, textbox, and textarea components to more closely align with heritage design, including the icon for the dropdown component. --- src/assets/img/icons/select-error.png | Bin 0 -> 1413 bytes src/assets/img/icons/select-error.svg | 5 +++ src/assets/img/icons/select.png | Bin 0 -> 1392 bytes src/assets/img/icons/select.svg | 5 +++ .../dropdown-question/dropdown-question.vue | 18 ++++------ .../textarea-question/textarea-question.vue | 15 +++------ .../textbox-question/textbox-question.vue | 19 ++++------- src/styles/common-error-styles.scss | 31 ++++++++---------- src/styles/ux-variables.scss | 5 +++ 9 files changed, 44 insertions(+), 54 deletions(-) create mode 100644 src/assets/img/icons/select-error.png create mode 100644 src/assets/img/icons/select-error.svg create mode 100644 src/assets/img/icons/select.png create mode 100644 src/assets/img/icons/select.svg diff --git a/src/assets/img/icons/select-error.png b/src/assets/img/icons/select-error.png new file mode 100644 index 0000000000000000000000000000000000000000..9e971ee9de78789dd8302b19418f8fbca8d7ba54 GIT binary patch literal 1413 zcmV;01$z34P)Px)KS@MER9Fe^SY2pbMHHTy-87m)L@TkaNp_Rn4d$n*QV@-$tyO450}YZ^-;}5Y zq1Y!;sZdZ6eG?%s8WchNCzVo?g4U|Ficr*;AMNfoyV+2+7>m^=+2-zy=ey=6GqZb> z-6r6J8CdQ)-}%n@?wz@J@0rWl6^uknb*GZ-6{K>(o`?=j^p#qMmzt1l3Ei8Mxx-Ac zpqtB?6A*#jk)ia_QfieX9B&QZ#vJEUrC5b7!a18_!Qfr7!PGZ8zL;IK@YtsCO|y=3 zl8UYKDL7dc3~sIaG4+#A+<=AQ`8eaZ)NFKe&H#n|M3K1;9B_Tg81Rz9$u0HQWM|j_ zO>fA^EZ~3xE^-Ql4QNr}_&w2bIW_ySVrr9-MGmdeOZeG1xX3}S9n*bZVRh(`VCk8+ zsnB*k0XAp+t>{SRY5ZW@aW@CKsNpkw1Bv%~U!|$L-_D~uxIcPBq?>cD@SC%-{>DHq zY8asA6uhewjWq`)Q_pFIWm&kHA7LTxH1 zKcO4rYA=W*-8>fqBDk%7cKkWf+1GRz)_5d0z?h_0&jYcM@eg#o zSUcWS+r^Z8mzK?Va_FhZTvf(y7c;ZG#};*kIXiHrqR2-si5##`6k5;}GzB~DAU&Ti zMn@)mpFx}N=c5K{*>PxM8j^Z|h;PJ3GSBGPa%{I2=Wkjyl0t~U<1{7b-2f4yRguRm z(z4xHRpe1NCk`!WxGWe?h-tPVM z_x6!ahD}r1p7<@`y{c@Aa9;2IOyB(uD^krbQ^?cHf z(UpGA!sWYS{Rv~Ms`C~V1`*vqeLnh<#PdEm>4h|VFi^2(TjccFKQ%1RTv8Yr_*$3E zD*U^J@+xQmO>erqoVV3}mpP}w1x?>I*4Zc&2$t<4Y*NQ9dlH;tM3GmNFo^YoV?Xn< z;C*yeQ}Fcx3^8zYd@;LdVHCk + + + + diff --git a/src/assets/img/icons/select.png b/src/assets/img/icons/select.png new file mode 100644 index 0000000000000000000000000000000000000000..0845f7532a3ff4a4cb8c85110d42535970f01f41 GIT binary patch literal 1392 zcmV-$1&{iPP)Px)DoI2^R9Fe^SX*cuRTw^JX0laV8;F`sQj20mtsuS?ZHwB9G*N?1HmyD?^#X;e zFG`gpjA_K%i(1Hw28$qg$>u_+O(?dCZ51DV@P-vHkY-ygBsPuN?9B1|PBWXCGrQT{ zB;bP?*q#6X{{R2JnRCvZIcKC;#8KOsZjruti>1mE&z$W_4OB`aD=nz&Oh4c&F({OB zbgh&*ONyQ2U8%#Ba8)FnbklbTPkg47x*{whrMxI?ac{;=eI3RZvdb23aQklYa`J={ z>Z(G7Qpmq-M{ON*+kPk%H!;fu3i<2Zp$3SK6cc3)W6WW0Ar2EODSX4LN2{~mEJd#~ zi%p+7%w>%kGyMgHZ+!dHRZ~-wLrRI;%tC3&*Z4DW=CX#hW-RO%6?R=^O`euF@Kig$gOtG9*ktgA8jGzNIo7I zsMQ>SZ=4H`>SRZ{9anw8$Q2m5--zlp+cVGYm|Z;Y-M6Bmx5k2i&J+PJum%z;#Q z3^##fXL^tF)w?DRhMycev1QC{{xcQ>(BKYVo%6CM(MmU&ag2q>GhM0PFdn(%WM^Nq z@&%_qJDh~;K4Ur7=5e>>*C-zK>fC|r{hWUa4_AFOB0On{mP}XMaDeCgxWOIVEPU}1 z0#Q*ZCaa`uDkVxn<}eq1G8qWWoo#Y!jX6NyaeaILMqm0T@F>)T3(%)CxY8!f!^gvT zDI4?oHniLk^m*iwl2V+vl(qFtckB1^+V0_Xv;SnjLelyOp%lI)tw+YYT0e>4Wjb}8 z{kweSe~2k9->NLd&HPbyS>jG>b|%{s6J>&w&n{M!0<0wm?eIY@YFaS1hXb@R3SYq} zJZR#T`s5&&Sw~GYgFGD$pef!%!HZ#RDYoX4@=%mRp0*s@-iszVs{=^b=+rzJO2(=Z&J1m+(goYAu0crF5kQR$5@C1^%}!@L$Z;lItMP^9Hb- zt>qhpZ<5d5ZMo&_g?rrN&UfDVcd!C|ly4{7wp*N>=k)-n)j|j$f#ze&DIAEBlQ&3B zECkeshzP`!9sRLYLnNmHM{|KQTB0^!GcS)tL0*-=9}D|^CSIve4sw}w)U>KrC9nb! zzneic$(wZ@1G`PUT%Wb%F!QOUH5n+nu9hN;!O*ySf?k#!r^r_`dA1qux;CE z#_E1LoXA37sljy}{kMnlg>2@sCMF7QYEX;yTA0R|yYm#hhhcj3^M?{^XO%j_eNi4O zVlZb`_#;@vuQgIUa%+vbKwg+WH&s{%KV=lbRrS8-k8(#Ck6l6-V-7^?%p7utH*AbY zgb83B+>0h}ryV)4{q%C#!+I|q2?#-qF+2|OEh@OkX_Ul;nULvjdl|D>kC}`ez$P_u zp^r0B5Ti|uu>i}T!J)bGz`PN=;~=!xZrum*bl}gQRU>AiUOXz2KicSu#`*Z1g<8!K z3tR&9Hnm7h@XO8L=cY#?Q0N29>$*;<=goRNf?r&D&E-3Oe)|3yGZy#@3NwkT|EZ~o zFY$Q9J~;&>;WG%oUA?CIu3z@wHxb57yJ%Afi6ltaRgIYDehaW-XXYfFs-{w+tS@=T zfk;F9(9NF6ox~t2{w-5DTgJK{`Z1_k=v?xSgJMnShzHSs7XvIfYYee+MOjz2Fq8RN y81wCJjQ0730&HTHd@?3i*-g#l;8>0?^#1~s#WuFLq=|$80000 + + + + 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