iter(g67): tag 支持 checkable 筛选片,选中态与 aria-pressed 同步
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user