commit a941f11f3a95805b5c39011d1a3c62d955a0d3db
parent 1562a30af69623509d021d91351f0993bc75bc02
Author: Amit Dutta <mail@amit.is-a.dev>
Date: Mon, 24 Aug 2026 11:00:48 +0530
Merge pull request #67 from notamitgamer/patch
Remove transition effects from tag styles
Diffstat:
2 files changed, 4 insertions(+), 36 deletions(-)
diff --git a/docs/.vitepress/theme/components/Labels.vue b/docs/.vitepress/theme/components/Labels.vue
@@ -40,7 +40,6 @@ function humanize(tag) {
display: inline-flex;
align-items: center;
height: 28px;
- /* Reduced left padding since the point adds visual space */
padding: 0 12px 0 10px;
font-size: 12.5px;
font-weight: 500;
@@ -51,45 +50,29 @@ function humanize(tag) {
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-divider);
- /* Removes the flat left border so the point can connect seamlessly */
border-left: none;
border-radius: 0 5px 5px 0;
- /* Adds outer margin to make room for the point so it doesn't overlap tags */
margin-left: 14px;
-
- transition:
- color 0.15s ease,
- background 0.15s ease,
- border-color 0.15s ease,
- transform 0.15s ease;
}
/* 1. The Pointed Left Angle */
.bsc-tag::after {
content: '';
position: absolute;
- /* Pulls the square exactly halfway out to form the left point */
left: -10px;
top: 50%;
- /* Vertically centers a 20px square */
margin-top: -10px;
width: 20px;
height: 20px;
- /* 'inherit' magically copies the parent's hover background perfectly */
background: inherit;
- /* Apply borders only to the left and bottom edges */
border-left: 1px solid var(--vp-c-divider);
border-bottom: 1px solid var(--vp-c-divider);
- /* Slightly rounds the sharp tip */
border-radius: 0 0 0 3px;
- /* Rotating 45deg turns the left/bottom borders into a perfect '<' shape */
transform: rotate(45deg);
-
- transition: border-color 0.15s ease;
z-index: -1;
}
@@ -97,7 +80,6 @@ function humanize(tag) {
.bsc-tag::before {
content: '';
position: absolute;
- /* Centered perfectly inside the neck of the triangle */
left: -3px;
top: 50%;
margin-top: -2px;
@@ -105,24 +87,21 @@ function humanize(tag) {
height: 4px;
border-radius: 50%;
background: var(--vp-c-brand-1);
- transition: background 0.15s ease;
z-index: 1;
}
-/* Hover States */
+/* Hover States (Instant color snap, no movement) */
.bsc-tag:hover {
color: #fff;
background: var(--vp-c-brand-1);
border-color: var(--vp-c-brand-1);
- transform: translateY(-1px);
}
.bsc-tag:hover::after {
- /* Background auto-updates due to 'inherit', just need to color the borders */
border-color: var(--vp-c-brand-1);
}
.bsc-tag:hover::before {
background: #fff;
}
-</style>-
\ No newline at end of file
+</style>
diff --git a/docs/tags.md b/docs/tags.md
@@ -1,6 +1,6 @@
---
source: 'docs/tags.md'
-title: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg> Tags'
+title: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline; margin-bottom:-2px; margin-right:6px;"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg> Tags'
---
<script setup>
@@ -80,12 +80,6 @@ Browse pages grouped by tag. Click any tag chip across the site to jump here.
border-radius: 0 5px 5px 0;
margin-left: 14px;
-
- transition:
- color 0.15s ease,
- background 0.15s ease,
- border-color 0.15s ease,
- transform 0.15s ease;
}
/* The Pointed Left Angle */
@@ -105,7 +99,6 @@ Browse pages grouped by tag. Click any tag chip across the site to jump here.
border-radius: 0 0 0 3px;
transform: rotate(45deg);
- transition: border-color 0.15s ease;
z-index: -1;
}
@@ -120,7 +113,6 @@ Browse pages grouped by tag. Click any tag chip across the site to jump here.
height: 4px;
border-radius: 50%;
background: var(--vp-c-brand-1);
- transition: background 0.15s ease;
z-index: 1;
}
@@ -129,7 +121,6 @@ Browse pages grouped by tag. Click any tag chip across the site to jump here.
color: #fff;
background: var(--vp-c-brand-1);
border-color: var(--vp-c-brand-1);
- transform: translateY(-1px);
}
.bsc-tag:hover::after {
@@ -160,4 +151,4 @@ Browse pages grouped by tag. Click any tag chip across the site to jump here.
color: var(--vp-c-brand-1);
text-decoration: underline;
}
-</style>-
\ No newline at end of file
+</style>
