mirror of
https://github.com/jupyter/notebook.git
synced 2024-12-21 04:10:17 +08:00
- Fixed CSS so it also applies to widgets within modals
- Added docked modal style
This commit is contained in:
Jonathan Frederic
parent
32a8d43afc
commit
d21426d461
@ -24,195 +24,194 @@ The widget area typically looks something like this:
|
|||||||
.border-box-sizing();
|
.border-box-sizing();
|
||||||
.vbox();
|
.vbox();
|
||||||
.box-flex2();
|
.box-flex2();
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* THE CLASSES BELOW CAN APPEAR ANYWHERE IN THE DOM */
|
/* THE CLASSES BELOW CAN APPEAR ANYWHERE IN THE DOM */
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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 */
|
/* ContainerWidget - ModalView */
|
||||||
.widget-modal {
|
.widget-modal {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -230,4 +229,13 @@ The widget area typically looks something like this:
|
|||||||
/* ContainerWidget */
|
/* ContainerWidget */
|
||||||
.widget-container {
|
.widget-container {
|
||||||
.border-box-sizing();
|
.border-box-sizing();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Horizontal Label */
|
||||||
|
.docked-widget-modal {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative !important;
|
||||||
|
top: 0px !important;
|
||||||
|
left: 0px !important;
|
||||||
|
margin-left: 0px !important;
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user