diff --git a/demo.html b/demo.html
index 53bba833f..ff95f0150 100644
--- a/demo.html
+++ b/demo.html
@@ -22,6 +22,64 @@
.icon-rm {
background: url("./img/icon-sq-r.png") no-repeat center;
}
+
+ .icons-flex {
+ background-size: 70% 65% !important;
+ height: 15px;
+ width: 17px;
+ opacity: 0.9;
+ }
+ .icon-dir-row {
+ background: url("./img/flex-dir-row.png") no-repeat center;
+ }
+ .icon-dir-row-rev {
+ background: url("./img/flex-dir-row-rev.png") no-repeat center;
+ }
+ .icon-dir-col {
+ background: url("./img/flex-dir-col.png") no-repeat center;
+ }
+ .icon-dir-col-rev {
+ background: url("./img/flex-dir-col-rev.png") no-repeat center;
+ }
+ .icon-just-start{
+ background: url("./img/flex-just-start.png") no-repeat center;
+ }
+ .icon-just-end{
+ background: url("./img/flex-just-end.png") no-repeat center;
+ }
+ .icon-just-sp-bet{
+ background: url("./img/flex-just-sp-bet.png") no-repeat center;
+ }
+ .icon-just-sp-ar{
+ background: url("./img/flex-just-sp-ar.png") no-repeat center;
+ }
+ .icon-just-sp-cent{
+ background: url("./img/flex-just-sp-cent.png") no-repeat center;
+ }
+ .icon-al-start{
+ background: url("./img/flex-al-start.png") no-repeat center;
+ }
+ .icon-al-end{
+ background: url("./img/flex-al-end.png") no-repeat center;
+ }
+ .icon-al-str{
+ background: url("./img/flex-al-str.png") no-repeat center;
+ }
+ .icon-al-center{
+ background: url("./img/flex-al-center.png") no-repeat center;
+ }
+ #wte-sm-label-parent-flex {
+ width: 100%;
+ }
+ #wte-sm-label-parent-flex .wte-sm-field{display: none;}
+ #wte-sm-label-parent-flex {
+ border-bottom: 1px solid #383838;
+ font-size: 12px;
+ padding: 15px 3px 5px;
+ width: 100%;
+ }
+ #wte-sm-flex-grow, #wte-sm-flex-shrink{ width:30%;}
+ #wte-sm-flex-basis{ width:40%;}
@@ -901,6 +959,159 @@
functionName: 'rotateZ',
}],
}]
+ },{
+ name: 'Flex',
+ open: false,
+ properties: [{
+ name : 'Flex Container',
+ property : 'display',
+ type : 'select',
+ defaults : 'block',
+ list : [{
+ value : 'block',
+ name : 'Disable',
+ },{
+ value : 'flex',
+ name : 'Enable',
+ }],
+ },{
+ name: 'Flex Parent',
+ property: 'label-parent-flex',
+ type: 'integer',
+ },{
+ name : 'Direction',
+ property : 'flex-direction',
+ type : 'radio',
+ defaults : 'row',
+ list : [{
+ value : 'row',
+ name : 'Row',
+ className : 'icons-flex icon-dir-row',
+ title : 'Row',
+ },{
+ value : 'row-reverse',
+ name : 'Row reverse',
+ className : 'icons-flex icon-dir-row-rev',
+ title : 'Row reverse',
+ },{
+ value : 'column',
+ name : 'Column',
+ title : 'Column',
+ className : 'icons-flex icon-dir-col',
+ },{
+ value : 'column-reverse',
+ name : 'Column reverse',
+ title : 'Column reverse',
+ className : 'icons-flex icon-dir-col-rev',
+ }],
+ },{
+ name : 'Justify',
+ property : 'justify-content',
+ type : 'radio',
+ defaults : 'flex-start',
+ list : [{
+ value : 'flex-start',
+ className : 'icons-flex icon-just-start',
+ title : 'Start',
+ },{
+ value : 'flex-end',
+ title : 'End',
+ className : 'icons-flex icon-just-end',
+ },{
+ value : 'space-between',
+ title : 'Space between',
+ className : 'icons-flex icon-just-sp-bet',
+ },{
+ value : 'space-around',
+ title : 'Space around',
+ className : 'icons-flex icon-just-sp-ar',
+ },{
+ value : 'center',
+ title : 'Center',
+ className : 'icons-flex icon-just-sp-cent',
+ }],
+ },{
+ name : 'Align',
+ property : 'align-items',
+ type : 'radio',
+ defaults : 'center',
+ list : [{
+ value : 'flex-start',
+ title : 'Start',
+ className : 'icons-flex icon-al-start',
+ },{
+ value : 'flex-end',
+ title : 'End',
+ className : 'icons-flex icon-al-end',
+ },{
+ value : 'stretch',
+ title : 'Stretch',
+ className : 'icons-flex icon-al-str',
+ },{
+ value : 'center',
+ title : 'Center',
+ className : 'icons-flex icon-al-center',
+ }],
+ },{
+ name: 'Flex Children',
+ property: 'label-parent-flex',
+ type: 'integer',
+ },{
+ name: 'Order',
+ property: 'order',
+ type: 'integer',
+ defaults : 0,
+ min: 0
+ },{
+ name : 'Flex',
+ property : 'flex',
+ type : 'composite',
+ properties : [{
+ name: 'Grow',
+ property: 'flex-grow',
+ type: 'integer',
+ defaults : 0,
+ min: 0
+ },{
+ name: 'Shrink',
+ property: 'flex-shrink',
+ type: 'integer',
+ defaults : 0,
+ min: 0
+ },{
+ name: 'Basis',
+ property: 'flex-basis',
+ type: 'integer',
+ units: ['px','%',''],
+ unit: '',
+ defaults : 'auto',
+ }],
+ },{
+ name : 'Align',
+ property : 'align-self',
+ type : 'radio',
+ defaults : 'auto',
+ list : [{
+ value : 'auto',
+ name : 'Auto',
+ },{
+ value : 'flex-start',
+ title : 'Start',
+ className : 'icons-flex icon-al-start',
+ },{
+ value : 'flex-end',
+ title : 'End',
+ className : 'icons-flex icon-al-end',
+ },{
+ value : 'stretch',
+ title : 'Stretch',
+ className : 'icons-flex icon-al-str',
+ },{
+ value : 'center',
+ title : 'Center',
+ className : 'icons-flex icon-al-center',
+ }],
+ }]
}
],
diff --git a/img/flex-al-center.png b/img/flex-al-center.png
new file mode 100644
index 000000000..0b010591d
Binary files /dev/null and b/img/flex-al-center.png differ
diff --git a/img/flex-al-end.png b/img/flex-al-end.png
new file mode 100644
index 000000000..cdae6cd93
Binary files /dev/null and b/img/flex-al-end.png differ
diff --git a/img/flex-al-start.png b/img/flex-al-start.png
new file mode 100644
index 000000000..a696bf308
Binary files /dev/null and b/img/flex-al-start.png differ
diff --git a/img/flex-al-str.png b/img/flex-al-str.png
new file mode 100644
index 000000000..41dddb8df
Binary files /dev/null and b/img/flex-al-str.png differ
diff --git a/img/flex-dir-col-rev.png b/img/flex-dir-col-rev.png
new file mode 100644
index 000000000..26c4efa7b
Binary files /dev/null and b/img/flex-dir-col-rev.png differ
diff --git a/img/flex-dir-col.png b/img/flex-dir-col.png
new file mode 100644
index 000000000..4b0c8f93a
Binary files /dev/null and b/img/flex-dir-col.png differ
diff --git a/img/flex-dir-row-rev.png b/img/flex-dir-row-rev.png
new file mode 100644
index 000000000..5fb40d702
Binary files /dev/null and b/img/flex-dir-row-rev.png differ
diff --git a/img/flex-dir-row.png b/img/flex-dir-row.png
new file mode 100644
index 000000000..adc130272
Binary files /dev/null and b/img/flex-dir-row.png differ
diff --git a/img/flex-just-end.png b/img/flex-just-end.png
new file mode 100644
index 000000000..2a8c6f908
Binary files /dev/null and b/img/flex-just-end.png differ
diff --git a/img/flex-just-sp-ar.png b/img/flex-just-sp-ar.png
new file mode 100644
index 000000000..44948cb0d
Binary files /dev/null and b/img/flex-just-sp-ar.png differ
diff --git a/img/flex-just-sp-bet.png b/img/flex-just-sp-bet.png
new file mode 100644
index 000000000..a2fb3f1bc
Binary files /dev/null and b/img/flex-just-sp-bet.png differ
diff --git a/img/flex-just-sp-cent.png b/img/flex-just-sp-cent.png
new file mode 100644
index 000000000..1637738e1
Binary files /dev/null and b/img/flex-just-sp-cent.png differ
diff --git a/img/flex-just-start.png b/img/flex-just-start.png
new file mode 100644
index 000000000..376cd22cf
Binary files /dev/null and b/img/flex-just-start.png differ