iter(g67): tag 支持 checkable 筛选片,选中态与 aria-pressed 同步

This commit is contained in:
HIsheR
2026-10-26 12:36:14 +08:00
parent 173c3d520a
commit cc3c649b80
7 changed files with 101 additions and 9 deletions
+31
View File
@@ -708,6 +708,37 @@
transform: scale(1.15);
}
/* —— 可选标签(筛选片)—— */
.ua-tag.is-checkable {
font: inherit;
color: var(--ua-color-text-muted);
background: transparent;
cursor: pointer;
transition: transform 0.15s, border-color 0.15s, background 0.15s, color 0.15s;
}
.ua-tag.is-checkable:hover {
transform: translateY(-1px);
color: var(--ua-color-text);
}
.ua-tag.is-checkable:active {
transform: scale(0.97);
}
.ua-tag.is-checkable:focus-visible {
outline: 2px solid color-mix(in srgb, var(--ua-color-accent) 45%, transparent);
outline-offset: 2px;
}
.ua-tag.is-checked {
border-color: color-mix(in srgb, var(--ua-color-accent) 55%, transparent);
background: color-mix(in srgb, var(--ua-color-accent) 10%, var(--ua-color-bg));
color: var(--ua-color-text);
}
@media (prefers-reduced-motion: reduce) {
.ua-tag.is-checkable { transition: none; }
.ua-tag.is-checkable:hover,
.ua-tag.is-checkable:active { transform: none; }
}
/* —— 滑块 —— */
.ua-slider {
display: inline-flex;