Refactoring notebook css into multiple files.

examples/notebook/index.css

@@ -1,8 +1,9 @@
 /*-----------------------------------------------------------------------------
-| Copyright (c) 2014-2016, Jupyter Development Team.
-|
+| Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+
 body {
   background: white;
   margin: 0;
@@ -18,6 +19,50 @@ body {
   bottom: 4px;
 }
 
+
 .jp-Notebook-panel {
   border-bottom: 1px solid #E0E0E0;
 }
+
+
+.jp-Completion {
+  margin: 0;
+  position: absolute;
+  z-index: 10001;
+  background: #EEEEEE;
+  border: var(--jp-border-width) solid var(--jp-border-color1);
+  list-style-type: none;
+  overflow: auto;
+  padding: 0;
+}
+
+
+.jp-Completion-item {
+  margin: 0;
+  min-width: 150px;
+  padding: 0 2px;
+}
+
+
+.jp-Completion-item:nth-child(odd) {
+  background: #FFFFFF;
+}
+
+
+.jp-Completion-item.jp-mod-active {
+  background: #BFBFBF;
+}
+
+
+.jp-Completion-item code {
+  font-size: 14px;
+  line-height: 25px;
+}
+
+
+.jp-Completion-item mark {
+  font-weight: bold;
+  text-decoration: underline;
+  background: inherit;
+  color: inherit;
+}

src/notebook/cells/index.css

@@ -0,0 +1,95 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+.jp-Cell {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
+  border-width: var(--jp-border-width);
+  border-style: solid;
+  border-color: transparent;
+  outline: none;
+}
+
+
+.jp-Cell.jp-CodeCell.jp-mod-collapsed.jp-mod-readOnly {
+  padding-left: 5px;
+  padding-right: 5px;
+  border-width: var(--jp-border-width);
+  border-style: solid;
+  border-color: transparent;
+  outline: none;
+  background: transparent;
+  border-color: transparent;
+}
+
+
+.jp-InputArea {
+  display: flex;
+  flex-direction: row;
+}
+
+
+.jp-InputArea-prompt {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 90px;
+  color: #303F9F;
+  font-family: monospace;
+  padding: 0.4em;
+  text-align: right;
+  line-height: 1.2em;
+  font-size: 14px;
+}
+
+
+.jp-InputArea-editor {
+  flex-grow: 1;
+  flex-shrink: 1;
+  height: auto;
+  min-height: 2em;
+}
+
+
+.jp-CellEditor {
+  border: var(--jp-border-width) solid #cfcfcf;
+  border-radius: 2px;
+  background: #f7f7f7;
+  line-height: 1.2em;
+}
+
+
+.jp-MarkdownCell {
+  outline: 0;
+}
+
+
+.jp-MarkdownCell.jp-mod-rendered {
+  padding-left: 90px;
+}
+
+
+.jp-MarkdownCell-renderer {
+  padding: 0.5em 0.5em 0.5em 0.4em;
+}
+
+
+.jp-MarkdownCell-content {
+  padding: 0.5em;
+}
+
+
+.jp-Output-prompt {
+  color: #D84315;
+  font-family: monospace;
+  text-align: right;
+  vertical-align: middle;
+  padding: 0.4em;
+  font-size: 14px;
+  flex: 0 0 90px;
+  box-sizing: border-box;
+}

src/notebook/codemirror/index.css

@@ -0,0 +1,60 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+@import './highlight.css';
+
+
+.jp-CellEditor > .CodeMirror {
+  line-height: 1.21429em;
+  /* Changed from 1em to our global default */
+  font-size: 14px;
+  height: auto;
+  /* Changed to auto to autogrow */
+  background: none;
+  /* Changed from white to allow our bg to show through */
+}
+
+
+.jp-CellEditor > .CodeMirror pre {
+  /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
+  /* .CodeMirror-lines */
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+}
+
+
+/* This causes https://github.com/jupyter/jupyterlab/issues/522 */
+.jp-CellEditor .CodeMirror-lines {
+  padding: 0.4em;
+}
+
+
+/* The following selectors never apply since .CodeMirror is the only child of .jp-CellEditor */
+
+.jp-CellEditor > .CodeMirror-scroll {
+  /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
+  /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+
+
+.jp-CellEditor > .CodeMirror-lines {
+  /* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
+  /* we have set a different line-height and want this to scale with that. */
+  padding: 0.4em;
+}
+
+
+.jp-CellEditor > .CodeMirror-linenumber {
+  padding: 0 8px 0 4px;
+}
+
+
+.jp-CellEditor > .CodeMirror-gutters {
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
+}

src/notebook/index.css

@@ -1,277 +1,11 @@
 /*-----------------------------------------------------------------------------
-| Copyright (c) 2014-2016, Jupyter Development Team.
-|
+| Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-
+@import './cells/index.css';
+@import './codemirror/index.css';
+@import './completion/index.css';
+@import './notebook/index.css';
+@import './output-area/index.css';
 @import './toolbar.css';
-
-
-.jp-Notebook {
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-bottom: 20px;
-  margin-top: 20px;
-  min-width: 50px;
-  min-height: 50px;
-  outline: none;
-  overflow: auto;
-}
-
-
-.jp-Notebook-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-
-.jp-InputArea {
-  display: flex;
-  flex-direction: row;
-}
-
-
-.jp-InputArea-prompt {
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: 90px;
-  color: #303F9F;
-  font-family: monospace;
-  padding: 0.4em;
-  text-align: right;
-  line-height: 1.2em;
-  font-size: 14px;
-}
-
-
-.jp-InputArea-editor {
-  flex-grow: 1;
-  flex-shrink: 1;
-  height: auto;
-  min-height: 2em;
-}
-
-
-.jp-CellEditor {
-  border: var(--jp-border-width) solid #cfcfcf;
-  border-radius: 2px;
-  background: #f7f7f7;
-  line-height: 1.2em;
-}
-
-
-.jp-MarkdownCell {
-  outline: 0;
-}
-
-
-.jp-MarkdownCell.jp-mod-rendered {
-  padding-left: 90px;
-}
-
-
-.jp-MarkdownCell-renderer {
-  padding: 0.5em 0.5em 0.5em 0.4em;
-}
-
-
-.jp-MarkdownCell-content {
-  padding: 0.5em;
-}
-
-
-.jp-OutputArea {
-  background: none;
-}
-
-
-.jp-Output {
-  display: flex;
-  flex-direction: row;
-}
-
-
-.jp-Output-executeResult {
-  margin-left: 0px;
-  flex: 1 1 auto;
-}
-
-
-.jp-Output-executeResult img {
-  max-width: 100%;
-  height: auto;
-}
-
-
-img.jp-mod-unconfined {
-  max-width: none;
-}
-
-
-.jp-Output-prompt {
-  color: #D84315;
-  font-family: monospace;
-  text-align: right;
-  vertical-align: middle;
-  padding: 0.4em;
-  font-size: 14px;
-  flex: 0 0 90px;
-  box-sizing: border-box;
-}
-
-
-.jp-Output-result {
-  padding: 0.4em;
-  user-select: text;
-  -moz-user-select: text;
-  -webkit-user-select: text;
-  -ms-user-select: text;
-}
-
-
-.p-Widget.jp-Output-result {
-  overflow: auto;
-}
-
-
-/* If we have two nested output areas (for example, as with output widgets),
-   then the inner output looks weird with a prompt, so we hide it. */
-.jp-Output .jp-Output .jp-Output-prompt {
-  display: none;
-}
-
-
-.jp-Notebook .jp-Output pre {
-  border: none;
-  margin: 1px 0 0 5px;
-  overflow-x: auto;
-  overflow-y: auto;
-  word-break: break-all;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-
-.jp-Output-stderr {
-  background: #fdd;
-}
-
-
-.jp-Output-stdinPrompt {
-  padding-right: 8px;
-}
-
-
-.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-active.jp-mod-selected {
-  border-color: #ABABAB;
-  border-left-width: var(--jp-border-width);
-  background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 5px, transparent 5px, transparent 100%);
-}
-
-
-.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-multiSelected.jp-mod-active {
-  background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 7px, #E3F2FD 7px, #E3F2FD 100%);
-}
-
-
-.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-selected {
-  background: #E3F2FD;
-}
-
-
-.jp-Notebook.jp-mod-editMode .jp-Notebook-cell.jp-mod-active {
-  border-color: #66BB6A;
-  border-left-width: var(--jp-border-width);
-  background: linear-gradient(to right, #66BB6A -40px, #66BB6A 5px, transparent 5px, transparent 100%);
-}
-
-
-.jp-NotebookContainer-widget {
-  flex: 0 0 auto;
-}
-
-
-.jp-Notebook {
-  flex: 1 1 auto;
-}
-
-
-
-.jp-Cell {
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-left: 5px;
-  padding-right: 5px;
-  border-width: var(--jp-border-width);
-  border-style: solid;
-  border-color: transparent;
-  outline: none;
-}
-
-
-.jp-Cell.jp-CodeCell.jp-mod-collapsed.jp-mod-readOnly {
-  padding-left: 5px;
-  padding-right: 5px;
-  border-width: var(--jp-border-width);
-  border-style: solid;
-  border-color: transparent;
-  outline: none;
-  background: transparent;
-  border-color: transparent;
-}
-
-
-.jp-CellEditor > .CodeMirror {
-  line-height: 1.21429em;
-  /* Changed from 1em to our global default */
-  font-size: 14px;
-  height: auto;
-  /* Changed to auto to autogrow */
-  background: none;
-  /* Changed from white to allow our bg to show through */
-}
-
-
-.jp-CellEditor > .CodeMirror pre {
-  /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
-  /* .CodeMirror-lines */
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-}
-
-
-/* This causes https://github.com/jupyter/jupyterlab/issues/522 */
-.jp-CellEditor .CodeMirror-lines {
-  padding: 0.4em;
-}
-
-
-/* The following selectors never apply since .CodeMirror is the only child of .jp-CellEditor */
-
-.jp-CellEditor > .CodeMirror-scroll {
-  /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
-  /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
-  overflow-y: hidden;
-  overflow-x: auto;
-}
-
-
-.jp-CellEditor > .CodeMirror-lines {
-  /* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
-  /* we have set a different line-height and want this to scale with that. */
-  padding: 0.4em;
-}
-
-
-.jp-CellEditor > .CodeMirror-linenumber {
-  padding: 0 8px 0 4px;
-}
-
-
-.jp-CellEditor > .CodeMirror-gutters {
-  border-bottom-left-radius: 2px;
-  border-top-left-radius: 2px;
-}

src/notebook/notebook/index.css

@@ -0,0 +1,57 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+.jp-Notebook {
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-bottom: 20px;
+  margin-top: 20px;
+  min-width: 50px;
+  min-height: 50px;
+  outline: none;
+  overflow: auto;
+}
+
+
+.jp-Notebook-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+
+.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-active.jp-mod-selected {
+  border-color: #ABABAB;
+  border-left-width: var(--jp-border-width);
+  background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 5px, transparent 5px, transparent 100%);
+}
+
+
+.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-multiSelected.jp-mod-active {
+  background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 7px, #E3F2FD 7px, #E3F2FD 100%);
+}
+
+
+.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-selected {
+  background: #E3F2FD;
+}
+
+
+.jp-Notebook.jp-mod-editMode .jp-Notebook-cell.jp-mod-active {
+  border-color: #66BB6A;
+  border-left-width: var(--jp-border-width);
+  background: linear-gradient(to right, #66BB6A -40px, #66BB6A 5px, transparent 5px, transparent 100%);
+}
+
+
+.jp-NotebookContainer-widget {
+  flex: 0 0 auto;
+}
+
+
+.jp-Notebook {
+  flex: 1 1 auto;
+}

src/notebook/notebook/toolbar.css

@@ -0,0 +1,121 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+.jp-NBToolbar {
+  color: var(--jp-ui-font-color1);
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row;
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
+  height: 24px;
+}
+
+
+.jp-NBToolbar > .jp-NBToolbar-item {
+  flex: 0 0 auto;
+  padding-left: 8px;
+  padding-right: 8px;
+  vertical-align: middle;
+  font-size: 14px;
+  line-height: 23px;
+}
+
+
+.jp-NBToolbar-item.jp-NBToolbar-button,
+.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator {
+  font-family: FontAwesome;
+  text-align: center;
+  display: inline-block;
+}
+
+
+.jp-NBToolbar-item.jp-NBToolbar-cellType select {
+    background: #FFFFFF;
+}
+
+.jp-NBToolbar-cellType .jp-NBToolbar-cellTypeDropdown {
+    border: var(--jp-border-width) solid var(--jp-border-color1);
+    border-radius: 0;
+    outline: none;
+    width: 100%;
+    font-size: 14px;
+    line-height: 23px;
+}
+
+
+.jp-NBToolbar-item.jp-NBToolbar-kernelName {
+    text-align: right;
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+
+.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator {
+    border-right: none;
+}
+
+
+.jp-NBToolbar-button.jp-mod-pressed {
+    background-color: #E0E0E0;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+
+.jp-NBToolbar-button:hover {
+    background-color: #EEEEEE;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+
+.jp-NBToolbar-button.jp-NBToolbar-save::before {
+   content: "\f0c7";  /* Save */
+}
+
+
+.jp-NBToolbar-button.jp-NBToolbar-insert::before {
+   content: "\f067";  /* Plus */
+}
+
+
+.jp-NBToolbar-button.jp-NBToolbar-cut::before {
+   content: "\f0c4";  /* Cut */
+}
+
+
+.jp-NBToolbar-button.jp-NBToolbar-copy::before {
+   content: "\f0c5";  /* Copy */
+}
+
+
+.jp-NBToolbar-button.jp-NBToolbar-paste::before {
+   content: "\f0ea";  /* Paste */
+}
+
+
+.jp-NBToolbar-button.jp-NBToolbar-run::before {
+   content: "\f051";  /* Step-forward */
+}
+
+
+.jp-NBToolbar-button.jp-NBToolbar-interrupt::before {
+   content: "\f04d";  /* Stop */
+}
+
+
+.jp-NBToolbar-button.jp-NBToolbar-restart::before {
+   content: "\f01e";  /* Rotate-right */
+}
+
+
+.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator::before {
+    content: "\f10c";  /* Circle-o */
+}
+
+
+.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator.jp-mod-busy::before {
+    content: "\f111";  /* Circle */
+}
+

src/notebook/output-area/index.css

@@ -0,0 +1,74 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+.jp-OutputArea {
+  background: none;
+}
+
+
+.jp-Output {
+  display: flex;
+  flex-direction: row;
+}
+
+
+.jp-Output-executeResult {
+  margin-left: 0px;
+  flex: 1 1 auto;
+}
+
+
+.jp-Output-executeResult img {
+  max-width: 100%;
+  height: auto;
+}
+
+
+img.jp-mod-unconfined {
+  max-width: none;
+}
+
+
+.jp-Output-result {
+  padding: 0.4em;
+  user-select: text;
+  -moz-user-select: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+}
+
+
+.p-Widget.jp-Output-result {
+  overflow: auto;
+}
+
+
+/* If we have two nested output areas (for example, as with output widgets),
+   then the inner output looks weird with a prompt, so we hide it. */
+.jp-Output .jp-Output .jp-Output-prompt {
+  display: none;
+}
+
+
+.jp-Notebook .jp-Output pre {
+  border: none;
+  margin: 1px 0 0 5px;
+  overflow-x: auto;
+  overflow-y: auto;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+
+.jp-Output-stderr {
+  background: #fdd;
+}
+
+
+.jp-Output-stdinPrompt {
+  padding-right: 8px;
+}