diff options
Diffstat (limited to 'src/styles/vertical.scss')
-rw-r--r-- | src/styles/vertical.scss | 48 |
1 files changed, 40 insertions, 8 deletions
diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss index 55660a088..426032bf6 100644 --- a/src/styles/vertical.scss +++ b/src/styles/vertical.scss | |||
@@ -1,13 +1,24 @@ | |||
1 | $sidebar-width: 65px; | 1 | @import './config.scss'; |
2 | |||
3 | $sidebar-width: 64px; | ||
2 | 4 | ||
3 | .sidebar { | 5 | .sidebar { |
4 | width: 100vw; | 6 | width: 100vw; |
5 | height: $sidebar-width; | 7 | height: $sidebar-width; |
6 | flex-direction: row; | 8 | flex-direction: row; |
7 | position: absolute; | 9 | position: absolute; |
10 | top: 0; | ||
8 | right: 0; | 11 | right: 0; |
9 | padding-bottom: 0px; | 12 | padding-bottom: 0px; |
10 | 13 | ||
14 | &::after { | ||
15 | top: -10px; | ||
16 | right: -10px; | ||
17 | bottom: 0; | ||
18 | left: -10px; | ||
19 | clip-path: inset(10px 10px 0 10px); | ||
20 | } | ||
21 | |||
11 | div:first-of-type { | 22 | div:first-of-type { |
12 | overflow-x: scroll; | 23 | overflow-x: scroll; |
13 | width: 100%; | 24 | width: 100%; |
@@ -22,7 +33,6 @@ $sidebar-width: 65px; | |||
22 | border-left-width: 0px; | 33 | border-left-width: 0px; |
23 | border-top-width: 4px; | 34 | border-top-width: 4px; |
24 | border-top-style: solid; | 35 | border-top-style: solid; |
25 | border-top-color: #7367f0; | ||
26 | padding-left: 4px; | 36 | padding-left: 4px; |
27 | } | 37 | } |
28 | 38 | ||
@@ -40,17 +50,39 @@ $sidebar-width: 65px; | |||
40 | } | 50 | } |
41 | } | 51 | } |
42 | 52 | ||
43 | .app_service { | 53 | .app .app__content { |
44 | width: 100vw; | 54 | padding-top: $sidebar-width; |
45 | position: absolute; | 55 | } |
46 | top: $sidebar-width; | 56 | |
47 | right: 0; | 57 | .workspaces-drawer { |
58 | margin-top: -$sidebar-width; | ||
59 | height: 100vh; | ||
60 | position: relative; | ||
61 | |||
62 | &::after { | ||
63 | content: ' '; | ||
64 | position: absolute; | ||
65 | top: -10px; | ||
66 | right: 0; | ||
67 | bottom: -10px; | ||
68 | left: -10px; | ||
69 | z-index: 1000; | ||
70 | pointer-events: none; | ||
71 | clip-path: inset(10px 0 10px 10px); | ||
72 | box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, .12), | ||
73 | inset 0 0 2px 0 rgba(0, 0, 0, 0.36); | ||
74 | } | ||
48 | } | 75 | } |
49 | 76 | ||
50 | .theme__dark { | 77 | .theme__dark { |
51 | .sidebar .sidebar__button--workspaces.is-active { | 78 | .sidebar .sidebar__button--workspaces.is-active { |
52 | background-color: #2d2f31; | 79 | background-color: #2d2f31; |
53 | } | 80 | } |
81 | |||
82 | .workspaces-drawer::after { | ||
83 | box-shadow: inset 0 0 10px 0 $dark-theme-black, | ||
84 | inset 0 0 2px 0 rgba(0, 0, 0, 0.4); | ||
85 | } | ||
54 | } | 86 | } |
55 | 87 | ||
56 | .darwin .sidebar { | 88 | .darwin .sidebar { |
@@ -59,4 +91,4 @@ $sidebar-width: 65px; | |||
59 | .sidebar__button--workspaces.is-active { | 91 | .sidebar__button--workspaces.is-active { |
60 | height: $sidebar-width - 22px; | 92 | height: $sidebar-width - 22px; |
61 | } | 93 | } |
62 | } \ No newline at end of file | 94 | } |