diff --git a/IPython/html/static/notebook/less/widgets.less b/IPython/html/static/notebook/less/widgets.less
index 0a1c4a1..785d870 100644
--- a/IPython/html/static/notebook/less/widgets.less
+++ b/IPython/html/static/notebook/less/widgets.less
@@ -24,195 +24,194 @@ The widget area typically looks something like this:
.border-box-sizing();
.vbox();
.box-flex2();
+ }
+}
- /* Horizontal Label */
- .widget-hlabel {
- min-width: 10ex;
- padding-right: 8px;
- padding-top: 3px;
- text-align: right;
- vertical-align: text-top;
- }
+/* THE CLASSES BELOW CAN APPEAR ANYWHERE IN THE DOM */
- /* Vertical Label */
- .widget-vlabel {
- padding-bottom: 5px;
- text-align: center;
- vertical-align: text-bottom;
- }
+/* Horizontal Label */
+.widget-hlabel {
+ min-width: 10ex;
+ padding-right: 8px;
+ padding-top: 3px;
+ text-align: right;
+ vertical-align: text-top;
+}
+/* Vertical Label */
+.widget-vlabel {
+ padding-bottom: 5px;
+ text-align: center;
+ vertical-align: text-bottom;
+}
- /* Slider Track */
- .slide-track {
- border: 1px solid #CCCCCC;
- background: #FFFFFF;
- .corner-all(); /* Round the corners of the slide track */
- }
- /* Horizontal jQuery Slider
-
- Both the horizontal and vertical versions of the slider are characterized
- by a styled div that contains an invisible jQuery slide div which
- contains a visible slider handle div. This is requred so we can control
- how the slider is drawn and 'fix' the issue where the slide handle
- doesn't stop at the end of the slide.
-
- Both horizontal and vertical sliders have this div nesting:
- +------------------------------------------+
- | widget-(h/v)slider |
- | +--------+---------------------------+ |
- | | ui-slider | |
- | | +------------------+ | |
- | | | ui-slider-handle | | |
- | | +------------------+ | |
- | +--------+---------------------------+ |
- +------------------------------------------+
- */
- .widget-hslider {
-
- /* Fix the padding of the slide track so the ui-slider is sized
- correctly. */
- padding-left: 8px;
- padding-right: 5px;
- overflow: visible;
-
- /* Default size of the slider */
- width: 348px;
- height: 5px;
- max-height: 5px;
- margin-top: 11px;
-
- /* Style the slider track */
- .slide-track();
-
- /* Make the div a flex box (makes FF behave correctly). */
- .hbox();
-
- /* Inner, invisible slide div */
- .ui-slider {
- border: 0px !important;
- background: none !important;
-
- .hbox();
- .box-flex1();
-
- .ui-slider-handle {
- width: 14px !important;
- height: 28px !important;
-
- margin-top: -8px !important;
- }
- }
- }
+/* Slider Track */
+.slide-track {
+ border: 1px solid #CCCCCC;
+ background: #FFFFFF;
+ .corner-all(); /* Round the corners of the slide track */
+}
- /* Vertical jQuery Slider */
- .widget-vslider {
-
- /* Fix the padding of the slide track so the ui-slider is sized
- correctly. */
- padding-bottom: 8px;
- overflow: visible;
-
- /* Default size of the slider */
- width: 5px;
- max-width: 5px;
- height: 250px;
- margin-left: 12px;
-
- /* Style the slider track */
- .slide-track();
-
- /* Make the div a flex box (makes FF behave correctly). */
- .vbox();
-
- /* Inner, invisible slide div */
- .ui-slider {
- border: 0px !important;
- background: none !important;
- margin-left: -4px;
- margin-top: 5px;
-
- .vbox();
- .box-flex1();
-
- .ui-slider-handle {
- width: 28px !important;
- height: 14px !important;
- margin-left: -9px;
- }
- }
- }
+/* Horizontal jQuery Slider
+
+Both the horizontal and vertical versions of the slider are characterized
+by a styled div that contains an invisible jQuery slide div which
+contains a visible slider handle div. This is requred so we can control
+how the slider is drawn and 'fix' the issue where the slide handle
+doesn't stop at the end of the slide.
+
+Both horizontal and vertical sliders have this div nesting:
++------------------------------------------+
+| widget-(h/v)slider |
+| +--------+---------------------------+ |
+| | ui-slider | |
+| | +------------------+ | |
+| | | ui-slider-handle | | |
+| | +------------------+ | |
+| +--------+---------------------------+ |
++------------------------------------------+
+*/
+.widget-hslider {
+
+ /* Fix the padding of the slide track so the ui-slider is sized
+ correctly. */
+ padding-left: 8px;
+ padding-right: 5px;
+ overflow: visible;
+
+ /* Default size of the slider */
+ width: 348px;
+ height: 5px;
+ max-height: 5px;
+ margin-top: 11px;
+
+ /* Style the slider track */
+ .slide-track();
+
+ /* Make the div a flex box (makes FF behave correctly). */
+ .hbox();
- /* String Textbox - used for TextBoxView and TextAreaView */
- .widget-text {
- width: 350px;
- margin-bottom: 0px;
- }
+ /* Inner, invisible slide div */
+ .ui-slider {
+ border: 0px !important;
+ background: none !important;
+
+ .hbox();
+ .box-flex1();
- /* Listbox */
- .widget-listbox {
- width: 364px;
- margin-bottom: 0px;
- }
+ .ui-slider-handle {
+ width: 14px !important;
+ height: 28px !important;
- /* Single Line Textbox - used for IntTextView and FloatTextView */
- .widget-numeric-text {
- width: 150px;
+ margin-top: -8px !important;
}
+ }
+}
- /* Progress Bar */
- .widget-progress {
- width: 363px;
-
- /* Disable progress bar animation */
- .bar {
- -webkit-transition: none;
- -moz-transition: none;
- -ms-transition: none;
- -o-transition: none;
- transition: none;
- }
- }
+/* Vertical jQuery Slider */
+.widget-vslider {
+
+ /* Fix the padding of the slide track so the ui-slider is sized
+ correctly. */
+ padding-bottom: 8px;
+ overflow: visible;
+
+ /* Default size of the slider */
+ width: 5px;
+ max-width: 5px;
+ height: 250px;
+ margin-left: 12px;
+
+ /* Style the slider track */
+ .slide-track();
+
+ /* Make the div a flex box (makes FF behave correctly). */
+ .vbox();
+
+ /* Inner, invisible slide div */
+ .ui-slider {
+ border: 0px !important;
+ background: none !important;
+ margin-left: -4px;
+ margin-top: 5px;
+
+ .vbox();
+ .box-flex1();
- /* ComboBox Main Button */
- .widget-combo-btn {
- min-width: 138px; /* + 26px drop arrow btn = 164px */
+ .ui-slider-handle {
+ width: 28px !important;
+ height: 14px !important;
+ margin-left: -9px;
}
+ }
+}
- /* 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 | |
- | +-------+---------------+ |
- +-----------------------------+
- */
- .widget-box {
- .start();
- .widget-container();
- margin: 5px;
- }
- .widget-hbox { /* Horizontal widgets */
- .widget-box();
- .hbox();
- }
- .widget-hbox-single { /* Single line horizontal widgets */
- .widget-hbox();
- height: 30px;
- }
- .widget-vbox-single { /* For vertical slides */
- .widget-box();
- .vbox();
- width: 30px;
- }
+/* String Textbox - used for TextBoxView and TextAreaView */
+.widget-text {
+ width: 350px;
+ margin-bottom: 0px;
+}
+
+/* Listbox */
+.widget-listbox {
+ width: 364px;
+ margin-bottom: 0px;
+}
+
+/* Single Line Textbox - used for IntTextView and FloatTextView */
+.widget-numeric-text {
+ width: 150px;
+}
+
+/* Progress Bar */
+.widget-progress {
+ width: 363px;
+
+ /* Disable progress bar animation */
+ .bar {
+ -webkit-transition: none;
+ -moz-transition: none;
+ -ms-transition: none;
+ -o-transition: none;
+ transition: none;
}
}
-/* THE CLASSES BELOW CAN APPEAR ANYWHERE IN THE DOM */
+/* ComboBox Main Button */
+.widget-combo-btn {
+ min-width: 138px; /* + 26px drop arrow btn = 164px */
+}
+
+/* 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 | |
+| +-------+---------------+ |
++-----------------------------+
+*/
+.widget-box {
+ .start();
+ .widget-container();
+ margin: 5px;
+}
+.widget-hbox { /* Horizontal widgets */
+ .widget-box();
+ .hbox();
+}
+.widget-hbox-single { /* Single line horizontal widgets */
+ .widget-hbox();
+ height: 30px;
+}
+.widget-vbox-single { /* For vertical slides */
+ .widget-box();
+ .vbox();
+ width: 30px;
+}
/* ContainerWidget - ModalView */
.widget-modal {
overflow: hidden;
@@ -230,4 +229,13 @@ The widget area typically looks something like this:
/* ContainerWidget */
.widget-container {
.border-box-sizing();
-}
\ No newline at end of file
+}
+
+/* Horizontal Label */
+.docked-widget-modal {
+ overflow: hidden;
+ position: relative !important;
+ top: 0px !important;
+ left: 0px !important;
+ margin-left: 0px !important;
+}