cra-template-bod/template/src/components/Counter/index.module.css

The advanced TypeScript template for Bod CLI.

.row {
  @apply mb-4 flex items-center justify-center;
}

.row > button {
  @apply ml-1 mr-2;
}

.value {
  @apply mt-0.5 px-4 text-8xl;

  font-family: 'Courier New', Courier, monospace;
}

.textbox {
  @apply mr-1 w-16 border border-primary p-1 text-center text-4xl;
}

.button,
.async-button {
  @apply px-3 pb-1 text-4xl;

  color: rgb(112 76 182);
  appearance: none;
  cursor: pointer;
  background: none;
  background-color: rgb(112 76 182 / 10%);
  border: 2px solid transparent;
  border-radius: 2px;
  outline: none;
}

.async-button {
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .button,
  .async-button {
    transition: all 0.15s;
  }
}

.button:hover,
.button:focus,
.async-button:hover,
.async-button:focus {
  border: 2px solid rgb(112 76 182 / 40%);
}

.button:active,
.async-button:active {
  background-color: rgb(112 76 182 / 20%);
}

.async-button::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background-color: rgb(112 76 182 / 15%);
  opacity: 0;
}

.async-button:active::after {
  width: 0%;
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .async-button::after {
    transition:
      width 1s linear,
      opacity 0.5s ease 1s;
  }

  .async-button:active::after {
    transition: 0s;
  }
}