s.esmaeili/imen_pishghaman
0
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(admin): perfectly center sidebar menu icons inside badge

Browse Source
This commit is contained in:
s.esmaeili
2026-10-23 21:17:51 +03:30
parent cd5f123270
commit c7884480c5
1 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin/src/layouts/AdminLayout.vue
+32 -6
View File
@@ -799,8 +799,8 @@ watch(() => route.fullPath, () => (drawer.value = false));
} }
.admin-menu :deep(.ant-menu-item) { .admin-menu :deep(.ant-menu-item) {
display: flex; display: flex !important;
align-items: center; align-items: center !important;
height: 48px !important; height: 48px !important;
margin: 0 0 6px !important; margin: 0 0 6px !important;
padding-inline: 10px 14px !important; padding-inline: 10px 14px !important;
@@ -808,7 +808,7 @@ watch(() => route.fullPath, () => (drawer.value = false));
border-radius: 12px !important; border-radius: 12px !important;
color: #475569 !important; color: #475569 !important;
font-weight: 500; font-weight: 500;
line-height: 48px !important; line-height: 1.5 !important;
transition: transition:
background 0.2s ease, background 0.2s ease,
color 0.2s ease, color 0.2s ease,
@@ -816,8 +816,7 @@ watch(() => route.fullPath, () => (drawer.value = false));
box-shadow 0.2s ease; box-shadow 0.2s ease;
} }
.admin-menu :deep(.ant-menu-item-icon), .admin-menu :deep(.ant-menu-item-icon) {
.admin-menu :deep(.ant-menu-item .anticon) {
display: inline-flex !important; display: inline-flex !important;
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;
@@ -825,10 +824,14 @@ watch(() => route.fullPath, () => (drawer.value = false));
height: 36px !important; height: 36px !important;
min-width: 36px !important; min-width: 36px !important;
min-height: 36px !important; min-height: 36px !important;
margin: 0 !important;
margin-inline-end: 12px !important; margin-inline-end: 12px !important;
padding: 0 !important;
font-size: 0 !important; font-size: 0 !important;
line-height: 0 !important;
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
flex-shrink: 0 !important;
} }
.admin-menu :deep(.admin-menu__icon) { .admin-menu :deep(.admin-menu__icon) {
@@ -839,17 +842,21 @@ watch(() => route.fullPath, () => (drawer.value = false));
height: 36px !important; height: 36px !important;
min-width: 36px !important; min-width: 36px !important;
min-height: 36px !important; min-height: 36px !important;
margin: 0 !important;
padding: 0 !important;
flex-shrink: 0 !important; flex-shrink: 0 !important;
border-radius: 10px !important; border-radius: 10px !important;
background: #f1f5f9; background: #f1f5f9;
color: #64748b; color: #64748b;
line-height: 0 !important;
transition: transition:
background 0.2s ease, background 0.2s ease,
color 0.2s ease, color 0.2s ease,
box-shadow 0.2s ease; box-shadow 0.2s ease;
} }
.admin-menu :deep(.admin-menu__icon .vx-icon) { .admin-menu :deep(.admin-menu__icon .vx-icon),
.admin-menu :deep(.admin-menu__icon .anticon) {
display: inline-flex !important; display: inline-flex !important;
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;
@@ -857,6 +864,14 @@ watch(() => route.fullPath, () => (drawer.value = false));
height: 20px !important; height: 20px !important;
min-width: 20px !important; min-width: 20px !important;
min-height: 20px !important; min-height: 20px !important;
max-width: 20px !important;
max-height: 20px !important;
margin: 0 !important;
margin-inline-end: 0 !important;
margin-inline-start: 0 !important;
padding: 0 !important;
line-height: 0 !important;
vertical-align: 0 !important;
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
color: inherit !important; color: inherit !important;
@@ -865,7 +880,18 @@ watch(() => route.fullPath, () => (drawer.value = false));
.admin-menu :deep(.admin-menu__icon svg) { .admin-menu :deep(.admin-menu__icon svg) {
width: 20px !important; width: 20px !important;
height: 20px !important; height: 20px !important;
max-width: 20px !important;
max-height: 20px !important;
display: block !important; display: block !important;
margin: 0 auto !important;
transform: none !important;
}
.admin-menu :deep(.ant-menu-title-content) {
display: flex !important;
align-items: center !important;
margin-inline-start: 0 !important;
line-height: 1.5 !important;
} }
.admin-menu :deep(.ant-menu-item:hover) { .admin-menu :deep(.ant-menu-item:hover) {