axonyx-ui 0.0.48

Foundry CSS, JavaScript helpers, and Axonyx-native .ax components for Axonyx UI.
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

.ax-select {
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    border: 1px solid var(--ax-border);
    border-radius: var(--ax-radius-md);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--ax-surface) 82%, black),
            color-mix(in srgb, var(--ax-surface-2) 54%, black)
        );
    color: var(--ax-text);
    font-family: var(--ax-font-sans);
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 0.7rem 2.35rem 0.7rem 0.85rem;
    box-shadow:
        inset 0 1px 7px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(255, 255, 255, 0.015);
    color-scheme: dark;
    cursor: pointer;
    background-image:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--ax-surface) 82%, black),
            color-mix(in srgb, var(--ax-surface-2) 54%, black)
        ),
        linear-gradient(45deg, transparent 50%, var(--ax-primary) 50%),
        linear-gradient(135deg, var(--ax-primary) 50%, transparent 50%);
    background-position:
        0 0,
        calc(100% - 1rem) 50%,
        calc(100% - 0.72rem) 50%;
    background-size:
        auto,
        0.34rem 0.34rem,
        0.34rem 0.34rem;
    background-repeat: no-repeat;
}

.ax-select option {
    background: color-mix(in srgb, var(--ax-surface) 92%, black);
    color: var(--ax-text);
}

.ax-select[data-size='sm'] {
    min-height: 2rem;
    padding: 0.5rem 2rem 0.5rem 0.72rem;
    font-size: 0.82rem;
}

.ax-select[data-size='lg'] {
    min-height: 3rem;
    padding: 0.82rem 2.7rem 0.82rem 1rem;
    font-size: 1rem;
}

.ax-control[data-kind='select'] .ax-select {
    padding-left: 2.5rem;
}

.ax-control[data-kind='select'][data-size='sm'] .ax-select {
    padding-left: 2.2rem;
}

.ax-control[data-kind='select'][data-size='lg'] .ax-select {
    padding-left: 2.8rem;
}

.ax-control[data-kind='select'][data-size='sm'] .ax-control__icon[data-slot='start'] {
    left: 0.72rem;
}

.ax-control[data-kind='select'][data-size='lg'] .ax-control__icon[data-slot='start'] {
    left: 1rem;
}

.ax-select:hover {
    border-color: var(--ax-border-strong);
}

.ax-select:focus {
    outline: none;
    border-color: var(--ax-cyan);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--ax-cyan) 42%, transparent),
        inset 0 1px 7px rgba(0, 0, 0, 0.28);
}

.ax-select[data-surface='forged'] {
    border-color: var(--ax-border-strong);
    background-image:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--ax-surface-2) 82%, white),
            color-mix(in srgb, var(--ax-surface) 88%, black)
        ),
        linear-gradient(45deg, transparent 50%, var(--ax-primary) 50%),
        linear-gradient(135deg, var(--ax-primary) 50%, transparent 50%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        inset 0 -1px 0 rgba(0, 0, 0, 0.32),
        0 0 0 1px color-mix(in srgb, var(--ax-border-strong) 45%, transparent);
}

.ax-field[data-state='error'] .ax-select,
.ax-select[aria-invalid='true'] {
    border-color: var(--ax-danger);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--ax-danger) 26%, transparent),
        inset 0 1px 7px rgba(0, 0, 0, 0.28);
}

.ax-field[data-state='success'] .ax-select {
    border-color: color-mix(in srgb, var(--ax-primary) 60%, var(--ax-border));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--ax-primary) 18%, transparent),
        inset 0 1px 7px rgba(0, 0, 0, 0.28);
}

.ax-field[data-state='warning'] .ax-select {
    border-color: color-mix(in srgb, #d7a54b 64%, var(--ax-border));
    box-shadow:
        0 0 0 2px color-mix(in srgb, #d7a54b 18%, transparent),
        inset 0 1px 7px rgba(0, 0, 0, 0.28);
}

.ax-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}