https://www.zkoss.org/_w/index.php?title=ZK_Style_Customization_Guide/Integrate_with_LESS/How_ZK_works_with_LESS/ZK_LESS_Functions&feed=atom&action=history
ZK Style Customization Guide/Integrate with LESS/How ZK works with LESS/ZK LESS Functions - Revision history
2024-03-29T14:34:00Z
Revision history for this page on the wiki
MediaWiki 1.35.1
https://www.zkoss.org/_w/index.php?title=ZK_Style_Customization_Guide/Integrate_with_LESS/How_ZK_works_with_LESS/ZK_LESS_Functions&diff=54164&oldid=prev
Hawk at 05:33, 7 April 2022
2022-04-07T05:33:03Z
<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 05:33, 7 April 2022</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{ZKStyleCustomizationGuidePageHeader}}</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{ZKStyleCustomizationGuidePageHeader}}</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">{{Deprecated| url=[[ZK_Developer's_Reference/Theming_and_Styling/Creating_Custom_Themes/Theme_Template| ZK Developer's Reference ...Theme Template]]}}</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= ZK DSP Functions =</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= ZK DSP Functions =</div></td></tr>
</table>
Hawk
https://www.zkoss.org/_w/index.php?title=ZK_Style_Customization_Guide/Integrate_with_LESS/How_ZK_works_with_LESS/ZK_LESS_Functions&diff=40911&oldid=prev
Vincent: /* Theme Functions in Mixins */
2014-01-09T07:09:08Z
<p><span dir="auto"><span class="autocomment">Theme Functions in Mixins</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 07:09, 9 January 2014</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l235" >Line 235:</td>
<td colspan="2" class="diff-lineno">Line 235:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> .borderRadius(3px);</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> .borderRadius(3px);</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>.z-component2 {<del class="diffchange diffchange-inline">`</del></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>.z-component2 {</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> .topBorderRadius(3px);</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> .topBorderRadius(3px);</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}</div></td></tr>
</table>
Vincent
https://www.zkoss.org/_w/index.php?title=ZK_Style_Customization_Guide/Integrate_with_LESS/How_ZK_works_with_LESS/ZK_LESS_Functions&diff=40910&oldid=prev
Vincent: /* ZK LESS Function */
2014-01-09T07:06:57Z
<p><span dir="auto"><span class="autocomment">ZK LESS Function</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 07:06, 9 January 2014</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l141" >Line 141:</td>
<td colspan="2" class="diff-lineno">Line 141:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Here we define mixins according to [[<del class="diffchange diffchange-inline">User:Vincent/ZK_LESS_Functions</del>#Core Functions | Core Functions]] and [[<del class="diffchange diffchange-inline">User:Vincent/ZK_LESS_Functions</del>#Theme Functions | Theme Functions]] and extra useful mixins:</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Here we define mixins according to [[#Core Functions | Core Functions]] and [[#Theme Functions | Theme Functions]] and extra useful mixins:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Core Functions in Mixins ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Core Functions in Mixins ==</div></td></tr>
</table>
Vincent
https://www.zkoss.org/_w/index.php?title=ZK_Style_Customization_Guide/Integrate_with_LESS/How_ZK_works_with_LESS/ZK_LESS_Functions&diff=40655&oldid=prev
Southerncrossie: /* ZK LESS Function */
2013-11-22T07:44:28Z
<p><span dir="auto"><span class="autocomment">ZK LESS Function</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 07:44, 22 November 2013</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l132" >Line 132:</td>
<td colspan="2" class="diff-lineno">Line 132:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= ZK LESS Function =</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= ZK LESS Function =</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Since ZK LESS engine <del class="diffchange diffchange-inline">will </del>compile LESS <del class="diffchange diffchange-inline">file </del>into DSP <del class="diffchange diffchange-inline">page, therefore</del>, you can use the DSP functions mentioned above inside LESS file. These <del class="diffchange diffchange-inline">function have </del>already defined to ZK LESS mixins. To use ZK LESS mixins, simply import '''''_zkmixins.less''''' in your *.less file.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Since ZK LESS engine compile LESS <ins class="diffchange diffchange-inline">files </ins>into DSP <ins class="diffchange diffchange-inline">pages</ins>, you can use the DSP functions mentioned above inside <ins class="diffchange diffchange-inline">a </ins>LESS file. These <ins class="diffchange diffchange-inline">functions are </ins>already defined to ZK LESS mixins. To use ZK LESS mixins, simply import '''''_zkmixins.less''''' in your *.less file.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>For example,</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>For example,</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l141" >Line 141:</td>
<td colspan="2" class="diff-lineno">Line 141:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Here we <del class="diffchange diffchange-inline">defined </del>mixins according to [[User:Vincent/ZK_LESS_Functions#Core Functions | Core Functions]] and [[User:Vincent/ZK_LESS_Functions#Theme Functions | Theme Functions]] and extra useful mixins:</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Here we <ins class="diffchange diffchange-inline">define </ins>mixins according to [[User:Vincent/ZK_LESS_Functions#Core Functions | Core Functions]] and [[User:Vincent/ZK_LESS_Functions#Theme Functions | Theme Functions]] and extra useful mixins:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Core Functions in Mixins ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Core Functions in Mixins ==</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l366" >Line 366:</td>
<td colspan="2" class="diff-lineno">Line 366:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></source></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|}</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|}</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=Version History=</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=Version History=</div></td></tr>
</table>
Southerncrossie
https://www.zkoss.org/_w/index.php?title=ZK_Style_Customization_Guide/Integrate_with_LESS/How_ZK_works_with_LESS/ZK_LESS_Functions&diff=40653&oldid=prev
Southerncrossie: /* Theme Functions */
2013-11-22T07:32:35Z
<p><span dir="auto"><span class="autocomment">Theme Functions</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 07:32, 22 November 2013</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l53" >Line 53:</td>
<td colspan="2" class="diff-lineno">Line 53:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Theme Functions ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Theme Functions ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Theme functions are defined in [http://github.com/zkoss/zk/blob/master/zweb/src/archive/web/WEB-INF/tld/web/theme.dsp.tld theme.dsp.tld].These functions are focused on CSS 3 supported styles. To use these functions in DSP page, declare tag library with it's prefix as follows:</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Theme functions are defined in [http://github.com/zkoss/zk/blob/master/zweb/src/archive/web/WEB-INF/tld/web/theme.dsp.tld theme.dsp.tld].These functions are focused on CSS 3 supported styles. To use these functions in <ins class="diffchange diffchange-inline">a </ins>DSP page, declare tag library with it's prefix as follows:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="html"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="html"></div></td></tr>
</table>
Southerncrossie
https://www.zkoss.org/_w/index.php?title=ZK_Style_Customization_Guide/Integrate_with_LESS/How_ZK_works_with_LESS/ZK_LESS_Functions&diff=40652&oldid=prev
Southerncrossie: /* Core Functions */
2013-11-22T07:31:01Z
<p><span dir="auto"><span class="autocomment">Core Functions</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 07:31, 22 November 2013</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l7" >Line 7:</td>
<td colspan="2" class="diff-lineno">Line 7:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Core Functions ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Core Functions ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Core functions are defined in [http://github.com/zkoss/zk/blob/master/zweb/src/archive/web/WEB-INF/tld/web/core.dsp.tld core.dsp.tld]. Here we only introduce <del class="diffchange diffchange-inline">the </del>functions related to CSS style. To use these functions in DSP page, declare tag library with it's prefix as follows:</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Core functions are defined in [http://github.com/zkoss/zk/blob/master/zweb/src/archive/web/WEB-INF/tld/web/core.dsp.tld core.dsp.tld]. Here we <ins class="diffchange diffchange-inline">will </ins>only introduce functions <ins class="diffchange diffchange-inline">that are </ins>related to CSS style. To use these functions in <ins class="diffchange diffchange-inline">a </ins>DSP page, declare tag library with it's prefix as follows:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="html"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="html"></div></td></tr>
</table>
Southerncrossie
https://www.zkoss.org/_w/index.php?title=ZK_Style_Customization_Guide/Integrate_with_LESS/How_ZK_works_with_LESS/ZK_LESS_Functions&diff=40366&oldid=prev
Vincent: moved ZK Style Customization Guide/ZK CSS Class Design/Integrate with LESS/How ZK works with LESS/ZK LESS Functions to ZK Style Customization Guide/Integrate with LESS/How ZK works with LESS/ZK LESS Functions: wrong hierarchy
2013-11-07T09:52:56Z
<p>moved <a href="/wiki/ZK_Style_Customization_Guide/ZK_CSS_Class_Design/Integrate_with_LESS/How_ZK_works_with_LESS/ZK_LESS_Functions" class="mw-redirect" title="ZK Style Customization Guide/ZK CSS Class Design/Integrate with LESS/How ZK works with LESS/ZK LESS Functions">ZK Style Customization Guide/ZK CSS Class Design/Integrate with LESS/How ZK works with LESS/ZK LESS Functions</a> to <a href="/wiki/ZK_Style_Customization_Guide/Integrate_with_LESS/How_ZK_works_with_LESS/ZK_LESS_Functions" title="ZK Style Customization Guide/Integrate with LESS/How ZK works with LESS/ZK LESS Functions">ZK Style Customization Guide/Integrate with LESS/How ZK works with LESS/ZK LESS Functions</a>: wrong hierarchy</p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<tr class="diff-title" lang="en">
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 09:52, 7 November 2013</td>
</tr><tr><td colspan="2" class="diff-notice" lang="en"><div class="mw-diff-empty">(No difference)</div>
</td></tr></table>
Vincent
https://www.zkoss.org/_w/index.php?title=ZK_Style_Customization_Guide/Integrate_with_LESS/How_ZK_works_with_LESS/ZK_LESS_Functions&diff=40341&oldid=prev
Vincent: Created page with "{{ZKStyleCustomizationGuidePageHeader}} = ZK DSP Functions = ZK provides many useful theme functions that can be used in [[ZK_Developer%27s_Reference/Supporting_Utilities/DSP |..."
2013-11-07T08:41:25Z
<p>Created page with "{{ZKStyleCustomizationGuidePageHeader}} = ZK DSP Functions = ZK provides many useful theme functions that can be used in [[ZK_Developer%27s_Reference/Supporting_Utilities/DSP |..."</p>
<p><b>New page</b></p><div>{{ZKStyleCustomizationGuidePageHeader}}<br />
<br />
= ZK DSP Functions =<br />
<br />
ZK provides many useful theme functions that can be used in [[ZK_Developer%27s_Reference/Supporting_Utilities/DSP | DSP]] files. Here we will introduce these functions that are used for CSS style.<br />
<br />
== Core Functions ==<br />
<br />
Core functions are defined in [http://github.com/zkoss/zk/blob/master/zweb/src/archive/web/WEB-INF/tld/web/core.dsp.tld core.dsp.tld]. Here we only introduce the functions related to CSS style. To use these functions in DSP page, declare tag library with it's prefix as follows:<br />
<br />
<source lang="html"><br />
<%-- *.css.dsp file --%><br />
<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %><br />
</source><br />
<br />
{|<br />
|-<br />
! style="border: 1px inset #333333; padding: 0 4px; text-align: center;" | Function <br />
! style="border: 1px inset #333333; padding: 0 4px; text-align: center;" | Usage<br />
|-<br />
| style="border: 1px inset #333333; padding: 0 4px; text-align: center;" | encodeURL <br />
| style="border: 1px inset #333333; padding: 0 4px;" |<br />
<source lang="html"><br />
<%-- Background image from ZK JAR file --%><br />
.myDiv {<br />
background: ${c:encodeURL('~./path/to/image.png')};<br />
}<br />
</source><br />
|-<br />
| style="border: 1px inset #333333; padding: 0 4px; text-align: center;" | encodeThemeURL <br />
| style="border: 1px inset #333333; padding: 0 4px;" |<br />
<source lang="html"><br />
<%-- Background image from Theme JAR file --%><br />
.myDiv {<br />
background: ${c:encodeThemeURL('~./path/to/image.png')};<br />
}<br />
</source><br />
|-<br />
| style="border: 1px inset #333333; padding: 0 4px; text-align: center;" | if<br />
| style="border: 1px inset #333333; padding: 0 4px;" |<br />
<source lang="html"><br />
<%-- If Statement for Specific Browser --%><br />
.myDiv {<br />
background: rgba(200, 200, 200, 0.8);<br />
<c:if test="${zk.ie <= 8}"><br />
<%-- ie8 doesn't support rgba --%><br />
background: rgb(200, 200, 200); <br />
</c:if><br />
}<br />
</source><br />
|}<br />
<br />
== Theme Functions ==<br />
<br />
Theme functions are defined in [http://github.com/zkoss/zk/blob/master/zweb/src/archive/web/WEB-INF/tld/web/theme.dsp.tld theme.dsp.tld].These functions are focused on CSS 3 supported styles. To use these functions in DSP page, declare tag library with it's prefix as follows:<br />
<br />
<source lang="html"><br />
<%-- *.css.dsp file --%><br />
<%@ taglib uri="http://www.zkoss.org/dsp/web/theme" prefix="t" %><br />
</source><br />
<br />
{| border="1px"<br />
|-<br />
! style="padding: 0 4px; text-align: center;" | Function <br />
! style="padding: 0 4px; text-align: center;" | Usage<br />
|-<br />
| style="padding: 0 4px; text-align: center;" | gradient<br />
| style="padding: 0 4px;" |<br />
<source lang="html"><br />
<%-- Gradient Background --%><br />
.myDiv {<br />
${t:gradient('ver', '#FFFFFF 0%; #EEEEEE 100%')};<br />
}<br />
</source><br />
|-<br />
| style="padding: 0 4px; text-align: center;" | <br />
box <br/><br />
box2 <br/><br />
box3<br />
| style="padding: 0 4px;" |<br />
<source lang="html"><br />
<%-- Flexible Box Layout Module --%><br />
.myDiv1 {<br />
${t:box('box-flex', '1')};<br />
}<br />
.myDiv2 {<br />
${t:box2('box-flex', '1', 'box-orient', 'horizontal')};<br />
}<br />
.myDiv3 {<br />
${t:box3('box-flex', '1', 'box-orient', 'horizontal', 'box-pack', 'center')};<br />
}<br />
</source><br />
|-<br />
| style="padding: 0 4px; text-align: center;" | boxShadow<br />
| style="padding: 0 4px;" |<br />
<source lang="html"><br />
<%-- Box Shadows --%><br />
.myDiv {<br />
${t:boxShadow('1px 1px 0 rgba(0, 0, 0, 0.2)')};<br />
}<br />
</source><br />
|-<br />
| style="padding: 0 4px; text-align: center;" | borderRadius<br />
| style="padding: 0 4px;" |<br />
<source lang="html"><br />
<%-- Rounded Corners --%><br />
.myDiv {<br />
${t:borderRadius('5px')};<br />
}<br />
</source><br />
|-<br />
| style="padding: 0 4px; text-align: center;" | transform<br />
| style="padding: 0 4px;" |<br />
<source lang="html"><br />
<%-- Transform --%><br />
.myDiv {<br />
${t:transform('translate3d(0, 0, 0)')};<br />
}<br />
</source><br />
|-<br />
| style="padding: 0 4px; text-align: center;" | applyCSS3<br />
| style="padding: 0 4px;" |<br />
<source lang="html"><br />
<%-- Apply all the other CSS 3 styles --%><br />
.myDiv {<br />
${t:applyCSS3('transition-property', 'opacity')};<br />
${t:applyCSS3('transition-duration', '350ms')}<br />
}<br />
</source><br />
|}<br />
<br />
= ZK LESS Function =<br />
<br />
Since ZK LESS engine will compile LESS file into DSP page, therefore, you can use the DSP functions mentioned above inside LESS file. These function have already defined to ZK LESS mixins. To use ZK LESS mixins, simply import '''''_zkmixins.less''''' in your *.less file.<br />
<br />
For example,<br />
<source lang="html"><br />
@import "~./zul/less/_zkmixins.less";<br />
<br />
/* omitted */<br />
</source><br />
<br />
Here we defined mixins according to [[User:Vincent/ZK_LESS_Functions#Core Functions | Core Functions]] and [[User:Vincent/ZK_LESS_Functions#Theme Functions | Theme Functions]] and extra useful mixins:<br />
<br />
== Core Functions in Mixins ==<br />
<br />
{| border="1px" style="margin-top: 10px"<br />
|-<br />
! style="padding: 0 4px;" | Function<br />
! style="padding: 0 4px;" | Usage and Output<br />
|-<br />
| style="padding: 0 4px;" | Background Image<br />
| style="padding: 0 4px;" | <br />
Usage<br />
<source lang="html"><br />
.z-component1 {<br />
.encodeURL(background-image, '~./path/to/image1.png');<br />
}<br />
.z-component2 {<br />
.encodeThemeURL(background-image, '~./path/to/image2.png');<br />
}<br />
.z-component3 {<br />
.encodeThemeURL(background, '~./path/to/image3.png', center center);<br />
}<br />
</source><br />
Output<br />
<source lang="html"><br />
.z-component1 {<br />
background-image: url(${c:encodeURL('~./path/to/image.png')});<br />
}<br />
.z-component2 {<br />
background-image: url(${c:encodeThemeURL('~./path/to/image.png')});<br />
}<br />
.z-component3 {<br />
background: url(${c:encodeThemeURL('~./path/to/image.png')}) center center;<br />
}<br />
</source><br />
|}<br />
<br />
== Theme Functions in Mixins ==<br />
<br />
{| border="1px" style="margin-top: 10px"<br />
|-<br />
! style="padding: 0 4px;" | Function<br />
! style="padding: 0 4px;" | Usage and Output<br />
|-<br />
| style="padding: 0 4px;" | Gradient Background<br />
| style="padding: 0 4px;" | <br />
Usage<br />
<source lang="html"><br />
.z-component1 {<br />
.gradient('ver', '#333333 0%; #555555 50%; #666666 100%');<br />
}<br />
.z-component2 {<br />
.horGradient(#333333, #666666);<br />
}<br />
.z-component3 {<br />
.verGradient(#333333, #666666);<br />
}<br />
.ie8 .z-component4 {<br />
.gradientFallback(#333333, #666666);<br />
}<br />
.z-component1:hover {<br />
.resetGradient();<br />
background: #777777;<br />
}<br />
</source><br />
Output<br />
<source lang="css"><br />
.z-component1 {<br />
${t:gradient('ver', '#333333 0%; #555555 50%; #666666 100%')};<br />
}<br />
.z-component2 {<br />
${t:gradient('hor', '#333333 0% #666666 100%')};<br />
}<br />
.z-component3 {<br />
${t:gradient('ver', '#333333 0% #666666 100%')};<br />
}<br />
.ie8 .z-component4 {<br />
/* average of #333333 and #666666 */<br />
background: #4d4d4d;<br />
}<br />
.z-component1:hover {<br />
background: none;<br />
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);<br />
background: #777777;<br />
}<br />
</source><br />
|-<br />
| style="padding: 0 4px;" | Rounded Corner<br />
| style="padding: 0 4px;" | <br />
Usage<br />
<source lang="html"><br />
.z-component1 {<br />
.borderRadius(3px);<br />
}<br />
.z-component2 {`<br />
.topBorderRadius(3px);<br />
}<br />
.z-component3 {<br />
.rightBorderRadius(3px);<br />
}<br />
.z-component4 {<br />
.bottomBorderRadius(3px);<br />
}<br />
.z-component5 {<br />
.leftBorderRadius(3px);<br />
}<br />
</source><br />
Output<br />
<source lang="css"><br />
.z-component1 {<br />
${t:borderRadius('3px 3px 3px 3px')};<br />
}<br />
.z-component2 {<br />
${t:borderRadius('3px 3px 0 0')};<br />
}<br />
.z-component3 {<br />
${t:borderRadius('0 3px 3px 0')};<br />
}<br />
.z-component4 {<br />
${t:borderRadius('0 0 3px 3px')};<br />
}<br />
.z-component5 {<br />
${t:borderRadius('3px 0 0 3px')};<br />
}<br />
</source><br />
|-<br />
| style="padding: 0 4px;" | Box Shadow<br />
| style="padding: 0 4px;" | <br />
Usage<br />
<source lang="html"><br />
.z-component {<br />
.boxShadow(inset 1px 1px 0 #222222);<br />
}<br />
</source><br />
Output<br />
<source lang="css"><br />
.z-component {<br />
${t:boxShadow('inset 1px 1px 0 #222222')};<br />
}<br />
</source><br />
|}<br />
<br />
== Other Useful Mixins ==<br />
<br />
{| border="1px" style="margin-top: 10px"<br />
|-<br />
! style="padding: 0 4px;" | Function<br />
! style="padding: 0 4px;" | Usage and Output<br />
|-<br />
| style="padding: 0 4px;" | Element Size<br />
| style="padding: 0 4px;" | <br />
Usage<br />
<source lang="html"><br />
.z-component1 {<br />
.size(16px, 16px);<br />
}<br />
.z-component2 {<br />
.displaySize(inline-block, 16px, 16px);<br />
}<br />
</source><br />
Output<br />
<source lang="css"><br />
.z-component1 {<br />
width:16px;<br />
height: 16px;<br />
}<br />
.z-component2 {<br />
display: inline-block;<br />
width:16px;<br />
height: 16px;<br />
}<br />
</source><br />
|-<br />
| style="padding: 0 4px;" | Font Style<br />
| style="padding: 0 4px;" | <br />
Usage<br />
<source lang="html"><br />
@fontFamily: Arial, Sans-serif;<br />
.z-component-text {<br />
.fontStyle(@fontFamily, 14px, 600, #555555);<br />
font-style: italic;<br />
}<br />
.z-component-iconfont {<br />
.iconFontStyle(12px, #ACACAC);<br />
}<br />
</source><br />
Output<br />
<source lang="css"><br />
.z-component-text {<br />
font-family: Arial, Sans-serif;<br />
font-size: 14px;<br />
font-weight: 600;<br />
font-style: normal;<br />
color: #555555;<br />
font-style: italic; /* override */<br />
}<br />
.z-component-iconfont {<br />
font-size: 12px;<br />
color: #ACACAC;<br />
}<br />
</source><br />
|-<br />
| style="padding: 0 4px;" | Opacity<br />
| style="padding: 0 4px;" | <br />
Usage<br />
<source lang="html"><br />
.z-component1 {<br />
.opacity(1);<br />
}<br />
.z-component2 {<br />
.opacity(0.6);<br />
}<br />
</source><br />
Output<br />
<source lang="css"><br />
.z-component1 {<br />
opacity: 1;<br />
filter: alpha(opacity=100);<br />
}<br />
.z-component2 {<br />
opacity: 0.6;<br />
filter: alpha(opacity=60);<br />
}<br />
</source><br />
|}<br />
<br />
<br />
=Version History=<br />
{{LastUpdated}}<br />
{| border="1px" | width="100%"<br />
! Version !! Date !! Content<br />
|-<br />
| &nbsp;<br />
| &nbsp;<br />
| &nbsp;<br />
|}<br />
<br />
{{ZKStyleCustomizationGuidePageFooter}}</div>
Vincent