style(admin): enhance collapsible summary hover/focus and arrow
This commit is contained in:
@@ -662,6 +662,42 @@
|
||||
|
||||
.collapsible-summary{
|
||||
user-select:none;
|
||||
position:relative;
|
||||
padding-right:32px; /* 预留箭头空间 */
|
||||
border-radius:var(--adm-radius-sm, 10px);
|
||||
transition:background .15s ease, box-shadow .15s ease, color .15s ease;
|
||||
outline:none;
|
||||
}
|
||||
|
||||
/* Ant Design Pro-ish:summary hover/active/focus 交互 */
|
||||
.collapsible-summary:hover{
|
||||
background:var(--adm-surface-tint);
|
||||
}
|
||||
|
||||
.collapsible-summary:focus{
|
||||
box-shadow:0 0 0 3px var(--adm-primary-focus-ring), var(--adm-shadow-sm);
|
||||
}
|
||||
|
||||
/* 右侧箭头(替代原生 marker) */
|
||||
.collapsible-summary::after{
|
||||
content:"";
|
||||
position:absolute;
|
||||
right:14px;
|
||||
top:50%;
|
||||
width:8px;
|
||||
height:8px;
|
||||
border-right:2px solid var(--adm-text-muted, #94a3b8);
|
||||
border-bottom:2px solid var(--adm-text-muted, #94a3b8);
|
||||
transform:translateY(-50%) rotate(45deg);
|
||||
transition:transform .15s ease, border-color .15s ease;
|
||||
}
|
||||
|
||||
.collapsible-summary:hover::after{
|
||||
border-color:var(--adm-text-secondary, #64748b);
|
||||
}
|
||||
|
||||
.collapsible[open] > .collapsible-summary::after{
|
||||
transform:translateY(-50%) rotate(225deg);
|
||||
}
|
||||
|
||||
.collapsible-body{
|
||||
|
||||
Reference in New Issue
Block a user