widgets.less
232 lines
| 6.5 KiB
| text/x-less
|
LessCssLexer
Jonathan Frederic
|
r14268 | ||
Jonathan Frederic
|
r14363 | /* | |
LESS file that styles IPython notebook widgets and the area they sit in. | |||
The widget area typically looks something like this: | |||
+------------------------------------------+ | |||
| widget-area | | |||
| +--------+---------------------------+ | | |||
| | prompt | widget-subarea | | | |||
| | | +--------+ +--------+ | | | |||
| | | | widget | | widget | | | | |||
| | | +--------+ +--------+ | | | |||
| +--------+---------------------------+ | | |||
+------------------------------------------+ | |||
*/ | |||
Jonathan Frederic
|
r14295 | .widget-area { | |
Jonathan Frederic
|
r14269 | page-break-inside: avoid; | |
Jonathan Frederic
|
r14236 | .hbox(); | |
Jonathan Frederic
|
r14220 | ||
Jonathan Frederic
|
r14295 | .widget-subarea { | |
padding: 0.44em 0.4em 0.4em 1px; | |||
margin-left: 6px; | |||
.border-box-sizing(); | |||
.vbox(); | |||
.box-flex2(); | |||
Jonathan Frederic
|
r14363 | /* Horizontal Label */ | |
Jonathan Frederic
|
r14297 | .widget-hlabel { | |
Jonathan Frederic
|
r14295 | min-width: 10ex; | |
padding-right: 8px; | |||
Jonathan Frederic
|
r14363 | padding-top: 3px; | |
Jonathan Frederic
|
r14295 | text-align: right; | |
vertical-align: text-top; | |||
} | |||
Jonathan Frederic
|
r14363 | /* Vertical Label */ | |
Jonathan Frederic
|
r14297 | .widget-vlabel { | |
Jonathan Frederic
|
r14363 | padding-bottom: 5px; | |
Jonathan Frederic
|
r14297 | text-align: center; | |
vertical-align: text-bottom; | |||
} | |||
Jonathan Frederic
|
r14363 | ||
/* 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 | | | | |||
| | +------------------+ | | | |||
| +--------+---------------------------+ | | |||
+------------------------------------------+ | |||
*/ | |||
Jonathan Frederic
|
r14296 | .widget-hslider { | |
Jonathan Frederic
|
r14363 | ||
/* Fix the padding of the slide track so the ui-slider is sized | |||
correctly. */ | |||
Jonathan Frederic
|
r14295 | padding-left: 8px; | |
padding-right: 5px; | |||
Jonathan Frederic
|
r14363 | overflow: visible; | |
Jonathan Frederic
|
r14295 | ||
Jonathan Frederic
|
r14363 | /* Default size of the slider */ | |
width: 348px; | |||
Jonathan Frederic
|
r14361 | height: 5px; | |
max-height: 5px; | |||
Jonathan Frederic
|
r14363 | margin-top: 11px; | |
/* Style the slider track */ | |||
.slide-track(); | |||
Jonathan Frederic
|
r14295 | ||
Jonathan Frederic
|
r14363 | /* Make the div a flex box (makes FF behave correctly). */ | |
.hbox(); | |||
Jonathan Frederic
|
r14361 | ||
Jonathan Frederic
|
r14363 | /* Inner, invisible slide div */ | |
Jonathan Frederic
|
r14295 | .ui-slider { | |
border: 0px !important; | |||
background: none !important; | |||
Jonathan Frederic
|
r14361 | ||
Jonathan Frederic
|
r14363 | .hbox(); | |
.box-flex1(); | |||
Jonathan Frederic
|
r14295 | ||
.ui-slider-handle { | |||
width: 14px !important; | |||
height: 28px !important; | |||
Jonathan Frederic
|
r14301 | margin-top: -8px !important; | |
Jonathan Frederic
|
r14295 | } | |
} | |||
} | |||
Jonathan Frederic
|
r14363 | /* Vertical jQuery Slider */ | |
Jonathan Frederic
|
r14296 | .widget-vslider { | |
Jonathan Frederic
|
r14363 | ||
/* Fix the padding of the slide track so the ui-slider is sized | |||
correctly. */ | |||
padding-bottom: 8px; | |||
overflow: visible; | |||
/* Default size of the slider */ | |||
Jonathan Frederic
|
r14296 | width: 5px; | |
Jonathan Frederic
|
r14361 | max-width: 5px; | |
Jonathan Frederic
|
r14363 | height: 250px; | |
Jonathan Frederic
|
r14296 | margin-left: 12px; | |
Jonathan Frederic
|
r14363 | ||
/* Style the slider track */ | |||
.slide-track(); | |||
Jonathan Frederic
|
r14361 | ||
Jonathan Frederic
|
r14363 | /* Make the div a flex box (makes FF behave correctly). */ | |
Jonathan Frederic
|
r14361 | .vbox(); | |
Jonathan Frederic
|
r14363 | ||
/* Inner, invisible slide div */ | |||
Jonathan Frederic
|
r14296 | .ui-slider { | |
border: 0px !important; | |||
background: none !important; | |||
margin-left: -4px; | |||
margin-top: 5px; | |||
Jonathan Frederic
|
r14361 | ||
.vbox(); | |||
.box-flex1(); | |||
Jonathan Frederic
|
r14296 | .ui-slider-handle { | |
width: 28px !important; | |||
height: 14px !important; | |||
Jonathan Frederic
|
r14301 | margin-left: -9px; | |
Jonathan Frederic
|
r14296 | } | |
} | |||
} | |||
Jonathan Frederic
|
r14363 | /* String Textbox - used for TextBoxView and TextAreaView */ | |
Jonathan Frederic
|
r14295 | .widget-text { | |
width: 350px; | |||
margin-bottom: 0px; | |||
} | |||
Jonathan Frederic
|
r14375 | /* Listbox */ | |
.widget-listbox { | |||
width: 364px; | |||
margin-bottom: 0px; | |||
} | |||
Jonathan Frederic
|
r14363 | /* Single Line Textbox - used for IntTextView and FloatTextView */ | |
Jonathan Frederic
|
r14295 | .widget-numeric-text { | |
width: 150px; | |||
} | |||
Jonathan Frederic
|
r14363 | /* Progress Bar */ | |
Jonathan Frederic
|
r14298 | .widget-progress { | |
width: 363px; | |||
/* Disable progress bar animation */ | |||
.bar { | |||
-webkit-transition: none; | |||
-moz-transition: none; | |||
-ms-transition: none; | |||
-o-transition: none; | |||
transition: none; | |||
} | |||
} | |||
Jonathan Frederic
|
r14363 | /* ComboBox Main Button */ | |
Jonathan Frederic
|
r14295 | .widget-combo-btn { | |
min-width: 138px; /* + 26px drop arrow btn = 164px */ | |||
} | |||
Jonathan Frederic
|
r14363 | /* 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 | | | |||
| +-------+---------------+ | | |||
+-----------------------------+ | |||
*/ | |||
Jonathan Frederic
|
r14297 | .widget-box { | |
Jonathan Frederic
|
r14295 | .start(); | |
.widget-container(); | |||
Jonathan Frederic
|
r14296 | margin: 5px; | |
Jonathan Frederic
|
r14295 | } | |
Jonathan Frederic
|
r14363 | .widget-hbox { /* Horizontal widgets */ | |
Jonathan Frederic
|
r14297 | .widget-box(); | |
.hbox(); | |||
} | |||
Jonathan Frederic
|
r14363 | .widget-hbox-single { /* Single line horizontal widgets */ | |
Jonathan Frederic
|
r14295 | .widget-hbox(); | |
height: 30px; | |||
} | |||
Jonathan Frederic
|
r14363 | .widget-vbox-single { /* For vertical slides */ | |
Jonathan Frederic
|
r14297 | .widget-box(); | |
.vbox(); | |||
Jonathan Frederic
|
r14296 | width: 30px; | |
} | |||
Jonathan Frederic
|
r14295 | } | |
Jonathan Frederic
|
r14220 | } | |
Jonathan Frederic
|
r14407 | ||
/* THE CLASSES BELOW CAN APPEAR ANYWHERE IN THE DOM */ | |||
/* ContainerWidget - ModalView */ | |||
.widget-modal { | |||
overflow: hidden; | |||
position: absolute !important; | |||
top: 0px; | |||
left: 0px; | |||
margin-left: 0px !important; | |||
} | |||
Jonathan Frederic
|
r14411 | /* ContainerWidget - ModalView Body */ | |
.widget-modal-body { | |||
max-height: none !important; | |||
} | |||
Jonathan Frederic
|
r14407 | /* ContainerWidget */ | |
.widget-container { | |||
.border-box-sizing(); | |||
} |