SWED-2268 vscroll via dataset not class + glow

SwedbankPay · Sep 6, 2023 · 3a1782f · 3a1782f
1 parent f53154c
commit 3a1782f
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 9 deletions.
diff --git a/src/App/docutils/ComponentPreview/index.js b/src/App/docutils/ComponentPreview/index.js
@@ -355,9 +355,12 @@ const ComponentPreview = ({
 
 		setExpandedPreview(state) {
 			this.setState({ previewExpanded: state });
-			state
-				? document.body.classList.add("has-vscroll")
-				: document.body.classList.remove("has-vscroll");
+
+			if (state) {
+				document.body.dataset.previewExpandedHasVscroll = "true";
+			} else {
+				delete document.body.dataset.previewExpandedHasVscroll;
+			}
 		}
 
 		render() {
@@ -378,7 +381,7 @@ const ComponentPreview = ({
 								{this.props.showExpandPreview &&
 									(!this.state.previewExpanded ? (
 										<button
-											className="btn btn-icon btn-xs"
+											className="btn btn-icon btn-xs glow-on-hover"
 											type="button"
 											aria-label="Expand the preview container to full screen"
 											onClick={() => this.setExpandedPreview(true)}
@@ -392,7 +395,7 @@ const ComponentPreview = ({
 										</button>
 									) : (
 										<button
-											className="btn btn-icon btn-xs"
+											className="btn btn-icon btn-xs glow-on-hover"
 											type="button"
 											aria-label="Zoom out"
 											onClick={() => this.setExpandedPreview(false)}

diff --git a/src/less/documentation-swedbankpay.less b/src/less/documentation-swedbankpay.less
@@ -158,10 +158,79 @@
 		}
 	}
 
-	// NOTE: This is not used for anything but including the image in the build [EH]
-	// #mail_icon {
-	//     background: url("../img/swedbankpaymail.png");
-	// }
+	.glow-on-hover {
+		cursor: pointer;
+		position: relative;
+		z-index: 0;
+
+		&:before {
+			content: "";
+			background: linear-gradient(
+				45deg,
+				#ff0000,
+				#ff7300,
+				#fffb00,
+				#48ff00,
+				#00ffd5,
+				#002bff,
+				#7a00ff,
+				#ff00c8,
+				#ff0000
+			);
+			position: absolute;
+			top: -2px;
+			left: -2px;
+			background-size: 400%;
+			z-index: -1;
+			filter: blur(5px);
+			width: calc(100% + 4px);
+			height: calc(100% + 4px);
+			animation: glowing 20s linear infinite;
+			opacity: 0;
+			transition: opacity 0.3s ease-in-out;
+		}
+
+		&:hover:before {
+			opacity: 1;
+		}
+
+		&:after {
+			z-index: -1;
+			content: "";
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			left: 0;
+			top: 0;
+			background-color: inherit;
+			border-radius: inherit;
+		}
+
+		@keyframes glowing {
+			0% {
+				background-position: 0 0;
+			}
+
+			50% {
+				background-position: 400% 0;
+			}
+
+			100% {
+				background-position: 0 0;
+			}
+		}
+	}
+}
+
+@supports selector(:has(a, b)) {
+	body[data-preview-expanded-has-vscroll]:has(#designguide) {
+		overflow: hidden;
+	}
+}
+@supports not selector(:has(a, b)) {
+	body[data-preview-expanded-has-vscroll] {
+		overflow: hidden;
+	}
 }
 
 .search-container {