kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(nav): finish top-bar icon/text baseline alignment

Browse Source 
Center toggle/badge FA icons, normalize CTA icon+label without raw spaces, and extend .but FA5 margin so navbar text/icons match zibll.
This commit is contained in:
kate522
2026-07-24 12:24:32 +08:00
parent a5fd5105f4
commit 683506f3a2
3 changed files with 63 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/core/buttons.css
+5 -1
View File
@@ -179,7 +179,11 @@
.but a { color: inherit; }
.but .icon,
.but > .fa:not(.fa-angle-right) { margin-right: 0.25em; }
.but > .fa:not(.fa-angle-right),
.but > .fas:not(.fa-angle-right),
.but > .far:not(.fa-angle-right),
.but > .fab:not(.fa-angle-right),
.but > i[class*="fa-"]:not(.fa-angle-right) { margin-right: 0.25em; }
/* hover / active */
.but:focus,
assets/css/frontend/nav.css
+55
View File
@@ -149,3 +149,58 @@
display: flex;
align-items: center;
}
/* Dropdown / user-href circular icon badges (zibll header-user-href) */
.navbar-top .header-user-href .toggle-radius,
.navbar-top .badg.toggle-radius {
position: relative;
display: inline-block;
text-align: center;
vertical-align: middle;
overflow: hidden;
}
.navbar-top .header-user-href .toggle-radius > i,
.navbar-top .header-user-href .toggle-radius .fa,
.navbar-top .header-user-href .toggle-radius .fas,
.navbar-top .badg.toggle-radius > i,
.navbar-top .badg.toggle-radius .fa,
.navbar-top .badg.toggle-radius .fas {
position: absolute !important;
top: 50% !important;
left: 0 !important;
right: 0 !important;
margin: auto !important;
transform: translateY(-50%) !important;
line-height: 1 !important;
width: 1em;
height: 1em;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
/* Kill FA vertical-align drift inside flex chips */
.navbar-top a.btn > i.fas,
.navbar-top a.btn > i.far,
.navbar-top a.navbar-cta > i.fas,
.navbar-top a.navbar-cta > i.far,
.navbar-top .toggle-theme > i.fas {
vertical-align: 0 !important;
}
/* Navbar form row height consistency */
.navbar-top .navbar-form.flex.ac {
min-height: 36px;
}
.navbar-top .list-inline {
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.navbar-top .list-inline > li {
display: flex;
align-items: center;
vertical-align: middle;
}
inc/helpers/aksrt-header-menu-buttons.php
+3 -2
View File
@@ -142,11 +142,12 @@ if (!function_exists('aksrt_normalize_header_cta_label')) :
$label = preg_replace('/<i\s+class=(["\'])(?!fas\b|far\b|fab\b)/', '<i class=$1fas ', $label) ?? $label;
if (stripos($label, '<i') === false) {
$label = '<i class="' . esc_attr($fallback_icon) . '" aria-hidden="true"></i> <span class="navbar-cta-text">' . esc_html(wp_strip_all_tags($label)) . '</span>';
// No space between icon and label — spacing via CSS margin (zibll .but > .fa).
$label = '<i class="' . esc_attr($fallback_icon) . '" aria-hidden="true"></i><span class="navbar-cta-text">' . esc_html(wp_strip_all_tags($label)) . '</span>';
} else {
$label = preg_replace(
'/(<\/i>)\s*([^<].*)$/u',
'$1 <span class="navbar-cta-text">$2</span>',
'$1<span class="navbar-cta-text">$2</span>',
$label
) ?? $label;
}