mirror/notebook
2
0
Fork 0
mirror of https://github.com/jupyter/notebook.git synced 2025-01-12 11:45:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

- Fixed CSS so it also applies to widgets within modals

Browse Source 
- Added docked modal style
This commit is contained in:
Jonathan Frederic 2013-12-06 01:08:44 +00:00
parent 32a8d43afc
commit d21426d461
1 changed files with 193 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
IPython/html/static/notebook/less/widgets.less
View File

@ -24,51 +24,55 @@ The widget area typically looks something like this:
.border-box-sizing();
.vbox();
.box-flex2();
}
}
/* Horizontal Label */
.widget-hlabel {
/* 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 {
/* Vertical Label */
.widget-vlabel {
padding-bottom: 5px;
text-align: center;
vertical-align: text-bottom;
}
}
/* Slider Track */
.slide-track {
/* Slider Track */
.slide-track {
border: 1px solid #CCCCCC;
background: #FFFFFF;
.corner-all(); /* Round the corners of the slide track */
}
}
/* Horizontal jQuery Slider
/* 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 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 {
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. */
@ -103,10 +107,10 @@ The widget area typically looks something like this:
margin-top: -8px !important;
}
}
}
}
/* Vertical jQuery Slider */
.widget-vslider {
/* Vertical jQuery Slider */
.widget-vslider {
/* Fix the padding of the slide track so the ui-slider is sized
correctly. */
@ -141,27 +145,27 @@ The widget area typically looks something like this:
margin-left: -9px;
}
}
}
}
/* String Textbox - used for TextBoxView and TextAreaView */
.widget-text {
/* String Textbox - used for TextBoxView and TextAreaView */
.widget-text {
width: 350px;
margin-bottom: 0px;
}
}
/* Listbox */
.widget-listbox {
/* Listbox */
.widget-listbox {
width: 364px;
margin-bottom: 0px;
}
}
/* Single Line Textbox - used for IntTextView and FloatTextView */
.widget-numeric-text {
/* Single Line Textbox - used for IntTextView and FloatTextView */
.widget-numeric-text {
width: 150px;
}
}
/* Progress Bar */
.widget-progress {
/* Progress Bar */
.widget-progress {
width: 363px;
/* Disable progress bar animation */
@ -172,47 +176,42 @@ The widget area typically looks something like this:
-o-transition: none;
transition: none;
}
}
}
/* ComboBox Main Button */
.widget-combo-btn {
/* 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.
/* 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 {
Looks like this:
+-----------------------------+
| widget-box (or similar) |
| +-------+---------------+ |
| | Label | Actual Widget | |
| +-------+---------------+ |
+-----------------------------+
*/
.widget-box {
.start();
.widget-container();
margin: 5px;
}
.widget-hbox { /* Horizontal widgets */
}
.widget-hbox { /* Horizontal widgets */
.widget-box();
.hbox();
}
.widget-hbox-single { /* Single line horizontal widgets */
}
.widget-hbox-single { /* Single line horizontal widgets */
.widget-hbox();
height: 30px;
}
.widget-vbox-single { /* For vertical slides */
}
.widget-vbox-single { /* For vertical slides */
.widget-box();
.vbox();
width: 30px;
}
}
}
/* THE CLASSES BELOW CAN APPEAR ANYWHERE IN THE DOM */
/* ContainerWidget - ModalView */
.widget-modal {
overflow: hidden;
@ -231,3 +230,12 @@ The widget area typically looks something like this:
.widget-container {
.border-box-sizing();
}
/* Horizontal Label */
.docked-widget-modal {
overflow: hidden;
position: relative !important;
top: 0px !important;
left: 0px !important;
margin-left: 0px !important;
}