viewy 2.0.6

A web UI toolkit that combine the advantages of a design system and an ui library.
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187

.picker {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-action: none;
    touch-action: none;
    width: max-content;
    gap: sp(4);

    &--segmented {
        &__option-list {
            &__radio {
                display: none;
            }

            &__option {
                cursor: pointer;
                flex-grow: 1;
                text-align: center;
                transition:
                    background 150ms,
                    border 150ms;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: sp(8) sp(12);
                border: sp(1) solid var(--color-border);
                border-left: none;
                border-right: none;
                appearance: none;

                .icon,
                .text {
                    transition: color 150ms;
                    color: var(--color-accent);
                }

                &:last-of-type {
                    border-right: sp(1) solid var(--color-border);
                    border-radius: 0 sp($border-radius * (3/4))
                        sp($border-radius * (3/4)) 0;
                }

                &:first-of-type {
                    border-left: sp(1) solid var(--color-border);
                    border-radius: sp($border-radius * (3/4)) 0 0
                        sp($border-radius * (3/4));
                }

                &:hover {
                    border-color: var(--color-border-hover);
                    background: var(--color-hover);
                }

                &:active {
                    background: var(--color-active);
                    border-color: var(--color-border-hover);
                }
            }

            &__radio:checked + &__option {
                border-color: var(--color-accent);
                background: var(--color-accent);
                color: var(--color-text-on-accent);

                .icon,
                .text {
                    color: var(--color-text-on-accent);
                }
            }
        }
    }

    &--radiogroup {
        overflow: visible;

        label {
            cursor: pointer;
        }

        input[type="radio"] {
            cursor: pointer;
            margin: 0;
            -moz-appearance: none;
            appearance: none;
            background: none;
            width: sp(20);
            height: sp(20);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: sp(2) solid var(--color-border);

            &:hover {
                border: sp(2) solid var(--color-border-hover);
            }

            &:focus {
                box-shadow: 0 0 0 sp(2) var(--color-focus);
            }

            &:checked {
                background: var(--color-accent);

                &::after {
                    display: block;
                    content: "";
                    width: sp(6);
                    height: sp(6);
                    border-radius: sp(3);
                    background: white;
                }
            }
        }
    }

    &--dropdown {
        &__input {
            position: relative;
            color: var(--color-text);
            width: 100%;
            cursor: pointer;
            list-style: none;
            display: flex;
            align-items: center;
            border: sp(1) solid var(--color-border);
            border-radius: sp($border-radius);
            padding: sp(8) sp(12);
            grid-gap: scale(3);
            min-width: sp(100);

            &::after {
                content: "";
                display: inline-block;
                width: sp(16);
                height: sp(16);
                background-repeat: no-repeat;
                background-position: center;
                @media (prefers-color-scheme: light) {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' stroke-linecap='round' fill='none' stroke-linejoin='round' stroke='black' stroke-width='3' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
                }
                @media (prefers-color-scheme: dark) {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' stroke-linecap='round' fill='none' stroke-linejoin='round' stroke='white' stroke-width='3' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
                }
            }
        }

        &__dropdown {
            .field {
                gap: 0;
            }

            &__option-list {
                max-height: sp(400);
                max-width: sp(400);
                overflow: auto;
                &__option {
                    cursor: pointer;
                    padding: sp(8) sp(12);
                    border-radius: sp($border-radius - 2);

                    input[type="radio"] {
                        display: none;
                    }

                    .icon {
                        visibility: hidden;
                    }

                    &.active .icon {
                        visibility: visible;
                    }

                    &:hover {
                        background: var(--color-accent);
                        color: var(--color-text-on-accent);
                    }
                }
            }
        }
    }
}