/* Kole UI Mobile · PullRefresh 样式 — 对齐移动端规格 §4 下拉刷新:Pointer Events 手势,位移以纵向为主;阈值默认 60px; 指示区 role=status + aria-live=polite,状态文字变化被读屏播报。 */ .kole-m-pullrefresh { /* 组件级变量:阈值与实时位移(业务侧可覆盖阈值) */ --kole-m-pullrefresh-threshold: 60px; --kole-m-pullrefresh-offset: 0px; position: relative; overflow: hidden; font-family: var(--kole-font-family); color: var(--kole-color-text-body); } .kole-m-pullrefresh__indicator { display: flex; align-items: center; justify-content: center; gap: var(--kole-space-8); height: var(--kole-m-pullrefresh-offset); overflow: hidden; color: var(--kole-color-text-secondary); font-size: var(--kole-m-font-size-label); transition: height var(--kole-m-duration-refresh) var(--kole-ease-out); } /* 刷新中:指示区固定为阈值高度,旋转图标常显 */ .kole-m-pullrefresh.is-refreshing .kole-m-pullrefresh__indicator { height: var(--kole-m-pullrefresh-threshold); } /* 完成提示:短暂显示后由业务侧复位 */ .kole-m-pullrefresh.is-done .kole-m-pullrefresh__indicator { height: var(--kole-m-pullrefresh-threshold); color: var(--kole-color-success); } .kole-m-pullrefresh__spinner { flex: 0 0 auto; width: var(--kole-icon-size-20); height: var(--kole-icon-size-20); box-sizing: border-box; border: 2px solid var(--kole-color-border); border-top-color: var(--kole-color-brand); border-radius: 50%; } .kole-m-pullrefresh.is-pulling .kole-m-pullrefresh__spinner { transform: rotate(calc(var(--kole-m-pullrefresh-offset) * 3)); } .kole-m-pullrefresh.is-ready .kole-m-pullrefresh__spinner, .kole-m-pullrefresh.is-refreshing .kole-m-pullrefresh__spinner, .kole-m-pullrefresh.is-done .kole-m-pullrefresh__spinner { animation: kole-m-pullrefresh-spin 800ms linear infinite; } .kole-m-pullrefresh.is-ready .kole-m-pullrefresh__spinner { border-top-color: var(--kole-color-success); } .kole-m-pullrefresh.is-done .kole-m-pullrefresh__spinner { border-color: var(--kole-color-success); animation: none; } @keyframes kole-m-pullrefresh-spin { to { transform: rotate(360deg); } } .kole-m-pullrefresh__content { transform: translateY(var(--kole-m-pullrefresh-offset)); transition: transform var(--kole-m-duration-refresh) var(--kole-ease-out); /* 纵向滚动交给浏览器,横向手势不被本组件截获 */ touch-action: pan-y; } /* 非手势的等价入口(规格 §4.6):手势不可用时仍能刷新 */ .kole-m-pullrefresh__fallback { display: block; box-sizing: border-box; width: 100%; min-height: var(--kole-m-touch-target); border: 0; border-top: 1px solid var(--kole-color-border); background: var(--kole-color-card-bg); color: var(--kole-color-brand); font-family: inherit; font-size: var(--kole-m-font-size-label); cursor: pointer; touch-action: manipulation; } .kole-m-pullrefresh__fallback:focus-visible { outline: 2px solid var(--kole-color-focus-ring); outline-offset: 2px; } .kole-m-pullrefresh__fallback:active { background: var(--kole-color-brand-bg); }