widgets.less
283 lines
| 6.5 KiB
| text/x-less
|
LessCssLexer
|
r19750 | @widget-width: 350px; | ||
@widget-width-short: 150px; | ||||
|
r20506 | // Pad interact widgets by default. | ||
.widget-interact { | ||||
|
r20510 | >div, >input { | ||
|
r20506 | padding: 2.5px; | ||
} | ||||
} | ||||
|
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 | } | ||
|
r19572 | |||
&.connection-problems .prompt:after { | ||||
|
r19591 | content: @fa-var-chain-broken; | ||
|
r19572 | font-family: 'FontAwesome'; | ||
color: @brand-danger; | ||||
|
r19591 | font-size: @notebook_font_size; | ||
|
r19572 | top: 3px; | ||
|
r19591 | padding: 3px; | ||
|
r19572 | } | ||
|
r14444 | } | ||
|
r14295 | |||
|
r14610 | /* THE CLASSES BELOW CAN APPEAR ANYWHERE IN THE DOM (POSSIBLEY OUTSIDE OF | ||
THE WIDGET AREA). */ | ||||
|
r14295 | |||
|
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; | ||
|
r19750 | padding-right : 2px; | ||
|
r14610 | overflow : visible; | ||
|
r14444 | |||
/* Default size of the slider */ | ||||
|
r19750 | width : @widget-width; | ||
|
r15363 | height : 5px; | ||
max-height : 5px; | ||||
|
r16953 | margin-top : 13px; | ||
|
r15363 | 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 */ | ||
|
r19750 | border : 0px; | ||
background : none; | ||||
|
r14444 | |||
.hbox(); | ||||
.box-flex1(); | ||||
|
r14295 | |||
|
r14444 | .ui-slider-handle { | ||
|
r19750 | width: 12px; | ||
height: 28px; | ||||
margin-top: -8px; | ||||
border-radius: @border-radius-base; | ||||
|
r14295 | } | ||
|
r17114 | |||
.ui-slider-range { | ||||
|
r19750 | height : 12px; | ||
margin-top : -4px; | ||||
background : @page-backdrop-color; | ||||
|
r17114 | } | ||
|
r14444 | } | ||
} | ||||
|
r14295 | |||
|
r14444 | .widget-vslider { | ||
|
r14610 | /* Vertical jQuery Slider */ | ||
|
r14444 | |||
/* Fix the padding of the slide track so the ui-slider is sized | ||||
correctly. */ | ||||
|
r19750 | padding-bottom : 5px; | ||
|
r14610 | 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 */ | ||
|
r19750 | border : 0px; | ||
background : none; | ||||
|
r14610 | margin-left : -4px; | ||
margin-top : 5px; | ||||
|
r14444 | |||
.vbox(); | ||||
.box-flex1(); | ||||
|
r14298 | |||
|
r14444 | .ui-slider-handle { | ||
|
r19750 | width : 28px; | ||
height : 12px; | ||||
|
r14610 | margin-left : -9px; | ||
|
r19750 | border-radius: @border-radius-base; | ||
|
r14295 | } | ||
|
r17114 | |||
.ui-slider-range { | ||||
|
r19750 | width : 12px; | ||
margin-left : -1px; | ||||
background : @page-backdrop-color; | ||||
|
r17114 | } | ||
|
r14444 | } | ||
} | ||||
|
r14295 | |||
|
r14444 | .widget-text { | ||
|
r14610 | /* String Textbox - used for TextBoxView and TextAreaView */ | ||
|
r19750 | width : @widget-width; | ||
|
r19366 | margin : 0px; | ||
|
r14444 | } | ||
.widget-listbox { | ||||
|
r14610 | /* Listbox */ | ||
|
r19750 | width : @widget-width; | ||
|
r14610 | margin-bottom : 0px; | ||
|
r14444 | } | ||
.widget-numeric-text { | ||||
|
r14610 | /* Single Line Textbox - used for IntTextView and FloatTextView */ | ||
|
r19750 | width : @widget-width-short; | ||
|
r19366 | margin : 0px; | ||
|
r14444 | } | ||
.widget-progress { | ||||
|
r14610 | /* Progress Bar */ | ||
|
r16953 | margin-top: 6px; | ||
|
r19750 | min-width : @widget-width; | ||
|
r14444 | |||
|
r16913 | .progress-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 */ | ||
|
r19750 | /* Subtract 25px to account for the drop arrow button */ | ||
min-width : @widget-width-short - 25px; | ||||
|
r14444 | } | ||
|
r17724 | .widget_item .dropdown-menu li a { | ||
color: inherit; | ||||
} | ||||
|
r20820 | .widget-valid { | ||
margin-top: 9px; | ||||
margin-bottom: 10px; | ||||
margin-left: 3px; | ||||
margin-right: 3px; | ||||
} | ||||
|
r14610 | .widget-hbox { | ||
/* Horizontal widgets */ | ||||
|
r14444 | .hbox(); | ||
|
r16953 | |||
input[type="checkbox"] { | ||||
margin-top: 9px; | ||||
|
r18822 | margin-bottom: 10px; | ||
|
r16953 | } | ||
|
r17929 | |||
.widget-label { | ||||
/* Horizontal Label */ | ||||
min-width : 10ex; | ||||
padding-right : 8px; | ||||
padding-top : 5px; | ||||
text-align : right; | ||||
vertical-align : text-top; | ||||
} | ||||
.widget-readout { | ||||
padding-left : 8px; | ||||
padding-top : 5px; | ||||
text-align : left; | ||||
vertical-align : text-top; | ||||
} | ||||
|
r15006 | } | ||
|
r14610 | |||
|
r15006 | .widget-vbox { | ||
/* Vertical widgets */ | ||||
.vbox(); | ||||
|
r17929 | |||
.widget-label { | ||||
/* Vertical Label */ | ||||
padding-bottom : 5px; | ||||
text-align : center; | ||||
vertical-align : text-bottom; | ||||
} | ||||
.widget-readout { | ||||
/* Vertical Label */ | ||||
padding-top : 5px; | ||||
text-align : center; | ||||
vertical-align : text-top; | ||||
} | ||||
|
r14444 | } | ||
|
r14610 | |||
|
r17658 | .widget-box { | ||
|
r17637 | /* Box */ | ||
|
r14407 | .border-box-sizing(); | ||
|
r15267 | .align-start(); | ||
|
r14444 | } | ||
|
r15364 | .widget-radio-box { | ||
/* Contains RadioButtonsWidget */ | ||||
.vbox(); | ||||
.border-box-sizing(); | ||||
padding-top: 4px; | ||||
|
r16953 | |||
label { | ||||
margin-top: 0px; | ||||
|
r20561 | margin-left: 20px; | ||
|
r16953 | } | ||
|
r15364 | } | ||