Merge pull request #5682 from gnestor/issue-2399

Add styles for description lists (dl, dt, dd) to be consistent with nteract
jupyterlab · Nov 29, 2018 · 4efe8c7 · 4efe8c7
2 parents 018dc60 + 1cf386e
commit 4efe8c7
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/packages/outputarea/style/index.css b/packages/outputarea/style/index.css
@@ -108,6 +108,36 @@ body.p-mod-override-cursor .jp-OutputArea-output.jp-mod-isolated:before {
   margin-right: 0;
 }
 
+/* description lists */
+
+.jp-OutputArea-output dl,
+.jp-OutputArea-output dt,
+.jp-OutputArea-output dd {
+  display: block;
+}
+
+.jp-OutputArea-output dl {
+  width: 100%;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+}
+
+.jp-OutputArea-output dt {
+  font-weight: bold;
+  float: left;
+  width: 20%;
+  padding: 0;
+  margin: 0;
+}
+
+.jp-OutputArea-output dd {
+  float: left;
+  width: 80%;
+  padding: 0;
+  margin: 0;
+}
+
 /* Hide the gutter in case of
  *  - nested output areas (e.g. in the case of output widgets)
  *  - mirrored output areas

diff --git a/packages/vdom-extension/src/index.tsx b/packages/vdom-extension/src/index.tsx
@@ -38,6 +38,8 @@ export class RenderedVDOM extends Widget implements IRenderMime.IRenderer {
   constructor(options: IRenderMime.IRendererOptions) {
     super();
     this.addClass(CSS_CLASS);
+    this.addClass('jp-RenderedHTML');
+    this.addClass('jp-RenderedHTMLCommon');
     this._mimeType = options.mimeType;
   }