root/aurora-admin
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
Files
main
aurora-admin/frameworks-mobile/Cascader.css
T
aurora-admin f1fbfc2ddb
Regression / regression (push) Canceled after 0s
Details
feat(品牌标识): 几何 K 图标(favicon/顶栏标记/theme-color) + 并行会话成果入库 
## 品牌标识（本次会话）

起因：品牌此前没有任何图形标识 —— 唯一 favicon 是内联 data-URI 里的字母「A」，
那是 v2.0.0「Aurora Admin → Kole UI」改名漏掉的一处（PC 顶栏也是「A」，
移动端站已是「K」；移动端文档站则完全没有 favicon）。

- 几何：24 网格三个互不接触的笔画（竖 + 两斜），圆头描边；
  描边 2.25 → 16px 标签页尺寸下正好 1.5px = 规范原文「描边1.5px」
- 取色分两套（刻意）：favicon 硬编码品牌蓝/白（渲染在浏览器标签栏，不继承 kole-dark）；
  顶栏标记走 currentColor（实测暗色下自动转 rgb(20,22,28)）
- 新增 theme-color 双条（light #FFFFFF / dark #1C1F26，取 --kole-color-card-bg）
- 修 site/app.js hero 标语 KOLE ADMIN → KOLE UI（改名变形残留）
- 移动端 7 个模板补 favicon（此前计数 0）

验收：门禁 9 条全 OK（site-routing/site-routes/mobile-docs/mobile-site/isolation/
theme/nav/i18n/icons）；PC 回归 1464/1464 · 移动端 807/807，各连跑 8 次一致；
两端 favicon 405 字节逐字节一致；PC 站控制台错误 1→0。

## 并行会话成果（本次一并入库）

- 图标系统：2576 图标（TDesign/Element Plus，MIT）+ 11 端注入 + 5 个构建门禁工具
  + IconPreview 预览页 + ICON-SPEC.md 冻结规格
- 移动端平台：47 组件 × 6 端 + 文档站 53 页 + 隔离门禁
- PC 组件：103 个大后台组件 / 组件11 批次
- uni-app：PC 端试点 + 移动端端实现 + 真实编译验证

## 工程

- .gitignore 补 .scratch/ 与 .zcode-preexisting-*.txt（会话中间产物，实测 9.1MB，不入库）
- CHANGELOG 补品牌标识条目
- ROADMAP 登 S8-P4（品牌标识任务包 + og:image/apple-touch-icon 未做部分）
2026-09-21 10:05:48 +08:00

258 lines
7.3 KiB
CSS
Raw Permalink Blame History

/* Kole UI Mobile · Cascader 样式 — 对齐移动端规格 §44
级联选择器：多级联动，点某一级后下一级选项变化，点路径条可回退上一级。
级数不写死：路径条按已选深度排版，面板只渲染当前一级（一次只看一层，避免移动端横向挤压）。 */
.kole-m-cascader {
/* 组件级变量：业务侧可在容器上覆盖 */
--kole-m-cascader-row-height: var(--kole-m-touch-target); /* 选项行高（≥44px 触控最小边长） */
--kole-m-cascader-panel-height: 240px; /* 选项区最大高度 */
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
background: var(--kole-color-card-bg);
color: var(--kole-color-text-body);
font-family: var(--kole-font-family);
font-size: var(--kole-m-font-size-body);
line-height: 1.4;
}
.kole-m-cascader__mask {
position: fixed;
inset: 0;
z-index: 2000;
background: var(--kole-color-mask);
opacity: 0;
pointer-events: none;
transition: opacity var(--kole-m-duration-slide) var(--kole-m-ease-slide);
}
.kole-m-cascader__mask.is-open {
opacity: 1;
pointer-events: auto;
}
/* 变体 mode=panel：内嵌在页面里，跟随文档流 */
.kole-m-cascader--panel {
border: 1px solid var(--kole-color-border);
border-radius: var(--kole-radius-base);
overflow: hidden;
}
/* 变体 mode=popup：底部浮层（默认收起，靠 is-open 滑入） */
.kole-m-cascader--popup {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 2001;
padding-bottom: var(--kole-m-safe-bottom);
transform: translateY(100%);
transition: transform var(--kole-m-duration-slide) var(--kole-m-ease-slide);
}
.kole-m-cascader--popup.is-open { transform: translateY(0); }
/* 变体 showPath=false：不显示路径条（层级少的场景省一行高度） */
.kole-m-cascader--no-path .kole-m-cascader__path { display: none; }
/* 变体 round=true：浮层靠内容一侧切圆角 */
.kole-m-cascader--round {
border-start-start-radius: var(--kole-radius-large);
border-start-end-radius: var(--kole-radius-large);
}
.kole-m-cascader__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--kole-space-8);
padding: var(--kole-space-8) var(--kole-m-gutter);
border-bottom: 1px solid var(--kole-color-border);
}
.kole-m-cascader__title {
color: var(--kole-color-text-title);
font-weight: 500;
}
.kole-m-cascader__btn {
box-sizing: border-box;
min-height: var(--kole-m-touch-target);
padding: 0 var(--kole-space-8);
border: 0;
border-radius: var(--kole-radius-base);
background: none;
color: var(--kole-color-brand);
font-family: inherit;
font-size: var(--kole-m-font-size-label);
line-height: 1;
cursor: pointer;
touch-action: manipulation;
}
.kole-m-cascader__btn:focus-visible {
outline: 2px solid var(--kole-color-focus-ring);
outline-offset: 2px;
}
.kole-m-cascader__btn:active { background: var(--kole-color-brand-bg); }
/* 路径条：显示已选层级，点某一级回退到该级（变体 showPath=true 时出现） */
.kole-m-cascader__path {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--kole-space-4);
min-height: var(--kole-m-touch-target);
padding: var(--kole-space-4) var(--kole-m-gutter);
border-bottom: 1px solid var(--kole-color-border);
background: var(--kole-color-page-bg);
font-size: var(--kole-m-font-size-label);
color: var(--kole-color-text-secondary);
}
.kole-m-cascader__path-item {
box-sizing: border-box;
min-height: var(--kole-m-touch-target);
padding: 0 var(--kole-space-8);
border: 0;
border-radius: var(--kole-radius-base);
background: none;
color: var(--kole-color-brand);
font-family: inherit;
font-size: inherit;
line-height: 1;
cursor: pointer;
touch-action: manipulation;
}
.kole-m-cascader__path-item:focus-visible {
outline: 2px solid var(--kole-color-focus-ring);
outline-offset: -2px;
}
.kole-m-cascader__path-item:active { background: var(--kole-color-brand-bg); }
/* 当前层级（不可点，是「你在这里」的锚点） */
.kole-m-cascader__path-item.is-current {
color: var(--kole-color-text-body);
cursor: default;
}
.kole-m-cascader__sep {
color: var(--kole-color-text-placeholder);
font-size: var(--kole-m-font-size-caption);
}
.kole-m-cascader__panel {
display: flex;
flex-direction: column;
max-height: var(--kole-m-cascader-panel-height);
margin: 0;
padding: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
list-style: none;
}
.kole-m-cascader__option {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--kole-space-8);
width: 100%;
min-height: var(--kole-m-cascader-row-height);
padding: var(--kole-space-8) var(--kole-m-gutter);
margin: 0;
border: 0;
background: var(--kole-color-card-bg);
color: var(--kole-color-text-body);
font-family: inherit;
font-size: inherit;
line-height: 1.4;
text-align: start;
cursor: pointer;
touch-action: manipulation;
}
.kole-m-cascader__option + .kole-m-cascader__option {
border-top: 1px solid var(--kole-color-border);
}
.kole-m-cascader__option:active { background: var(--kole-color-table-header-bg); }
.kole-m-cascader__option:focus-visible {
outline: 2px solid var(--kole-color-focus-ring);
outline-offset: -2px;
}
/* 状态 selected：当前路径上的项（品牌色高亮，与 aria-selected 同步） */
.kole-m-cascader__option.is-selected {
color: var(--kole-color-brand);
font-weight: 500;
}
.kole-m-cascader__option[aria-selected="true"] {
color: var(--kole-color-brand);
font-weight: 500;
}
/* 状态 disabled：置灰且不响应 */
.kole-m-cascader__option.is-disabled {
color: var(--kole-color-text-disabled);
cursor: not-allowed;
}
.kole-m-cascader__option.is-disabled:active { background: var(--kole-color-card-bg); }
.kole-m-cascader__label { flex: 1 1 auto; min-width: 0; }
/* 展开指示：有下级用 ›，叶子用 ✓（形状差异，不只靠颜色） */
.kole-m-cascader__arrow {
flex: 0 0 auto;
color: var(--kole-color-text-placeholder);
}
.kole-m-cascader__option.is-selected .kole-m-cascader__check { color: var(--kole-color-brand); }
.kole-m-cascader__check {
flex: 0 0 auto;
color: var(--kole-color-brand);
}
/* 状态 empty：当前级没有可选项 */
.kole-m-cascader__empty {
margin: 0;
padding: var(--kole-space-40) var(--kole-m-gutter);
color: var(--kole-color-text-secondary);
font-size: var(--kole-m-font-size-label);
text-align: center;
}
/* 状态 disabled：整块置灰且不响应 */
.kole-m-cascader.is-disabled .kole-m-cascader__option,
.kole-m-cascader.is-disabled .kole-m-cascader__path-item { color: var(--kole-color-text-disabled); }
.kole-m-cascader.is-disabled .kole-m-cascader__option { cursor: not-allowed; }
/* 演示页触发器（非组件交付样式） */
.kole-m-cascader__trigger {
min-height: var(--kole-m-touch-target);
padding: 0 var(--kole-m-gutter);
border: 1px solid var(--kole-color-border);
border-radius: var(--kole-radius-base);
background: var(--kole-color-card-bg);
color: var(--kole-color-text-body);
font-family: inherit;
font-size: var(--kole-m-font-size-label);
cursor: pointer;
touch-action: manipulation;
}
.kole-m-cascader__trigger:focus-visible {
outline: 2px solid var(--kole-color-focus-ring);
outline-offset: 2px;
}
Reference in New Issue View Git Blame Copy Permalink