src/styles/vertical.scss


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

$sidebar-width: 65px;

.sidebar {
  width: 100vw;
  height: $sidebar-width;
  flex-direction: row;
  position: absolute;
  right: 0;
  padding-bottom: 0px;

  div:first-of-type {
    overflow-x: scroll;
    width: 100%;
  }

  .tabs {
    flex-direction: row;

    .tab-item {
      
      &.is-active {
        border-left-width: 0px;
        border-top-width: 4px;
        border-top-style: solid;
        border-top-color: #7367f0;
        padding-left: 4px;
      }

      &:not(.is-active) {
        padding-top: 4px;
      }
    }
  }

  .sidebar__button--workspaces.is-active {
    position: absolute;
    right: 300px;
    height: 100%;
    background-color: #f7f7f9;
  }
}

.app_service {
  width: 100vw;
  position: absolute;
  top: $sidebar-width;
  right: 0;
}

.theme__dark {
  .sidebar .sidebar__button--workspaces.is-active {
    background-color: #2d2f31;
  }
}

.darwin .sidebar {
  height: $sidebar-width + 22px;

  .sidebar__button--workspaces.is-active {
    height: $sidebar-width - 22px;
  }
}