Added baseline and stretch

IPython/html/static/base/less/flexbox.less

@@ -1,221 +1,269
 
 /* Flexible box model classes */
 /* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
 
 /* This file is a compatability layer.  It allows the usage of flexible box 
 model layouts accross multiple browsers, including older browsers.  The newest,
 universal implementation of the flexible box model is used when available (see
 `Modern browsers` comments below).  Browsers that are known to implement this 
 new spec completely include:
 
     Firefox 28.0+
     Chrome 29.0+
     Internet Explorer 11+ 
     Opera 17.0+
 
 Browsers not listed, including Safari, are supported via the styling under the
 `Old browsers` comments below.
 */
 
 
 .hbox {
     /* Old browsers */
     display: -webkit-box;
     -webkit-box-orient: horizontal;
     -webkit-box-align: stretch;
 
     display: -moz-box;
     -moz-box-orient: horizontal;
     -moz-box-align: stretch;
 
     display: box;
     box-orient: horizontal;
     box-align: stretch;
 
     /* Modern browsers */
     display: flex;
     flex-direction: row;
     align-items: stretch;
 }
 
 .hbox > * {
     /* Old browsers */
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;
 
     /* Modern browsers */
     flex: none;
 }
 
 .vbox {
     /* Old browsers */
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-box-align: stretch;
 
     display: -moz-box;
     -moz-box-orient: vertical;
     -moz-box-align: stretch;
 
     display: box;
     box-orient: vertical;
     box-align: stretch;
 
     /* Modern browsers */
     display: flex;
     flex-direction: column;
     align-items: stretch;
 }
 
 .vbox > * {
     /* Old browsers */
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;
     
     /* Modern browsers */
     flex: none;
 }
 
 .hbox.reverse,
 .vbox.reverse,
 .reverse {
     /* Old browsers */
     -webkit-box-direction: reverse;
     -moz-box-direction: reverse;
     box-direction: reverse;
     
     /* Modern browsers */
     flex-direction: row-reverse;
 }
 
 .hbox.box-flex0,
 .vbox.box-flex0,
 .box-flex0 {
     /* Old browsers */
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;
     
     /* Modern browsers */
     flex: none;
     width: auto;
 }
 
 .hbox.box-flex1,
 .vbox.box-flex1,
 .box-flex1 {
     /* Old browsers */
     -webkit-box-flex: 1;
     -moz-box-flex: 1;
     box-flex: 1;
 
     /* Modern browsers */
     flex: 1;
 }
 
 .hbox.box-flex,
 .vbox.box-flex,
 .box-flex {
     /* Old browsers */
     .box-flex1();
 }
 
 .hbox.box-flex2,
 .vbox.box-flex2,
 .box-flex2 {
     /* Old browsers */
     -webkit-box-flex: 2;
     -moz-box-flex: 2;
     box-flex: 2;
 
     /* Modern browsers */
     flex: 2;
 }
 
 .box-group1 {
     /*  Deprecated */
     -webkit-box-flex-group: 1;
     -moz-box-flex-group: 1;
     box-flex-group: 1;
 }
 
 .box-group2 {
     /* Deprecated */
     -webkit-box-flex-group: 2;
     -moz-box-flex-group: 2;
     box-flex-group: 2;
 }
 
 .hbox.start, 
 .vbox.start,
 .start {
     /* Old browsers */
     -webkit-box-pack: start;
     -moz-box-pack: start;
     box-pack: start;
     
     /* Modern browsers */
     justify-content: flex-start;
 }
 
 .hbox.end, 
 .vbox.end,
 .end {
     /* Old browsers */
     -webkit-box-pack: end;
     -moz-box-pack: end;
     box-pack: end;
     
     /* Modern browsers */
     justify-content: flex-end;
 }
 
 .hbox.center, 
 .vbox.center,
 .center {
     /* Old browsers */
     -webkit-box-pack: center;
     -moz-box-pack: center;
     box-pack: center;
     
     /* Modern browsers */
     justify-content: center;
 }
 
+.hbox.baseline, 
+.vbox.baseline,
+.baseline {
+    /* Old browsers */
+    -webkit-box-pack: baseline;
+    -moz-box-pack: baseline;
+    box-pack: baseline;
+    
+    /* Modern browsers */
+    justify-content: baseline;
+}
+
+.hbox.stretch, 
+.vbox.stretch,
+.stretch {
+    /* Old browsers */
+    -webkit-box-pack: stretch;
+    -moz-box-pack: stretch;
+    box-pack: stretch;
+    
+    /* Modern browsers */
+    justify-content: stretch;
+}
+
 .hbox.align-start, 
 .vbox.align-start,
 .align-start {
     /* Old browsers */
     -webkit-box-align: start;
     -moz-box-align: start;
     box-align: start;
     
     /* Modern browsers */
     align-items: flex-start;
 }
 
 .hbox.align-end, 
 .vbox.align-end,
 .align-end {
     /* Old browsers */
     -webkit-box-align: end;
     -moz-box-align: end;
     box-align: end;
     
     /* Modern browsers */
     align-items: flex-end;
 }
 
 .hbox.align-center, 
 .vbox.align-center,
 .align-center {
     /* Old browsers */
     -webkit-box-align: center;
     -moz-box-align: center;
     box-align: center;
     
     /* Modern browsers */
     align-items: center;
 }
+
+.hbox.align-baseline, 
+.vbox.align-baseline,
+.align-baseline {
+    /* Old browsers */
+    -webkit-box-align: baseline;
+    -moz-box-align: baseline;
+    box-align: baseline;
+    
+    /* Modern browsers */
+    align-items: baseline;
+}
+
+.hbox.align-stretch, 
+.vbox.align-stretch,
+.align-stretch {
+    /* Old browsers */
+    -webkit-box-align: stretch;
+    -moz-box-align: stretch;
+    box-align: stretch;
+    
+    /* Modern browsers */
+    align-items: stretch;
+}

IPython/html/widgets/__init__.py

@@ -1,12 +1,12
 from .widget import Widget, DOMWidget, CallbackDispatcher
 
 from .widget_bool import CheckboxWidget, ToggleButtonWidget
 from .widget_button import ButtonWidget
-from .widget_container import ContainerWidget, PopupWidget, FlexContainerWidget, HBoxContainerWidget, VBoxContainerWidget
+from .widget_container import ContainerWidget, PopupWidget, FlexContainerWidget, HBoxWidget, VBoxWidget
 from .widget_float import FloatTextWidget, BoundedFloatTextWidget, FloatSliderWidget, FloatProgressWidget
 from .widget_image import ImageWidget
 from .widget_int import IntTextWidget, BoundedIntTextWidget, IntSliderWidget, IntProgressWidget
 from .widget_selection import RadioButtonsWidget, ToggleButtonsWidget, DropdownWidget, SelectWidget
 from .widget_selectioncontainer import TabWidget, AccordionWidget
 from .widget_string import HTMLWidget, LatexWidget, TextWidget, TextareaWidget
 from .interaction import interact, interactive, fixed

IPython/html/widgets/widget_container.py

@@ -1,55 +1,59
 """ContainerWidget class.  
 
 Represents a container that can be used to group other widgets.
 """
 
 # Copyright (c) IPython Development Team.
 # Distributed under the terms of the Modified BSD License.
 
 from .widget import DOMWidget
 from IPython.utils.traitlets import Unicode, Tuple, TraitError, Int, CaselessStrEnum
 
 class ContainerWidget(DOMWidget):
     _view_name = Unicode('ContainerView', sync=True)
 
     # Child widgets in the container.
     # Using a tuple here to force reassignment to update the list.
     # When a proper notifying-list trait exists, that is what should be used here.
     children = Tuple(sync=True, allow_none=False)
 
     def __init__(self, children = (), **kwargs):
         kwargs['children'] = children
         super(ContainerWidget, self).__init__(**kwargs)
         self.on_displayed(ContainerWidget._fire_children_displayed)
 
     def _fire_children_displayed(self):
         for child in self.children:
             child._handle_displayed()
 
 
 class PopupWidget(ContainerWidget):
     _view_name = Unicode('PopupView', sync=True)
     
     description = Unicode(sync=True)
     button_text = Unicode(sync=True)
 
 
 class FlexContainerWidget(ContainerWidget):
     _view_name = Unicode('FlexContainerView', sync=True)
     flex = Int(0, sync=True, help="""Specify the flexible-ness of the model.""")
     def _flex_changed(self, name, old, new):
         new = min(max(0, new), 2)
         if self.flex != new:
             self.flex = new
 
-    _locations = ['start', 'center', 'end']
-    pack = CaselessStrEnum(values=_locations, default_value='start', allow_none=False, sync=True)
-    align = CaselessStrEnum(values=_locations, default_value='start', allow_none=False, sync=True)
+    _locations = ['start', 'center', 'end', 'baseline', 'stretch']
+    pack = CaselessStrEnum(
+        values=_locations, 
+        default_value='start', allow_none=False, sync=True)
+    align = CaselessStrEnum(
+        values=_locations, 
+        default_value='start', allow_none=False, sync=True)
 
 
-class VBoxContainerWidget(FlexContainerWidget):
+class VBoxWidget(FlexContainerWidget):
     _view_name = Unicode('VBoxContainerView', sync=True)
 
 
-class HBoxContainerWidget(FlexContainerWidget):
+class HBoxWidget(FlexContainerWidget):
     _view_name = Unicode('HBoxContainerView', sync=True)