@wallet-ui/tailwind/dist/index.css

Tailwind CSS for Wallet UI

/* src/wallet-ui-base-button.css */
.wallet-ui-base-button {
  @apply bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700;
  @apply text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white;
  @apply border border-gray-200 dark:border-gray-700;
  @apply rounded-md shadow-sm cursor-pointer;
  @apply flex items-center justify-center gap-2 whitespace-nowrap;
  @apply disabled:cursor-not-allowed disabled:opacity-50;
}
.wallet-ui-base-button.sm {
  @apply px-3 py-1.5;
  @apply text-sm;
  @apply font-normal;
}
.wallet-ui-base-button.md {
  @apply px-4 py-3;
  @apply text-base;
  @apply font-semibold;
}
.wallet-ui-base-button.lg {
  @apply px-6 py-4;
  @apply text-lg;
  @apply font-bold;
}
.sm .wallet-ui-base-button-left-section {
  @apply mr-1;
  @apply text-xs;
}
.md .wallet-ui-base-button-left-section {
  @apply mr-2;
  @apply text-sm;
}
.lg .wallet-ui-base-button-left-section {
  @apply mr-4;
  @apply text-xl;
}
.sm .wallet-ui-base-button-right-section {
  @apply ml-1;
  @apply text-xs;
}
.md .wallet-ui-base-button-right-section {
  @apply ml-2;
  @apply text-sm;
}
.lg .wallet-ui-base-button-right-section {
  @apply ml-4;
  @apply text-xl;
}

/* src/wallet-ui-base-dropdown.css */
.wallet-ui-base-dropdown {
}
.wallet-ui-base-dropdown-list {
  @apply bg-gray-100 dark:bg-gray-800;
  @apply border border-gray-200 dark:border-gray-700;
  @apply rounded-md;
}
.wallet-ui-base-dropdown-item {
  @apply flex items-center gap-2;
  @apply bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700;
  @apply text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white;
  @apply px-4 py-2;
  @apply cursor-pointer;
}
.wallet-ui-base-dropdown-item-left-section {
  @apply mr-1;
}
.wallet-ui-base-dropdown-item-right-section {
  @apply ml-1;
}

/* src/wallet-ui-base-modal.css */
[data-scope=dialog][data-part=backdrop] {
  @apply fixed top-0 left-0 bottom-0 w-full z-20;
  @apply bg-black/40 dark:bg-black/70;
}
[data-scope=dialog][data-part=positioner] {
  @apply fixed top-0 left-0 bottom-0 w-full z-20;
  @apply flex items-center justify-center;
}
[data-scope=dialog][data-part=content] {
  @apply w-full overflow-hidden shadow-lg;
  @apply bg-white dark:bg-gray-900;
  @apply border border-gray-100 dark:border-gray-900;
  @apply rounded-xl outline-0;
}
[data-scope=dialog][data-part=content] header {
  @apply flex items-center justify-end;
  @apply pb-4;
}
[data-scope=dialog][data-part=description] {
  @apply flex items-center justify-center;
  @apply text-center text-gray-900 dark:text-gray-200;
}
[data-scope=dialog][data-part=close-trigger] {
  @apply border border-gray-500/40 dark:border-gray-600/40;
  @apply cursor-pointer hover:bg-gray-500/40 dark:hover:bg-gray-600/40;
  @apply flex items-center justify-center;
  @apply text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white;
}
[data-scope=dialog][data-part=content][data-state=open] {
  animation: anim-scale-in 300ms ease-out;
}
[data-scope=dialog][data-part=content][data-state=closed] {
  animation: anim-scale-out 200ms ease-in;
}
[data-scope=dialog][data-part=content].sm {
  @apply max-w-3xs;
  @apply p-2 rounded-md;
}
[data-scope=dialog][data-part=content].md {
  @apply max-w-sm mx-4;
  @apply p-2 rounded-lg;
}
[data-scope=dialog][data-part=content].lg {
  @apply max-w-lg mx-auto;
  @apply p-4 rounded-xl;
}
[data-scope=dialog][data-part=content].sm header {
  @apply pb-2;
  @apply text-sm;
}
[data-scope=dialog][data-part=content].md header {
  @apply pb-4;
  @apply text-2xl;
}
[data-scope=dialog][data-part=content].lg header {
  @apply pb-4;
  @apply text-3xl;
}
.sm [data-scope=dialog][data-part=close-trigger] {
  @apply h-6 w-6 rounded-full;
}
.md [data-scope=dialog][data-part=close-trigger] {
  @apply h-8 w-8 rounded-full;
}
.lg [data-scope=dialog][data-part=close-trigger] {
  @apply h-10 w-10 rounded-full;
}
.sm [data-scope=dialog][data-part=description] {
  @apply pb-2 px-4;
  @apply text-sm;
}
.md [data-scope=dialog][data-part=description] {
  @apply pb-8 px-16;
  @apply text-2xl;
}
.lg [data-scope=dialog][data-part=description] {
  @apply pb-8 px-16;
  @apply text-3xl;
}

/* src/wallet-ui-icon.css */
.wallet-ui-list-icon {
  @apply border-0;
}
.wallet-ui-list-icon.sm {
  @apply rounded-xs;
  @apply h-[16px] w-[16px];
}
.wallet-ui-list-icon.md {
  @apply rounded-md;
  @apply h-[24px] w-[24px];
}
.wallet-ui-list-icon.lg {
  @apply rounded-lg;
  @apply h-[32px] w-[32px];
}

/* src/wallet-ui-label.css */
.wallet-ui-list-label {
  @apply text-gray-500 dark:text-gray-200;
}
.wallet-ui-list-label.sm {
  @apply text-xs;
  @apply font-light;
}
.wallet-ui-list-label.md {
  @apply text-base;
  @apply font-normal;
}
.wallet-ui-list-label.lg {
  @apply text-xl;
  @apply font-semibold;
}

/* src/wallet-ui-list-button.css */
.wallet-ui-list-button {
  @apply flex items-center gap-2;
  @apply whitespace-nowrap;
  @apply cursor-pointer select-none appearance-none disabled:cursor-not-allowed disabled:opacity-50;
  @apply hover:bg-gray-200 dark:hover:bg-gray-800;
}
.wallet-ui-list-button.sm {
  @apply px-1 py-1 rounded-md;
}
.wallet-ui-list-button.md {
  @apply px-2 py-2 rounded-lg;
}
.wallet-ui-list-button.lg {
  @apply px-3 py-3 rounded-xl;
}

/* src/wallet-ui-list.css */
.wallet-ui-list {
  @apply flex flex-col;
}
.wallet-ui-list.sm {
  @apply gap-1;
}
.wallet-ui-list.md {
  @apply gap-2;
}
.wallet-ui-list.lg {
  @apply gap-3;
}

/* src/index.css */
@reference "tailwindcss";
@keyframes anim-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes anim-scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}
/*# sourceMappingURL=index.css.map */