Merge branch 'develop' into feature/Digital/SSR-122

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

@@ -132,10 +132,12 @@ export default {
   computed: {
       getFieldSetClasses() {
         if (this.isOverflowScrollable) {
-              return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
+          return "container-fluid overflow-scroll position-absolute px-5 pb-2";
-          } else if (this.buttonTypeString == "listCard") {
+        }
+        else if (this.buttonType == "listCard") {
           return "w-100";
-          } else {
+        }
+        else {
           return "";
         }
       },

src/common-components/site-header/site-header.vue

@@ -71,5 +71,11 @@ import { globalEvents } from "@/constants/events";
 .site-header {
   padding: 0.97rem 0;
 }
-    
+.logo-image {
+    max-width: 78px;
+}
+.alert {
+    left: 0;
+    top: 72px;
+}
 </style>

src/common-components/site-sub-header/site-sub-header.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
       <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
-        <h5 class="text-center fw-normal mb-0" >
+        <h5 class="text-center fw-normal mb-0" :class="headerColor">
           <span>
             {{ content }}
           </span>
@@ -44,7 +44,10 @@ import buttonBack from "@/common-components/site-sub-header/button-back/button-b
             backButtonAccessibleText()
             {
               return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
-            }
+            },
+            headerColor() {
+                return this.subText ? "dark-header" : "light-header";
+            },
         },
         methods: {
           clickEvent() {
@@ -57,6 +60,14 @@ import buttonBack from "@/common-components/site-sub-header/button-back/button-b
 
   
 <style lang="scss" scoped>
+.dark-header {
+    color: $black;
+}
+
+.light-header {
+    color: $gray-550;
+}
+
 h5 {
   line-height: 32px;
   max-width: 300px;
@@ -65,4 +76,7 @@ h5 {
     color: inherit;
   }
 }
+p.small {
+    color: $gray-550;
+}
 </style>

src/styles/common-error-styles.scss

@@ -1,76 +1,106 @@
 html {
   .has-error {
+      // START HOVER
+      &.list-button-horizontal,
       &.list-button,
-      &.list-card,
+      &.list-button.list-group,
-      &.list-card.list-button {
+      &.list-card {
+          border: 1px solid $red;
+          position: relative;
+          z-index: 4;
+
+          .button-content {
               border: none;
-        color: $red;
+          }
-        input[type=checkbox]:focus + label,
+
-        input[type=radio]:focus + label {
+          &:hover {
+              @include box-shadow-hover($red-200);
+              z-index: 5;
+          }
+          input[type="radio"]:focus + .list-button-content {
               box-shadow: 0 0 0 2.5px $red;
           }
-        input[type=checkbox]:checked + label {
+      }
+
+      &.ui-radio {
+          &:hover {
+              input[type="radio"],
+              input[type="checkbox"] {
+                  @include box-shadow-hover($red-200);
+              }
+          }
+      }
+      .form-check-input {
+          &:focus {
+              box-shadow: 0 0 0 2.5px $red;
+          }
+      }
+      // END HOVER
+
+      &.list-button,
+      &.list-card {
+          color: $red;
+
+          input[type="checkbox"]:focus + label,
+          input[type="radio"]:focus + label {
+              box-shadow: 0 0 0 2.5px $red;
+          }
+          input[type="checkbox"]:checked + label {
               box-shadow: 0 0 0 1px $red;
           }
           &:hover {
-          box-shadow: 0px 0px 0px 4px $red-200;
+              border-radius: 0.5rem;
-          border-radius: .5rem;
-        }
-        label {
-          border: 1px solid $red;
-          border-radius: .5rem;
-        }
-        label:hover {
-          box-shadow: 0px 0px 0px 4px $red-200;
-          border-radius: 10px;
-          border: 1px solid $red;
           }
       }
       &.list-button-horizontal {
           color: $red;
-        label {
+          input[type="checkbox"]:focus + label,
+          input[type="radio"]:focus + label {
+              box-shadow: 0 0 1px $red;
+          }
+      }
+
+      &.grid-item {
+          input[type="radio"] {
+              + label {
                   border: 1px solid $red;
                   &:hover {
+                      background-color: $blue-100;
                       box-shadow: 0px 0px 0px 4px $red-200;
                   }
               }
-        input[type=checkbox]:focus + label,
-        input[type=radio]:focus + label {
-          box-shadow: 0 0 1px $red;
           }
       }
       &.ui-radio,
       &.ui-checkbox {
-        input[type=checkbox],
+          input[type="checkbox"],
-        input[type=radio],
+          input[type="radio"],
-        input[type=radio]+label:before,
+          input[type="radio"] + label:before,
-        input[type=checkbox]+label:before {
+          input[type="checkbox"] + label:before {
               border: 1px solid $red;
               background-color: initial;
           }
-        input[type=checkbox]:checked + label:before {
+          input[type="checkbox"]:checked + label:before {
               border: 1px solid $blue;
           }
       }
       &.textbox-question,
       &.dropdown-question {
-        input:hover {
-          box-shadow: 0px 0px 0px 4px $red-200;
-          border-radius: .5rem;
-          border: 1px solid $red;
-        }
-        input:focus {
-          box-shadow: 0 0 0 2.5px $red;
-        }
           p {
               color: $red;
           }
           input,
           select {
-          border: 1px solid transparent;
+              border: 1px solid $red;
-          box-shadow: 0 0 0 1px $red;
               &:focus {
                   border: 1px solid transparent;
+                  box-shadow: 0 0 0 2.5px $red;
+              }
+
+              &:hover {
+                  box-shadow: 0px 0px 0px 4px $red-200;
+                  border-radius: 0.5rem;
+                  border: 1px solid $red;
               }
           }
           select {
@@ -91,20 +121,20 @@ html {
                   + label {
                       border: none;
                       box-shadow: 0 0 0 1px $gray-500;
-              border-radius: .5rem;
+                      border-radius: 0.5rem;
                   }
               }
               input:checked:focus {
                   + label {
                       border: none;
                       box-shadow: 0 0 0 2.5px $blue;
-              border-radius: .5rem;
+                      border-radius: 0.5rem;
                   }
               }
               input:checked:not(:focus) {
                   + label {
                       box-shadow: 0 0 0 1px $blue;
-              border-radius: .5rem;
+                      border-radius: 0.5rem;
                   }
               }
               input:focus {
@@ -126,7 +156,7 @@ html {
 
   .form-test-error {
       color: $red;
-      font-size: .875rem;
+      font-size: 0.875rem;
       font-weight: 500;
   }
 
@@ -147,5 +177,4 @@ html {
           box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
       }
   }
-  }
+}
-