detaxine-ui 0.8.33

A UI Library for Leptos
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --color-primary: #32B089;
    --color-secondary: #3298B0;
    --color-warning: #E7C318;
    --color-success: #32B04A;
    --color-info: #1D9AE2;
    --color-danger: #E74C3C;
    --color-light-gray: #D2D2D2;
    --color-mid-gray: #8D8D8D;
    --color-gray: #4D4D4D;
    --color-navy: #000E1E;
    --color-navy-light: #0D1F35;
    --color-editor-dark: #252524;
    --color-contrast-white: #F0F0F0;
    --font-primary: "Inter", sans-serif;
}

@layer base {
    h1 {
        @apply text-3xl md:text-4xl font-bold leading-tight text-gray dark:text-light-gray;
    }

    h2 {
        @apply text-2xl md:text-3xl font-semibold leading-snug text-gray dark:text-light-gray;
    }

    h3 {
        @apply text-xl md:text-2xl font-semibold text-gray dark:text-light-gray;
    }

    h4 {
        @apply text-lg md:text-xl font-medium text-gray dark:text-light-gray;
    }

    h5 {
        @apply text-base md:text-lg font-medium text-gray dark:text-light-gray;
    }

    h6 {
        @apply text-sm md:text-base font-medium uppercase tracking-wide text-gray dark:text-light-gray;
    }

    ul {
        @apply list-disc list-inside;
    }

    ol {
        @apply list-decimal list-inside;
    }
}

@utility dot {
    @apply bg-slate-50 shadow-md;
}

@utility transition-max-height {
    transition-property: max-height;
}

@keyframes progress-indeterminate {
    0% {
        left: -35%;
        width: 35%;
    }

    60% {
        left: 100%;
        width: 35%;
    }

    100% {
        left: 100%;
        width: 35%;
    }
}

@utility animate-progress-indeterminate {
    animation: progress-indeterminate 1.4s ease-in-out infinite;
}

/* Autofill overrides — plain CSS, compound selectors can't go in @utility */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:not(:focus),
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--color-gray);
    caret-color: var(--color-gray);
    border-radius: inherit;
    -webkit-background-clip: padding-box;
    transition: background-color 5000s ease-in-out 0s;
}

/* Scrollbar — compound selector, stays as plain CSS */
.scrollbar-hidden::-webkit-scrollbar {
    display: none;
}

.scrollbar-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@source inline("font-bold py-2 px-4 cursor-pointer rounded-[5px] disabled:opacity-50 disabled:cursor-not-allowed flex flex-row items-center justify-center gap-2 flex-row-reverse border border-light-gray border-l-0 rounded-l-[5px] rounded-r-[5px] relative overflow-hidden transition-transform duration-500 ease-in-out absolute left-0 top-1/2 transform -translate-y-1/2 bg-transparent text-white hover:bg-opacity-75 transition-opacity z-10 h-full right-0 bottom-4 left-1/2 -translate-x-1/2 space-x-2 w-6 h-[2.5px] justify-between gap-4 mb-2 p-2 rounded ring ring-primary hover:bg-primary hover:text-light-gray bg-primary text-light-gray transition-max-height duration-700 ease-in-out max-h-svh ml-2 h-0 border-[1px] flex-wrap border-b-[1px] p-[10px] min-h-[200px] max-h-[45svh] overflow-y-auto p-3 prose focus:rounded-b-none outline-secondary hidden hover:bg-light-gray w-full flex-col overflow-x-auto table-fixed border-separate min-w-full h-full mt-4 mb-4 text-md border-b text-nowrap text-left min-w-[150px] text-primary text-wrap px-0 hover:bg-primary hover:text-contrast-white text-danger hover:bg-danger p-[24px] py-2 flex-1 justify-end text-xs mr-2 hover:bg-secondary text-contrast-white inline-flex rounded-full font-medium top-0 right-0 translate-x-1/2 px-3 text-center text-sm hover:opacity-75 p-1 inline-block size-6 animate-ping h-full w-full bg-warning/20 text-warning bg-info/20 text-info bg-success/20 text-success bg-danger/20 text-danger bg-primary/20 ml-4 mb-4 text-secondary mt-2 object-contain saturate-200 fixed inset-0 bg-gray opacity-50 animate-fade-in animate-modal-in bg-contrast-white dark:bg-navy shadow-lg min-w-sm mt-auto gap-[20px] border-t bg-mid-gray text-warning text-info text-success z-20 z-30 w-max min-w-32 max-w-[calc(100vw-1rem)] w-[20px] h-[20px] border-l border-t rotate-45 z-50 animate-spin opacity-25 opacity-75 bg-light-gray leading-tight shrink-0 border-2 border-mid-gray shadow-sm focus:ring-0 checked:bg-secondary checked:border-secondary accent-secondary items-start h-1 h-2 h-4 animate-progress-indeterminate transition-all duration-300 bottom-full mb-2 top-full mt-2 -bottom-[10px] rotate-180 -top-[10px] left-4 translate-x-0 right-4 border-success bg-success/20 border-warning bg-warning/20 border-info bg-info/20 border-danger bg-danger/20 border-primary bg-primary/20 border-border bg-surface py-2.5 rounded-lg h-8 w-8 bg-primary/10 min-w-0 truncate text-foreground text-muted uppercase tracking-wide gap-1.5 self-start underline-offset-2 hover:underline h-3 w-3 sr-only rounded-full py-1 px-2 p-4 space-y-3 ml-1 mt-0.5 box-border focus-within:ring-2 focus-within:ring-secondary focus-within:border-transparent flex-grow h-[45px] appearance-none form-input ring-0 focus:ring-2 focus:ring-secondary focus:border-transparent italic w-14 translate-x-full ml-3 block opacity-0 left-1 bottom-1 h-6 bg-slate-50 shadow-md dot focus:outline-none w-[300px] max-h-[400px] overflow-auto max-w-md border-none grid grid-cols-4 gap-1 grid-cols-7 text-center opacity-30 hover:bg-blue-200 text-gray-300 bg-blue-200 m-1 bg-secondary size-5 bg-warning/50 bg-info/50 bg-success/50 bg-danger/50 bg-primary/50 -rotate-90 z-0 z-9 bg-inherit mx-2 h-px border-b-4 pb-2 border-transparent");