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

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

.file-input {
  display: grid;
  grid-template-areas: "label required" "input input" "helper_text helper_text";
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: scale(2);
  align-items: center;

  &__label {
    grid-area: label;
  }

  &__helper-text {
    grid-area: helper_text;
    color: var(--color-text-secondary);
  }

  &__required {
    grid-area: required;
    color: var(--color-text-secondary);
  }

  &__input {
    grid-area: input;
  }

  &__image-preview {
    border-bottom: sp(1) solid var(--color-border);
    height: sp(200);
    object-fit: scale-down;
    background: var(--surface);
  }

  &--error {
    .card {
      border-color: var(--color-destructive);
    }

    & .text {
      color: var(--color-destructive);
    }
  }
}