wip css fixes

examples/console/src/index.ts

@@ -42,7 +42,9 @@ import {
   Widget
 } from 'phosphor/lib/ui/widget';
 
+import 'phosphor/styles/base.css';
 import 'jupyterlab/lib/console/base.css';
+import 'jupyterlab/lib/default-theme/commandpalette.css';
 import 'jupyterlab/lib/default-theme/completion.css';
 import 'jupyterlab/lib/default-theme/console.css';
 import 'jupyterlab/lib/dialog/index.css';

src/application/shell.ts

@@ -241,7 +241,10 @@ class SideBarHandler {
    */
   constructor(side: string) {
     this._side = side;
-    this._sideBar = new TabBar();
+    this._sideBar = new TabBar({
+      orientation: 'vertical',
+      allowDeselect: true
+    });
     this._stackedPanel = new StackedPanel();
     this._sideBar.hide();
     this._stackedPanel.hide();

src/default-theme/commandpalette.css

@@ -15,7 +15,7 @@
 }
 
 
-.p-CommandPalette-inputWrapper {
+.p-CommandPalette-wrapper {
   padding: 4px 6px;
   margin: 4px;
   background: white;
@@ -43,7 +43,7 @@
 }
 
 
-.p-CommandPalette-command {
+.p-CommandPalette-item {
   padding: 4px 12px;
   font-size: 13px;
   font-weight: 500;
@@ -57,7 +57,7 @@
 
 
 .p-CommandPalette-header:hover:not(.p-mod-active),
-.p-CommandPalette-command:hover:not(.p-mod-active) {
+.p-CommandPalette-item:hover:not(.p-mod-active) {
   background: #EEEEEE;
 }
 
@@ -68,7 +68,7 @@
 }
 
 
-.p-CommandPalette-command.p-mod-active {
+.p-CommandPalette-item.p-mod-active {
   color: rgba(255,255,255,0.7);
   background: #2196F3;
 }
@@ -79,18 +79,18 @@
 }
 
 
-.p-CommandPalette-command.p-mod-active .p-CommandPalette-commandCaption {
+.p-CommandPalette-item.p-mod-active .p-CommandPalette-itemCaption {
   color: inherit;
 }
 
 
-.p-CommandPalette-command.p-mod-active mark {
+.p-CommandPalette-item.p-mod-active mark {
     background: inherit;
     color: white;
 }
 
 
-.p-CommandPalette-command mark {
+.p-CommandPalette-item mark {
     background: inherit;
     color: #757575;
 }

src/default-theme/index.css

@@ -2,6 +2,7 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+@import url('~phosphor/styles/base.css');
 @import url('~jupyterlab/lib/application/base.css');
 @import url('~jupyterlab/lib/console/base.css');
 @import url('~jupyterlab/lib/notebook/index.css');
@@ -58,12 +59,12 @@ body {
 }
 
 
-.p-DockTabPanel {
+.p-DockPanel-tabPanel {
   border-top: none;
 }
 
 
-.p-DockTabPanel > .p-StackedPanel {
+.p-DockPanel-tabPanel > .p-StackedPanel {
   background: white;
   border-left: 1px solid #BDBDBD;
   border-right: 1px solid #BDBDBD;
@@ -87,6 +88,7 @@ body {
 
 
 .p-TabBar {
+  overflow: visible;
   min-height: 24px;
   max-height: 24px;
   color: #777777;
@@ -94,6 +96,38 @@ body {
 }
 
 
+.p-TabBar.p-mod-horizontal {
+  min-height: 24px;
+  max-height: 24px;
+}
+
+
+.p-TabBar.p-mod-vertical {
+  min-width: 24px;
+  max-width: 24px;
+}
+
+
+.p-TabBar.p-mod-top {
+  border-bottom: 1px solid #C0C0C0;
+}
+
+
+.p-TabBar.p-mod-bottom {
+  border-top: 1px solid #C0C0C0;
+}
+
+
+.p-TabBar.p-mod-left {
+  border-right: 1px solid #C0C0C0;
+}
+
+
+.p-TabBar.p-mod-right {
+  border-left: 1px solid #C0C0C0;
+}
+
+
 /* increase specificity to override default */
 .p-TabBar > .p-TabBar-header {
   flex: 0 0 1px;
@@ -102,14 +136,18 @@ body {
 
 .p-TabBar-content {
   min-width: 0;
+  min-height: 0;
   padding-right: 1px;
 }
 
 
-/* increase specificity to override default */
-.p-TabBar > .p-TabBar-footer {
-  flex: 0 0 1px;
-  background: #BDBDBD;
+.p-TabBar.p-mod-top > .p-TabBar-content {
+  align-items: flex-end;
+}
+
+
+.p-TabBar.p-mod-bottom > .p-TabBar-content {
+  align-items: flex-start;
 }
 
 
@@ -140,10 +178,90 @@ body {
 }
 
 
+.p-TabBar.p-mod-top .p-TabBar-tab,
+.p-TabBar.p-mod-bottom .p-TabBar-tab {
+  flex: 0 1 125px;
+  min-height: 20px;
+  max-height: 20px;
+  min-width: 35px;
+  margin-left: -1px;
+  line-height: 20px;
+}
+
+
+.p-TabBar.p-mod-top .p-TabBar-tab {
+  border-bottom: none;
+}
+
+
+.p-TabBar.p-mod-bottom .p-TabBar-tab {
+  border-top: none;
+}
+
+
+.p-TabBar.p-mod-top .p-TabBar-tab:first-child,
+.p-TabBar.p-mod-bottom .p-TabBar-tab:first-child {
+  margin-left: 0;
+}
+
+
+.p-TabBar.p-mod-top .p-TabBar-tab.p-mod-current,
+.p-TabBar.p-mod-bottom .p-TabBar-tab.p-mod-current {
+  min-height: 23px;
+  max-height: 23px;
+}
+
+
+.p-TabBar.p-mod-top .p-TabBar-tab.p-mod-current {
+  transform: translateY(1px);
+}
+
+
+.p-TabBar.p-mod-bottom .p-TabBar-tab.p-mod-current {
+  transform: translateY(-1px);
+}
+
+
+.p-TabBar.p-mod-left .p-TabBar-tab,
+.p-TabBar.p-mod-right .p-TabBar-tab {
+  flex: 0 1 40px;
+  margin-top: -1px;
+  line-height: 40px;
+}
+
+
+.p-TabBar.p-mod-left .p-TabBar-tab {
+  border-right: none;
+}
+
+
+.p-TabBar.p-mod-right .p-TabBar-tab {
+  border-left: none;
+}
+
+
+.p-TabBar.p-mod-left .p-TabBar-tab:first-child,
+.p-TabBar.p-mod-right .p-TabBar-tab:first-child {
+  margin-top: 0;
+}
+
+
+.p-TabBar.p-mod-left .p-TabBar-tab.p-mod-current,
+.p-TabBar.p-mod-right .p-TabBar-tab.p-mod-current {
+  min-width: 80px;
+  max-width: 80px;
+}
+
+
+.p-TabBar.p-mod-right .p-TabBar-tab.p-mod-current {
+  transform: translateX(-1px);
+}
+
+
 .p-TabBar-tabIcon,
-.p-TabBar-tabText,
+.p-TabBar-tabLabel,
 .p-TabBar-tabCloseIcon {
-  line-height: 24px;
+  display: inline-block;
 }
 
 
@@ -153,8 +271,9 @@ body {
 
 
 .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:before {
+  content: '\f00d';
   font-family: FontAwesome;
-  content: '\f00d'; /* close */
+  font-size: 10px;
 }
 
 
@@ -165,6 +284,34 @@ body {
 }
 
 
+.p-TabPanel-stackedPanel {
+  padding: 10px;
+  background: white;
+  border: 1px solid #C0C0C0;
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+
+.p-TabPanel.p-mod-top-to-bottom > .p-TabPanel-stackedPanel {
+  border-top: none;
+}
+
+
+.p-TabPanel.p-mod-bottom-to-top > .p-TabPanel-stackedPanel {
+  border-bottom: none;
+}
+
+
+.p-TabPanel.p-mod-left-to-right > .p-TabPanel-stackedPanel {
+  border-left: none;
+}
+
+
+.p-TabPanel.p-mod-right-to-left > .p-TabPanel-stackedPanel {
+  border-right: none;
+}
+
+
 .p-TabBar-tab.p-mod-drag-image {
   min-height: 24px;
   min-width: 124px;
@@ -252,7 +399,7 @@ body {
 }
 
 
-.p-Menu-itemText {
+.p-Menu-itemLabel {
   padding: 4px 35px 4px 2px;
 }
 
@@ -268,13 +415,13 @@ body {
 }
 
 
-.p-Menu-item.p-type-separator > span {
+.p-Menu-item.p-type-separator > div {
   padding: 0;
   height: 9px;
 }
 
 
-.p-Menu-item.p-type-separator > span::after {
+.p-Menu-item.p-type-separator > div::after {
   content: '';
   display: block;
   position: relative;
@@ -299,6 +446,11 @@ body {
 }
 
 
+.p-MenuBar-itemMnemonic {
+  text-decoration: underline;
+}
+
+
 .p-Widget.jp-Cell.jp-CodeCell.jp-mod-collapsed.jp-mod-readOnly {
   padding-left: 5px;
   padding-right: 5px;