lanes 0.1.9.5 → 0.3.0

data/client/lanes/react/mixins/Viewport.coffee

@@ -3,9 +3,15 @@ Lanes.React.Mixins.Viewport = {
     contextTypes:
         viewport: Lanes.PropTypes.State
 
-}
+    showDialog: (props) ->
+        new Promise( (onOk, onCancel) =>
+            @context.viewport.modalProps = _.extend({}, props, {show: true, onOk, onCancel})
+        )
+
+    hideDialog: ->
+        @context.viewport.modal = {show: false}
 
+}
 
 Object.defineProperty Lanes.React.Mixins.Viewport, 'viewport',
-    get: ->
-        @context.viewport
+    get: -> @context.viewport

data/client/lanes/screens/ChangeListener.coffee

@@ -11,8 +11,8 @@ Lanes.Screens.ChangeListener = {
 
     derived:
         changes: deps:[], fn: ->
-            new Lanes.Models.ChangeSetCollection([],{ parent: this })
-        changes_visible: { deps: ['change_count'], fn:-> @change_count > 0 }
+            new Lanes.Models.ChangeSetCollection([], { parent: this })
+        changes_visible: { deps: ['change_count'], fn: -> @change_count > 0 }
 
     bindings:
         'changes_visible': { selector: '.changes-notification', type: 'toggle' }
@@ -27,7 +27,7 @@ Lanes.Screens.ChangeListener = {
             view: 'Lanes.Views.ModelUpdate'
             collection: 'changes'
 
-    onChange: (model,change) ->
+    onChange: (model, change) ->
         @changes.add(change)
         @change_count += 1
 

data/client/lanes/screens/Commands.coffee

@@ -1,9 +1,7 @@
-class Lanes.Screens.Commands
+class Lanes.Screens.Commands extends Lanes.Models.State
 
     constructor: (@screen, @options = {}) ->
-        _.defaults(@options,
-            modelName: 'model'
-        )
+        _.defaults(@options, modelName: 'model')
         _.bindAll(this, _.functions(this))
 
     resetModel: ->
@@ -11,14 +9,23 @@ class Lanes.Screens.Commands
         @setModel( new model.constructor )
         undefined
 
-    getModel: ->
-        @screen[@options.modelName]
+    getModel: -> @screen[@options.modelName]
 
     setModel: (model) ->
+        @options.modelWillRebind?(model)
         @screen.data.rebind("#{@options.modelName}": model)
+        @screen.setModelUrl?(model)
+        @options.modelDidRebind?(model)
+
+    canEditModel: ->
+
+        @screen.hasWriteAccess?()
+
+    getSyncOptions: ->
+        _.result(@screen, 'syncOptions') || {}
 
     saveModel: ->
-        @getModel().save()
+        @getModel().save(@getSyncOptions())
 
     toggleEdit: ->
         @screen.setState(isEditing: !@isEditing())

data/client/lanes/screens/CommonComponents.cjsx

@@ -0,0 +1,20 @@
+class Lanes.Screens.CommonComponents extends Lanes.React.Component
+
+    propTypes:
+        commands:        React.PropTypes.instanceOf(Lanes.Screens.Commands).isRequired
+        errors:          React.PropTypes.bool
+        networkActivity: React.PropTypes.bool
+        toolbarProps:    React.PropTypes.object
+
+
+
+    render: ->
+        model = @props.commands.getModel()
+        <div>
+            {unless @networkActivity is false
+                <LC.NetworkActivityOverlay model={model} {...@props} /> }
+            <LC.Toolbar {...@props} {...@props.toolbarProps}>
+                {@props.children}
+            </LC.Toolbar>
+            {<LC.ErrorDisplay model={model} {...@props} /> unless @errors  is false}
+        </div>

data/client/lanes/screens/Definitions.coffee

@@ -1,20 +1,34 @@
 class ScreenView extends Lanes.Models.BasicModel
 
     session:
+        props:  'object'
         screen: 'object'
-        active: ['boolean', true, true]
-        id: type: 'number', setOnce: true, required: true, default: ->
-            _.uniqueId('screen')
+        model:  'state'
+        active: 'boolean' #, true, true]
+        id: type: 'string', setOnce: true, required: true, default: ->
+            Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 3)
 
     component: ->
         @screen.getScreen()
 
+    title: ->
+        code = @model?.visibleIdentifier?() or ''
+        code = "::#{code}" if code
+        title = @screen.title
+        title = title[0...10] + '…' if title.length > 12
+        title + code
+
     initialize: (options) ->
+        this.props ||= {}
+        this.props.screen = this
         Lanes.Screens.Definitions.displaying.add( this )
 
     remove: ->
         Lanes.Screens.Definitions.displaying.remove( this )
 
+    historyUrl: ->
+        code = @model?.visibleIdentifier?() or ''
+        pathname: "/#{@id}/#{@screen.id}/#{code}"
 
 
 class ScreenDefinition extends Lanes.Models.BasicModel
@@ -27,6 +41,7 @@ class ScreenDefinition extends Lanes.Models.BasicModel
         view:        'string'
         icon:        'string'
         group_id:    'string'
+        access:      'string'
         loading:     'boolean'
         extension:   'string'
         model:       'string'
@@ -55,6 +70,10 @@ class ScreenDefinition extends Lanes.Models.BasicModel
             deps: ['extension', 'model'], fn: ->
                 _.classify(@extension) + ".Screens." + @view
 
+        label:
+            deps: ['id', 'title'], fn: ->
+                @title || _.field2title(@id)
+
     getScreen: ->
         Lanes.u.getPath(@extension_path)
 
@@ -68,22 +87,31 @@ class ScreenDefinition extends Lanes.Models.BasicModel
         me = this
         return new _.Promise( (resolve, reject) ->
             me.loading = true
-            Lanes.lib.RequestAssets(me.asset_paths...)
-                .then ->
-                    me.loading = false
-                    viewModel = me.getScreen()
-                    if viewModel then resolve(me)
-                    else reject("Screen #{me.view} not definied after file retrieval")
-                , (msg) ->
-                    Lanes.warn(msg)
-                    me.loading = false
-                    reject(msg)
+            attempt = 0
+            done = ->
+                me.loading = false
+                viewModel = me.getScreen()
+                if viewModel
+                    resolve(me)
+                else if attempt < 3
+                    attempt += 1
+                    _.delay(done, 500)
+                else
+                    reject("Screen #{me.view} not definied after file retrieval")
+            err = (msg) ->
+                Lanes.warn(msg)
+                me.loading = false
+                reject(msg)
+            Lanes.lib.RequestAssets(me.asset_paths...).then(done, err)
         )
 
 
-    display: ->
-        this.ensureLoaded().then =>
-            new ScreenView( screen: @ )
+    display: (props) ->
+        props = _.extend({}, props, screen: this)
+        this.ensureLoaded().then ->
+            sv = new ScreenView(props)
+            sv.active = true
+            sv
 
 
 class ScreenViewSet extends Lanes.Models.BasicCollection
@@ -94,6 +122,12 @@ class ScreenViewSet extends Lanes.Models.BasicCollection
         @findWhere( active: true )
 
     initialize: (models, options = {}) ->
+        Lanes.current_user.on "change:isLoggedIn", (user) =>
+            if user.isLoggedIn
+                for screen_id in Lanes.current_user.options?.initial_screens || []
+                    Lanes.Screens.Definitions.all.get(screen_id)?.display()
+            else
+                @reset()
         this.on( 'change:active add', this.onActiveChange )
 
     remove: (model) ->
@@ -122,19 +156,21 @@ class ScreenViewSet extends Lanes.Models.BasicCollection
             current = this.length
         this.at(current + inc).active = true
 
-
+    findInstance: (screenId, instanceId) ->
+        this.find (instance) ->
+            instance.screen.id is screenId and instance.id is instanceId
 
 class ScreenSet extends Lanes.Models.BasicCollection
 
     model: ScreenDefinition
-
     register: Lanes.emptyFn
 
     addScreen: (screen) ->
         screen = this.add( screen )
         screen.set(active:true)
 
-
+    isLoading: ->
+        !!Lanes.Screens.Definitions.all.findWhere({loading: true})
 
 class MenuGroup extends Lanes.Models.BasicModel
 
@@ -153,7 +189,7 @@ class MenuGroup extends Lanes.Models.BasicModel
         @cache ||= new Lanes.Models.SubCollection( Lanes.Screens.Definitions.all, {
             filter: (screen) =>
                 screen.group_id == @id &&
-                    (!screen.model_type || Lanes.current_user.canRead(screen.model_type))
+                    (!screen.model_type || Lanes.current_user.hasAccess(screen.access, screen.model_type))
             watched: ['group_id']
         })
 
@@ -187,4 +223,12 @@ Lanes.Screens.Definitions = {
     groups:  new MenuGroupSet
     register: (spec) ->
         this.all.add( spec )
+    setBrowserLocation: (location) ->
+        [instanceId, screenId, args...] = _.compact(location.pathname.split('/'))
+        return unless screenId
+        if instanceId and ( instance = @displaying.findInstance(screenId, instanceId) )
+            instance.active = true
+        else
+            @all.get(screenId)?.display(id: instanceId, props: {args: args})
+
 }

data/client/lanes/screens/SystemSettings.cjsx

@@ -0,0 +1,56 @@
+class Lanes.Screens.SystemSettings extends Lanes.React.Screen
+
+    dataObjects:
+        config: -> Lanes.config.system_settings
+
+    getInitialState: ->
+        isEditing: true
+        commands: new Lanes.Screens.Commands(this, modelName: 'config')
+
+    onChange: (path, ev) ->
+        @config.settings.lanes[path] = if ev.target then ev.target.value else ev
+        @forceUpdate()
+
+    renderFileOptions: ->
+        dir = @config.settings.lanes.storage_dir
+        <LC.FieldWrapper label='Store Directory' sm=9 {...@props} value={dir}>
+            <input type="text" className='value form-control'
+                placeholder="Directory to store files" value={dir}
+                onChange={_.partial(@onChange, 'storage_dir')} />
+        </LC.FieldWrapper>
+
+    renderFogOptions: ->
+        value = JSON.stringify(@config.settings.lanes.fog_credentials, null, 2)
+        <LC.FieldWrapper label='Fog Options' sm=9 {...@props} value={value}>
+            <BS.Input type="textarea" placeholder="FOG options (as JSON)" value={value}
+                onChange={_.partial(@onChange, 'fog_credentials')} />
+        </LC.FieldWrapper>
+
+    saveConfig: ->
+        @config.save(saveAll: true)
+
+    render: ->
+        choices = ['file', 'fog']
+        storage = @config.settings.lanes?.storage || 'file'
+
+        <LC.ScreenWrapper identifier="user-preferences">
+            <BS.Nav bsStyle="pills" className="lanes-toolbar">
+                <BS.Button navItem componentClass="button"
+                    onClick={@saveConfig} className="save navbar-btn control">
+                    <LC.Icon type="cloud-upload" />Save
+                </BS.Button>
+            </BS.Nav>
+
+            <BS.Row>
+                <LC.FieldWrapper label='File Storage' sm=3 {...@props} value={storage}>
+                    <Lanes.Vendor.ReactWidgets.DropdownList
+                        data={choices} value={storage} onChange={_.partial(@onChange, 'storage')} />
+                </LC.FieldWrapper>
+                {if storage is 'file' then @renderFileOptions() else @renderFogOptions()}
+            </BS.Row>
+            <BS.Row>
+                <LC.ImageSaver label='Logo' sm=4 model={@config} name='logo' />
+            </BS.Row>
+            {for id, Ext of Lanes.Extensions.instances when Ext.settingsElement
+                <Ext.settingsElement settings={@config.settings[id]} key={id} /> }
+        </LC.ScreenWrapper>

data/client/lanes/screens/UserPreferences.cjsx

@@ -0,0 +1,38 @@
+class Lanes.Screens.UserPreferences extends Lanes.React.Screen
+
+    dataObjects:
+        user: -> Lanes.current_user
+
+    getInitialState: ->
+        isEditing: true
+        commands: new Lanes.Screens.Commands(this, modelName: 'user')
+
+    setScreens: (screens) ->
+        @user.options = _.extend({}, @user.options, {initial_screens: _.pluck(screens, 'id')})
+
+    getScreens: ->
+        _.map(@user.options?.initial_screens || [], (id) ->
+            screen = Lanes.Screens.Definitions.all.get(id)
+            {id, label: screen.label}
+        )
+
+    render: ->
+        <LC.ScreenWrapper identifier="user-preferences">
+            <Lanes.Screens.CommonComponents commands={@state.commands} />
+            <BS.Row>
+                <LC.SelectField xs=12
+                    multiSelect
+                    fetchWhenOpen={false}
+                    label='Initial Screens'
+                    labelField='label'
+                    name='options'
+                    model={@user}
+                    choices={Lanes.Screens.Definitions.all.models}
+                    queryModel={Lanes.Screens.Definitions.all}
+                    setSelection={@setScreens}
+                    getSelection={@getScreens}
+                />
+            </BS.Row>
+            {for id, Ext of Lanes.Extensions.instances when Ext.preferenceElement
+                <Ext.preferenceElement key={id} /> }
+        </LC.ScreenWrapper>

data/client/lanes/screens/index.js

@@ -2,4 +2,7 @@
 //= require ./Definitions
 //= require ./register
 //= require ./Commands
+//= require ./CommonComponents
 //= require ./mixins
+//= require ./UserPreferences
+//= require ./SystemSettings

data/client/lanes/screens/styles.scss

@@ -4,4 +4,5 @@
 */
 @import "lanes/styles/bootstrap/variables";
 @import "lanes/styles/bootstrap/mixins";
-@import "lanes/styles/fonts";
+@import "lanes/styles/variables";
+@import "lanes/styles/mixins/all";

data/client/lanes/styles/fonts.scss

@@ -7,6 +7,7 @@ $lanes-icon-font: 'FontAwesome';
 button, a.btn {
     .icon {
         margin-right: 0.5em;
+        &.flush { margin-right: 0; }
     }
     &.icon:before{
         font-family: $lanes-icon-font;

data/client/lanes/styles/global.scss

@@ -1,2 +1,3 @@
 @import "global/fancy-header";
-
+@import "global/flexbox";
+@import "global/styles";

data/client/lanes/styles/global/flexbox.scss

@@ -0,0 +1,16 @@
+.flex-vertically {
+    @include flexbox();
+    @include flex-direction(column);
+}
+
+.row.flex-expand {
+    @include flexbox();
+    @include flex-grow(1);
+    @include flex-direction(column);
+}
+
+.flex-row-expand {
+    @include flexbox();
+    @include flex-grow(1);
+    @include flex-direction(column);
+}

data/client/lanes/styles/global/styles.scss

@@ -0,0 +1 @@
+.cursor-pointer { cursor: pointer; }

data/client/lanes/styles/mixins/_dropdown.scss

@@ -0,0 +1,21 @@
+@mixin lanes-unpadded-dropdown() {
+    .rw-input {
+        padding: 0;
+        > div {
+            padding-left: 0.5rem;
+        }
+    }
+    ul.rw-list {
+        li.rw-list-option {
+            padding-left: 0;
+            padding-right: 0;
+            &:hover {
+                box-shadow: 0 0 5px rgba(0,0,0,0.5);
+            }
+            > div {
+                border-radius: 4px;
+                padding: 5px;
+            }
+        }
+    }
+}

data/client/lanes/styles/mixins/_flexbox.scss

@@ -0,0 +1,394 @@
+// Flexbox Mixins
+// http://philipwalton.github.io/solved-by-flexbox/
+// https://github.com/philipwalton/solved-by-flexbox
+//
+// Copyright (c) 2013 Brian Franco
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+//
+// This is a set of mixins for those who want to mess around with flexbox
+// using the native support of current browsers. For full support table
+// check: http://caniuse.com/flexbox
+//
+// Basically this will use:
+//
+// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
+// * Final standards syntax (FF, Safari, Chrome, IE11, Opera)
+//
+// This was inspired by:
+//
+// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
+//
+// With help from:
+//
+// * http://w3.org/tr/css3-flexbox/
+// * http://the-echoplex.net/flexyboxes/
+// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
+// * http://css-tricks.com/using-flexbox/
+// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
+// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes
+
+//----------------------------------------------------------------------
+
+// Flexbox Containers
+//
+// The 'flex' value causes an element to generate a block-level flex
+// container box.
+//
+// The 'inline-flex' value causes an element to generate a inline-level
+// flex container box.
+//
+// display: flex | inline-flex
+//
+// http://w3.org/tr/css3-flexbox/#flex-containers
+//
+// (Placeholder selectors for each type, for those who rather @extend)
+
+@mixin flexbox {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flexbox;
+    display: flex;
+}
+
+%flexbox { @include flexbox; }
+
+//----------------------------------
+
+@mixin inline-flex {
+    display: -webkit-inline-box;
+    display: -webkit-inline-flex;
+    display: -moz-inline-flex;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+}
+
+%inline-flex { @include inline-flex; }
+
+//----------------------------------------------------------------------
+
+// Flexbox Direction
+//
+// The 'flex-direction' property specifies how flex items are placed in
+// the flex container, by setting the direction of the flex container's
+// main axis. This determines the direction that flex items are laid out in.
+//
+// Values: row | row-reverse | column | column-reverse
+// Default: row
+//
+// http://w3.org/tr/css3-flexbox/#flex-direction-property
+
+@mixin flex-direction($value: row) {
+    @if $value == row-reverse {
+        -webkit-box-direction: reverse;
+        -webkit-box-orient: horizontal;
+    } @else if $value == column {
+        -webkit-box-direction: normal;
+        -webkit-box-orient: vertical;
+    } @else if $value == column-reverse {
+        -webkit-box-direction: reverse;
+        -webkit-box-orient: vertical;
+    } @else {
+        -webkit-box-direction: normal;
+        -webkit-box-orient: horizontal;
+    }
+    -webkit-flex-direction: $value;
+    -moz-flex-direction: $value;
+    -ms-flex-direction: $value;
+    flex-direction: $value;
+}
+    // Shorter version:
+    @mixin flex-dir($args...) { @include flex-direction($args...); }
+
+//----------------------------------------------------------------------
+
+// Flexbox Wrap
+//
+// The 'flex-wrap' property controls whether the flex container is single-line
+// or multi-line, and the direction of the cross-axis, which determines
+// the direction new lines are stacked in.
+//
+// Values: nowrap | wrap | wrap-reverse
+// Default: nowrap
+//
+// http://w3.org/tr/css3-flexbox/#flex-wrap-property
+
+@mixin flex-wrap($value: nowrap) {
+    // No Webkit Box fallback.
+    -webkit-flex-wrap: $value;
+    -moz-flex-wrap: $value;
+    @if $value == nowrap {
+        -ms-flex-wrap: none;
+    } @else {
+        -ms-flex-wrap: $value;
+    }
+    flex-wrap: $value;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Flow (shorthand)
+//
+// The 'flex-flow' property is a shorthand for setting the 'flex-direction'
+// and 'flex-wrap' properties, which together define the flex container's
+// main and cross axes.
+//
+// Values: <flex-direction> | <flex-wrap>
+// Default: row nowrap
+//
+// http://w3.org/tr/css3-flexbox/#flex-flow-property
+
+@mixin flex-flow($values: (row nowrap)) {
+    // No Webkit Box fallback.
+    -webkit-flex-flow: $values;
+    -moz-flex-flow: $values;
+    -ms-flex-flow: $values;
+    flex-flow: $values;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Order
+//
+// The 'order' property controls the order in which flex items appear within
+// their flex container, by assigning them to ordinal groups.
+//
+// Default: 0
+//
+// http://w3.org/tr/css3-flexbox/#order-property
+
+@mixin order($int: 0) {
+    -webkit-box-ordinal-group: $int + 1;
+    -webkit-order: $int;
+    -moz-order: $int;
+    -ms-flex-order: $int;
+    order: $int;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Grow
+//
+// The 'flex-grow' property sets the flex grow factor. Negative numbers
+// are invalid.
+//
+// Default: 0
+//
+// http://w3.org/tr/css3-flexbox/#flex-grow-property
+
+@mixin flex-grow($int: 0) {
+    -webkit-box-flex: $int;
+    -webkit-flex-grow: $int;
+    -moz-flex-grow: $int;
+    -ms-flex-positive: $int;
+    flex-grow: $int;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Shrink
+//
+// The 'flex-shrink' property sets the flex shrink factor. Negative numbers
+// are invalid.
+//
+// Default: 1
+//
+// http://w3.org/tr/css3-flexbox/#flex-shrink-property
+
+@mixin flex-shrink($int: 1) {
+    -webkit-flex-shrink: $int;
+    -moz-flex-shrink: $int;
+    -ms-flex-negative: $int;
+    flex-shrink: $int;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Basis
+//
+// The 'flex-basis' property sets the flex basis. Negative lengths are invalid.
+//
+// Values: Like "width"
+// Default: auto
+//
+// http://www.w3.org/TR/css3-flexbox/#flex-basis-property
+
+@mixin flex-basis($value: auto) {
+    -webkit-flex-basis: $value;
+    -moz-flex-basis: $value;
+    -ms-flex-preferred-size: $value;
+    flex-basis: $value;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox "Flex" (shorthand)
+//
+// The 'flex' property specifies the components of a flexible length: the
+// flex grow factor and flex shrink factor, and the flex basis. When an
+// element is a flex item, 'flex' is consulted instead of the main size
+// property to determine the main size of the element. If an element is
+// not a flex item, 'flex' has no effect.
+//
+// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
+// Default: See individual properties (1 1 0).
+//
+// http://w3.org/tr/css3-flexbox/#flex-property
+
+@mixin flex($fg: 1, $fs: null, $fb: null) {
+
+    // Set a variable to be used by box-flex properties
+    $fg-boxflex: $fg;
+
+    // Box-Flex only supports a flex-grow value so let's grab the
+    // first item in the list and just return that.
+    @if type-of($fg) == 'list' {
+        $fg-boxflex: nth($fg, 1);
+    }
+
+    -webkit-box-flex: $fg-boxflex;
+    -webkit-flex: $fg $fs $fb;
+    -moz-box-flex: $fg-boxflex;
+    -moz-flex: $fg $fs $fb;
+    -ms-flex: $fg $fs $fb;
+    flex: $fg $fs $fb;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Justify Content
+//
+// The 'justify-content' property aligns flex items along the main axis
+// of the current line of the flex container. This is done after any flexible
+// lengths and any auto margins have been resolved. Typically it helps distribute
+// extra free space leftover when either all the flex items on a line are
+// inflexible, or are flexible but have reached their maximum size. It also
+// exerts some control over the alignment of items when they overflow the line.
+//
+// Note: 'space-*' values not supported in older syntaxes.
+//
+// Values: flex-start | flex-end | center | space-between | space-around
+// Default: flex-start
+//
+// http://w3.org/tr/css3-flexbox/#justify-content-property
+
+@mixin justify-content($value: flex-start) {
+    @if $value == flex-start {
+        -webkit-box-pack: start;
+        -ms-flex-pack: start;
+    } @else if $value == flex-end {
+        -webkit-box-pack: end;
+        -ms-flex-pack: end;
+    } @else if $value == space-between {
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+    } @else if $value == space-around {
+        -ms-flex-pack: distribute;
+    } @else {
+        -webkit-box-pack: $value;
+        -ms-flex-pack: $value;
+    }
+    -webkit-justify-content: $value;
+    -moz-justify-content: $value;
+    justify-content: $value;
+}
+    // Shorter version:
+    @mixin flex-just($args...) { @include justify-content($args...); }
+
+//----------------------------------------------------------------------
+
+// Flexbox Align Items
+//
+// Flex items can be aligned in the cross axis of the current line of the
+// flex container, similar to 'justify-content' but in the perpendicular
+// direction. 'align-items' sets the default alignment for all of the flex
+// container's items, including anonymous flex items. 'align-self' allows
+// this default alignment to be overridden for individual flex items. (For
+// anonymous flex items, 'align-self' always matches the value of 'align-items'
+// on their associated flex container.)
+//
+// Values: flex-start | flex-end | center | baseline | stretch
+// Default: stretch
+//
+// http://w3.org/tr/css3-flexbox/#align-items-property
+
+@mixin align-items($value: stretch) {
+    @if $value == flex-start {
+        -webkit-box-align: start;
+        -ms-flex-align: start;
+    } @else if $value == flex-end {
+        -webkit-box-align: end;
+        -ms-flex-align: end;
+    } @else {
+        -webkit-box-align: $value;
+        -ms-flex-align: $value;
+    }
+    -webkit-align-items: $value;
+    -moz-align-items: $value;
+    align-items: $value;
+}
+
+//----------------------------------
+
+// Flexbox Align Self
+//
+// Values: auto | flex-start | flex-end | center | baseline | stretch
+// Default: auto
+
+@mixin align-self($value: auto) {
+    // No Webkit Box Fallback.
+    -webkit-align-self: $value;
+    -moz-align-self: $value;
+    @if $value == flex-start {
+        -ms-flex-item-align: start;
+    } @else if $value == flex-end {
+        -ms-flex-item-align: end;
+    } @else {
+        -ms-flex-item-align: $value;
+    }
+    align-self: $value;
+}
+
+//----------------------------------------------------------------------
+
+// Flexbox Align Content
+//
+// The 'align-content' property aligns a flex container's lines within the
+// flex container when there is extra space in the cross-axis, similar to
+// how 'justify-content' aligns individual items within the main-axis. Note,
+// this property has no effect when the flexbox has only a single line.
+//
+// Values: flex-start | flex-end | center | space-between | space-around | stretch
+// Default: stretch
+//
+// http://w3.org/tr/css3-flexbox/#align-content-property
+
+@mixin align-content($value: stretch) {
+    // No Webkit Box Fallback.
+    -webkit-align-content: $value;
+    -moz-align-content: $value;
+    @if $value == flex-start {
+        -ms-flex-line-pack: start;
+    } @else if $value == flex-end {
+        -ms-flex-line-pack: end;
+    } @else {
+        -ms-flex-line-pack: $value;
+    }
+    align-content: $value;
+}