work in progress, shell CSS needs work

src/application/shell.ts

@@ -93,12 +93,15 @@ class ApplicationShell extends Widget {
 
     topPanel.id = 'jp-top-panel';
     hsplitPanel.id = 'jp-main-split-panel';
+
     leftHandler.sideBar.addClass(SIDEBAR_CLASS);
     leftHandler.sideBar.addClass('jp-mod-left');
+    leftHandler.stackedPanel.id = 'jp-left-stack';
+
     rightHandler.sideBar.addClass(SIDEBAR_CLASS);
     rightHandler.sideBar.addClass('jp-mod-right');
-    leftHandler.stackedPanel.id = 'jp-left-stack';
     rightHandler.stackedPanel.id = 'jp-right-stack';
+
     dockPanel.id = 'jp-main-dock-panel';
 
     dockPanel.spacing = 8;

src/default-theme/index.css

@@ -21,6 +21,7 @@
 @import './inspector.css';
 @import './markdownwidget.css';
 @import './rendermime.css';
+@import './shell.css';
 
 @import '../landing/index.css';
 
@@ -34,22 +35,6 @@ body {
 }
 
 
-.jp-ApplicationShell.p-Widget {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  font-size: 14px;
-}
-
-
-#jp-top-panel {
-  display: flex;
-  min-height: 24px;
-}
-
-
 .jp-Document {
   min-width: 120px;
   min-height: 120px;
@@ -73,91 +58,6 @@ body {
 }
 
 
-#jp-right-stack {
-  border-left: 1px solid #BDBDBD;
-}
-
-#jp-left-stack {
-  border-right: 1px solid #BDBDBD;
-}
-
-.jp-SideBar.p-TabBar {
-  background: white;
-  color: #777777;
-  font-size: 14px;
-  max-width: 36px;
-  max-height: none;
-  height: 100%;
-}
-
-
-.jp-SideBar.p-Widget {
-  overflow: visible;
-}
-
-
-.jp-SideBar.jp-mod-left {
-  border-right: 1px solid #BDBDBD;
-  bottom: 0;
-}
-
-
-.jp-SideBar.jp-mod-right {
-  border-left: 1px solid #BDBDBD;
-  bottom: 0;
-}
-
-
-.jp-SideBar-content {
-  height: 35px;
-  transform-origin: 0 0 0;
-}
-
-
-.jp-SideBar.jp-mod-left > .jp-SideBar-content {
-  flex-direction: row-reverse;
-  transform: rotate(-90deg) translateX(-100%);
-}
-
-
-.jp-SideBar.jp-mod-right > .jp-SideBar-content {
-  flex-direction: row;
-  transform: rotate(90deg) translateY(-100%);
-}
-
-
-.jp-SideBar-button {
-  padding: 0 18px;
-  line-height: 35px;
-}
-
-
-.jp-SideBar-button:hover:not(.p-mod-current) {
-  background: #FAFAFA;
-}
-
-
-.jp-SideBar-button.p-mod-current {
-  color: #2196F3;
-  background: #FAFAFA;
-}
-
-
-.jp-SideBar.jp-mod-left .jp-SideBar-button {
-  border-left: 1px solid #BDBDBD;
-}
-
-
-.jp-SideBar.jp-mod-right .jp-SideBar-button {
-  border-right: 1px solid #BDBDBD;
-}
-
-
-#jp-main-dock-panel {
-  padding: 8px;
-}
-
-
 .p-DockTabPanel {
   border-top: none;
 }

src/default-theme/shell.css

@@ -0,0 +1,107 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+.jp-ApplicationShell.p-Widget {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  font-size: 14px;
+}
+
+
+#jp-top-panel {
+  display: flex;
+  min-height: 24px;
+}
+
+
+#jp-left-stack {
+  border-right: 1px solid #BDBDBD;
+}
+
+
+
+#jp-right-stack {
+  border-left: 1px solid #BDBDBD;
+}
+
+
+#jp-main-dock-panel {
+  padding: 8px;
+}
+
+
+.jp-SideBar.p-TabBar {
+  background: white;
+  color: #777777;
+  font-size: 14px;
+  max-width: 36px;
+  max-height: none;
+  height: 100%;
+}
+
+
+.jp-SideBar.p-Widget {
+  overflow: visible;
+}
+
+
+.jp-SideBar.jp-mod-left {
+  border-right: 1px solid #BDBDBD;
+  bottom: 0;
+}
+
+
+.jp-SideBar.jp-mod-right {
+  border-left: 1px solid #BDBDBD;
+  bottom: 0;
+}
+
+
+.jp-SideBar .p-SideBar-content {
+  height: 35px;
+  transform-origin: 0 0 0;
+}
+
+
+.jp-SideBar.jp-mod-left .p-TabBar-tab {
+  flex-direction: row-reverse;
+  transform: rotate(-90deg) translateX(-100%);
+}
+
+
+.jp-SideBar.jp-mod-right .p-TabBar-tab {
+  flex-direction: row;
+  transform: rotate(90deg) translateY(-100%);
+}
+
+
+/*.jp-SideBar-button {
+  padding: 0 18px;
+  line-height: 35px;
+}
+
+
+.jp-SideBar-button:hover:not(.p-mod-current) {
+  background: #FAFAFA;
+}
+
+
+.jp-SideBar-button.p-mod-current {
+  color: #2196F3;
+  background: #FAFAFA;
+}
+
+
+.jp-SideBar.jp-mod-left .jp-SideBar-button {
+  border-left: 1px solid #BDBDBD;
+}
+
+
+.jp-SideBar.jp-mod-right .jp-SideBar-button {
+  border-right: 1px solid #BDBDBD;
+}
+*/