Merge pull request #3174 from Carreau/simple-class

Simple less classes

Simplify class handeling in js/css

Instead of setting several class (e.g: `cell vbox`) per dom element, use less to embed the definition of `vbox` into `cell`.

This should allow : 
   - more easy theming.
   - responsive css on  nbviewer 

There are many other places where this can be done.

IPython/frontend/html/notebook/static/css/style.min.css

@@ -853,7 +853,8 b' a.label:hover,a.badge:hover{color:#ffffff;text-decoration:none;cursor:pointer;}'
 .vbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;}
 .reverse{-webkit-box-direction:reverse;-moz-box-direction:reverse;box-direction:reverse;}
 .box-flex0{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;}
-.box-flex1,.box-flex{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
+.box-flex1{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
+.box-flex{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
 .box-flex2{-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;}
 .box-group1{-webkit-box-flex-group:1;-moz-box-flex-group:1;box-flex-group:1;}
 .box-group2{-webkit-box-flex-group:2;-moz-box-flex-group:2;box-flex-group:2;}
@@ -887,10 +888,10 b' div#pager_splitter{height:8px;}'
 #pager_container{position:relative;}
 div#pager{padding:15px;overflow:auto;display:none;}
 div.ui-widget-content{border:1px solid #ababab;outline:none;}
-.cell{border:1px solid transparent;}.cell.selected{border-radius:4px;border:thin #ababab solid;}
+.cell{border:1px solid transparent;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}.cell.selected{border-radius:4px;border:thin #ababab solid;}
 div.cell{width:100%;padding:5px 5px 5px 0px;margin:2px 0px 2px 0px;outline:none;}
 div.prompt{width:11ex;padding:0.4em;margin:0px;font-family:monospace;text-align:right;line-height:1.231;}
-div.input{page-break-inside:avoid;}
+div.input{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
 div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7;}
 div.input_prompt{color:navy;border-top:1px solid transparent;}
 div.output_wrapper{margin-top:5px;margin-left:5px;width:100%;position:relative;}
@@ -899,9 +900,9 b' div.output_collapsed{margin-right:5px;}'
 div.out_prompt_overlay{height:100%;padding:0px;position:absolute;border-radius:4px;}
 div.out_prompt_overlay:hover{box-shadow:inset 0 0 1px #000;background:rgba(240, 240, 240, 0.5);}
 div.output_prompt{color:darkred;margin:0 5px 0 -5px;}
-div.output_area{padding:0px;page-break-inside:avoid;}
+div.output_area{padding:0px;page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
 div.output_area pre{font-family:monospace;margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;color:black;}
-div.output_subarea{padding:0.44em 0.4em 0.4em 1px;}
+div.output_subarea{padding:0.44em 0.4em 0.4em 1px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
 div.output_text{text-align:left;color:#000000;font-family:monospace;line-height:1.231;}
 div.output_stream{padding-top:0.0em;padding-bottom:0.0em;}
 div.output_stderr{background:#fdd;}

IPython/frontend/html/notebook/static/js/codecell.js

@@ -106,12 +106,12 b' var IPython = (function (IPython) {'
     CodeCell.prototype.create_element = function () {
         IPython.Cell.prototype.create_element.apply(this, arguments);
 
-        var cell =  $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
+        var cell =  $('<div></div>').addClass('cell border-box-sizing code_cell');
         cell.attr('tabindex','2');
 
         this.celltoolbar = new IPython.CellToolbar(this);
 
-        var input = $('<div></div>').addClass('input hbox');
+        var input = $('<div></div>').addClass('input');
         var vbox = $('<div/>').addClass('vbox box-flex1')
         input.append($('<div/>').addClass('prompt input_prompt'));
         vbox.append(this.celltoolbar.element);

IPython/frontend/html/notebook/static/js/outputarea.js

@@ -240,7 +240,7 b' var IPython = (function (IPython) {'
 
 
     OutputArea.prototype.create_output_area = function () {
-        var oa = $("<div/>").addClass("hbox output_area");
+        var oa = $("<div/>").addClass("output_area");
         if (this.prompt_area) {
             oa.append($('<div/>').addClass('prompt'));
         }
@@ -345,7 +345,7 b' var IPython = (function (IPython) {'
 
 
     OutputArea.prototype.append_html = function (html, element) {
-        var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_html rendered_html");
+        var toinsert = $("<div/>").addClass("output_subarea output_html rendered_html");
         toinsert.append(html);
         element.append(toinsert);
     };
@@ -353,7 +353,7 b' var IPython = (function (IPython) {'
 
     OutputArea.prototype.append_javascript = function (js, container) {
         // We just eval the JS code, element appears in the local scope.
-        var element = $("<div/>").addClass("box-flex1 output_subarea");
+        var element = $("<div/>").addClass("output_subarea");
         container.append(element);
         // Div for js shouldn't be drawn, as it will add empty height to the area.
         container.hide();
@@ -376,7 +376,7 b' var IPython = (function (IPython) {'
 
 
     OutputArea.prototype.append_text = function (data, element, extra_class) {
-        var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_text");
+        var toinsert = $("<div/>").addClass("output_subarea output_text");
         // escape ANSI & HTML specials in plaintext:
         data = utils.fixConsole(data);
         data = utils.fixCarriageReturn(data);
@@ -390,7 +390,7 b' var IPython = (function (IPython) {'
 
 
     OutputArea.prototype.append_svg = function (svg, element) {
-        var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_svg");
+        var toinsert = $("<div/>").addClass("output_subarea output_svg");
         toinsert.append(svg);
         element.append(toinsert);
     };
@@ -424,7 +424,7 b' var IPython = (function (IPython) {'
 
 
     OutputArea.prototype.append_png = function (png, element) {
-        var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_png");
+        var toinsert = $("<div/>").addClass("output_subarea output_png");
         var img = $("<img/>").attr('src','data:image/png;base64,'+png);
         this._dblclick_to_reset_size(img);
         toinsert.append(img);
@@ -433,7 +433,7 b' var IPython = (function (IPython) {'
 
 
     OutputArea.prototype.append_jpeg = function (jpeg, element) {
-        var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_jpeg");
+        var toinsert = $("<div/>").addClass("output_subarea output_jpeg");
         var img = $("<img/>").attr('src','data:image/jpeg;base64,'+jpeg);
         this._dblclick_to_reset_size(img);
         toinsert.append(img);
@@ -444,7 +444,7 b' var IPython = (function (IPython) {'
     OutputArea.prototype.append_latex = function (latex, element) {
         // This method cannot do the typesetting because the latex first has to
         // be on the page.
-        var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_latex");
+        var toinsert = $("<div/>").addClass("output_subarea output_latex");
         toinsert.append(latex);
         element.append(toinsert);
     };

IPython/frontend/html/notebook/static/js/textcell.js

@@ -71,7 +71,7 b' var IPython = (function (IPython) {'
      */
     TextCell.prototype.create_element = function () {
         IPython.Cell.prototype.create_element.apply(this, arguments);
-        var cell = $("<div>").addClass('cell text_cell border-box-sizing vbox');
+        var cell = $("<div>").addClass('cell text_cell border-box-sizing');
         cell.attr('tabindex','2');
 
         this.celltoolbar = new IPython.CellToolbar(this);

IPython/frontend/html/notebook/static/less/flexible-box-model.less

@@ -56,12 +56,18 b''
 	box-flex: 0;
 }
 
-.box-flex1, .box-flex {
+.box-flex1 {
 	-webkit-box-flex: 1;
 	-moz-box-flex: 1;
 	box-flex: 1;
 }
 
+.box-flex {
+    .box-flex1();
+}
+
+
+
 .box-flex2 {
 	-webkit-box-flex: 2;
 	-moz-box-flex: 2;

IPython/frontend/html/notebook/static/less/notebook.less

@@ -171,6 +171,7 b' div.ui-widget-content {'
 
 .cell {
     border: 1px solid transparent;
+    .vbox();
 
     &.selected {
         .corner-all;
@@ -207,6 +208,7 b' div.prompt {'
 
 div.input {
     page-break-inside: avoid;
+    .hbox();
 }
 
 /* input_area and input_prompt must match in top border and margin for alignment */
@@ -272,6 +274,7 b' div.output_prompt {'
 div.output_area {
     padding: 0px;
     page-break-inside: avoid;
+    .hbox();
 }
 
 	
@@ -291,6 +294,7 b' div.output_area pre {'
    the prompt div. */
 div.output_subarea {
     padding: 0.44em 0.4em 0.4em 1px;
+    .box-flex1();
 }
 
 /* The rest of the output_* classes are for special styling of the different