feat: SVG icon macro library replaces bare text arrows in trade-pro
Task 9 (new design, not a cms port): _professional_components.html gains an icon(name, size, cls) macro — 10 inline line-style glyphs (arrow-right, arrow-left, chevron-down, check, phone, mail, location, download, search, quote), 24x24 viewBox, stroke=currentColor, stroke-width 1.5, round caps/joins, decorative aria-hidden + focusable=false, default size var(--sf-tp-icon-size-md, 20px), unknown names fall back to arrow-right. Every glyph is a single <path> so the d attribute needs no |safe. All bare text arrows (->, <-, ↗, ▾, ⌕) in the macro library, pro.html, site.html and pages/* are replaced with macro calls (site.html keeps a self-contained copy of the arrow glyph because its rendering envs cannot import the macro library); the filters macro search box gains an inline search icon; footer links gain small arrows. theme.css adds .sf-tp-icon alignment, in-button icon spacing, and search-box icon positioning. Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
@@ -585,6 +585,47 @@ body.sf-theme-trade-pro {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── 图标(Task 9 SVG 宏库:内联线条图标的对齐与间距)── */
|
||||
|
||||
/* 基线对齐:inline 上下文垂直居中,flex 上下文不被压缩换行 */
|
||||
.sf-tp-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 按钮内紧跟文字的图标留出呼吸空间(flex gap 之外的显式间距,
|
||||
兼容图标包在 <span> 里或直接暴露两种写法) */
|
||||
.sf-tp-btn svg {
|
||||
margin-inline-start: var(--sf-tp-space-1);
|
||||
}
|
||||
|
||||
/* 非按钮内联上下文:图标贴着文字时补一点间距 */
|
||||
.pro-mega a .sf-tp-icon,
|
||||
.pro-contact-email .sf-tp-icon,
|
||||
.pro-footer-links a .sf-tp-icon {
|
||||
margin-inline-start: var(--sf-tp-space-1);
|
||||
}
|
||||
|
||||
/* filters 宏搜索框:放大镜占位在输入框内左侧(不抢焦点) */
|
||||
.sf-theme-trade-pro .pro-filter-search-box {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0; /* 抵消 pro-base 的 label>span 说明文字样式 */
|
||||
}
|
||||
|
||||
.sf-theme-trade-pro .pro-filter-search-box .sf-tp-icon {
|
||||
position: absolute;
|
||||
inset-inline-start: var(--sf-tp-space-3);
|
||||
inset-block-end: var(--sf-tp-space-3);
|
||||
pointer-events: none;
|
||||
color: var(--sf-tp-color-text-muted);
|
||||
}
|
||||
|
||||
.sf-theme-trade-pro .pro-filter-search-box input {
|
||||
padding-inline-start: calc(var(--sf-tp-icon-size-md, 20px) + var(--sf-tp-space-6));
|
||||
}
|
||||
|
||||
/* ── Phase 2 桥接:骨架期 .pro-* 强调样式改由 cms 令牌驱动(Task 10 布局移植后由组件样式接管)── */
|
||||
|
||||
.pro-utility {
|
||||
|
||||
Reference in New Issue
Block a user