Cleaned up hbox and vbox widget div styles,

removed 5px margin

IPython/html/static/widgets/js/widget_bool.js

@@ -11,9 +11,9 b' define(['
         render : function(){
             // Called when view is rendered.
             this.$el
-                .addClass('widget-hbox-single');
+                .addClass('widget-hbox');
             this.$label = $('<div />')
-                .addClass('widget-hlabel')
+                .addClass('widget-label')
                 .appendTo(this.$el)
                 .hide();
             this.$checkbox = $('<input />')

IPython/html/static/widgets/js/widget_int.js

@@ -11,10 +11,10 b' define(['
         render : function(){
             // Called when view is rendered.
             this.$el
-                .addClass('widget-hbox-single');
+                .addClass('widget-hbox');
             this.$label = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-hlabel')
+                .addClass('widget-label')
                 .hide();
             
             this.$slider = $('<div />')
@@ -122,26 +122,16 b' define(['
                         .removeClass('widget-hslider')
                         .addClass('widget-vslider');
                     this.$el
-                        .removeClass('widget-hbox-single');
-                    this.$label
-                        .removeClass('widget-hlabel')
-                        .addClass('widget-vlabel');
-                    this.$readout
-                        .removeClass('widget-hreadout')
-                        .addClass('widget-vreadout');
+                        .removeClass('widget-hbox')
+                        .addClass('widget-vbox');
 
                 } else {
                     this.$slider_container
                         .removeClass('widget-vslider')
                         .addClass('widget-hslider');
                     this.$el
-                        .addClass('widget-hbox-single');
-                    this.$label
-                        .removeClass('widget-vlabel')
-                        .addClass('widget-hlabel');
-                    this.$readout
-                        .removeClass('widget-vreadout')
-                        .addClass('widget-hreadout');
+                        .removeClass('widget-vbox')
+                        .addClass('widget-hbox');
                 }
 
                 var description = this.model.get('description');
@@ -198,10 +188,10 b' define(['
         render : function(){
             // Called when view is rendered.
             this.$el
-                .addClass('widget-hbox-single');
+                .addClass('widget-hbox');
             this.$label = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-hlabel')
+                .addClass('widget-label')
                 .hide();
             this.$textbox = $('<input type="text" />')
                 .addClass('form-control')
@@ -306,10 +296,10 b' define(['
         render : function(){
             // Called when view is rendered.
             this.$el
-                .addClass('widget-hbox-single');
+                .addClass('widget-hbox');
             this.$label = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-hlabel')
+                .addClass('widget-label')
                 .hide();
             this.$progress = $('<div />')
                 .addClass('progress')

IPython/html/static/widgets/js/widget_selection.js

@@ -12,10 +12,10 b' define(['
         render : function(){
             // Called when view is rendered.
             this.$el
-                .addClass('widget-hbox-single');
+                .addClass('widget-hbox');
             this.$label = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-hlabel')
+                .addClass('widget-label')
                 .hide();
             this.$buttongroup = $('<div />')
                 .addClass('widget_item')
@@ -155,7 +155,7 b' define(['
                 .addClass('widget-hbox');
             this.$label = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-hlabel')
+                .addClass('widget-label')
                 .hide();
             this.$container = $('<div />')
                 .appendTo(this.$el)
@@ -251,10 +251,10 b' define(['
         render: function() {
             // Called when view is rendered.
             this.$el
-                .addClass('widget-hbox-single');
+                .addClass('widget-hbox');
             this.$label = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-hlabel')
+                .addClass('widget-label')
                 .hide();
             this.$buttongroup = $('<div />')
                 .addClass('btn-group')
@@ -384,7 +384,7 b' define(['
                 .addClass('widget-hbox');
             this.$label = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-hlabel')
+                .addClass('widget-label')
                 .hide();
             this.$listbox = $('<select />')
                 .addClass('widget-listbox form-control')

IPython/html/static/widgets/js/widget_string.js

@@ -50,7 +50,7 b' define(['
                 .addClass('widget-hbox');
             this.$label = $('<div />')
                 .appendTo(this.$el)
-                .addClass('widget-hlabel')
+                .addClass('widget-label')
                 .hide();
             this.$textbox = $('<textarea />')
                 .attr('rows', 5)
@@ -135,9 +135,9 b' define(['
         render: function(){
             // Called when view is rendered.
             this.$el
-                .addClass('widget-hbox-single');
+                .addClass('widget-hbox');
             this.$label = $('<div />')
-                .addClass('widget-hlabel')
+                .addClass('widget-label')
                 .appendTo(this.$el)
                 .hide();
             this.$textbox = $('<input type="text" />')

IPython/html/static/widgets/less/widgets.less

@@ -31,36 +31,6 b''
 /* THE CLASSES BELOW CAN APPEAR ANYWHERE IN THE DOM (POSSIBLEY OUTSIDE OF
    THE WIDGET AREA). */
 
-.widget-hlabel {
-    /* Horizontal Label */
-    min-width      : 10ex;
-    padding-right  : 8px;
-    padding-top    : 5px;
-    text-align     : right;
-    vertical-align : text-top;
-}
-
-.widget-vlabel {
-    /* Vertical Label */
-    padding-bottom : 5px;
-    text-align     : center;
-    vertical-align : text-bottom;
-}
-
-.widget-hreadout {
-    padding-left   : 8px;
-    padding-top    : 5px;
-    text-align     : left;
-    vertical-align : text-top;
-}
-
-.widget-vreadout {
-    /* Vertical Label */
-    padding-top : 5px;
-    text-align     : center;
-    vertical-align : text-top;
-}
-
 .slide-track {
     /* Slider Track */
     border     : 1px solid #CCCCCC;
@@ -215,43 +185,50 b''
     color: inherit;
 }
 
-.widget-box {
-    /* The following section sets the style for the invisible div that
-    hold widgets and their accompanying labels.
-
-    Looks like this:
-    +-----------------------------+
-    | widget-box (or similar)     |
-    |  +-------+---------------+  |
-    |  | Label | Actual Widget |  |
-    |  +-------+---------------+  |
-    +-----------------------------+
-    */
-    margin : 5px;
-
-    .start();
-    .widget-box();
-}
-
 .widget-hbox {
     /* Horizontal widgets */
-    .widget-box();
     .hbox();
-}
-
-.widget-hbox-single {
-    /* Single line horizontal widgets */
-    .widget-hbox();
 
     input[type="checkbox"] {
         margin-top: 9px;
     }
+
+    .widget-label {
+        /* Horizontal Label */
+        min-width      : 10ex;
+        padding-right  : 8px;
+        padding-top    : 5px;
+        text-align     : right;
+        vertical-align : text-top;
+    }
+
+    .widget-readout {
+        padding-left   : 8px;
+        padding-top    : 5px;
+        text-align     : left;
+        vertical-align : text-top;
+    }
 }
 
 .widget-vbox {
     /* Vertical widgets */ 
-    .widget-box();
     .vbox();
+
+
+    .widget-label {
+        /* Vertical Label */
+        padding-bottom : 5px;
+        text-align     : center;
+        vertical-align : text-bottom;
+    }
+
+    .widget-readout {
+        /* Vertical Label */
+        padding-top : 5px;
+        text-align     : center;
+        vertical-align : text-top;
+    }
+
 }
 
 .widget-modal {

IPython/html/tests/widgets/widget_bool.js

@@ -22,19 +22,19 b' casper.notebook_test(function () {'
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, 
-            '.widget-area .widget-subarea .widget-hbox-single input'),
+            '.widget-area .widget-subarea .widget-hbox input'),
             'Checkbox exists.');
 
         this.test.assert(this.cell_element_function(index, 
-            '.widget-area .widget-subarea .widget-hbox-single input', 'prop', ['checked']),
+            '.widget-area .widget-subarea .widget-hbox input', 'prop', ['checked']),
             'Checkbox is checked.');
 
         this.test.assert(this.cell_element_exists(index, 
-            '.widget-area .widget-subarea .widget-hbox-single .widget-hlabel'),
+            '.widget-area .widget-subarea .widget-hbox .widget-label'),
             'Checkbox label exists.');
 
         this.test.assert(this.cell_element_function(index, 
-            '.widget-area .widget-subarea .widget-hbox-single .widget-hlabel', 'html')=="Title",
+            '.widget-area .widget-subarea .widget-hbox .widget-label', 'html')=="Title",
             'Checkbox labeled correctly.');
 
         this.test.assert(this.cell_element_exists(index, 
@@ -61,7 +61,7 b' casper.notebook_test(function () {'
             'Change bool widget value cell executed with correct output.');
 
         this.test.assert(! this.cell_element_function(bool_index, 
-            '.widget-area .widget-subarea .widget-hbox-single input', 'prop', ['checked']),
+            '.widget-area .widget-subarea .widget-hbox input', 'prop', ['checked']),
             'Checkbox is not checked. (1)');
 
         this.test.assert(! this.cell_element_function(bool_index, 
@@ -69,10 +69,10 b' casper.notebook_test(function () {'
             'Toggle button is not toggled. (1)');
  
         // Try toggling the bool by clicking on the checkbox.
-        this.cell_element_function(bool_index, '.widget-area .widget-subarea .widget-hbox-single input', 'click');
+        this.cell_element_function(bool_index, '.widget-area .widget-subarea .widget-hbox input', 'click');
 
         this.test.assert(this.cell_element_function(bool_index, 
-            '.widget-area .widget-subarea .widget-hbox-single input', 'prop', ['checked']),
+            '.widget-area .widget-subarea .widget-hbox input', 'prop', ['checked']),
             'Checkbox is checked. (2)');
 
         // Try toggling the bool by clicking on the toggle button.

IPython/html/tests/widgets/widget_selection.js

@@ -6,8 +6,8 b' casper.notebook_test(function () {'
         'print("Success")');
     this.execute_cell_then(index);
 
-    var combo_selector = '.widget-area .widget-subarea .widget-hbox-single .btn-group .widget-combo-btn';
-    var multibtn_selector = '.widget-area .widget-subarea .widget-hbox-single .btn-group[data-toggle="buttons-radio"]';
+    var combo_selector = '.widget-area .widget-subarea .widget-hbox .btn-group .widget-combo-btn';
+    var multibtn_selector = '.widget-area .widget-subarea .widget-hbox .btn-group[data-toggle="buttons-radio"]';
     var radio_selector = '.widget-area .widget-subarea .widget-hbox .widget-radio-box';
     var list_selector = '.widget-area .widget-subarea .widget-hbox .widget-listbox';
 
@@ -115,7 +115,7 b' casper.notebook_test(function () {'
         this.test.assert(verify_selection(this, 3), 'Multibutton selection updated view states correctly.');
 
         // Verify that selecting a combobox option updates all of the others.
-        this.cell_element_function(selection_index, '.widget-area .widget-subarea .widget-hbox-single .btn-group ul.dropdown-menu li:nth-child(3) a', 'click');
+        this.cell_element_function(selection_index, '.widget-area .widget-subarea .widget-hbox .btn-group ul.dropdown-menu li:nth-child(3) a', 'click');
     });
     this.wait_for_idle();
     this.then(function () {

IPython/html/tests/widgets/widget_string.js

@@ -23,7 +23,7 b' casper.notebook_test(function () {'
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, 
-            '.widget-area .widget-subarea .widget-hbox-single input[type=text]'),
+            '.widget-area .widget-subarea .widget-hbox input[type=text]'),
             'Textbox exists.');
 
         this.test.assert(this.cell_element_exists(index, 
@@ -35,7 +35,7 b' casper.notebook_test(function () {'
             'Python set textarea value.');
 
         this.test.assert(this.cell_element_function(index, 
-            '.widget-area .widget-subarea .widget-hbox-single input[type=text]', 'val')=='xyz',
+            '.widget-area .widget-subarea .widget-hbox input[type=text]', 'val')=='xyz',
             'Python set textbox value.');
 
         this.test.assert(this.cell_element_exists(string_index, 
@@ -47,7 +47,7 b' casper.notebook_test(function () {'
             'Python set textarea placeholder.');
 
         this.test.assert(this.cell_element_function(index, 
-            '.widget-area .widget-subarea .widget-hbox-single input[type=text]', 'attr', ['placeholder'])=='abc',
+            '.widget-area .widget-subarea .widget-hbox input[type=text]', 'attr', ['placeholder'])=='abc',
             'Python set textbox placehoder.');
     });
 });