From 81f6e59c712fe2a945985d37b0762bc56d2235bc Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 19 Apr 2016 00:08:48 +0200 Subject: [PATCH] Update demo with Flex --- demo.html | 211 ++++++++++++++++++++++++++++++++++++++ img/flex-al-center.png | Bin 0 -> 280 bytes img/flex-al-end.png | Bin 0 -> 285 bytes img/flex-al-start.png | Bin 0 -> 283 bytes img/flex-al-str.png | Bin 0 -> 327 bytes img/flex-dir-col-rev.png | Bin 0 -> 320 bytes img/flex-dir-col.png | Bin 0 -> 328 bytes img/flex-dir-row-rev.png | Bin 0 -> 302 bytes img/flex-dir-row.png | Bin 0 -> 296 bytes img/flex-just-end.png | Bin 0 -> 282 bytes img/flex-just-sp-ar.png | Bin 0 -> 290 bytes img/flex-just-sp-bet.png | Bin 0 -> 292 bytes img/flex-just-sp-cent.png | Bin 0 -> 283 bytes img/flex-just-start.png | Bin 0 -> 288 bytes 14 files changed, 211 insertions(+) create mode 100644 img/flex-al-center.png create mode 100644 img/flex-al-end.png create mode 100644 img/flex-al-start.png create mode 100644 img/flex-al-str.png create mode 100644 img/flex-dir-col-rev.png create mode 100644 img/flex-dir-col.png create mode 100644 img/flex-dir-row-rev.png create mode 100644 img/flex-dir-row.png create mode 100644 img/flex-just-end.png create mode 100644 img/flex-just-sp-ar.png create mode 100644 img/flex-just-sp-bet.png create mode 100644 img/flex-just-sp-cent.png create mode 100644 img/flex-just-start.png 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 0000000000000000000000000000000000000000..0b010591d94653dbf2bf85c11079d4504f3649f6 GIT binary patch literal 280 zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1|*NXY)uAnN?apKg7ec#$`gxH85~pclTsBt za}(23gHjVyDhp4h+5i>p@^oyI;vA~E|f{@8yZBj%M`@O6RhExf(w8JFJVT%oKv|4s8U zl?csWj9%+oo(UHycCURRtJ~_XdvMmSNefl=RZIWGI8EEZRA|wp_jGX#skoK&W_V+wrDEj#Pf=ACU9(n%IxILiY@8N_0-5u^`yjnC@wTIVJhy+E%pc)I$ztaD0e0swWZbJhR= literal 0 HcmV?d00001 diff --git a/img/flex-al-start.png b/img/flex-al-start.png new file mode 100644 index 0000000000000000000000000000000000000000..a696bf30820e7d517f1e2cf04c9af122bc5a824f GIT binary patch literal 283 zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1|*NXY)uAnN?apKg7ec#$`gxH85~pclTsBt za}(23gHjVyDhp4h+5i>p^>lFzskoK&P000>X1^@s6#OZ}&0000PbVXQnQ*UN; zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUy=}AOERCwBA`2YVu0~((HpE58X-ApD1 zOu)%N8Nkrbf<@78ApQoP#Bgv1ws(h5MVilz=HU?O12e;oY(1k{ma z301(TC8L&%S~6K7T@2jXi${1xh;7f|tAKzs>^e*!TtR2^=Y zf~rR}kPO5&NR0wEw8{!pmvaFzD^eZ*3#nZIs^jMp@`)=Dhf~;EnM){6zEc>_82SMM Z3;-^O&$UG1qxk>;002ovPDHLkV1ki7fyw{? literal 0 HcmV?d00001 diff --git a/img/flex-dir-col-rev.png b/img/flex-dir-col-rev.png new file mode 100644 index 0000000000000000000000000000000000000000..26c4efa7b7567fdbaa661da32cf99214b5021e81 GIT binary patch literal 320 zcmV-G0l)rP000>X1^@s6#OZ}&0000PbVXQnQ*UN; zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUy;z>k7RCwBA{Qv(y0~AaL;%ElK;3*Jm zViC6lVtXL&K$l=aVsim8FAVjW za^qwLkvaY&C2{hdNOyf2&GDm_3{Fd!Xyq{E9RCf7KU0uT-b1U4-{=wm0R{ll#2C@~ SdIP000>X1^@s6#OZ}&0000PbVXQnQ*UN; zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUy>PbXFRCwBA`2YVu0~AjO;!i~2>qvT# z@k1c~4a9cnax4r8zy-v-41@t64sk&s2ARi-F2RJv{>MNZAXXh#OK1j0Eg7|hfs;r* ze56`}oEdim@pmHhyeHW!IEn~zFsR4@0cUi%;S=%5agq$gHbllr5xH@);y-cVBPDV2 zok(|m8qM)^OI_puBOvwz;y*yl4i$?5VtXLo3B*UyQ`dYVQ`ci8J-k3X6N{SrKrBhE z9RC@J(}DOPlGs-u_5kAN*y4nVf_Mx8;+If%JP_Z+6(`@IE+Z$OyaD1kAa(=dwdj%n a0R{l$U2b*uE);?Q0000;&|kgcft9xt#9#GC_GbedMl_f zultBUTavWWm%j|IJR1{OqgvJ}gehz6uoHgy`aR2!9S5E>YPP!TN;*y}5L`K}mqA|q x0n^hTxejMMTOM&o{75?TWc|Zn2PPH?hWw(d$@f>d)dBs+;OXk;vd$@?2>|QIaGwAG literal 0 HcmV?d00001 diff --git a/img/flex-dir-row.png b/img/flex-dir-row.png new file mode 100644 index 0000000000000000000000000000000000000000..adc130272cbc2792b38917417b9f75ec35b94fea GIT binary patch literal 296 zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1|*NXY)uAnN?apKg7ec#$`gxH85~pclTsBt za}(23gHjVyDhp4h+5i=u@^o9up>V39H8WU9OGv_d*ZD!~!P)J+6XrZHn3=i)% z8HITV8BVE(9Q*3W?yV(Rrv8q$|y6r+0w$)W_Qm rGbVE!72ojTXvfL;!^<03I1Cuf^RGq~3u#>i`ijBR)z4*}Q$iB}(sXQ( literal 0 HcmV?d00001 diff --git a/img/flex-just-end.png b/img/flex-just-end.png new file mode 100644 index 0000000000000000000000000000000000000000..2a8c6f90879e77e8708cbe3320c61e1062c68014 GIT binary patch literal 282 zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1|*NXY)uAnN?apKg7ec#$`gxH85~pclTsBt za}(23gHjVyDhp4h+5i>p@pN$vskoK&=l_3u=CzE%%(4eosH#L4ady0CDiof2Hm_+` zbtkLG3n$jpl{uUzY*cr#igS0qN^ZQt*74uzXMDpBo(}JY>)2AQ(iH5RI#u-?WZIAX z=h&*k)8RYeh-JeM`JF3Yn@jx{m+B3@n~^5-Yubi|A1xP{Slg8@QF~Z>VG7IY7CYyc zTODfTPNlUx6RzH|?mvftd`M%U;Q4k*n;IoK5%tv#Gq^ka18?R`s8n+J(_6Sj(eQ;1 cBZmP)`}@L{&xO;U0R6$>>FVdQ&MBb@02`cZEdT%j literal 0 HcmV?d00001 diff --git a/img/flex-just-sp-ar.png b/img/flex-just-sp-ar.png new file mode 100644 index 0000000000000000000000000000000000000000..44948cb0d1c749d4b503019f836543e5f86a5ea4 GIT binary patch literal 290 zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1|*NXY)uAnN?apKg7ec#$`gxH85~pclTsBt za}(23gHjVyDhp4h+JMx0x;TbZ+)DcM|Gz!+T1H`J*#j$7RicYHJKi%D3Qs+o*EFlT zlhxye6Km?q9L^Iqs=HXlx#f07DNJKZ3UEted!+2JN5a!iszbKnhxwHAoJW3NxFWDc zg{|Z2gdZ{)Y!*y~MziMqzoBzbJZAreANw!bI-#*dm>vw4mDSvvL` i_L-@$%~fS!WMi1koBu51cO(CT(@7kqeV^`rK)|uEy!?Chl}Q$z6i{U6Vr{&afU?z9Pr$ ngpHuWKeMR6e0JUpOgs#JYt$^v&27&CeZ=7D>gTe~DWM4f8dGi7 literal 0 HcmV?d00001 diff --git a/img/flex-just-sp-cent.png b/img/flex-just-sp-cent.png new file mode 100644 index 0000000000000000000000000000000000000000..1637738e1e09ed52fe60efb60b9b8c81b6de31a8 GIT binary patch literal 283 zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1|*NXY)uAnN?apKg7ec#$`gxH85~pclTsBt za}(23gHjVyDhp4h+5i>p^>lFzskoK&=l_3u=CzE%%(4eosH#L4ady0CDiof2Hm_+` zbtkLG3n$jpl{uUzY*cr#igPpmj8NFd_-Mbw84liCFCFG^9;tHRIhAt8p@yYHd~$Xt zx4?15kK3JfKe8tIs}%CpOcUT*ci-a2e$ExrXM3FQ2${*$m@&Qb@H+In;fJ`1eZv7) zjlH5B^Br#XT&QW1{^Q>8a{*URSB2e~2M>imF0hDXJrd(k({(DX`HV2*qx_!5yq%8e doDL0)4AmKhRlbFt;Xsctc)I$ztaD0e0szcTY9s&v literal 0 HcmV?d00001 diff --git a/img/flex-just-start.png b/img/flex-just-start.png new file mode 100644 index 0000000000000000000000000000000000000000..376cd22cfc8aae3cb6f5d248328131a7574f8a17 GIT binary patch literal 288 zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1|*NXY)uAnN?apKg7ec#$`gxH85~pclTsBt za}(23gHjVyDhp4h+5i%Ab*Hw>PxelF{r5}E*1?`q-z literal 0 HcmV?d00001