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

.card {
  border-radius: sp($border-radius);
  padding: 0;

  &--outlined {
    border: sp(1) solid var(--color-border);
    background: var(--background);
  }

  &--filled {
    border: none;
    background: var(--surface);

    &.clickable:hover {
      background: var(--surface-lighter);
    }
  }

  &--raised {
    border: sp(1) solid var(--color-border);
    background: var(--background);
    box-shadow: 0 0.6px 1.8px 0 rgba(0,0,0,0.11),0 3.2px 7.2px 0 rgba(0,0,0,0.13);

  }

  & .card {
    border-radius: calc(#{$border-radius} / 1.5);
  }

  &--highlighted {
    &.card--outlined {
      border: sp(1) solid var(--color-border-blue);
      background: var(--surface-blue-lighter);

      &.clickable:hover {
        background: var(--surface-blue);
      }
    }
    &.card--filled {
      background: var(--surface-blue);

      &.clickable:hover {
        background: var(--surface-accent-darker);
      }
    }
  }
}