aurora-admin/frameworks-mobile/Stepper.css

/* Kole UI Mobile · Stepper 样式 — 对齐移动端规格 §30
   步进器：减号 / 值 / 加号三段等分，控件高 44px（触控最小边长）；
   到边界时按钮**留在原位置灰**（不隐藏）—— 触屏上按钮消失会让用户以为界面坏了；
   size=small 视觉 36px，用 --kole-m-hit-slack 把热区外扩回 44px（令牌的既定用途）。 */

.kole-m-stepper {
  /* 组件级变量：业务侧可在容器上覆盖 */
  --kole-m-stepper-height: var(--kole-m-touch-target);  /* 控件高（≥ 44px 触控最小边长） */
  --kole-m-stepper-btn: var(--kole-m-touch-target);      /* 单个加减按钮边长（44px 见方） */
  --kole-m-stepper-radius: var(--kole-radius-base);      /* round=false 时的圆角 */
  box-sizing: border-box;
  display: inline-flex;
  align-items: stretch;
  min-height: var(--kole-m-stepper-height);
  border: 1px solid var(--kole-color-border);
  border-radius: var(--kole-m-stepper-radius);
  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.4;
  /* 不用 overflow: hidden 裁圆角 —— 那会把 size=small 的热区外扩（::after）一起裁掉。
     圆角改为分别画在两个按钮的内侧角上，见下面的 border-radius。 */
}

/* 变体 round=true：全圆角（购物车一类轻量场合） */
.kole-m-stepper--round { --kole-m-stepper-radius: 999px; }

/* 变体 size=small：视觉 36px 紧凑；热区用 hit-slack 外扩回 44px */
.kole-m-stepper--small {
  --kole-m-stepper-height: 36px;
  --kole-m-stepper-btn: 36px;
}

.kole-m-stepper--small .kole-m-stepper__minus,
.kole-m-stepper--small .kole-m-stepper__plus {
  position: relative;
}

.kole-m-stepper--small .kole-m-stepper__minus::after,
.kole-m-stepper--small .kole-m-stepper__plus::after {
  content: '';
  position: absolute;
  inset: calc(var(--kole-m-hit-slack) * -1);
}

.kole-m-stepper__minus,
.kole-m-stepper__plus {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--kole-m-stepper-btn);
  min-height: var(--kole-m-stepper-height);
  padding: 0;
  border: 0;
  background: var(--kole-color-table-header-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-stepper__minus:active:not(:disabled),
.kole-m-stepper__plus:active:not(:disabled) { background: var(--kole-color-brand-bg); }

.kole-m-stepper__minus { border-right: 1px solid var(--kole-color-border); }
.kole-m-stepper__plus { border-left: 1px solid var(--kole-color-border); }

/* 圆角画在两端按钮的外侧角上（替代根元素的 overflow: hidden，那样会裁掉热区外扩） */
.kole-m-stepper__minus {
  border-top-left-radius: calc(var(--kole-m-stepper-radius) - 1px);
  border-bottom-left-radius: calc(var(--kole-m-stepper-radius) - 1px);
}

.kole-m-stepper__plus {
  border-top-right-radius: calc(var(--kole-m-stepper-radius) - 1px);
  border-bottom-right-radius: calc(var(--kole-m-stepper-radius) - 1px);
}

/* 状态：到边界（或整组 disabled）→ 按钮原位置灰，不隐藏 */
.kole-m-stepper__minus:disabled,
.kole-m-stepper__plus:disabled {
  color: var(--kole-color-text-disabled);
  background: var(--kole-color-disabled-bg);
  cursor: not-allowed;
}

/* 值区：只读态是文本（role="spinbutton"），editable 时是数字输入框 */
.kole-m-stepper__value {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  min-height: var(--kole-m-stepper-height);
  padding: 0 var(--kole-space-8);
  color: var(--kole-color-text-body);
  /* 数字用等宽数字：加减时宽度不跳，视觉不抖 */
  font-variant-numeric: tabular-nums;
  text-align: center;
}

input.kole-m-stepper__value {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
}

input.kole-m-stepper__value:focus-within { background: var(--kole-color-brand-bg); }

.kole-m-stepper__unit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding-right: var(--kole-space-12);
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
}

/* 状态 disabled：整组置灰 */
.kole-m-stepper.is-disabled {
  background: var(--kole-color-disabled-bg);
  border-color: var(--kole-color-border);
}

.kole-m-stepper.is-disabled .kole-m-stepper__value { color: var(--kole-color-text-disabled); }

.kole-m-stepper__minus:focus-visible,
.kole-m-stepper__plus:focus-visible {
  outline: 2px solid var(--kole-color-focus-ring);
  outline-offset: -2px;
}