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

CSR-266 add has-error css styling for validation.

src/App.vue

@@ -7,4 +7,5 @@
   @import "@/styles/common-styles.scss";
   @import "@/styles/common-list-styles.scss";
   @import "@/styles/common-typography-styles.scss";
+  @import "@/styles/error-styles.scss";
 </style>

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

@@ -13,6 +13,7 @@
 
   <div class="row g-2 mt-6 mx-4">
     <h4 class="mx-2 mt-4 mb-0">How many chips are we repairing? (Required)</h4>
+    <fieldset>
     <div
       role="radiogroup"
       aria-labelledby="demo-group"
@@ -61,6 +62,7 @@
         screenReaderOnlyText=" opens new window"
       />
     </div>
+  </fieldset>
     <div class="row px-3 form-test-error">
       <error-message name="demo"></error-message>
     </div>
@@ -352,7 +354,4 @@ export default {
   .form-test-invalid {
     opacity: 0.5;
   }
-  .has-error {
-    border: 1px solid red;
-  }
 </style>

src/styles/error-styles.scss

@@ -0,0 +1,10 @@
+.has-error {
+  .list-button,
+  .list-card,
+  .list-button-horizontal {
+    color: $red;
+    label {
+      border: 1px solid $red;
+    }
+  }
+}