fix: do not use view encapsulation to allow customisation by consumers

Author: maxime1992

src/components/ngx-hover-opacity.component.ts

@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
 
 export interface INgxHoverOpacityComponentCustomStyle {
   backgroundColor: string;
@@ -19,22 +24,25 @@ export interface INgxHoverOpacityComponentCustomStyle {
   `,
   styles: [
     `
-    .content {
-      position: relative;
-    }
+      ngx-hover-opacity
+        .content {
+          position: relative;
+        }
 
-    .hover {
-      position: absolute;
-      background-color: rgba(255, 255, 255, 0.6);
-      z-index: 1;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-  `,
+        .hover {
+          position: absolute;
+          background-color: rgba(255, 255, 255, 0.6);
+          z-index: 1;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+        }
+      }
+    `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class NgxHoverOpacityComponent {
   @Input() isHoverVisible: boolean;