Merge pull request #6 from blink1073/update-css

Update the example css

examples/docmanager/index.css

@@ -2,38 +2,8 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
-body {
-  margin: 0;
-  padding: 0;
-  background: #F5F6F7;
-  overflow: hidden;
-}
-
-
-#main {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  right: 10px;
-  bottom: 10px;
-}
-
-
-.jp-CodeMirrorWidget {
-  min-height: 200px;
-  min-width: 200px;
-}
-
-
-.p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:before {
-  font-family: FontAwesome;
-  content: '\f00d'; /* close */
-}
-
-
-.p-TabBar-tab.p-mod-closable.jp-mod-dirty > .p-TabBar-tabCloseIcon:before {
-  font-family: FontAwesome;
-  content: '\f069'; /* asterisk */
+.p-SplitPanel {
+  height: 400px;
 }
 
 
@@ -134,6 +104,12 @@ body {
 }
 
 
+.p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:before {
+  content: '\f00d';
+  font-family: FontAwesome;
+}
+
+
 .p-TabBar-tab.p-mod-drag-image {
   min-height: 23px;
   max-height: 23px;
@@ -142,3 +118,124 @@ body {
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
   transform: translateX(-40%) translateY(-58%);
 }
+
+.p-MenuBar {
+  padding-left: 5px;
+  background: #FAFAFA;
+  color: rgba(0, 0, 0, 0.87);
+  border-bottom: 1px solid #DDDDDD;
+  font: 13px Helvetica, Arial, sans-serif;
+}
+
+
+.p-MenuBar-menu {
+  transform: translateY(-1px);
+}
+
+
+.p-MenuBar-item {
+  padding: 4px 8px;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+}
+
+
+.p-MenuBar-item.p-mod-active {
+  background: #E5E5E5;
+}
+
+
+.p-MenuBar-item.p-mod-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+
+.p-MenuBar-item.p-type-separator {
+  margin: 2px;
+  padding: 0;
+  border: none;
+  border-left: 1px solid #DDDDDD;
+}
+
+
+.p-MenuBar.p-mod-active .p-MenuBar-item.p-mod-active {
+  z-index: 10001;
+  background: white;
+  border-left: 1px solid #C0C0C0;
+  border-right: 1px solid #C0C0C0;
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
+}
+
+
+.p-Menu {
+  z-index: 10000;
+  padding: 3px 0px;
+  background: white;
+  color: rgba(0, 0, 0, 0.87);
+  border: 1px solid #C0C0C0;
+  font: 12px Helvetica, Arial, sans-serif;
+  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
+}
+
+
+.p-Menu-item.p-mod-active {
+  background: #E5E5E5;
+}
+
+
+.p-Menu-item.p-mod-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+
+.p-Menu-itemIcon {
+  width: 21px;
+  padding: 4px 2px;
+}
+
+
+.p-Menu-itemText {
+  padding: 4px 35px 4px 2px;
+}
+
+
+.p-Menu-itemShortcut {
+  padding: 4px 0px;
+}
+
+
+.p-Menu-itemSubmenuIcon {
+  width: 16px;
+  padding: 4px 0px;
+}
+
+
+.p-Menu-item.p-type-separator > span {
+  padding: 0;
+  height: 9px;
+}
+
+
+.p-Menu-item.p-type-separator > span::after {
+  content: '';
+  display: block;
+  position: relative;
+  top: 4px;
+  border-top: 1px solid #DDDDDD;
+}
+
+
+.p-Menu-itemIcon::before,
+.p-Menu-itemSubmenuIcon::before {
+  font-family: FontAwesome;
+}
+
+
+.p-Menu-item.p-type-check.p-mod-checked > .p-Menu-itemIcon::before {
+  content: '\f00c';
+}
+
+
+.p-Menu-item.p-type-submenu > .p-Menu-itemSubmenuIcon::before {
+  content: '\f0da';
+}

examples/docmanager/src/index.ts

@@ -22,6 +22,9 @@ import {
   getBaseUrl
 } from 'jupyter-js-utils';
 
+import 'jupyter-js-ui/lib/index.css';
+import 'jupyter-js-ui/lib/theme.css';
+
 
 function main(): void {
   let dock = new DockPanel();

examples/terminal/index.css

@@ -2,37 +2,8 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
-.jp-TerminalWidget {
-  min-width: 50px;
-  min-height: 500px;
-}
-
-.jp-TerminalWidget-body {
-  padding: 0.5em;
-}
-
-
-/*-----------------------------------------------------------------------------
-| Copyright (c) 2014-2015, PhosphorJS Contributors
-|
-| Distributed under the terms of the BSD 3-Clause License.
-|
-| The full license is in the file LICENSE, distributed with this software.
-|----------------------------------------------------------------------------*/
-body {
-  margin: 0;
-  padding: 0;
-  background: #F5F6F7;
-  overflow: hidden;
-}
-
-
-#main {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  right: 10px;
-  bottom: 10px;
+.p-SplitPanel {
+  height: 400px;
 }
 
 
@@ -147,3 +118,124 @@ body {
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
   transform: translateX(-40%) translateY(-58%);
 }
+
+.p-MenuBar {
+  padding-left: 5px;
+  background: #FAFAFA;
+  color: rgba(0, 0, 0, 0.87);
+  border-bottom: 1px solid #DDDDDD;
+  font: 13px Helvetica, Arial, sans-serif;
+}
+
+
+.p-MenuBar-menu {
+  transform: translateY(-1px);
+}
+
+
+.p-MenuBar-item {
+  padding: 4px 8px;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+}
+
+
+.p-MenuBar-item.p-mod-active {
+  background: #E5E5E5;
+}
+
+
+.p-MenuBar-item.p-mod-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+
+.p-MenuBar-item.p-type-separator {
+  margin: 2px;
+  padding: 0;
+  border: none;
+  border-left: 1px solid #DDDDDD;
+}
+
+
+.p-MenuBar.p-mod-active .p-MenuBar-item.p-mod-active {
+  z-index: 10001;
+  background: white;
+  border-left: 1px solid #C0C0C0;
+  border-right: 1px solid #C0C0C0;
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
+}
+
+
+.p-Menu {
+  z-index: 10000;
+  padding: 3px 0px;
+  background: white;
+  color: rgba(0, 0, 0, 0.87);
+  border: 1px solid #C0C0C0;
+  font: 12px Helvetica, Arial, sans-serif;
+  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
+}
+
+
+.p-Menu-item.p-mod-active {
+  background: #E5E5E5;
+}
+
+
+.p-Menu-item.p-mod-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+
+.p-Menu-itemIcon {
+  width: 21px;
+  padding: 4px 2px;
+}
+
+
+.p-Menu-itemText {
+  padding: 4px 35px 4px 2px;
+}
+
+
+.p-Menu-itemShortcut {
+  padding: 4px 0px;
+}
+
+
+.p-Menu-itemSubmenuIcon {
+  width: 16px;
+  padding: 4px 0px;
+}
+
+
+.p-Menu-item.p-type-separator > span {
+  padding: 0;
+  height: 9px;
+}
+
+
+.p-Menu-item.p-type-separator > span::after {
+  content: '';
+  display: block;
+  position: relative;
+  top: 4px;
+  border-top: 1px solid #DDDDDD;
+}
+
+
+.p-Menu-itemIcon::before,
+.p-Menu-itemSubmenuIcon::before {
+  font-family: FontAwesome;
+}
+
+
+.p-Menu-item.p-type-check.p-mod-checked > .p-Menu-itemIcon::before {
+  content: '\f00c';
+}
+
+
+.p-Menu-item.p-type-submenu > .p-Menu-itemSubmenuIcon::before {
+  content: '\f0da';
+}

examples/terminal/src/index.ts

@@ -14,6 +14,9 @@ import {
   TerminalWidget
 } from 'jupyter-js-ui/lib/terminal';
 
+import 'jupyter-js-ui/lib/index.css';
+import 'jupyter-js-ui/lib/theme.css';
+
 
 function main(): void {
   let term1 = new TerminalWidget({ background: 'black',