Remove widget suffix from css classes

example/index.css

@@ -1,11 +1,11 @@
 /* Increased specificity in case phosphor css is loaded later. */
-.p-Widget.jp-NotebookWidget {  
+.p-Widget.jp-Notebook {  
   min-width: 50px;
   min-height: 50px;
 }
 
 
-.jp-InputAreaWidget > .jp-CodeMirrorWidget {
+.jp-InputArea > .jp-CodeMirror {
   border: 1px solid #cfcfcf;
   border-radius: 2px;
   background: #f7f7f7;
@@ -13,18 +13,18 @@
 }
 
 
-.jp-MarkdownCellWidget {
+.jp-MarkdownCell {
   outline: 0;
 }
 
 
-.jp-OutputAreaWidget pre {
+.jp-OutputArea pre {
   background: #ffffff;
   border: none;
 }
 
 
-.jp-CellWidget.jp-mod-selected {
+.jp-Cell.jp-mod-selected {
   border-color: #66BB6A;
   border-left-width: 1px;
   padding-left: 10px;
@@ -32,7 +32,7 @@
 }
 
 
-.jp-CellWidget {
+.jp-Cell {
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
@@ -43,7 +43,7 @@
 }
 
 
-.jp-MarkdownCellWidget {
+.jp-MarkdownCell {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 

example/src/index.ts

@@ -32,7 +32,7 @@ let NOTEBOOK = 'test.ipynb';
 
 function bindings(nbModel: NotebookModel) {
   let bindings: IKeyBinding[] = [{
-    selector: '.jp-NotebookWidget-cell',
+    selector: '.jp-Notebook-cell',
     sequence: ["Shift Enter"],
     handler: () => {
       nbModel.runSelectedCell();

src/notebook/cells/widget.ts

@@ -35,7 +35,7 @@ export
 abstract class CellWidget extends Widget {
   constructor() {
     super();
-    this.addClass('jp-CellWidget');
+    this.addClass('jp-Cell');
     // we make the cell focusable by setting the tabIndex
     this.node.tabIndex = -1;
     this.layout = new PanelLayout();
@@ -57,7 +57,7 @@ class CodeCellWidget extends CellWidget {
    */
   constructor(model: ICodeCellModel) {
     super();
-    this.addClass('jp-CodeCellWidget');
+    this.addClass('jp-CodeCell');
     this._model = model;
     this.input = new InputAreaWidget(model.input);
     this.output = new OutputAreaWidget(model.output);
@@ -123,7 +123,7 @@ class MarkdownCellWidget extends CellWidget {
    */
   constructor(model: IMarkdownCellModel) {
     super();
-    this.addClass('jp-MarkdownCellWidget');
+    this.addClass('jp-MarkdownCell');
 
     this._model = model;
     // Insist on the Github-flavored markdown mode

src/notebook/editor/widget.ts

@@ -32,7 +32,7 @@ import {
 /**
  * The class name added to CodeMirrorWidget instances.
  */
-const CODEMIRROR_CLASS = 'jp-CodeMirrorWidget';
+const CODEMIRROR_CLASS = 'jp-CodeMirror';
 
 
 /**

src/notebook/input-area/widget.ts

@@ -42,7 +42,7 @@ class InputAreaWidget extends Widget {
    */
   constructor(model: IInputAreaModel) {
     super();
-    this.addClass('jp-InputAreaWidget');
+    this.addClass('jp-InputArea');
     this._model = model;
     this.layout = new PanelLayout();
     this.updateTextEditor(model.textEditor);

src/notebook/notebook/widget.ts

@@ -40,12 +40,12 @@ import {
 /**
  * The class name added to notebook widgets.
  */
-const NB_CLASS = 'jp-NotebookWidget';
+const NB_CLASS = 'jp-Notebook';
 
 /**
  * The class name added to notebook widget cells.
  */
-const NB_CELL_CLASS = 'jp-NotebookWidget-cell';
+const NB_CELL_CLASS = 'jp-Notebook-cell';
 
 /**
  * The class name added to notebook selected cells.

src/notebook/output-area/widget.ts

@@ -84,7 +84,7 @@ class OutputAreaWidget extends Panel {
    */
   constructor(model: IOutputAreaModel) {
     super();
-    this.addClass('jp-OutputAreaWidget');
+    this.addClass('jp-OutputArea');
     this._model = model;
     model.stateChanged.connect(this.modelStateChanged, this);
     this._listdispose = follow<OutputModel>(model.outputs, this, (out) => {