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