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

Merge pull request #415 from Safelite/feature/richardson/SSR-583

Browse source 
Moved some styling around
This commit is contained in:
brich1212safe 2023-08-16 12:53:07 -04:00 committed by GitHub
commit e5000aaea0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 22 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -140,6 +140,8 @@ export default {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.form-select { .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");
color: $gray-600; color: $gray-600;
border-radius: 0.5rem; border-radius: 0.5rem;
min-height: 3rem; min-height: 3rem;

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

@ -1,7 +1,5 @@
<template> <template>
<div <div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
class="textbox-question"
:class="(errors && errors.length) || hasError ? 'has-error' : ''">
<label <label
v-if="displayQuestionText" v-if="displayQuestionText"
:for="inputId" :for="inputId"
@ -45,10 +43,7 @@
@focus="$emit('focus', $event.target.value)" @focus="$emit('focus', $event.target.value)"
@paste="trimOnPaste" @paste="trimOnPaste"
@drop="trimOnPaste" /> @drop="trimOnPaste" />
<button <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
v-if="includeSearchIcon"
type="submit"
aria-label="Search button" />
<button <button
v-if="includeSelectIcon" v-if="includeSelectIcon"
type="submit" type="submit"
@ -56,12 +51,8 @@
:data-bs-target="'#' + cmsWidgetName" :data-bs-target="'#' + cmsWidgetName"
aria-label="Select button" /> aria-label="Select button" />
</div> </div>
<div <div v-show="errorMessage" class="row my-1 form-test-error">
v-show="errorMessage" <span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
class="row my-1 form-test-error">
<span
class="d-inline-flex mt-0"
role="alert">{{ errorMessage }}</span>
</div> </div>
</div> </div>
</template> </template>
@ -116,12 +107,12 @@ export default {
let initialValue; let initialValue;
switch (typeof modelValue) { switch (typeof modelValue) {
case 'number': case 'number':
initialValue = modelValue; initialValue = modelValue;
break; break;
default: default:
initialValue = modelValue && modelValue.length > 0 ? modelValue : ''; initialValue = modelValue && modelValue.length > 0 ? modelValue : '';
break; break;
} }
const fieldOptions = { const fieldOptions = {
@ -131,9 +122,11 @@ export default {
}; };
// eslint-disable-next-line no-shadow // eslint-disable-next-line no-shadow
const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(props.inputId, const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
props.inputId,
props.validationRules, props.validationRules,
fieldOptions); fieldOptions
);
return { return {
errorMessage, errorMessage,
@ -322,6 +315,7 @@ input[type='date']::-webkit-calendar-picker-indicator {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.form-control { .form-control {
border: 1px solid $gray-500;
border-radius: 0.5rem; border-radius: 0.5rem;
min-height: 3rem; min-height: 3rem;
max-height: 3rem; max-height: 3rem;

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

@ -95,7 +95,9 @@ html {
color: $red; color: $red;
} }
input, input,
select { input.form-control,
select,
select.form-select {
border: 1px solid $red; border: 1px solid $red;
&:focus { &:focus {
border: 1px solid transparent; border: 1px solid transparent;
@ -108,7 +110,8 @@ html {
border: 1px solid $red; border: 1px solid $red;
} }
} }
select { 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-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-repeat: no-repeat;
background-position: right 0.75rem center; background-position: right 0.75rem center;

9
src/styles/common-styles.scss
View file

@ -73,13 +73,4 @@ body {
line-height: 24px; line-height: 24px;
font-weight: 500; font-weight: 500;
} }
// Set default border for form-control and form select
.form-control, .form-select {
border: 1px solid $gray-500
}
.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='%231474a2'/%3e%3c/svg%3e");
}
} }