root/aurora-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(S9-P7): CSS 端接线为样式底座——11 页 H5 内联组件样式并入 CSS 文件并 link 接线（单一样式真源）；PLATFORMS 将 css 列重定义为样式层/交付物；值冲突按 components.css 裁决（令牌/逻辑属性优先），顺带修复 Select 定位与选择列居中两处内联版缺陷

Browse Source
This commit is contained in:
aurora-admin
2026-09-25 04:22:03 +08:00
parent b59247231a
commit f07f38b09d
20 changed files with 2482 additions and 2113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frameworks/Button.html
+3 -42
View File
@@ -6,49 +6,10 @@
<title>Kole UI · Button (H5)</title>
<!-- 复用设计系统 token，保证与组件库一致 -->
<link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css">
<link rel="stylesheet" href="./Button.css">
<style>
/* 以下按钮样式对齐 components.css 与 button.json 契约 */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--space-4); border: 1px solid transparent; cursor: pointer;
white-space: nowrap; font-size: var(--font-size-body); line-height: var(--line-height-body);
border-radius: var(--radius-base); min-width: 64px; padding: 0 var(--space-12);
flex-shrink: 0; transition: background .15s, border-color .15s;
font-family: var(--font-family); box-sizing: border-box;
}
.btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.btn-primary { background: var(--color-brand); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-brand-hover); }
.btn-primary:active { background: var(--color-brand-active); }
.btn-default { background: var(--color-bg-card); border-color: var(--color-border); color: var(--color-text-body); }
.btn-default:hover { border-color: var(--color-brand); }
.btn-text { background: transparent; color: var(--color-brand); }
.btn-text:hover { background: var(--color-brand-bg); }
.btn-link { background: transparent; border: none; color: var(--color-brand); min-width: auto; padding: 0; }
.btn-link:hover { background: var(--color-brand-bg); }
.btn-danger { background: var(--color-error); color: var(--color-text-inverse); }
.btn-danger:hover { filter: brightness(.92); }
.btn-lg { height: var(--control-height-large); }
.btn-md { height: var(--control-height-default); }
.btn-sm { height: var(--control-height-small); }
.btn-disabled, .btn:disabled {
background: var(--color-bg-disabled); border-color: transparent;
color: var(--color-text-placeholder); cursor: not-allowed;
}
.btn-disabled:hover, .btn:disabled:hover { background: var(--color-bg-disabled); filter: none; }
/* 加载态：旋转 spinner + 文字 */
.btn.is-loading { cursor: progress; position: relative; }
.btn.is-loading .btn-label { opacity: .65; }
.btn .spinner {
width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent;
border-radius: 50%; animation: btn-spin .6s linear infinite; display: inline-block;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
/* 演示页布局 */
body { margin: 0; padding: 24px; background: var(--color-bg-page); color: var(--color-text-body);
font-family: var(--font-family); }
/* 演示页布局脚手架 —— 组件样式已并入 Button.css（S9-P7 单一样式真源） */
body { margin: 0; padding: 24px; background: var(--color-bg-page); color: var(--color-text-body); font-family: var(--font-family); }
h1 { font-size: var(--font-size-h1); margin: 0 0 4px; }
.sub { color: var(--color-text-secondary); margin: 0 0 24px; font-size: var(--font-size-caption); }
.group { margin-bottom: 24px; }