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

Search input styling

Browse source
This commit is contained in:
scottkiener-at-safelite 2026-02-09 11:18:17 -05:00
parent 4f7cfbc32c
commit 46e3ef883f
2 changed files with 17 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -310,22 +310,31 @@ input::-webkit-date-and-time-value {
.input-wrapper {
position: relative;
&.has-search-icon {
display:flex;
.form-control {
&:focus, &:focus-within {
border: 1px solid #0070d1;
}
max-height: 48px;
}
input[type='text'] {
border-radius: $border-radius;
border-color: #0070d1;
box-shadow: rgba(0, 0, 0, 0.2) 0rem 0.0625rem .25rem 0rem;
border-right: none;
border-radius: 72px 0 0 72px;
height: 48px;
&:focus, &:focus-within {
border-right:none;
}
}
button[type='submit'] {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
background-image: url($svg-search-icon);
background-repeat: no-repeat;
background-position: center;
border-radius: 0 $border-radius-lg $border-radius-lg 0;
border-radius: 0 72px 72px 0;
background-color: $blue-100;
width: 2.75rem;
height: 100%;
border: 1px solid $gray-500;
border: 1px solid #0070d1;
border-left: none;
display: flex;
}

14
src/layouts/tpa-search/tpa-search.vue
View file

@ -393,19 +393,5 @@ export default {
#tpaSearchQuestionLabel {
margin-bottom: 10px;
}
:deep(.tpa-search-container .textbox-question .input-wrapper.has-search-icon) {
#tpaSearchQuestionFieldInput {
border-radius: 72px;
border-color: #0070d1;
box-shadow: rgba(0, 0, 0, 0.2) 0rem 0.0625rem .25rem 0rem;
}
button {
border-radius: 0 72px 72px 0;
border-color: #0070d1;
&:focus {
border-width: 1px;
}
}
}
</style>