/* Kole UI Mobile · NumberKeyboard 样式 — 对齐移动端规格 §17 数字键盘:固定在底部;按键热区 ≥44px、网格等分;按下用 :active(不做悬停态)。 */ .kole-m-numberkeyboard { --kole-m-numberkeyboard-gap: 1px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2001; box-sizing: border-box; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kole-m-numberkeyboard-gap); padding-bottom: var(--kole-m-safe-bottom); background: var(--kole-color-border); font-family: var(--kole-font-family); transform: translateY(100%); transition: transform var(--kole-m-duration-slide) var(--kole-m-ease-slide); } .kole-m-numberkeyboard.is-open { transform: translateY(0); } .kole-m-numberkeyboard__key { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: var(--kole-m-action-height); padding: 0; border: 0; background: var(--kole-color-card-bg); color: var(--kole-color-text-body); font-family: inherit; font-size: var(--kole-m-font-size-title); line-height: 1; cursor: pointer; touch-action: manipulation; } .kole-m-numberkeyboard__key:focus-visible { outline: 2px solid var(--kole-color-focus-ring); outline-offset: -2px; } .kole-m-numberkeyboard__key:active { background: var(--kole-color-table-header-bg); } /* 变体 type=digit:纯 0-9,没有小数点键时删除键独占最后一格 */ .kole-m-numberkeyboard__key--delete { color: var(--kole-color-text-secondary); } /* 变体 showConfirm=true:确认键跨两列 */ .kole-m-numberkeyboard__confirm { grid-column: span 2; box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: var(--kole-m-action-height); padding: 0; border: 0; background: var(--kole-color-brand); color: var(--kole-color-text-inverse); font-family: inherit; font-size: var(--kole-m-font-size-body); line-height: 1; cursor: pointer; touch-action: manipulation; } .kole-m-numberkeyboard__confirm:focus-visible { outline: 2px solid var(--kole-color-focus-ring); outline-offset: -2px; } .kole-m-numberkeyboard__confirm:active { background: var(--kole-color-brand-active); } /* 状态 disabled:确认键不可用 */ .kole-m-numberkeyboard__confirm:disabled, .kole-m-numberkeyboard__confirm.is-disabled { background: var(--kole-color-disabled-bg); color: var(--kole-color-text-disabled); cursor: not-allowed; } .kole-m-numberkeyboard__confirm:disabled:active { background: var(--kole-color-disabled-bg); } /* 演示页触发器(非组件交付样式) */ .kole-m-numberkeyboard__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-numberkeyboard__trigger:focus-visible { outline: 2px solid var(--kole-color-focus-ring); outline-offset: 2px; }