style(aside): 优化侧边栏切换按钮的布局适配
调整侧边栏展开/折叠状态下切换按钮的对齐方式和内边距,使其与菜单项排版保持一致
This commit is contained in:
@@ -164,9 +164,27 @@ const statusText = computed(() => {
|
|||||||
.sidebar-toggle {
|
.sidebar-toggle {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
|
border: 0;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 展开时沿用菜单项的左内边距,让折叠操作与“设置”入口排成同一列。 */
|
||||||
|
.app-sidebar:not(.is-collapsed) .sidebar-toggle {
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
padding-inline: 24px;
|
||||||
|
|
||||||
|
:deep(.anticon + span) {
|
||||||
|
margin-inline-start: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 折叠时隐藏文字后,按钮和菜单图标都回到侧栏中心。 */
|
||||||
|
.app-sidebar.is-collapsed .sidebar-toggle {
|
||||||
|
justify-content: center;
|
||||||
|
padding-inline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-toggle:focus-visible {
|
.sidebar-toggle:focus-visible {
|
||||||
outline: 2px solid #6366f1;
|
outline: 2px solid #6366f1;
|
||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
|
|||||||
Reference in New Issue
Block a user