tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(platform): 统一控件 - 统一输入按钮与图标控件样式表现

Browse Source
This commit is contained in:
ddcat666
2026-09-25 06:34:42 +08:00
parent 8a691f76c9
commit 2ce50bbb9d
15 changed files with 100 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/styles/unified-buttons.css
View File

@@ -11,8 +11,10 @@
box-shadow: none !important;
}
/* 带文字的按钮不要贴着左边缘。纯图标按钮保持正方形，不额外加水平内边距。 */
:where(button:not(.ant-btn-icon-only), .ant-btn:not(.ant-btn-icon-only)):not(:has(> svg:only-child)) {
/* 带文字的按钮不要贴着左边缘。纯图标按钮保持正方形，不额外加水平内边距。
:has 只能识别 svg 是直接唯一子元素的情况；图标被动画 span、角标、sr-only 等
wrapper 包住时检测不到，这类按钮用 data-icon-only 显式声明豁免。 */
:where(button:not(.ant-btn-icon-only):not([data-icon-only]), .ant-btn:not(.ant-btn-icon-only):not([data-icon-only])):not(:has(> svg:only-child)) {
padding-inline: max(12px, var(--space-3));
}

54
web/src/styles/unified-inputs.css
View File

@@ -20,19 +20,14 @@
--unified-input-addon: color-mix(in srgb, var(--foreground) 4%, transparent);
}
:where(
.ant-input:not(textarea),
.ant-input-affix-wrapper,
.ant-input-number,
.ant-input-number-affix-wrapper,
.ant-input-group-wrapper .ant-input-group-addon,
.ant-otp-input
) {
:where(.ant-input:not(textarea), .ant-input-affix-wrapper, .ant-input-number, .ant-input-number-affix-wrapper, .ant-input-group-wrapper .ant-input-group-addon, .ant-otp-input) {
border-color: transparent !important;
border-radius: var(--r-lg) !important;
background: var(--unified-input-surface) !important;
box-shadow: none !important;
transition: background-color var(--motion-state, 180ms) ease, color var(--motion-state, 180ms) ease !important;
transition:
background-color var(--motion-state, 180ms) ease,
color var(--motion-state, 180ms) ease !important;
}
:where(textarea.ant-input, .ant-input-textarea textarea.ant-input) {
@@ -53,25 +48,14 @@
box-shadow: none !important;
}
:where(
.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper-focused,
.ant-input-number-focused,
.ant-input-number-affix-wrapper-focused
) {
:where(.ant-input:focus, .ant-input-focused, .ant-input-affix-wrapper-focused, .ant-input-number-focused, .ant-input-number-affix-wrapper-focused) {
border-color: transparent !important;
background: var(--unified-input-surface-focus) !important;
outline: none !important;
box-shadow: none !important;
}
:where(
.ant-input-affix-wrapper > .ant-input,
.ant-input-number .ant-input-number-input,
.ant-input-number-affix-wrapper .ant-input-number-input,
.ant-input-search .ant-input
) {
:where(.ant-input-affix-wrapper > .ant-input, .ant-input-number .ant-input-number-input, .ant-input-number-affix-wrapper .ant-input-number-input, .ant-input-search .ant-input) {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
@@ -98,40 +82,22 @@
}
/* 外壳已经承担视觉时，内部输入不再形成第二层线条。 */
:where(
.ant-input-affix-wrapper .ant-input,
.ant-input-group .ant-input,
.ant-input-group .ant-input-affix-wrapper,
.ant-otp .ant-otp-input-wrapper .ant-input
) {
:where(.ant-input-affix-wrapper .ant-input, .ant-input-group .ant-input, .ant-input-group .ant-input-affix-wrapper, .ant-otp .ant-otp-input-wrapper .ant-input) {
border-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
}
/* 错误和警告仍需要可识别的状态，但不再叠加发光描边。 */
:where(
.ant-input-status-error:not(.ant-input-disabled),
.ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled),
.ant-input-number-status-error:not(.ant-input-number-disabled)
) {
:where(.ant-input-status-error:not(.ant-input-disabled), .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled), .ant-input-number-status-error:not(.ant-input-number-disabled)) {
background: color-mix(in srgb, var(--destructive, #ef4444) 10%, transparent) !important;
}
:where(
.ant-input-status-warning:not(.ant-input-disabled),
.ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled),
.ant-input-number-status-warning:not(.ant-input-number-disabled)
) {
:where(.ant-input-status-warning:not(.ant-input-disabled), .ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled), .ant-input-number-status-warning:not(.ant-input-number-disabled)) {
background: color-mix(in srgb, var(--warning, #f59e0b) 12%, transparent) !important;
}
:where(
.ant-input-disabled,
.ant-input-affix-wrapper-disabled,
.ant-input-number-disabled,
.ant-input-number-affix-wrapper-disabled
) {
:where(.ant-input-disabled, .ant-input-affix-wrapper-disabled, .ant-input-number-disabled, .ant-input-number-affix-wrapper-disabled) {
background: color-mix(in srgb, var(--foreground) 4%, transparent) !important;
color: color-mix(in srgb, var(--foreground) 42%, transparent) !important;
box-shadow: none !important;