Initial work on styling.

packages/cells/src/placeholder.tsx

@@ -12,22 +12,32 @@ import {
   VDomRenderer
 } from '@jupyterlab/apputils';
 
+const PLACEHOLDER_CLASS = 'jp-Placeholder'
 
-const INPUT_PLACEHOLDER_CLASS = 'jp-InputPlaceholder';
+const INPUT_PROMPT_CLASS = 'jp-Placeholder-prompt jp-InputPrompt';
+
+const OUTPUT_PROMPT_CLASS = 'jp-Placeholder-prompt jp-OutputPrompt';
 
-const INPUT_PROMPT_CLASS = 'jp-InputPlaceholder-prompt';
+const CONTENT_CLASS = 'jp-Placeholder-content';
 
-const INPUT_CONTENT_CLASS = 'jp-InputPlaceholder-content';
+const INPUT_PLACEHOLDER_CLASS = 'jp-InputPlaceholder';
 
 const OUTPUT_PLACEHOLDER_CLASS = 'jp-OutputPlaceholder';
 
-const OUTPUT_PROMPT_CLASS = 'jp-OutputPlaceholder-prompt';
 
-const OUTPUT_CONTENT_CLASS = 'jp-OutputPlaceholder-content';
 
 export
-class InputPlaceholder extends VDomRenderer<null> {
+abstract class Placeholder extends VDomRenderer<null> {
+  constructor() {
+    super();
+    this.addClass(PLACEHOLDER_CLASS);
+  }
+
+}
 
+
+export
+class InputPlaceholder extends Placeholder {
   constructor() {
     super();
     this.addClass(INPUT_PLACEHOLDER_CLASS);
@@ -37,7 +47,7 @@ class InputPlaceholder extends VDomRenderer<null> {
     return [
         <div className={INPUT_PROMPT_CLASS}>
         </div>,
-        <div className={INPUT_CONTENT_CLASS}>
+        <div className={CONTENT_CLASS}>
         </div>
     ]
   }
@@ -46,7 +56,7 @@ class InputPlaceholder extends VDomRenderer<null> {
 
 
 export
-class OutputPlaceholder extends VDomRenderer<null> {
+class OutputPlaceholder extends Placeholder {
 
   constructor() {
     super();
@@ -57,7 +67,7 @@ class OutputPlaceholder extends VDomRenderer<null> {
     return [
         <div className={OUTPUT_PROMPT_CLASS}>
         </div>,
-        <div className={OUTPUT_CONTENT_CLASS}>
+        <div className={CONTENT_CLASS}>
         </div>
     ]
   }

packages/cells/style/collapser.css

@@ -0,0 +1,18 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+.jp-Collapser {
+  flex: 0 0 12px;
+  padding: 0px;
+  margin: 0px;
+  border: none;
+  outline: none;
+  background: transparent;
+}
+
+.jp-Collapser:hover {
+  background: var(--md-blue-300);
+}

packages/cells/style/headerfooter.css

@@ -0,0 +1,21 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+/*-----------------------------------------------------------------------------
+| Header/Footer
+|----------------------------------------------------------------------------*/
+
+
+/* Hidden by zero height be default */
+.jp-CellHeader, .jp-CellFooter  {
+  height: 0px;
+  width: 100%;
+  padding: 0px;
+  margin: 0px;
+  border: none;
+  outline: none;
+  background: transparent;
+}

packages/cells/style/index.css

@@ -3,157 +3,13 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-
-/*-----------------------------------------------------------------------------
-| Private CSS variables
-|----------------------------------------------------------------------------*/
-
-
-:root {
-}
-
-
-
 /*-----------------------------------------------------------------------------
-| Cell
+| Imports
 |----------------------------------------------------------------------------*/
 
 
-.jp-Cell {
-  padding: var(--jp-cell-padding);
-  margin: 0px;
-  border: none;
-  outline: none;
-  background: transparent;
-}
-
-
-/* Hidden by zero height be default */
-.jp-Cell-header, .jp-Cell-footer  {
-  height: 0px;
-  width: 100%;
-  padding: 0px;
-  margin: 0px;
-  border: none;
-  outline: none;
-  background: transparent;
-}
-
-
-/*-----------------------------------------------------------------------------
-| Common input/output
-|----------------------------------------------------------------------------*/
-
-
-.jp-Cell-inputWrapper, .jp-Cell-outputWrapper  {
-  display: flex;
-  flex-direction: row;
-  padding: 0px;
-  margin: 0px;
-}
-
-
-/* Hidden by zero width be default */
-.jp-Cell-inputCollapser, .jp-Cell-outputCollapser {
-  flex: 0 0 0px;
-  padding: 0px;
-  margin: 0px;
-  border: none;
-  outline: none;
-  background: transparent;
-}
-
-
-/* Only input areas inside cells */
-.jp-Cell-inputArea, .jp-Cell-outputArea {
-  flex: 1 1 auto;
-}
-
-
-/*-----------------------------------------------------------------------------
-| Input
-|----------------------------------------------------------------------------*/
-
-
-/* All input areas */
-.jp-InputArea {
-  display: flex;
-  flex-direction: row;
-}
-
-
-.jp-InputArea-editor {
-  flex: 1 1 auto;;
-}
-
-
-.jp-InputArea-editor {
-  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
-  border-radius: 0px;
-  background: var(--jp-cell-editor-background);
-}
-
-
-.jp-InputPrompt {
-  flex: 0 0 var(--jp-cell-prompt-width);
-  color: var(--jp-cell-inprompt-font-color);
-  font-family: var(--jp-cell-prompt-font-family);
-  padding: var(--jp-code-padding);
-  text-align: right;
-  letter-spacing: var(--jp-cell-prompt-letter-spacing);
-  opacity: var(--jp-cell-prompt-opacity);
-  line-height: var(--jp-code-line-height);
-  font-size: var(--jp-code-font-size);
-  border: var(--jp-border-width) solid transparent;
-  opacity: var(--jp-cell-prompt-opacity);
-}
-
-
-/*-----------------------------------------------------------------------------
-| Output
-|----------------------------------------------------------------------------*/
-
-/* Put a space between input and output when there IS output */
-.jp-Cell:not(.jp-mod-noOutputs) .jp-Cell-outputWrapper {
-  margin-top: 5px;
-}
-
-/* Make the output collapser disappear when there is not output, but do so
- * in a manner that leaves it in the layout and preserves its width.
- */
-.jp-Cell.jp-mod-noOutputs .jp-Cell-outputCollapser {
-  border: none !important;
-  background: transparent !important;
-}
-
-/* Text output with the Out[] prompt needs a top padding to match the
- * alignment of the Out[] prompt itself.
- */
-.jp-OutputArea-executeResult .jp-RenderedText.jp-OutputArea-output {
-  padding-top: var(--jp-code-padding);
-}
-
-
-
-/*-----------------------------------------------------------------------------
-| CodeCell
-|----------------------------------------------------------------------------*/
-
-
-
-/*-----------------------------------------------------------------------------
-| MarkdownCell
-|----------------------------------------------------------------------------*/
-
-
-.jp-MarkdownOutput {
-  flex: 1 1 auto;
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-  padding-left: var(--jp-code-padding);
-}
-
-
-.jp-MarkdownOutput.jp-RenderedHTMLCommon {
-  overflow: visible;
-}
+@import './collapser.css';
+@import './headerfooter.css';
+@import './inputarea.css';
+@import './placeholder.css';
+@import './widget.css';

packages/cells/style/inputarea.css

@@ -0,0 +1,43 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+/*-----------------------------------------------------------------------------
+| Input
+|----------------------------------------------------------------------------*/
+
+
+/* All input areas */
+.jp-InputArea {
+  display: flex;
+  flex-direction: row;
+}
+
+
+.jp-InputArea-editor {
+  flex: 1 1 auto;;
+}
+
+
+.jp-InputArea-editor {
+  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
+  border-radius: 0px;
+  background: var(--jp-cell-editor-background);
+}
+
+
+.jp-InputPrompt {
+  flex: 0 0 var(--jp-cell-prompt-width);
+  color: var(--jp-cell-inprompt-font-color);
+  font-family: var(--jp-cell-prompt-font-family);
+  padding: var(--jp-code-padding);
+  text-align: right;
+  letter-spacing: var(--jp-cell-prompt-letter-spacing);
+  opacity: var(--jp-cell-prompt-opacity);
+  line-height: var(--jp-code-line-height);
+  font-size: var(--jp-code-font-size);
+  border: var(--jp-border-width) solid transparent;
+  opacity: var(--jp-cell-prompt-opacity);
+}

packages/cells/style/placeholder.css

@@ -0,0 +1,27 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+/*-----------------------------------------------------------------------------
+| Placeholder
+|----------------------------------------------------------------------------*/
+
+.jp-Placeholder {
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+}
+
+.jp-Placeholder-prompt {
+  box-sizing: border-box;
+}
+
+.jp-Placeholder-content {
+  flex: 1 1 auto;
+  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
+  background: var(--jp-cell-editor-background);
+  height: 16px;
+  box-sizing: border-box;
+}

packages/cells/style/widget.css

@@ -0,0 +1,97 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+/*-----------------------------------------------------------------------------
+| Private CSS variables
+|----------------------------------------------------------------------------*/
+
+
+:root {
+}
+
+
+
+/*-----------------------------------------------------------------------------
+| Cell
+|----------------------------------------------------------------------------*/
+
+
+.jp-Cell {
+  padding: var(--jp-cell-padding);
+  margin: 0px;
+  border: none;
+  outline: none;
+  background: transparent;
+}
+
+
+/*-----------------------------------------------------------------------------
+| Common input/output
+|----------------------------------------------------------------------------*/
+
+
+.jp-Cell-inputWrapper, .jp-Cell-outputWrapper  {
+  display: flex;
+  flex-direction: row;
+  padding: 0px;
+  margin: 0px;
+}
+
+
+/* Only input/output areas inside cells */
+.jp-Cell-inputArea, .jp-Cell-outputArea {
+  flex: 1 1 auto;
+}
+
+
+/*-----------------------------------------------------------------------------
+| Output
+|----------------------------------------------------------------------------*/
+
+/* Put a space between input and output when there IS output */
+.jp-Cell:not(.jp-mod-noOutputs) .jp-Cell-outputWrapper {
+  margin-top: 5px;
+}
+
+/* Make the output collapser disappear when there is not output, but do so
+ * in a manner that leaves it in the layout and preserves its width.
+ */
+.jp-Cell.jp-mod-noOutputs .jp-Cell-outputCollapser {
+  border: none !important;
+  background: transparent !important;
+}
+
+/* Text output with the Out[] prompt needs a top padding to match the
+ * alignment of the Out[] prompt itself.
+ */
+.jp-OutputArea-executeResult .jp-RenderedText.jp-OutputArea-output {
+  padding-top: var(--jp-code-padding);
+}
+
+
+
+/*-----------------------------------------------------------------------------
+| CodeCell
+|----------------------------------------------------------------------------*/
+
+
+
+/*-----------------------------------------------------------------------------
+| MarkdownCell
+|----------------------------------------------------------------------------*/
+
+
+.jp-MarkdownOutput {
+  flex: 1 1 auto;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  padding-left: var(--jp-code-padding);
+}
+
+
+.jp-MarkdownOutput.jp-RenderedHTMLCommon {
+  overflow: visible;
+}

packages/notebook/style/index.css

@@ -69,20 +69,6 @@
 }
 
 
-.jp-Notebook .jp-Cell .jp-Cell-inputCollapser,
-.jp-Notebook .jp-Cell .jp-Cell-outputCollapser {
-  flex: 0 0 12px;
-}
-
-
-.jp-InputPlaceholder {
-  width: 100%;
-  height: 16px;
-  background: var(--jp-layout-color0);
-  border: 1px solid var(--jp-border-color0);
-}
-
-
 /*-----------------------------------------------------------------------------
 | Notebook state related styling
 |