Merge pull request #217 from Safelite/CSR-266-validation-validation

CSR-266 update styles. Very minor style update.

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

@@ -62,7 +62,7 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonMain buttonText="secondary" loaderColor="white" sizeInRem="1" />
+        <buttonMain buttonText="Secondary" loaderColor="white" sizeInRem="1" />
       </div>
     </div>
     <div class="row">

src/styles/common-error-styles.scss

@@ -2,16 +2,24 @@
   &.list-button,
   &.list-card,
   &.list-button-horizontal {
+    border: 1px solid transparent;
+    box-shadow: 0 0 0 1px $red;
     color: $red;
     label {
-      border: 1px solid $red;
+      box-shadow: 0 0 0 2.5px $red;
+      border-radius: .5rem;
     }
   }
+  input[type=checkbox]:focus + label,
+  input[type=radio]:checked + label {
+    box-shadow: 0 0 0 2.5px transparent;
+  }
 }
 
 .form-test-error {
   color: $red;
-  font-weight: bold;
+  font-size: .875rem;
+  font-weight: 500;
 }
 
 .form-test-invalid {
@@ -28,4 +36,4 @@
     box-shadow: none;
   }
 
-}
+}

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

@@ -85,6 +85,10 @@ export default {
       border: none;
       border-radius: $border-radius-lg;
     }
+    &.has-loader {
+      color: $white;
+      background: $blue-700;
+    }
   }
   &.btn-secondary {
     position: relative;
@@ -97,6 +101,10 @@ export default {
       color: $white;
       @include blue-gradient;
     }
+    &:active {
+      @include blue-gradient;
+      color: $white;
+    }
     &:focus, // Mouse, touch, stylus focus
     &:focus-visible {
       // Keyboard focus for accessibility