@jupyterlab/application 4.0.0-alpha.9 → 4.0.0-beta.1

package/style/sidepanel.css

@@ -23,7 +23,7 @@
 
 .jp-SideBar.lm-TabBar,
 #jp-down-stack .lm-TabBar {
-  color: var(--jp-ui-font-color1);
+  color: var(--jp-ui-font-color2);
   background: var(--jp-layout-color2);
   font-size: var(--jp-ui-font-size1);
   overflow: visible;
@@ -42,24 +42,25 @@
   align-items: stretch;
   list-style-type: none;
   height: var(--jp-private-sidebar-tab-width);
-  transform-origin: 0 0 0;
 }
 
 .jp-SideBar .lm-TabBar-tab {
-  padding: 0 16px;
+  padding: 16px 0;
   border: none;
   overflow: visible;
+  flex-direction: column;
+  position: relative;
 }
 
-.jp-SideBar .lm-TabBar-tab.lm-mod-current {
-  min-height: calc(
-    var(--jp-private-sidebar-tab-width) + var(--jp-border-width)
-  );
-  max-height: calc(
-    var(--jp-private-sidebar-tab-width) + var(--jp-border-width)
-  );
-
-  /* transform: translateY(var(--jp-border-width)); */
+.jp-SideBar .lm-TabBar-tab.lm-mod-current::after {
+  /* Internal border override pseudo-element */
+  position: absolute;
+  content: '';
+  bottom: 0;
+  right: 0;
+  top: 0;
+  left: 0;
+  border: var(--jp-border-width) solid var(--jp-layout-color1);
 }
 
 .jp-SideBar .lm-TabBar-tab:not(.lm-mod-current),
@@ -86,106 +87,83 @@
   background: var(--jp-layout-color1);
 }
 
-/* Left */
+.jp-SideBar.lm-TabBar::after {
+  /* Internal border pseudo-element */
+  position: absolute;
+  content: '';
+  bottom: 0;
+  right: 0;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
 
 /* Borders */
 
-.jp-SideBar.lm-TabBar.jp-mod-left {
-  border-right: var(--jp-border-width) solid var(--jp-border-color0);
-}
+/* stylelint-disable selector-max-class */
 
-.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab + .lm-TabBar-tab {
-  border-right: var(--jp-border-width) solid var(--jp-layout-color2);
+.jp-SideBar.lm-TabBar .lm-TabBar-tab + .lm-TabBar-tab {
+  border-top: var(--jp-border-width) solid var(--jp-layout-color2);
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-left
-  .lm-TabBar-tab.lm-mod-current
-  + .lm-TabBar-tab {
-  border-right: var(--jp-border-width) solid var(--jp-border-color0);
-}
-
-.jp-SideBar.lm-TabBar.jp-mod-left
-  .lm-TabBar-tab
-  + .lm-TabBar-tab.lm-mod-current {
-  border-right: var(--jp-border-width) solid var(--jp-border-color0);
-}
-
-.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab.lm-mod-current:last-child {
-  border-left: var(--jp-border-width) solid var(--jp-border-color0);
+.jp-SideBar.lm-TabBar .lm-TabBar-tab.lm-mod-current + .lm-TabBar-tab {
+  border-top: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-/* Transforms */
-
-.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-content {
-  flex-direction: row-reverse;
-  transform: rotate(-90deg) translateX(-100%);
+.jp-SideBar.lm-TabBar .lm-TabBar-tab + .lm-TabBar-tab.lm-mod-current {
+  border-top: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-left
-  .lm-TabBar-tab:not(.lm-mod-current)
-  .lm-TabBar-tabIcon {
-  transform: rotate(90deg);
+.jp-SideBar.lm-TabBar .lm-TabBar-tab.lm-mod-current:last-child {
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-left
-  .lm-TabBar-tab.lm-mod-current
-  .lm-TabBar-tabIcon {
-  transform: rotate(90deg)
-    translate(
-      calc(-0.5 * var(--jp-border-width)),
-      calc(-0.5 * var(--jp-border-width))
-    );
+.jp-SideBar.lm-TabBar .lm-TabBar-tabLabel {
+  writing-mode: vertical-rl;
 }
 
-/* Right */
+/* Left */
 
 /* Borders */
 
-.jp-SideBar.lm-TabBar.jp-mod-right {
-  border-left: var(--jp-border-width) solid var(--jp-border-color0);
+.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-content {
+  /* Internal border spacing */
+  margin-right: var(--jp-border-width);
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-tab + .lm-TabBar-tab {
-  border-left: var(--jp-border-width) solid var(--jp-layout-color2);
+.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tab.lm-mod-current::after {
+  /* Internal border override */
+  right: calc(-1 * var(--jp-border-width));
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-right
-  .lm-TabBar-tab.lm-mod-current
-  + .lm-TabBar-tab {
-  border-left: var(--jp-border-width) solid var(--jp-border-color0);
+.jp-SideBar.lm-TabBar.jp-mod-left::after {
+  /* Internal border */
+  border-right: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-right
-  .lm-TabBar-tab
-  + .lm-TabBar-tab.lm-mod-current {
-  border-left: var(--jp-border-width) solid var(--jp-border-color0);
-}
+/* Transforms */
 
-.jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-tab.lm-mod-current:last-child {
-  border-right: var(--jp-border-width) solid var(--jp-border-color0);
+.jp-SideBar.lm-TabBar.jp-mod-left .lm-TabBar-tabLabel {
+  transform: rotate(180deg);
 }
 
-/* Transforms */
+/* Right */
+
+/* Borders */
 
 .jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-content {
-  flex-direction: row;
-  transform: rotate(90deg) translateY(-100%);
+  /* Internal border spacing */
+  margin-left: var(--jp-border-width);
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-right
-  .lm-TabBar-tab:not(.lm-mod-current)
-  .lm-TabBar-tabIcon {
-  transform: rotate(-90deg);
+.jp-SideBar.lm-TabBar.jp-mod-right .lm-TabBar-tab.lm-mod-current::after {
+  /* Internal border override */
+  left: calc(-1 * var(--jp-border-width));
 }
 
-.jp-SideBar.lm-TabBar.jp-mod-right
-  .lm-TabBar-tab.lm-mod-current
-  .lm-TabBar-tabIcon {
-  transform: rotate(-90deg)
-    translate(
-      calc(0.5 * var(--jp-border-width)),
-      calc(-0.5 * var(--jp-border-width))
-    );
+.jp-SideBar.lm-TabBar.jp-mod-right::after {
+  /* Internal border */
+  border-left: var(--jp-border-width) solid var(--jp-border-color0);
 }
 
 /* Down */
@@ -213,11 +191,14 @@
   border-right: var(--jp-border-width) solid var(--jp-border-color1);
 }
 
+/* stylelint-enable selector-max-class */
+
 /* Stack panels */
 
 #jp-left-stack > .lm-Widget,
 #jp-right-stack > .lm-Widget {
   min-width: var(--jp-sidebar-min-width);
+  background-color: var(--jp-layout-color1);
 }
 
 #jp-right-stack {

package/style/tabs.css

@@ -20,7 +20,6 @@
 
 .lm-DockPanel-tabBar,
 .lm-TabPanel-tabBar {
-  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
   overflow: visible;
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size1);
@@ -49,7 +48,7 @@
   flex: 0 1 var(--jp-private-horizontal-tab-width);
   align-items: center;
   min-height: calc(
-    var(--jp-private-horizontal-tab-height) + var(--jp-border-width)
+    var(--jp-private-horizontal-tab-height) + 2 * var(--jp-border-width)
   );
   min-width: 0;
   margin-left: calc(-1 * var(--jp-border-width));
@@ -64,6 +63,17 @@
 .lm-DockPanel-tabBar .lm-TabBar-tab:hover:not(.lm-mod-current),
 .lm-TabPanel-tabBar .lm-TabBar-tab:hover:not(.lm-mod-current) {
   background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
+}
+
+.lm-DockPanel-tabBar .lm-TabBar-tab:not(.lm-mod-current)::after,
+.lm-DockPanel-tabBar .lm-TabBar-addButton::after {
+  position: absolute;
+  content: '';
+  bottom: 0;
+  left: calc(-1 * var(--jp-border-width));
+  width: calc(100% + 2 * var(--jp-border-width));
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
 }
 
 .lm-DockPanel-tabBar .lm-TabBar-tab:first-child,
@@ -74,16 +84,12 @@
 /* This is a current tab of a tab bar in the dock panel: each tab bar has 1. */
 .lm-DockPanel-tabBar .lm-TabBar-tab.lm-mod-current {
   background: var(--jp-layout-color1);
-  color: var(--jp-ui-font-color0);
-  min-height: calc(
-    var(--jp-private-horizontal-tab-height) + 2 * var(--jp-border-width)
-  );
-  transform: translateY(var(--jp-border-width));
+  color: var(--jp-ui-font-color1);
 }
 
 .lm-TabPanel-tabBar .lm-TabBar-tab.lm-mod-current {
   background: var(--jp-layout-color1);
-  color: var(--jp-ui-font-color0);
+  color: var(--jp-ui-font-color1);
 }
 
 /* This is the main application level current tab: only 1 exists. */
@@ -99,12 +105,8 @@
 
 /* This is the left tab bar current tab: only 1 exists. */
 .lm-TabBar-tab.lm-mod-current {
-  color: var(--jp-ui-font-color0);
-  background: var(--jp-layout-color1);
-}
-
-.lm-TabBar-tab.lm-mod-current:hover {
   background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
 }
 
 .lm-DockPanel-tabBar .lm-TabBar.lm-mod-left .lm-TabBar-tab,
@@ -127,6 +129,8 @@
   margin-top: 0;
 }
 
+/* stylelint-disable selector-max-class */
+
 .lm-DockPanel-tabBar .lm-TabBar.lm-mod-left .lm-TabBar-tab.lm-mod-current,
 .lm-DockPanel-tabBar .lm-TabBar.lm-mod-right .lm-TabBar-tab.lm-mod-current {
   min-width: 80px;
@@ -147,21 +151,14 @@
   margin-right: 4px;
 }
 
-.lm-DockPanel-tabBar .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabIcon,
-.lm-TabPanel-tabBar .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabIcon {
-  margin-bottom: var(--jp-border-width);
-}
-
-.lm-TabBar-WindowTabLabel {
-  margin-top: 4px;
-}
+/* stylelint-enable selector-max-class */
 
 .lm-TabBar-tab.lm-mod-drag-image {
   background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
   border: var(--jp-border-width) solid var(--jp-border-color1);
   border-top: var(--jp-border-width) solid var(--jp-brand-color1);
   box-shadow: var(--jp-elevation-z4);
-  color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size1);
   line-height: var(--jp-private-horizontal-tab-height);
   min-height: var(--jp-private-horizontal-tab-height);