Просмотр исходного кода

style(admin): enlarge borderless sidebar toggle

彭峰 1 месяц назад
Родитель
Сommit
f5b7fac06f

+ 1 - 1
projects/xiaoshu-admin/src/app/layout/admin-shell.component.html

@@ -6,7 +6,7 @@
       <span>小树陪练<small>{{ mode === 'technical' ? '技术后台' : '运营管理后台' }}</small></span>
       <span>小树陪练<small>{{ mode === 'technical' ? '技术后台' : '运营管理后台' }}</small></span>
     </a>
     </a>
       <button class="sidebar-toggle" type="button" [attr.aria-label]="collapsed() ? '展开侧栏' : '收起侧栏'" [title]="collapsed() ? '展开侧栏' : '收起侧栏'" [attr.aria-expanded]="!collapsed()" aria-controls="admin-sidebar" (click)="collapsed.set(!collapsed())">
       <button class="sidebar-toggle" type="button" [attr.aria-label]="collapsed() ? '展开侧栏' : '收起侧栏'" [title]="collapsed() ? '展开侧栏' : '收起侧栏'" [attr.aria-expanded]="!collapsed()" aria-controls="admin-sidebar" (click)="collapsed.set(!collapsed())">
-        <lucide-icon [img]="collapsed() ? icons.PanelLeftOpen : icons.PanelLeftClose" [size]="19" />
+        <lucide-icon [img]="collapsed() ? icons.PanelLeftOpen : icons.PanelLeftClose" [size]="26" />
       </button>
       </button>
       <button class="sidebar-close" type="button" aria-label="关闭菜单" (click)="closeMenu()"><lucide-icon [img]="icons.X" [size]="20" /></button>
       <button class="sidebar-close" type="button" aria-label="关闭菜单" (click)="closeMenu()"><lucide-icon [img]="icons.X" [size]="20" /></button>
     </div>
     </div>

+ 3 - 1
projects/xiaoshu-admin/src/app/layout/admin-shell.component.scss

@@ -21,8 +21,10 @@
   .sidebar-collapsed nav a, .sidebar-collapsed .sidebar-foot button { justify-content: center; padding: 0; }
   .sidebar-collapsed nav a, .sidebar-collapsed .sidebar-foot button { justify-content: center; padding: 0; }
 }
 }
 .sidebar-toggle, .sidebar-close { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; color: #d7e2f4; background: transparent; cursor: pointer; }
 .sidebar-toggle, .sidebar-close { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; color: #d7e2f4; background: transparent; cursor: pointer; }
+.sidebar-toggle { flex-basis: 36px; width: 36px; height: 36px; border: 0; }
 .sidebar-close { display: none; }
 .sidebar-close { display: none; }
-.sidebar-toggle:hover, .sidebar-close:hover { background: rgba(255,255,255,.1); color: white; }
+.sidebar-toggle:hover { background: transparent; color: white; }
+.sidebar-close:hover { background: rgba(255,255,255,.1); color: white; }
 button:focus-visible, a:focus-visible { outline: 2px solid #51a8ff; outline-offset: 3px; }
 button:focus-visible, a:focus-visible { outline: 2px solid #51a8ff; outline-offset: 3px; }
 .admin-workspace { min-width: 0; }
 .admin-workspace { min-width: 0; }
 .admin-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding: 0 28px; border-bottom: 1px solid #e5eaf1; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
 .admin-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding: 0 28px; border-bottom: 1px solid #e5eaf1; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }