/* Kole UI Mobile · ActionSheet 样式 — 对齐移动端规格 §3 动作面板:自底部滑出,遮罩点击关闭;操作项高度 ≥ 56px;滑出 240ms。 */ .kole-m-actionsheet__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-ease-standard); } .kole-m-actionsheet__mask.is-open { opacity: 1; pointer-events: auto; } .kole-m-actionsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2001; box-sizing: border-box; display: flex; flex-direction: column; gap: 1px; padding-bottom: var(--kole-m-safe-bottom); background: var(--kole-color-page-bg); transform: translateY(110%); transition: transform var(--kole-m-duration-slide) var(--kole-m-ease-slide); font-family: var(--kole-font-family); } .kole-m-actionsheet.is-open { transform: translateY(0); } .kole-m-actionsheet__title { margin: 0; padding: var(--kole-space-12) var(--kole-m-gutter); background: var(--kole-color-card-bg); color: var(--kole-color-text-secondary); font-size: var(--kole-m-font-size-label); line-height: 1.4; text-align: center; } .kole-m-actionsheet__action { display: block; box-sizing: border-box; width: 100%; min-height: var(--kole-m-action-height); padding: 0 var(--kole-m-gutter); border: 0; background: var(--kole-color-card-bg); color: var(--kole-color-text-body); font-family: inherit; font-size: var(--kole-m-font-size-body); line-height: 1.3; text-align: center; cursor: pointer; touch-action: manipulation; } .kole-m-actionsheet__action:focus-visible { outline: 2px solid var(--kole-color-focus-ring); outline-offset: -2px; } .kole-m-actionsheet__action:active { background: var(--kole-color-brand-bg); } /* 变体 tone=danger:危险操作用错误色 */ .kole-m-actionsheet__action--danger { color: var(--kole-color-error); } .kole-m-actionsheet__action:disabled, .kole-m-actionsheet__action.is-disabled { color: var(--kole-color-text-disabled); cursor: not-allowed; } .kole-m-actionsheet__action:disabled:active { background: var(--kole-color-card-bg); } /* 变体 cancel=separate:取消独立成块,与操作项之间留出间隔 */ .kole-m-actionsheet__cancel { margin-top: var(--kole-space-8); font-weight: 500; } .kole-m-actionsheet--inline .kole-m-actionsheet__cancel { margin-top: 0; } /* 演示页触发器(非组件交付样式,仅用于打开面板) */ .kole-m-actionsheet__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-actionsheet__trigger:focus-visible { outline: 2px solid var(--kole-color-focus-ring); outline-offset: 2px; }