113 lines
5.9 KiB
JSON
113 lines
5.9 KiB
JSON
{
|
||
"slug": "formmodal",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端表单弹窗样式：遮罩与 440px 弹窗体的分区排版，外加输入框聚焦光晕与错误态描边。",
|
||
"usage": [
|
||
"遮罩 .kole-formmodal-mask 用 position:fixed 加 inset:0 铺满视口，半透明黑底 rgba(0,0,0,0.45)、z-index 1000，flex 把弹窗居中（FormModal.css:2）。",
|
||
"弹窗体 .kole-formmodal 宽 440px 且 max-width:92vw、圆角 10px、投影 0 12px 48px，靠 overflow:hidden 让头尾分割线不顶出圆角（FormModal.css:3）。",
|
||
"分区样式成对出现：头 .kole-formmodal-head 与脚 .kole-formmodal-foot 各自带 1px 上/下边框，脚部用 justify-content:flex-end 把按钮推到右侧（FormModal.css:4,15）。",
|
||
"表单行 .kole-form-row 只负责 14px 下外边距；标签 .kole-form-label 是块级 13px 三级文字色，必填星号写成 .kole-form-label .req 用错误色（FormModal.css:8-10）。",
|
||
"输入框 .kole-form-input 是整宽描边控件，聚焦态 :focus 给品牌色边框加 0 0 0 3px rgba(47,84,235,0.2) 光晕（FormModal.css:11-12）。",
|
||
"错误态分两处：输入框加 .is-error 把边框换成错误色，下方 .kole-form-err 用 12px 错误色文字补说明，两者分别写在输入框与行内（FormModal.css:13-14）。"
|
||
],
|
||
"bestPractices": [
|
||
"装饰性关闭按钮的样式只到 hover 变色，没有 :focus-visible 规则；若在真实表单里把它换成按钮元素，需要自己补键盘焦点环（FormModal.css:5-6）。",
|
||
"聚焦光晕的 rgba(47,84,235,0.2) 是硬编码的品牌色副本，改 --kole-color-brand 不会同步这条阴影（FormModal.css:12）。",
|
||
"遮罩的 z-index 1000 是固定值，本仓库其它浮层（如通知 3000）优先级更高；同时使用时要确认层叠顺序符合预期（FormModal.css:2）。",
|
||
"标题栏与按钮行的边框各写一行，是两条独立规则；若把弹窗体改成自适应高度容器，需要确认 overflow:hidden 不会裁掉外部焦点环（FormModal.css:3-4,15）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端以类名交付弹窗外观：遮罩类负责全屏居中，弹窗体与头/身/脚三个分区类负责骨架，表单侧由 .kole-form-row / .kole-form-label / .kole-form-input / .kole-form-err 与 .is-error 状态类组成；开关、校验与数据提交都不在交付范围内。",
|
||
"table": [
|
||
{
|
||
"name": "kole-formmodal-mask",
|
||
"type": "布局类名",
|
||
"desc": "fixed inset:0 遮罩，半透明黑底，flex 居中，z-index 1000"
|
||
},
|
||
{
|
||
"name": "kole-formmodal",
|
||
"type": "基础类名",
|
||
"desc": "弹窗体：440px 宽（92vw 上限）、圆角 10px、大投影、裁溢出"
|
||
},
|
||
{
|
||
"name": "kole-formmodal-head",
|
||
"type": "结构类名",
|
||
"desc": "标题栏：两端对齐、padding 14px 18px、底部 1px 分割线"
|
||
},
|
||
{
|
||
"name": "kole-formmodal-close",
|
||
"type": "结构类名",
|
||
"desc": "关闭按钮：无边框无底色、18px 次要色，悬停转正文色"
|
||
},
|
||
{
|
||
"name": "kole-formmodal-body",
|
||
"type": "结构类名",
|
||
"desc": "表单主体区，内边距 18px"
|
||
},
|
||
{
|
||
"name": "kole-formmodal-foot",
|
||
"type": "结构类名",
|
||
"desc": "按钮行：右对齐、间距 10px、padding 12px 18px、顶部 1px 分割线"
|
||
},
|
||
{
|
||
"name": "kole-form-row",
|
||
"type": "结构类名",
|
||
"desc": "单行字段容器，下外边距 14px"
|
||
},
|
||
{
|
||
"name": "kole-form-label",
|
||
"type": "结构类名",
|
||
"desc": "块级标签，13px 三级文字色，下外边距 6px"
|
||
},
|
||
{
|
||
"name": "req",
|
||
"type": "修饰类名",
|
||
"desc": "必填星号，错误色，右侧留 3px（下标 .kole-form-label .req）"
|
||
},
|
||
{
|
||
"name": "kole-form-input",
|
||
"type": "控件类名",
|
||
"desc": "输入框：整宽、1px 边框、圆角 6px、padding 8px 10px、聚焦光晕"
|
||
},
|
||
{
|
||
"name": "is-error",
|
||
"type": "状态类名",
|
||
"desc": "与 .kole-form-input 同节点时把边框改为错误色"
|
||
},
|
||
{
|
||
"name": "kole-form-err",
|
||
"type": "结构类名",
|
||
"desc": "错误文案：12px 错误色，上外边距 4px"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"遮罩没有 aria 相关样式或隐藏规则，但本文件也不提供 role；对话框语义需要标记层补 role=\"dialog\" 与 aria-modal（FormModal.css:2-3）。",
|
||
"输入框聚焦态用品牌色边框加 3px 光晕，键盘与鼠标聚焦同样显示，可见性达标（FormModal.css:12）。",
|
||
"错误态不单靠颜色：输入框变色之外还有 .kole-form-err 文字说明，色觉障碍用户可读到原因（FormModal.css:13-14）。",
|
||
"标签文字用三级文字色（--kole-color-text-tertiary）13px，在白色弹窗体上对比偏弱，若作为唯一字段说明需评估可读性（FormModal.css:9）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/FormModal.css",
|
||
"kind": "CSS 端全部交付物",
|
||
"desc": "FormModal.css —— 16 行样式源码：遮罩与弹窗分区、表单行与标签、输入框聚焦与错误态"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"formmodal-ex-1"
|
||
],
|
||
"notes": [
|
||
"遮罩与弹窗体：frameworks/FormModal.css:2-3",
|
||
"头部分区与关闭按钮：frameworks/FormModal.css:4-6",
|
||
"主体与表单行、标签：frameworks/FormModal.css:7-10",
|
||
"输入框与聚焦态：frameworks/FormModal.css:11-12",
|
||
"错误态两处：frameworks/FormModal.css:13-14",
|
||
"按钮行分区：frameworks/FormModal.css:15",
|
||
"FormModal.css 16 行只覆盖遮罩与弹窗体两层（表单控件与按钮复用 .kole-form-* / .kole-btn）：文件里没有代码块，因为 css 端 byEnd.code 为空字符串，示例由 exampleIds 给出。",
|
||
"按钮用的 .kole-btn / .kole-btn--primary 不在本文件内，未列入 table。"
|
||
]
|
||
}
|