fix: 2063 update the style for read only input (#2103)

Author: mgaseta

frontend/src/components/ReadOnlyInput/styles.scss

@@ -5,5 +5,14 @@
     padding: 0;
     border: none;
     text-overflow: ellipsis;
+
+    &:focus,
+    &:active {
+      outline: none;
+      // Even with "outline" set to none, the rules below are necessary
+      // to overwrite the default webkit styling behavior
+      outline-color: transparent;
+      outline-width: 0;
+    }
   }
 }

frontend/src/components/SeedlotRegistrationSteps/OwnershipStep/SingleOwnerInfo/styles.scss

@@ -118,4 +118,29 @@
       @include type.type-style('code-02');
     }
   }
+
+  .#{vars.$bcgov-prefix}--text-input-wrapper--readonly,
+  .#{vars.$bcgov-prefix}--combo-box--readonly {
+    border-block-end: 0;
+
+    .#{vars.$bcgov-prefix}--list-box__field{
+      button {
+        display: none;
+      }
+    }
+
+    input {
+      background: transparent;
+      padding-left: 0;
+      border-block-end: 0;
+      &:focus,
+      &:active {
+        outline: none;
+        // Even with "outline" set to none, the rules below are necessary
+        // to overwrite the default webkit styling behavior
+        outline-color: transparent;
+        outline-width: 0;
+      }
+    }
+  }
 }

frontend/src/views/Seedlot/SeedlotReview/styles.scss

@@ -62,14 +62,6 @@
     }
   }
 
-  .#{vars.$bcgov-prefix}--text-input-wrapper--readonly {
-    .#{vars.$bcgov-prefix}--text-input {
-      padding: 0;
-      border: none;
-      text-overflow: ellipsis;
-    }
-  }
-
   .#{vars.$bcgov-prefix}--text-area__wrapper--readonly {
     .#{vars.$bcgov-prefix}--text-area {
       padding: 0;