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

Moved some styling around

src/digital-components/dropdown-question/dropdown-question.vue

@@ -140,6 +140,8 @@ 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");
         color: $gray-600;
         border-radius: 0.5rem;
         min-height: 3rem;

src/digital-components/textbox-question/textbox-question.vue

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

src/styles/common-error-styles.scss

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

src/styles/common-styles.scss

@@ -73,13 +73,4 @@ body {
         line-height: 24px;
         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");
-    }
 }