widgets.less
270 lines
| 6.3 KiB
| text/x-less
|
LessCssLexer
|
r14295 | .widget-area { | |
|
r14610 | /* | |
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 | | | | |||
| | | +--------+ +--------+ | | | |||
| +--------+---------------------------+ | | |||
+------------------------------------------+ | |||
*/ | |||
page-break-inside : avoid; | |||
|
r14236 | .hbox(); | |
|
r14220 | ||
|
r14295 | .widget-subarea { | |
|
r14610 | padding : 0.44em 0.4em 0.4em 1px; | |
margin-left : 6px; | |||
|
r14295 | .border-box-sizing(); | |
.vbox(); | |||
.box-flex2(); | |||
|
r15259 | .align-start(); | |
|
r14444 | } | |
} | |||
|
r14295 | ||
|
r14610 | /* THE CLASSES BELOW CAN APPEAR ANYWHERE IN THE DOM (POSSIBLEY OUTSIDE OF | |
THE WIDGET AREA). */ | |||
|
r14295 | ||
|
r14444 | .widget-hlabel { | |
|
r14610 | /* Horizontal Label */ | |
min-width : 10ex; | |||
padding-right : 8px; | |||
padding-top : 3px; | |||
text-align : right; | |||
vertical-align : text-top; | |||
|
r14444 | } | |
|
r14297 | ||
|
r14444 | .widget-vlabel { | |
|
r14610 | /* Vertical Label */ | |
padding-bottom : 5px; | |||
text-align : center; | |||
vertical-align : text-bottom; | |||
|
r14444 | } | |
|
r14363 | ||
|
r14983 | .widget-hreadout { | |
padding-left : 8px; | |||
padding-top : 3px; | |||
text-align : left; | |||
vertical-align : text-top; | |||
} | |||
.widget-vreadout { | |||
/* Vertical Label */ | |||
padding-top : 5px; | |||
text-align : center; | |||
vertical-align : text-top; | |||
} | |||
|
r14444 | .slide-track { | |
|
r14610 | /* Slider Track */ | |
border : 1px solid #CCCCCC; | |||
background : #FFFFFF; | |||
|
r14444 | .corner-all(); /* Round the corners of the slide track */ | |
} | |||
|
r14295 | ||
|
r14444 | .widget-hslider { | |
|
r14610 | /* 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 | | | | |||
| | +------------------+ | | | |||
| +--------+---------------------------+ | | |||
+------------------------------------------+ | |||
*/ | |||
|
r14444 | ||
/* Fix the padding of the slide track so the ui-slider is sized | |||
correctly. */ | |||
|
r14610 | padding-left : 8px; | |
padding-right : 5px; | |||
overflow : visible; | |||
|
r14444 | ||
/* Default size of the slider */ | |||
|
r15363 | width : 348px; | |
height : 5px; | |||
max-height : 5px; | |||
margin-top : 11px; | |||
margin-bottom: 10px; | |||
|
r14444 | ||
/* Style the slider track */ | |||
.slide-track(); | |||
/* Make the div a flex box (makes FF behave correctly). */ | |||
.hbox(); | |||
|
r14296 | ||
|
r14444 | .ui-slider { | |
|
r14610 | /* Inner, invisible slide div */ | |
border : 0px !important; | |||
background : none !important; | |||
|
r14444 | ||
.hbox(); | |||
.box-flex1(); | |||
|
r14295 | ||
|
r14444 | .ui-slider-handle { | |
|
r14610 | width : 14px !important; | |
height : 28px !important; | |||
margin-top : -8px !important; | |||
|
r14295 | } | |
|
r14444 | } | |
} | |||
|
r14295 | ||
|
r14444 | .widget-vslider { | |
|
r14610 | /* Vertical jQuery Slider */ | |
|
r14444 | ||
/* Fix the padding of the slide track so the ui-slider is sized | |||
correctly. */ | |||
|
r14610 | padding-bottom : 8px; | |
overflow : visible; | |||
|
r14444 | ||
/* Default size of the slider */ | |||
|
r14610 | width : 5px; | |
max-width : 5px; | |||
height : 250px; | |||
margin-left : 12px; | |||
|
r14444 | ||
/* Style the slider track */ | |||
.slide-track(); | |||
/* Make the div a flex box (makes FF behave correctly). */ | |||
.vbox(); | |||
.ui-slider { | |||
|
r14610 | /* Inner, invisible slide div */ | |
border : 0px !important; | |||
background : none !important; | |||
margin-left : -4px; | |||
margin-top : 5px; | |||
|
r14444 | ||
.vbox(); | |||
.box-flex1(); | |||
|
r14298 | ||
|
r14444 | .ui-slider-handle { | |
|
r14610 | width : 28px !important; | |
height : 14px !important; | |||
margin-left : -9px; | |||
|
r14295 | } | |
|
r14444 | } | |
} | |||
|
r14295 | ||
|
r14444 | .widget-text { | |
|
r14610 | /* String Textbox - used for TextBoxView and TextAreaView */ | |
width : 350px; | |||
|
r15363 | margin : 0px !important; | |
|
r14444 | } | |
.widget-listbox { | |||
|
r14610 | /* Listbox */ | |
width : 364px; | |||
margin-bottom : 0px; | |||
|
r14444 | } | |
.widget-numeric-text { | |||
|
r14610 | /* Single Line Textbox - used for IntTextView and FloatTextView */ | |
width : 150px; | |||
|
r14444 | } | |
.widget-progress { | |||
|
r14610 | /* Progress Bar */ | |
width : 363px; | |||
|
r14444 | ||
.bar { | |||
|
r14610 | /* Disable progress bar animation */ | |
-webkit-transition : none; | |||
-moz-transition : none; | |||
-ms-transition : none; | |||
-o-transition : none; | |||
transition : none; | |||
|
r14295 | } | |
|
r14220 | } | |
|
r14407 | ||
|
r14444 | .widget-combo-btn { | |
|
r14610 | /* ComboBox Main Button */ | |
min-width : 138px; /* + 26px drop arrow btn = 164px */ | |||
|
r14444 | } | |
.widget-box { | |||
|
r14610 | /* 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 | | | |||
| +-------+---------------+ | | |||
+-----------------------------+ | |||
*/ | |||
margin : 5px; | |||
|
r14444 | .start(); | |
.widget-container(); | |||
} | |||
|
r14610 | ||
.widget-hbox { | |||
/* Horizontal widgets */ | |||
|
r14444 | .widget-box(); | |
.hbox(); | |||
} | |||
|
r14610 | ||
.widget-hbox-single { | |||
/* Single line horizontal widgets */ | |||
|
r15006 | .widget-hbox(); | |
|
r14610 | height : 30px; | |
|
r15006 | } | |
|
r14610 | ||
|
r15006 | .widget-vbox { | |
/* Vertical widgets */ | |||
.widget-box(); | |||
.vbox(); | |||
|
r14444 | } | |
|
r14610 | ||
.widget-vbox-single { | |||
/* For vertical slides */ | |||
|
r15006 | .widget-vbox(); | |
|
r14610 | width : 30px; | |
|
r14444 | } | |
|
r14610 | ||
|
r14407 | .widget-modal { | |
|
r14610 | /* ContainerWidget - ModalView */ | |
overflow : hidden; | |||
position : absolute !important; | |||
top : 0px; | |||
left : 0px; | |||
margin-left : 0px !important; | |||
|
r14407 | } | |
|
r14411 | .widget-modal-body { | |
|
r14610 | /* ContainerWidget - ModalView Body */ | |
|
r14411 | max-height: none !important; | |
} | |||
|
r14407 | .widget-container { | |
|
r14610 | /* ContainerWidget */ | |
|
r14407 | .border-box-sizing(); | |
|
r15267 | .align-start(); | |
|
r14444 | } | |
.docked-widget-modal { | |||
|
r14610 | /* Horizontal Label */ | |
|
r14444 | overflow: hidden; | |
position: relative !important; | |||
top: 0px !important; | |||
left: 0px !important; | |||
margin-left: 0px !important; | |||
|
r14610 | } |