|
|
|
@ -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%;} |
|
|
|
</style> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
@ -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', |
|
|
|
}], |
|
|
|
}] |
|
|
|
} |
|
|
|
], |
|
|
|
|
|
|
|
|