zarm/es/stepper/style/index.css

基于 React 的移动端UI库

.za-stepper {
  --height: var(--za-stepper-height, 28px);
  --input-width: var(--za-stepper-input-width, 56px);
  --input-background: var(--za-stepper-input-background, transparent);
  --input-border-width: var(--za-stepper-input-border-width, 1px);
  --input-border-color: var(--za-stepper-input-border-color, transparent);
  --input-border-radius: var(--za-stepper-input-border-radius, var(--za-radius-md));
  --input-text-color: var(--za-stepper-input-text-color, var(--za-color-text));
  --input-font-size: var(--za-stepper-input-font-size, var(--za-font-size-md));
  --input-disabled-text-color: var(--za-stepper-input-disabled-text-color, var(--za-color-text-disabled));
  --input-disabled-opacity: var(--za-stepper-input-disabled-opacity, var(--za-opacity-disabled));
  --input-margin: var(--za-stepper-input-margin, 0 4px);
  --input-padding: var(--za-stepper-input-padding, 0 8px);
  --icon-font-size: var(--za-stepper-icon-font-size, 12px);
  align-items: center;
  display: flex;
}
.za-stepper .za-input input {
  height: 100%;
  text-align: center;
  -moz-appearance: textfield;
}
.za-stepper .za-input input::-webkit-outer-spin-button, .za-stepper .za-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.za-stepper .za-input--disabled input {
  color: var(--input-text-color);
  -webkit-text-fill-color: var(--input-text-color);
  cursor: auto;
}

.za-stepper .za-input__content {
  height: 100%;
  flex: 1;
}

.za-stepper .za-custom-input--disabled__virtual-input {
  color: var(--input-text-color);
  -webkit-text-fill-color: var(--input-text-color);
  cursor: auto;
}

.za-stepper .za-custom-input__content {
  height: 100%;
  flex: 1;
}

.za-stepper .za-custom-input__virtual-input {
  justify-content: center;
  align-items: center;
}

.za-stepper__sub, .za-stepper__plus {
  width: var(--height);
  padding: 0;
}
.za-stepper__sub .za-icon, .za-stepper__plus .za-icon {
  font-size: var(--icon-font-size);
}

.za-stepper__input {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: var(--input-width);
  height: var(--height);
  margin: var(--input-margin);
  padding: var(--input-padding);
  font-size: var(--input-font-size);
  background: var(--input-background);
  color: var(--input-text-color);
  text-align: center;
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: 0;
  outline: 0;
  -webkit-appearance: none;
}

.za-stepper--disabled .za-stepper__input input {
  color: var(--input-disabled-text-color);
  -webkit-text-fill-color: var(--input-disabled-text-color);
  opacity: var(--input-disabled-opacity);
}

.za-stepper--radius .za-stepper__input {
  border-radius: var(--input-border-radius);
}

.za-stepper--circle .za-stepper__input {
  border-radius: var(--height);
}

.za-stepper--lg {
  --height: var(--za-stepper-height, 36px);
  --input-width: var(--za-stepper-input-width, 72px);
  --input-margin: var(--za-stepper-input-margin, 0 6px);
  --input-padding: var(--za-stepper-input-padding, 0 8px);
  --icon-font-size: var(--za-stepper-icon-font-size, 14px);
}