Revert "fix(website): simplify tag"

This reverts commit f99a9af.
ScuffleTV · Aug 2, 2023 · a686420 · a686420
1 parent a329a33
commit a686420
Showing 1 changed file with 88 additions and 11 deletions.
diff --git a/frontend/website/src/components/tag.svelte b/frontend/website/src/components/tag.svelte
@@ -2,30 +2,107 @@
 	export let content: string;
 </script>
 
-<span class="tag">{content}</span>
+<div class="tag">
+	<span>{content}</span>
+	<div class="tag-click" />
+</div>
 
 <style lang="scss">
 	@import "../assets/styles/variables.scss";
 
+	$borderColor: #383838;
+	$dashLength: 0.3rem;
+	$spaceLength: 0.15rem;
+
+	// https://codepen.io/amit_sheen/pen/xxZeyjO for generating the background-image
+
 	.tag {
-		padding: 0.2rem 0.5rem;
+		padding: 0.25rem 0.5rem;
 		font-size: 0.85rem;
+		height: 1.5rem;
 		font-weight: 500;
-		border: 1px dashed $borderColor;
+		background-image: repeating-linear-gradient(
+				0deg,
+				$borderColor,
+				$borderColor $dashLength,
+				transparent $dashLength,
+				transparent $dashLength + $spaceLength,
+				$borderColor $dashLength + $spaceLength
+			),
+			repeating-linear-gradient(
+				90deg,
+				$borderColor,
+				$borderColor $dashLength,
+				transparent $dashLength,
+				transparent $dashLength + $spaceLength,
+				$borderColor $dashLength + $spaceLength
+			),
+			repeating-linear-gradient(
+				180deg,
+				$borderColor,
+				$borderColor $dashLength,
+				transparent $dashLength,
+				transparent $dashLength + $spaceLength,
+				$borderColor $dashLength + $spaceLength
+			),
+			repeating-linear-gradient(
+				270deg,
+				$borderColor,
+				$borderColor $dashLength,
+				transparent $dashLength,
+				transparent $dashLength + $spaceLength,
+				$borderColor $dashLength + $spaceLength
+			);
+		background-size:
+			1px 100%,
+			100% 1px,
+			1px 100%,
+			100% 1px;
+		background-position:
+			0 0,
+			0 0,
+			100% 0,
+			0 100%;
+		background-repeat: no-repeat;
 		color: $textColorLight;
-		transition: color 0.1s ease-in-out, background-color 0.5s ease-in-out,
-			border 0.5s ease-in-out;
-		user-select: none;
+		transition: color 0.1s ease-in-out;
 
+		cursor: default;
+		user-select: none;
+		position: relative;
 		&:hover {
 			color: $textColor;
-			border-style: solid;
+			$backgroundSize: 10rem;
+			background-image: repeating-linear-gradient(
+					0deg,
+					$borderColor,
+					$borderColor $backgroundSize,
+					transparent
+				),
+				repeating-linear-gradient(90deg, $borderColor, $borderColor $backgroundSize, transparent),
+				repeating-linear-gradient(180deg, $borderColor, $borderColor $backgroundSize, transparent),
+				repeating-linear-gradient(270deg, $borderColor, $borderColor $backgroundSize, transparent);
 		}
 		&:active {
-			/* Where do those colors come from? They're nowhere else */
-			background-color: #2fc0f465;
-			border-color: #52e2f2c4;
-			transition: unset;
+			.tag-click {
+				/* Where do those colors come from? They're nowhere else */
+				background-color: #2fc0f465;
+				border-color: #52e2f2c4;
+				transition: unset;
+			}
 		}
 	}
+
+	.tag-click {
+		transition:
+			background-color 0.5s ease-in-out,
+			border 0.5s ease-in-out;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: transparent;
+		border: 0.75px solid transparent;
+	}
 </style>