MAJOR CSS FIXES

Fixed jquery slider horizontal style
Fixed label alignment

IPython/html/static/notebook/js/widgets/bool.js

@@ -8,19 +8,15 b' require(["notebook/js/widget"], function(){'
       
         // Called when view is rendered.
         render : function(){
-            this.$el
-                .html('');
-
-            var $label = $('<label />')
-                .addClass('checkbox')
+            this.$el = $('<div />')
+                .addClass('widget-hbox-single');
+            this.$label = $('<div />')
                 .addClass('widget-label')
-                .appendTo(this.$el);
-            this.$checkbox_label = $('<div />')
-                .appendTo($label)
+                .appendTo(this.$el)
                 .hide();
             this.$checkbox = $('<input />')
                 .attr('type', 'checkbox')
-                .appendTo($label);
+                .appendTo(this.$el);
 
             this.update(); // Set defaults.
         },
@@ -33,10 +29,10 b' require(["notebook/js/widget"], function(){'
 
                 var description = this.model.get('description');
                 if (description.length == 0) {
-                    this.$checkbox_label.hide();
+                    this.$label.hide();
                 } else {
-                    this.$checkbox_label.html(description);
-                    this.$checkbox_label.show();
+                    this.$label.html(description);
+                    this.$label.show();
                 }
             }
             return IPython.WidgetView.prototype.update.call(this);

IPython/html/static/notebook/js/widgets/float_range.js

@@ -7,6 +7,7 b' require(["notebook/js/widget"], function(){'
         // Called when view is rendered.
         render : function(){
             this.$el
+                .addClass('widget-hbox-single')
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
@@ -18,8 +19,7 b' require(["notebook/js/widget"], function(){'
             
             // Put the slider in a container 
             this.$slider_container = $('<div />')
-                .css('padding-top', '4px')
-                .css('padding-bottom', '4px')
+                .addClass('widget-slider')
                 .append(this.$slider);    
             this.$el.append(this.$slider_container);
             
@@ -65,6 +65,7 b' require(["notebook/js/widget"], function(){'
         // Called when view is rendered.
         render : function(){
             this.$el
+                .addClass('widget-hbox-single')
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
@@ -72,6 +73,7 b' require(["notebook/js/widget"], function(){'
                 .hide();
             this.$textbox = $('<input type="text" />')
                 .addClass('input')
+                .addClass('widget-numeric-text')
                 .appendTo(this.$el);
             this.update(); // Set defaults.
         },

IPython/html/static/notebook/js/widgets/int_range.js

@@ -7,6 +7,7 b' require(["notebook/js/widget"], function(){'
         // Called when view is rendered.
         render : function(){
             this.$el
+                .addClass('widget-hbox-single')
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
@@ -18,8 +19,7 b' require(["notebook/js/widget"], function(){'
             
             // Put the slider in a container 
             this.$slider_container = $('<div />')
-                .css('padding-top', '4px')
-                .css('padding-bottom', '4px')
+                .addClass('widget-slider')
                 .append(this.$slider);    
             this.$el.append(this.$slider_container);
             
@@ -64,6 +64,7 b' require(["notebook/js/widget"], function(){'
         // Called when view is rendered.
         render : function(){
             this.$el
+                .addClass('widget-hbox-single')
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
@@ -71,6 +72,7 b' require(["notebook/js/widget"], function(){'
                 .hide();
             this.$textbox = $('<input type="text" />')
                 .addClass('input')
+                .addClass('widget-numeric-text')
                 .appendTo(this.$el);
             this.update(); // Set defaults.
         },

IPython/html/static/notebook/js/widgets/selection.js

@@ -8,6 +8,7 b' require(["notebook/js/widget"], function(){'
         render : function(){
             
             this.$el
+                .addClass('widget-hbox-single')
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
@@ -19,6 +20,7 b' require(["notebook/js/widget"], function(){'
                                 .appendTo(this.$el);
             this.$droplabel = $('<button />')
                                 .addClass('btn')
+                                .addClass('widget-combo-btn')
                                 .appendTo(this.$buttongroup);
             this.$dropbutton = $('<button />')
                                 .addClass('btn')
@@ -84,11 +86,16 b' require(["notebook/js/widget"], function(){'
         // Called when view is rendered.
         render : function(){
             this.$el
+                .addClass('widget-hbox')
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-label')
                 .hide();
+            this.$container = $('<div />')
+                .appendTo(this.$el)
+                .addClass('widget-container')
+                .addClass('vbox');
             this.update();
         },
         
@@ -104,7 +111,7 b' require(["notebook/js/widget"], function(){'
                     var $label = $('<label />')
                         .addClass('radio')
                         .html(items[index])
-                        .appendTo(this.$el);
+                        .appendTo(this.$container);
                     
                     var that = this;
                     $('<input />')
@@ -119,14 +126,14 b' require(["notebook/js/widget"], function(){'
                 }
                 
                 if (this.model.get('value') == items[index]) {
-                    this.$el.find(item_query).prop('checked', true);
+                    this.$container.find(item_query).prop('checked', true);
                 } else {
-                    this.$el.find(item_query).prop('checked', false);
+                    this.$container.find(item_query).prop('checked', false);
                 }
             }
             
             // Remove items that no longer exist.
-            this.$el.find('input').each(function(i, obj) {
+            this.$container.find('input').each(function(i, obj) {
                 var value = $(obj).val();
                 var found = false;
                 for (var index in items) {
@@ -161,6 +168,7 b' require(["notebook/js/widget"], function(){'
         // Called when view is rendered.
         render : function(){
             this.$el
+                .addClass('widget-hbox-single')
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)

IPython/html/static/notebook/js/widgets/string.js

@@ -26,6 +26,7 b' require(["notebook/js/widget"], function(){'
         // Called when view is rendered.
         render : function(){
             this.$el
+                .addClass('widget-hbox')
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
@@ -33,6 +34,7 b' require(["notebook/js/widget"], function(){'
                 .hide();
             this.$textbox = $('<textarea />')
                 .attr('rows', 5)
+                .addClass('widget-text')
                 .appendTo(this.$el);
             this.update(); // Set defaults.
         },
@@ -74,6 +76,7 b' require(["notebook/js/widget"], function(){'
         // Called when view is rendered.
         render : function(){
             this.$el
+                .addClass('widget-hbox-single')
                 .html('');
             this.$label = $('<div />')
                 .addClass('widget-label')
@@ -81,6 +84,7 b' require(["notebook/js/widget"], function(){'
                 .hide();
             this.$textbox = $('<input type="text" />')
                 .addClass('input')
+                .addClass('widget-text')
                 .appendTo(this.$el);
             this.update(); // Set defaults.
         },

IPython/html/static/notebook/less/widgetarea.less

@@ -1,23 +1,79 b''
-.widget-label {
-    min-width: 300px;
-}
-
-div.widget-container {
-    .box-flex2();
-    .border-box-sizing();
-}
 
-div.widget-area {
+.widget-area {
     page-break-inside: avoid;
     .hbox();
-}
 
-/* This class is for the widget subarea inside the widget_area and after
-   the prompt div. */
-div.widget-subarea {
-    padding: 0.44em 0.4em 0.4em 1px;
-    margin-left: 6px;
-    .border-box-sizing();
-    .vbox();
-    .box-flex2()
+    .widget-subarea {
+        padding: 0.44em 0.4em 0.4em 1px;
+        margin-left: 6px;
+        .border-box-sizing();
+        .vbox();
+        .box-flex2();
+
+        .widget-label {
+            min-width: 10ex;
+            padding-right: 8px;
+            text-align: right;
+            vertical-align: text-top;
+            padding-top: 3px;
+        }
+
+        .widget-slider {
+            padding-left: 8px;
+            padding-right: 5px;
+            margin-top: 11px;
+
+            width: 348px;
+            height: 5px !important;
+            overflow: visible !important;
+
+            border: 1px solid #CCCCCC;
+            background: #FFFFFF;
+            .corner-all();
+
+            .ui-slider {
+                border: 0px !important;
+                background: none !important;
+
+                .ui-slider-handle {
+                    width: 14px !important;
+                    height: 28px !important;
+
+                    margin-top: -7px !important;
+                }
+            }
+        }
+
+        .widget-text {
+            width: 350px;
+            margin-bottom: 0px;
+        }
+
+        .widget-numeric-text {
+            width: 150px;
+        }
+
+        .widget-combo-btn {
+            min-width: 138px; /* + 26px drop arrow btn = 164px */
+            height: 30px;
+        }
+
+        .widget-container {
+            .box-flex1();
+            .border-box-sizing();
+        }
+
+        .widget-hbox {
+            .hbox();
+            .start();
+            .widget-container();
+            margin-bottom: 5px;
+            margin-top: 5px;
+        }
+
+        .widget-hbox-single {
+            .widget-hbox();
+            height: 30px;
+        }
+    }
 }

IPython/html/static/style/ipython.min.css

@@ -165,10 +165,7 b' h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anch'
 .ipython_tooltip .tooltiptext pre{border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;font-size:100%;background-color:#f7f7f7;}
 .pretooltiparrow{left:0px;margin:0px;top:-16px;width:40px;height:16px;overflow:hidden;position:absolute;}
 .pretooltiparrow:before{background-color:#f7f7f7;border:1px #ababab solid;z-index:11;content:"";position:absolute;left:15px;top:10px;width:25px;height:25px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);}
-.hbox{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;}
-.hbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;display:block;}
-.vbox{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;}
-.vbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;display:block;}
-div.widget_area{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.widget_item{display:inline-block;}
-div.widget_subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
+.widget-label{min-width:300px;}
+div.widget-container{-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
+div.widget-area{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.widget-subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;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%;-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;}

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

@@ -1584,10 +1584,7 b' span#checkpoint_status,span#autosave_status{font-size:small;}'
 .ipython_tooltip .tooltiptext pre{border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;font-size:100%;background-color:#f7f7f7;}
 .pretooltiparrow{left:0px;margin:0px;top:-16px;width:40px;height:16px;overflow:hidden;position:absolute;}
 .pretooltiparrow:before{background-color:#f7f7f7;border:1px #ababab solid;z-index:11;content:"";position:absolute;left:15px;top:10px;width:25px;height:25px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);}
-.hbox{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;}
-.hbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;display:block;}
-.vbox{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;}
-.vbox>*{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;display:block;}
-div.widget_area{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.widget_item{display:inline-block;}
-div.widget_subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
+.widget-label{min-width:300px;}
+div.widget-container{-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
+div.widget-area{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.widget-subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;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%;-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;}