@jupyterlab/nbconvert-css 3.2.0-alpha.1 → 3.2.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyterlab/nbconvert-css",
-  "version": "3.2.0-alpha.1",
+  "version": "3.2.0-beta.0",
   "description": "CSS bundle for the JupyterLab nbconvert template",
   "homepage": "https://github.com/jupyterlab/jupyterlab",
   "bugs": {
@@ -31,13 +31,13 @@
     "watch": "webpack --watch"
   },
   "dependencies": {
-    "@jupyterlab/application": "^3.2.0-alpha.1",
-    "@jupyterlab/apputils": "^3.2.0-alpha.1",
-    "@jupyterlab/cells": "^3.2.0-alpha.1",
-    "@jupyterlab/codemirror": "^3.2.0-alpha.1",
-    "@jupyterlab/notebook": "^3.2.0-alpha.1",
-    "@jupyterlab/outputarea": "^3.2.0-alpha.1",
-    "@jupyterlab/rendermime": "^3.2.0-alpha.1"
+    "@jupyterlab/application": "^3.2.0-beta.0",
+    "@jupyterlab/apputils": "^3.2.0-beta.0",
+    "@jupyterlab/cells": "^3.2.0-beta.0",
+    "@jupyterlab/codemirror": "^3.2.0-beta.0",
+    "@jupyterlab/notebook": "^3.2.0-beta.0",
+    "@jupyterlab/outputarea": "^3.2.0-beta.0",
+    "@jupyterlab/rendermime": "^3.2.0-beta.0"
   },
   "devDependencies": {
     "css-loader": "^5.0.1",

package/style/index.css

@@ -13916,6 +13916,79 @@ body[data-format='mobile'] .jp-InputPrompt {
   flex: 0 0 110px;
 }
 
+/*-----------------------------------------------------------------------------
+| Side-by-side Mode (.jp-mod-sideBySide)
+|----------------------------------------------------------------------------*/
+:root {
+  --jp-side-by-side-output-size: 1fr;
+  --jp-side-by-side-resized-cell: var(--jp-side-by-side-output-size);
+}
+
+.jp-mod-sideBySide.jp-Notebook .jp-CodeCell {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) min-content minmax(
+      0,
+      var(--jp-side-by-side-output-size)
+    );
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-areas:
+    'header header header'
+    'input handle output'
+    'footer footer footer';
+}
+
+.jp-mod-sideBySide.jp-Notebook .jp-CodeCell.jp-mod-resizedCell {
+  grid-template-columns: minmax(0, 1fr) min-content minmax(
+      0,
+      var(--jp-side-by-side-resized-cell)
+    );
+}
+
+.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-CellHeader {
+  grid-area: header;
+}
+
+.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-Cell-inputWrapper {
+  grid-area: input;
+}
+
+.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-Cell-outputWrapper {
+  /* overwrite the default margin (no vertical separation needed in side by side move */
+  margin-top: 0;
+  grid-area: output;
+}
+
+.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-CellFooter {
+  grid-area: footer;
+}
+
+.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-CellResizeHandle {
+  grid-area: handle;
+  user-select: none;
+  display: block;
+  height: 100%;
+  cursor: ew-resize;
+  padding: 0 var(--jp-cell-padding);
+}
+
+.jp-mod-sideBySide.jp-Notebook .jp-CodeCell .jp-CellResizeHandle::after {
+  content: '';
+  display: block;
+  background: var(--jp-border-color2);
+  height: 100%;
+  width: 5px;
+}
+
+.jp-mod-sideBySide.jp-Notebook
+  .jp-CodeCell.jp-mod-resizedCell
+  .jp-CellResizeHandle::after {
+  background: var(--jp-border-color0);
+}
+
+.jp-CellResizeHandle {
+  display: none;
+}
+
 /*-----------------------------------------------------------------------------
 | Placeholder
 |----------------------------------------------------------------------------*/