livebook/assets/css/components.css

/* Buttons */

.button-base {
  @apply px-4 py-2 bg-white rounded-md border border-gray-300 font-medium text-gray-700;
}

.button-base:not(:disabled) {
  @apply hover:bg-gray-50;
}

.button-base:disabled {
  @apply opacity-50 cursor-default;
}

.button-sm {
  @apply px-3 py-1;
}

.button-danger {
  @apply border border-red-300 text-red-500;
}

.button-danger:not(:disabled) {
  @apply hover:bg-red-50;
}

.button-primary {
  @apply border-0 bg-blue-400 text-white;
}

.button-primary:not(:disabled) {
  @apply hover:bg-blue-500;
}

/* Form fields */

.input-base {
  @apply w-full px-3 py-3 bg-white rounded-md placeholder-gray-400 text-gray-700;
}

.checkbox-base {
  @apply h-5 w-5 appearance-none border border-gray-300 rounded text-blue-400 cursor-pointer;
}

.checkbox-base:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.radio-button-group {
  @apply flex;
}

.radio-button-group .radio-button:first-child .radio-button__label {
  @apply rounded-l-md border-l;
}

.radio-button-group .radio-button:last-child .radio-button__label {
  @apply rounded-r-md;
}

.radio-button .radio-button__label {
  @apply block px-3 py-1 cursor-pointer border border-l-0 border-gray-700 text-gray-700 hover:bg-gray-100;
}

.radio-button .radio-button__input {
  @apply hidden;
}

.radio-button .radio-button__input[checked] + .radio-button__label {
  @apply bg-gray-700 text-white;
}

/* Custom scrollbars */

.tiny-scrollbar::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
}

.tiny-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 0.25rem;
  @apply bg-gray-400;
}

.tiny-scrollbar::-webkit-scrollbar-track {
  @apply bg-gray-100;
}