More less/css organization -> moving to index.less model.

src/console/base.less

@@ -1,15 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) 2014-2016, Jupyter Development Team.
-|
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-.jp-ConsolePanel {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-}
-
-
-.jp-Console {
-  overflow: auto;
-}

src/console/index.less

@@ -2,7 +2,17 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+
+.jp-ConsolePanel {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+
 .jp-Console {
+  overflow: auto;
   height: 100%;
   padding: 0 10px 20px 10px;
 }

src/default-theme/index.less

@@ -24,6 +24,7 @@
 @import './faq/index.less';
 @import './filebrowser/index.less';
 @import './help/index.less';
+@import './iframe/index.less';
 @import './imagewidget/index.less';
 @import './inspector/index.less';
 @import './landing/index.less';

src/dialog/base.less

@@ -1,42 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) 2014-2016, Jupyter Development Team.
-|
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-.jp-Dialog {
-  position: absolute;
-  z-index: 10000;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  top: 0px;
-  left: 0px;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-}
-
-
-.jp-Dialog-content {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-
-.jp-Dialog-header {
-
-}
-
-
-.jp-Dialog-footer {
-
-}
-
-
-.jp-Dialog-title {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}

src/dialog/index.less

@@ -4,13 +4,29 @@
 |
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+
 .jp-Dialog {
+  position: absolute;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  top: 0px;
+  left: 0px;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
   background: rgba(0,0,0,0.25);
   color: #757575;
 }
 
 
 .jp-Dialog-content {
+  margin-left: auto;
+  margin-right: auto;
   background: #FAFAFA;
   padding: 24px;
   width: 300px;
@@ -45,6 +61,13 @@
 }
 
 
+.jp-Dialog-title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+
 .jp-Dialog-button {
   font-size: 15px;
   border: none;

src/filebrowser/base.less

@@ -1,63 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-.jp-FileBrowser {
-  display: flex;
-  flex-direction: column;
-}
-
-
-.jp-BreadCrumbs {
-  flex: 0 0 auto;
-}
-
-
-.jp-FileButtons {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: row;
-}
-
-
-.jp-FileButtons-buttonContent {
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-}
-
-
-.jp-FileButtons-buttonIcon {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-
-.jp-DirListing {
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: column;
-}
-
-
-.jp-DirListing-header {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-}
-
-
-.jp-DirListing-content {
-  flex: 1 1 auto;
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  overflow: auto;
-}
-
-
-.jp-DirListing-item {
-  display: flex;
-  flex-direction: row;
-}

src/filebrowser/index.less

@@ -3,6 +3,8 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 .jp-FileBrowser {
+  display: flex;
+  flex-direction: column;
   color: #757575;
   background: #FAFAFA;
   font-size: 13px;
@@ -11,6 +13,7 @@
 
 .jp-BreadCrumbs {
   margin: 4px 12px;
+  flex: 0 0 auto;
 }
 
 
@@ -35,6 +38,13 @@
 }
 
 
+.jp-FileButtons-buttonContent {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+}
+
+
 .jp-FileButtons-button {
   flex: 1 1 auto;
   max-width: 100px;
@@ -49,6 +59,12 @@
 }
 
 
+.jp-FileButtons-buttonIcon {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
 .jp-FileButtons-button::-moz-focus-inner {
   border: 0;
 }
@@ -75,11 +91,18 @@
 
 
 .jp-DirListing {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
   outline: 0;
 }
 
 
 .jp-DirListing-header {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
   margin-bottom: 4px;
   border-top: 1px solid #E0E0E0;
   border-bottom: 1px solid #E0E0E0;
@@ -136,12 +159,18 @@
 }
 
 /* increase specificity to override bundled default */
-/*.jp-DirListing > .jp-DirListing-content {
-  padding: 0px;
-}*/
+.jp-DirListing-content {
+  flex: 1 1 auto;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  overflow: auto;
+}
 
 
 .jp-DirListing-item {
+  display: flex;
+  flex-direction: row;
   padding: 4px 12px;
 }
 

src/notebook/base.less

@@ -1,57 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) 2014-2016, Jupyter Development Team.
-|
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-
-.jp-Notebook-panel {
-  display: flex;
-  flex-direction: column;
-}
-
-
-.jp-NBToolbar {
-  flex: 0 0 auto;
-}
-
-
-.jp-InputArea {
-  display: flex;
-  flex-direction: row;
-}
-
-
-.jp-InputArea-prompt {
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-
-.jp-InputArea-editor {
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-
-
-.jp-MarkdownCell-content {
-  padding: 0.5em;
-}
-
-
-.jp-Output-result {
-  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;
-}

src/notebook/index.less

@@ -3,6 +3,12 @@
 |
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+
+@import './completion.less';
+@import './highlight.less';
+
+
 .jp-Notebook {
   padding-left: 4px;
   padding-right: 4px;
@@ -16,11 +22,21 @@
 
 
 .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;
@@ -32,6 +48,8 @@
 
 
 .jp-InputArea-editor {
+  flex-grow: 1;
+  flex-shrink: 1;
   height: auto;
   min-height: 2em;
 }
@@ -60,6 +78,11 @@
 }
 
 
+.jp-MarkdownCell-content {
+  padding: 0.5em;
+}
+
+
 .jp-OutputArea {
   background: none;
 }
@@ -102,6 +125,22 @@ img.jp-mod-unconfined {
 
 .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;
 }
 
 
@@ -186,29 +225,30 @@ img.jp-mod-unconfined {
 
 
 .jp-NBToolbar {
-    display: flex;
-    flex-direction: row;
-    border-bottom: 1px solid #E0E0E0;
-    height: 24px;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #E0E0E0;
+  height: 24px;
 }
 
 
 .jp-NBToolbar > .jp-NBToolbar-item {
-    flex: 0 0 auto;
-    padding-left: 8px;
-    padding-right: 8px;
-    vertical-align: middle;
-    font-size: 14px;
-    color: #616161;
-    line-height: 23px;
+  flex: 0 0 auto;
+  padding-left: 8px;
+  padding-right: 8px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #616161;
+  line-height: 23px;
 }
 
 
 .jp-NBToolbar-item.jp-NBToolbar-button,
 .jp-NBToolbar-item.jp-NBToolbar-kernelIndicator {
-    font-family: FontAwesome;
-    text-align: center;
-    display: inline-block;
+  font-family: FontAwesome;
+  text-align: center;
+  display: inline-block;
 }
 
 

src/renderers/base.less

@@ -1,291 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-.jp-RenderedHTMLCommon {
-
-  color: black;
-  font-size: 14px;
-  line-height: 20px;
-
-  .MathJax_Display {
-    margin: 0;
-  }
-
-
-  em {
-    font-style: italic;
-  }
-
-  strong {
-    font-weight: bold;
-  }
-
-  u {
-    text-decoration: underline;
-  }
-
-  :link {
-    text-decoration: underline;
-  }
-
-  :visited {
-    text-decoration: underline;
-  }
-
-  /*For a 14px base font size this goes as:
-  font-size = 26, 22, 18, 14, 12, 12
-  margin-top = 14, 14, 14, 14, 8, 8
-  */
-
-  h1 {
-    font-size: 185.7%;
-    margin: 1.08em 0 0 0;
-    font-weight: bold;
-    line-height: 1.0;
-  }
-
-
-  h2 {
-    font-size: 157.1%;
-    margin: 1.27em 0 0 0;
-    font-weight: bold;
-    line-height: 1.0;
-  }
-
-
-  h3 {
-    font-size: 128.6%;
-    margin: 1.55em 0 0 0;
-    font-weight: bold;
-    line-height: 1.0;
-  }
-
-
-  h4 {
-    font-size: 100%;
-    margin: 2em 0 0 0;
-    font-weight: bold;
-    line-height: 1.0;
-  }
-
-
-  h5 {
-    font-size: 100%;
-    margin: 2em 0 0 0;
-    font-weight: bold;
-    line-height: 1.0;
-    font-style: italic;
-  }
-
-
-  h6 {
-    font-size: 100%;
-    margin: 2em 0 0 0;
-    font-weight: bold;
-    line-height: 1.0;
-    font-style: italic;
-  }
-
-
-  h1:first-child {
-    margin-top: 0.538em;
-  }
-
-
-  h2:first-child {
-    margin-top: 0.636em;
-  }
-
-
-  h3:first-child {
-    margin-top: 0.777em;
-  }
-
-
-  h4:first-child {
-    margin-top: 1em;
-  }
-
-
-  h5:first-child {
-    margin-top: 1em;
-  }
-
-
-  h6:first-child {
-    margin-top: 1em;
-  }
-
-
-  ul:not(.list-inline),
-  ol:not(.list-inline) {
-    padding-left: 2em;
-  }
-
-
-  ul {
-    list-style: disc;
-  }
-
-
-  ul ul {
-    list-style: square;
-  }
-
-
-  ul ul ul {
-    list-style: circle;
-  }
-
-
-  ol {
-    list-style: decimal;
-  }
-
-
-  ol ol {
-    list-style: upper-alpha;
-  }
-
-
-  ol ol ol {
-    list-style: lower-alpha;
-  }
-
-
-  ol ol ol ol {
-    list-style: lower-roman;
-  }
-
-
-  ol ol ol ol ol {
-    list-style: decimal;
-  }
-
-
-  * + ul {
-    margin-top: 1em;
-  }
-
-
-  * + ol {
-    margin-top: 1em;
-  }
-
-
-  hr {
-    color: black;
-    background-color: black;
-    margin-top: 1em;
-    margin-bottom: 1em;
-  }
-
-
-  pre {
-    margin: 1em 2em;
-  }
-
-
-  pre,
-  code {
-    border: 0;
-    background-color: white;
-    color: black;
-    font-size: 100%;
-    padding: 0px;
-  }
-
-
-  blockquote {
-    margin: 1em 2em;
-  }
-
-
-  table {
-    margin-left: auto;
-    margin-right: auto;
-    border: 1px solid black;
-    border-collapse: collapse;
-  }
-
-
-  tr,
-  th,
-  td {
-    border: 1px solid black;
-    border-collapse: collapse;
-    margin: 1em 2em;
-  }
-
-
-  td,
-  th {
-    text-align: left;
-    vertical-align: middle;
-    padding: 4px;
-  }
-
-
-  th {
-    font-weight: bold;
-  }
-
-  * + table {
-    margin-top: 1em;
-  }
-
-
-  p {
-    text-align: left;
-    margin: 0px;
-  }
-
-
-  * + p {
-    margin-top: 1em;
-  }
-
-
-  img {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-
-  * + img {
-    margin-top: 1em;
-  }
-
-
-  img,
-  svg {
-    max-width: 100%;
-    height: auto;
-  }
-
-
-  img.unconfined,
-  svg.unconfined {
-    max-width: none;
-  }
-
-  .alert {
-    margin-bottom: initial;
-  }
-
-
-  * + .alert {
-    margin-top: 1em;
-  }
-
-
-  blockquote {
-    margin: 1em 2em;
-    padding: 0 1em;
-    border-left: 5px solid black;
-  }
-
-}

src/renderers/index.less

@@ -6,8 +6,287 @@
 
 .jp-RenderedHTMLCommon {
 
+  color: black;
+  font-size: 14px;
+  line-height: 20px;
+
+  .MathJax_Display {
+    margin: 0;
+  }
+
+
+  em {
+    font-style: italic;
+  }
+
+  strong {
+    font-weight: bold;
+  }
+
+  u {
+    text-decoration: underline;
+  }
+
+  :link {
+    text-decoration: underline;
+  }
+
+  :visited {
+    text-decoration: underline;
+  }
+
+  /*For a 14px base font size this goes as:
+  font-size = 26, 22, 18, 14, 12, 12
+  margin-top = 14, 14, 14, 14, 8, 8
+  */
+
+  h1 {
+    font-size: 185.7%;
+    margin: 1.08em 0 0 0;
+    font-weight: bold;
+    line-height: 1.0;
+  }
+
+
+  h2 {
+    font-size: 157.1%;
+    margin: 1.27em 0 0 0;
+    font-weight: bold;
+    line-height: 1.0;
+  }
+
+
+  h3 {
+    font-size: 128.6%;
+    margin: 1.55em 0 0 0;
+    font-weight: bold;
+    line-height: 1.0;
+  }
+
+
+  h4 {
+    font-size: 100%;
+    margin: 2em 0 0 0;
+    font-weight: bold;
+    line-height: 1.0;
+  }
+
+
+  h5 {
+    font-size: 100%;
+    margin: 2em 0 0 0;
+    font-weight: bold;
+    line-height: 1.0;
+    font-style: italic;
+  }
+
+
+  h6 {
+    font-size: 100%;
+    margin: 2em 0 0 0;
+    font-weight: bold;
+    line-height: 1.0;
+    font-style: italic;
+  }
+
+
+  h1:first-child {
+    margin-top: 0.538em;
+  }
+
+
+  h2:first-child {
+    margin-top: 0.636em;
+  }
+
+
+  h3:first-child {
+    margin-top: 0.777em;
+  }
+
+
+  h4:first-child {
+    margin-top: 1em;
+  }
+
+
+  h5:first-child {
+    margin-top: 1em;
+  }
+
+
+  h6:first-child {
+    margin-top: 1em;
+  }
+
+
+  ul:not(.list-inline),
+  ol:not(.list-inline) {
+    padding-left: 2em;
+  }
+
+
+  ul {
+    list-style: disc;
+  }
+
+
+  ul ul {
+    list-style: square;
+  }
+
+
+  ul ul ul {
+    list-style: circle;
+  }
+
+
+  ol {
+    list-style: decimal;
+  }
+
+
+  ol ol {
+    list-style: upper-alpha;
+  }
+
+
+  ol ol ol {
+    list-style: lower-alpha;
+  }
+
+
+  ol ol ol ol {
+    list-style: lower-roman;
+  }
+
+
+  ol ol ol ol ol {
+    list-style: decimal;
+  }
+
+
+  * + ul {
+    margin-top: 1em;
+  }
+
+
+  * + ol {
+    margin-top: 1em;
+  }
+
+
+  hr {
+    color: black;
+    background-color: black;
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+
+
+  pre {
+    margin: 1em 2em;
+  }
+
+
+  pre,
+  code {
+    border: 0;
+    background-color: white;
+    color: black;
+    font-size: 100%;
+    padding: 0px;
+  }
+
+
+  blockquote {
+    margin: 1em 2em;
+  }
+
+
+  table {
+    margin-left: auto;
+    margin-right: auto;
+    border: 1px solid black;
+    border-collapse: collapse;
+  }
+
+
+  tr,
+  th,
+  td {
+    border: 1px solid black;
+    border-collapse: collapse;
+    margin: 1em 2em;
+  }
+
+
+  td,
+  th {
+    text-align: left;
+    vertical-align: middle;
+    padding: 4px;
+  }
+
+
+  th {
+    font-weight: bold;
+  }
+
+  * + table {
+    margin-top: 1em;
+  }
+
+
+  p {
+    text-align: left;
+    margin: 0px;
+  }
+
+
+  * + p {
+    margin-top: 1em;
+  }
+
+
+  img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+
+  * + img {
+    margin-top: 1em;
+  }
+
+
+  img,
+  svg {
+    max-width: 100%;
+    height: auto;
+  }
+
+
+  img.unconfined,
+  svg.unconfined {
+    max-width: none;
+  }
+
+  .alert {
+    margin-bottom: initial;
+  }
+
+
+  * + .alert {
+    margin-top: 1em;
+  }
+
+
   blockquote {
-    border-left: 5px solid #eeeeee;
+    margin: 1em 2em;
+    padding: 0 1em;
+    border-left: 5px solid #EEEEEE;
   }
 
 }

src/running/base.less

@@ -1,79 +0,0 @@
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-.jp-RunningSessions {
-  display: flex;
-  flex-direction: column;
-}
-
-
-.jp-RunningSessions-header {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: row;
-}
-
-
-.jp-RunningSessions-headerTitle {
-  flex: 1 1 auto;
-}
-
-
-.jp-RunningSessions-headerRefresh {
-  flex: 0 0 auto;
-}
-
-
-.jp-RunningSessions-section {
-  display: flex;
-  flex: 0 1 auto;
-  flex-direction: column;
-}
-
-
-.jp-RunningSessions-sectionHeader {
-  flex: 0 0 auto;
-}
-
-
-.jp-RunningSessions-sectionContainer {
-  flex: 1 1 auto;
-  margin: 0;
-  padding: 0;
-  overflow: auto;
-}
-
-
-.jp-RunningSessions-sectionList {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-}
-
-
-.jp-RunningSessions-item {
-  display: flex;
-  flex-direction: row;
-}
-
-
-.jp-RunningSessions-itemIcon {
-  flex: 0 0 auto;
-}
-
-
-.jp-RunningSessions-itemLabel {
-  flex: 1 1 auto;
-}
-
-
-.jp-RunningSessions-itemKernelName {
-  flex: 0 0 auto;
-}
-
-
-.jp-RunningSessions-itemShutdown {
-  flex: 0 0 auto;
-}

src/running/index.less

@@ -4,6 +4,8 @@
 |----------------------------------------------------------------------------*/
 
 .jp-RunningSessions {
+  display: flex;
+  flex-direction: column;
   min-width: 300px;
   color: #757575;
   background: #FAFAFA;
@@ -12,11 +14,15 @@
 
 
 .jp-RunningSessions-header {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row;
   border-bottom: 1px solid #E0E0E0;
 }
 
 
 .jp-RunningSessions-headerTitle {
+  flex: 1 1 auto;
   padding: 6px;
   font-size: 12px;
   vertical-align: middle;
@@ -37,6 +43,13 @@
 }
 
 
+.jp-RunningSessions-section {
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: column;
+}
+
+
 .jp-RunningSessions-headerRefresh:before {
   font-family: FontAwesome;
   content: '\f021'; /* refresh */
@@ -52,6 +65,7 @@
 
 
 .jp-RunningSessions-sectionHeader {
+  flex: 0 0 auto;
   margin: 4px 0px;
   padding: 4px 12px;
   font-size: 11px;
@@ -62,7 +76,24 @@
 }
 
 
+.jp-RunningSessions-sectionContainer {
+  flex: 1 1 auto;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+}
+
+
+.jp-RunningSessions-sectionList {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+
 .jp-RunningSessions-item {
+  display: flex;
+  flex-direction: row;
   padding: 3px 12px;
   font-size: 13px;
   font-weight: 500;
@@ -76,6 +107,7 @@
 
 
 .jp-RunningSessions-itemIcon {
+  flex: 0 0 auto;
   padding: 1px 4px;
   font-size: 14px;
   font-family: FontAwesome;
@@ -100,16 +132,19 @@
 }
 
 .jp-RunningSessions-itemLabel {
+  flex: 1 1 auto;
   padding: 1px;
 }
 
 .jp-RunningSessions-itemKernelName {
+  flex: 0 0 auto;
   padding: 1px;
   margin-right: 7px;
 }
 
 
 .jp-RunningSessions-itemShutdown {
+  flex: 0 0 auto;
   padding: 1px 4px;
   color: #ffffff;
   background: #f0ad4e;