zarm/lib/keyboard/style/index.css

基于 React 的移动端UI库

.za-keyboard {
  --background: var(--za-keyboard-background, #d8d8d8);
  --item-background: var(--za-keyboard-item-background, #fff);
  --item-active-background: var(--za-keyboard-item-active-background, rgba(162, 165, 176, 0.8));
  --item-gap: var(--za-keyboard-item-gap, 6px);
  --item-height: var(--za-keyboard-item-height, 52px);
  --item-font-size: var(--za-keyboard-item-font-size, 30px);
  --item-border-radius: var(--za-keyboard-item-border-radius, 5px);
  --item-box-shadow: var(--za-keyboard-item-box-shadow, 0 1px 0 #898a8d);
  --ok-background: var(--za-keyboard-ok-background, var(--za-theme-primary));
  --ok-font-size: var(--za-keyboard-ok-font-size, 20px);
  --ok-text-color: var(--za-keyboard-ok-text-color, #fff);
  --opacity-disabled: var(--za-keyboard-opacity-disabled, var(--za-opacity-disabled));
  display: grid;
  gap: var(--item-gap);
  background: var(--background);
  user-select: none;
  padding: var(--item-gap);
}
.za-keyboard__item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--item-font-size);
  color: var(--item-text-color);
  background: var(--item-background);
  height: var(--item-height);
  border-radius: var(--item-border-radius);
  box-shadow: var(--item-box-shadow);
  user-select: none;
}
.za-keyboard__item:not(.za-keyboard__item--disabled):not(.za-keyboard__item--blank):active {
  background: var(--item-active-background);
  box-shadow: none;
}
.za-keyboard__item--ok {
  background: var(--ok-background);
  font-size: var(--ok-font-size);
  color: var(--ok-text-color);
}

.za-keyboard__item--blank {
  background: transparent;
  box-shadow: none;
}

.za-keyboard__item--disabled, .za-keyboard__item--disabled:hover, .za-keyboard__item--disabled:active {
  opacity: var(--opacity-disabled);
}