livebook/assets/css/components.css

@layer components {
  /* Buttons */

  .button-base {
    @apply px-5 py-2 rounded-lg border border-transparent font-medium text-sm whitespace-nowrap;
  }

  .button-blue {
    @apply border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:bg-blue-700;
  }

  .button-red {
    @apply border-transparent bg-red-600 text-white hover:bg-red-700 focus:bg-red-700;
  }

  .button-gray {
    @apply border-gray-200 bg-gray-100 text-gray-600 hover:bg-gray-200 focus:bg-gray-200;
  }

  .button-outlined-blue {
    @apply bg-blue-50 border-blue-600 text-blue-600 hover:bg-blue-100 focus:bg-blue-100;
  }

  .button-outlined-red {
    @apply bg-red-50 border-red-600 text-red-600 hover:bg-red-100 focus:bg-red-100;
  }

  .button-outlined-gray {
    @apply bg-white border-gray-300 text-gray-600 hover:bg-gray-100 focus:bg-gray-100;
  }

  .button-base:disabled {
    @apply cursor-default pointer-events-none border-transparent bg-gray-100 text-gray-400;
  }

  .button-small {
    @apply px-2 py-1 bg-gray-50 border-gray-200 text-gray-600 hover:bg-gray-100 focus:bg-gray-100;
  }

  .button-square-icon {
    @apply p-2 flex items-center justify-center;
  }

  .button-square-icon i {
    @apply text-xl leading-none;
  }

  .choice-button {
    @apply px-5 py-2 rounded-lg border text-gray-700 bg-white border-gray-200;
  }

  .choice-button.active {
    @apply bg-blue-100 border-blue-600;
  }

  .icon-button {
    @apply p-1 flex items-center justify-center text-gray-500 hover:text-gray-900 rounded-full;
  }

  .icon-button:focus {
    @apply bg-gray-100;
  }

  .icon-button:disabled,
  .icon-button.disabled {
    @apply cursor-default pointer-events-none text-gray-300;
  }

  .icon-button i {
    line-height: 1;
  }

  .icon-outlined-button {
    @apply rounded-full border-2;
  }

  /* Links */

  .link {
    @apply font-medium underline text-gray-900 hover:no-underline;
  }

  /* Form fields */

  .input {
    @apply w-full px-3 py-2 bg-gray-50 text-sm border border-gray-200 rounded-lg placeholder-gray-400 text-gray-600;
  }

  .input[type="color"] {
    @apply py-0 w-16;
  }

  .input--error {
    @apply bg-red-50 border-red-600 text-red-600;
  }

  .input-range {
    height: 8px;
    @apply appearance-none bg-gray-200 rounded-lg;
  }

  .input-range::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    @apply appearance-none border-transparent bg-blue-600 hover:bg-blue-700 cursor-pointer rounded-xl;
  }

  .input-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    @apply appearance-none border-transparent bg-blue-600 hover:bg-blue-700 cursor-pointer rounded-xl;
  }

  .input-select {
    @apply w-60;
  }

  .input-label {
    @apply mb-0.5 text-sm text-gray-800 font-medium;
  }

  .input-error {
    @apply mt-2 text-red-600 italic text-xs;
  }

  .switch-button {
    @apply relative inline-block w-14 h-7 mr-2 select-none transition;
  }

  .switch-button--disabled {
    @apply pointer-events-none opacity-50;
  }

  .switch-button__checkbox {
    @apply appearance-none absolute block w-7 h-7 rounded-full bg-gray-400 border-[5px] border-gray-100 cursor-pointer transition-all duration-300;
  }

  .switch-button__bg {
    @apply block h-full w-full rounded-full bg-gray-100 cursor-pointer transition-all duration-300;
  }

  .switch-button__checkbox:checked {
    @apply bg-white border-blue-600;
    transform: translateX(100%);
  }

  .switch-button__checkbox:checked + .switch-button__bg {
    @apply bg-blue-600;
  }

  .radio-base {
    appearance: none;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='10' cy='10' r='9.5' stroke='%23CAD5E0' fill='white' /%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .radio-base:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='10' cy='10' r='9.5' stroke='%233E64FF' fill='white' /%3e%3ccircle cx='10' cy='10' r='6' fill='%233E64FF' /%3e%3c/svg%3e");
  }

  .checkbox-base {
    @apply h-5 w-5 appearance-none border border-gray-300 rounded text-blue-600 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;
  }

  /* 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;
  }

  /* Tabs */

  .tabs {
    @apply w-full flex;
  }

  .tabs .tab {
    @apply flex items-center space-x-2 px-3 py-2 border-b-2 text-gray-400 border-gray-100;
  }

  .tabs .tab.active {
    @apply text-blue-600 border-blue-600;
  }

  /* Toggleable menu */

  .menu {
    @apply absolute z-30 rounded-lg bg-white flex flex-col py-2 mt-1;
    box-shadow: 0px 15px 99px rgba(13, 24, 41, 0.15);
  }

  .menu.right {
    @apply right-0;
  }

  .menu.left {
    @apply left-0;
  }

  .menu-item {
    @apply w-full flex space-x-3 px-5 py-2 items-center hover:bg-gray-100 focus:bg-gray-100 whitespace-nowrap;
  }

  .menu-item:disabled {
    @apply pointer-events-none opacity-50;
  }

  .menu-item--disabled {
    @apply pointer-events-none opacity-50;
  }

  /* Boxes */

  .error-box {
    @apply rounded-lg px-4 py-2 bg-red-100 text-red-400 font-medium;
  }
}