pip-webui/pip-webui-css/src/flexbox/flexbox_mixins.less

HTML5 UI for LOB applications

// @file Flexbox compatibility mixins
// @copyright Digital Living Software Corp. 2014-2015

.flex() {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.flex-container() {
   .flex();
}

.flex-direction(@direction) {
    -webkit-box-flex-direction: @direction;
    -moz-box-flex-direction:    @direction;
    -webkit-flex-direction:     @direction;
    -ms-flex-direction:         @direction;
    flex-direction:             @direction;
}

.flex-direction-column() {
    .flex-direction(column);
}

.flex-direction-row() {
    .flex-direction(row);    
}

.flex-flow(@direction, @wrap) {
    .flex-direction(@direction);
    flex-wrap: @wrap;
}

.flex-flow-row-wrap() {
    .flex();
    .flex-flow(row, wrap);
}

.flex-element(@grow, @shrink, @initialSize: auto) {
    -webkit-box-flex: @grow @shrink @initialSize;
    -moz-box-flex: @grow @shrink @initialSize;        
    -webkit-flex: @grow @shrink @initialSize;
    -ms-flex: @grow @shrink @initialSize;
    flex: @grow @shrink @initialSize;
}

.flex-fixed() {
    .flex-element(0, 0, auto);
}

.flex-var() {
    .flex-element(1, 1, auto);
}

.flex-grow() {
    .flex-element(1, 0, auto);
}

.flex-shrink() {
    .flex-element(0, 1, auto);
}

.flex-order(@index) {
    -webkit-box-ordinal-group: @index;
    -moz-box-ordinal-group:    @index;
    -webkit-order:             @index;
    -ms-flex-order:            @index;
    order:                     @index;
}

.flex-vertical-content(@value) {
    -webkit-box-align:   @value;
    -moz-box-align:      @value;
    -webkit-align-items: @value;
    -ms-flex-align:      @value;
    align-items:         @value;
}

.flex-vertical-center() {
    .flex-vertical-content(center);
}

.flex-vertical-start() {
    .flex-vertical-content(start);
}

.flex-justify-content(@value, @oldValue) {
    -webkit-box-pack:        @value;
    -moz-box-pack:           @value;
    -webkit-justify-content: @oldValue;
    -ms-flex-pack:           @value;
    justify-content:         @oldValue;
}

.flex-horizontal-start() {
    .flex-justify-content(start, flex-start);
}

.flex-horizontal-center() {
    .flex-justify-content(center, center);
}

.flex-horizontal-end() {
    .flex-justify-content(end, flex-end);
}