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

.popover {
  $arrow-size: 12;
  z-index: 1000000;
  background: var(--background);
  border: sp(1) solid var(--color-border);
  box-shadow: 0 sp(8) sp(24) var(--color-shadow);
  padding: sp(14);
  border-radius: sp($border-radius);
  display: none;
  &[data-show] {
    display: block;
  }
  .arrow,
  .arrow::before {
    position: absolute;
    width: sp($arrow-size);
    height: sp($arrow-size);
    z-index: -1;
    box-sizing: border-box;
  }

  .arrow::before {
    background: var(--background);
    content: '';
    transform: rotate(45deg);
  }
  &[data-popper-placement^='top'] > .arrow {
    bottom: sp(-$arrow-size / 2);
    &::before {
      border-right: sp(1) solid var(--color-border);
      border-bottom: sp(1) solid var(--color-border);
      border-radius: 0 0 sp($border-radius / 2) 0;
    }
  }

  &[data-popper-placement^='bottom'] > .arrow {
    top: sp(-$arrow-size / 2);
    &::before {
      border-left: sp(1) solid var(--color-border);
      border-top: sp(1) solid var(--color-border);
      border-radius: sp($border-radius / 2) 0 0 0;
    }
  }

  &[data-popper-placement^='left'] > .arrow {
    right: sp(-$arrow-size / 2);
    &::before {
      border-top: sp(1) solid var(--color-border);
      border-right: sp(1) solid var(--color-border);
      border-radius: 0 sp($border-radius / 2) 0 0;
    }
  }

  &[data-popper-placement^='right'] > .arrow {
    left: sp(-$arrow-size / 2);
    &::before {
      border-bottom: sp(1) solid var(--color-border);
      border-left: sp(1) solid var(--color-border);
      border-radius: 0 0 0 sp($border-radius / 2);
    }
  }


}