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

.color-picker {
  display: flex;
  flex-direction: column;
  -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);

  &--palette {
    &--option-list {
      display: flex;
      flex-direction: row;
      gap: sp(8);

      &--radio {
        display: none;

        &:checked + label {
          box-shadow: 0px 0px 0px 2px var(--color-accent);
        }
      }

      &--swatch {
        cursor: pointer;
        width: sp(24);
        height: sp(24);
        border-radius: sp($border-radius / 2);
        background: currentColor;
        border: 2px solid var(--background);
        box-shadow: 0px 0px 0px 2px var(--color-border);
      }
    }
  }

  &--free {
    input[type="color"] {
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: sp(24);
      height: sp(24);
      border-radius: sp($border-radius / 2);
      border: 2px solid var(--background);
      box-shadow: 0px 0px 0px 2px var(--color-border);
      padding: 0;
      overflow: hidden;
      &::-webkit-color-swatch-wrapper {
        padding: 0;
      }
      &::-webkit-color-swatch {
        border: none;
      }
      &::-moz-color-swatch {
        border: none;
      }
    }
  }
}