Merge pull request #390 from nicolethoen/return_spotlight_css

fix(spotlight): return missing scss file

Author: nicolethoen

packages/module/src/ConsoleShared/src/components/spotlight/InteractiveSpotlight.tsx

@@ -1,3 +1,4 @@
+import './spotlight.scss';
 import * as React from 'react';
 import { Portal, SimplePopper } from '../popper';
 

packages/module/src/ConsoleShared/src/components/spotlight/StaticSpotlight.tsx

@@ -1,3 +1,4 @@
+import './spotlight.scss';
 import * as React from 'react';
 import { useBoundingClientRect } from '../../hooks';
 import Portal from '../popper/Portal';

packages/module/src/ConsoleShared/src/components/spotlight/spotlight.scss

@@ -0,0 +1,63 @@
+@keyframes pfext-spotlight-expand {
+    0% {
+      outline-offset: -4px;
+      outline-width: 4px;
+      opacity: 1;
+    }
+    100% {
+      outline-offset: 21px;
+      outline-width: 12px;
+      opacity: 0;
+    }
+  }
+  
+  @keyframes pfext-spotlight-fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes pfext-spotlight-fade-out {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  
+  .pfext-spotlight {
+    pointer-events: none;
+    position: absolute;
+    &__with-backdrop {
+      mix-blend-mode: hard-light;
+    }
+    &__element-highlight-noanimate {
+      border: var(--pf-t--global--border--width--strong) solid var(--pf-t--global--border--color--brand--default);
+      background-color: var(--pf-t--color--gray--40);
+      z-index: 9999;
+    }
+    &__element-highlight-animate {
+      pointer-events: none;
+      position: absolute;
+      box-shadow: inset 0px 0px 0px 4px var(--pf-t--global--color--brand--default);
+      opacity: 0;
+      animation: 0.4s pfext-spotlight-fade-in 0s ease-in-out, 5s pfext-spotlight-fade-out 12.8s ease-in-out;
+      animation-fill-mode: forwards;
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        animation: 1.2s pfext-spotlight-expand 1.6s ease-out;
+        animation-fill-mode: forwards;
+        outline: 4px solid var(--pf-t--global--color--brand--default);
+        outline-offset: -4px;
+      }
+    }
+  }