Add vertical style and "Always show workspace drawer" setting (#567)

1 files changed, 62 insertions, 0 deletions

diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss
new file mode 100644
index 000000000..55660a088
--- /dev/null
+++ b/src/styles/vertical.scss
@@ -0,0 +1,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;
+  }
+}
\ No newline at end of file