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

$break-point: 810px;
.app-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "navigation-view content";
  align-items: stretch;
  justify-content: stretch;
  width: 100vw;
  height: 100dvh;

  @media screen and (max-width: $break-point) {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "content" "navigation-view";
  }

  &__navigation-view {
    background: var(--surface);
    grid-area: navigation-view;
    @media screen and (min-width: ($break-point + 1)) {
      padding: scale(4);
      &--mobile {
        display: none;
      }
    }

    @media screen and (max-width: ($break-point + 1)) {
      padding: scale(2);
      &--desktop {
        display: none;
      }
    }

  }

  &__main-content {
    grid-area: content;
    overflow: auto;
  }
}