memEx/assets/css/components.scss

@layer components {
  .input {
    @apply rounded-lg px-4 py-2 border focus:outline-none;
    @apply shadow-sm focus:shadow-lg;
    @apply transition-all duration-300 ease-in-out;
  }

  .input-primary {
    @apply bg-primary-900;
    @apply border-primary-600 hover:border-primary-500 active:border-primary-400;
    @apply text-primary-400;
  }

  .checkbox {
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    padding: 10px;
    margin: 1em auto;
  }

  .title {
    @apply leading-5 tracking-wide;
  }

  .btn {
    @apply focus:outline-none px-4 py-2 rounded-lg;
    @apply shadow-sm focus:shadow-lg;
    @apply border;
    @apply transition-all duration-300 ease-in-out;
  }

  .btn-primary {
    @apply bg-primary-900 focus:bg-primary-900 active:bg-primary-800;
    @apply border-primary-600 hover:border-primary-500 active:border-primary-400;
    @apply text-primary-400;
  }

  .btn-alert {
    @apply bg-red-600 focus:bg-red-700 active:bg-red-800;
    @apply border-red-600 focus:border-red-700 active:border-red-800;
    @apply text-primary-400;
  }

  .hr {
    @apply border border-primary-400 w-full max-w-2xl;
  }

  .hr-light {
    @apply border border-primary-600 w-full max-w-2xl;
  }

  .link {
    @apply hover:underline;
    @apply transition-colors duration-500 ease-in-out;
  }

  .alert {
    @apply bg-primary-900;
    @apply border-primary-600 hover:border-primary-500 active:border-primary-400;
    @apply text-primary-400;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
  }

  .alert-info {
    @apply text-primary-400;
  }

  .alert-warning {
    color: #8a6d3b;
  }

  .alert-danger {
    color: #a94442;
  }

  .alert p {
    margin-bottom: 0;
  }

  .alert:empty {
    @apply hidden;
  }
}