Merge pull request #219 from Safelite/CSR-262-validation-styling-updates

CSR-262 validation styling updates.

src/common-components/button-question/button-question.vue

@@ -37,7 +37,7 @@
           </div>
       </fieldset>
     </div>
-    <div class="row px-3 my-6 form-test-error" v-if="!suppressError">
+    <div class="row mt-2 form-test-error" v-if="!suppressError">
         <error-message :name="groupName"></error-message>
     </div>
   </div>

src/layouts/component-test/component-test.vue

@@ -18,7 +18,6 @@
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">Radio Button</h4>
-        <p class="m-0">Sample radio button group</p>
       </div>
     </div>
     <div class="row">

src/layouts/form-test/form-test.vue

@@ -8,7 +8,7 @@
           @invalid-submit="onInvalidSubmit"
           ref="theForm"
           v-slot="{ values, meta, errors }"
-        >        
+        >
             <damageLocationQuestion
               ref="damageLocation"
               v-model="selectedDamageLocations"
@@ -20,6 +20,7 @@
               :suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
             />
             <alert
+              class="my-3"
               v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
               alertClass="alert-danger"
               alertHeadline="You'll need to schedule separate appointments"

src/styles/common-error-styles.scss

@@ -1,18 +1,22 @@
 .has-error {
   &.list-button,
-  &.list-card,
-  &.list-button-horizontal {
+  &.list-card {
     border: 1px solid transparent;
-    box-shadow: 0 0 0 1px $red;
     color: $red;
     label {
-      box-shadow: 0 0 0 2.5px $red;
+      border: 1px solid $red;
       border-radius: .5rem;
     }
   }
   input[type=checkbox]:focus + label,
   input[type=radio]:checked + label {
-    box-shadow: 0 0 0 2.5px transparent;
+    box-shadow: 0 0 0 2.5px transparent !important;
+  }
+  &.list-button-horizontal {
+    color: $red;
+    label {
+      border: 1px solid $red;
+    }
   }
 }
 

src/ux-components/button-main/button-main.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     :aria-disabled="isDisabled"
-    class="btn d-flex align-items-center py-3 px-2 delay"
+    class="btn d-flex align-items-center py-3 px-4 delay"
     :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
     @click="clicked()"
   >