@patternfly/quickstarts 6.3.0-prerelease.1 → 6.3.0-prerelease.10

package/dist/quickstarts-base.css

@@ -207,4 +207,65 @@
   font-size: var(--pf-t--global--font--size--body--default);
   color: var(--pf-t--global--text--color--subtle);
   font-weight: var(--pf-t--global--font--weight--body);
+}
+
+@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;
+}
+.pfext-spotlight__with-backdrop {
+  mix-blend-mode: hard-light;
+}
+.pfext-spotlight__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;
+}
+.pfext-spotlight__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;
+}
+.pfext-spotlight__element-highlight-animate::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;
 }