User:Admin/foo: Difference between revisions
examples |
No edit summary |
||
| Line 53: | Line 53: | ||
=== CSS-only icons === | |||
from https://doc.wikimedia.org/codex/latest/using-codex/developing.html#css-only-icons | |||
This: | |||
<pre> | |||
<html> | <html> | ||
<!-- Standalone icon. --> | <!-- Standalone icon. --> | ||
| Line 61: | Line 67: | ||
Delete | Delete | ||
</button> | </button> | ||
</html> | |||
</pre> | |||
produces: | |||
<html> | |||
<!-- Standalone icon. --> | |||
<span class="my-icon-class--map-pin"></span> | |||
<button class="cdx-button cdx-button--action-destructive"> | |||
<!-- Icon inside a button. --> | |||
<span class="my-icon-class--trash"></span> | |||
Delete | |||
</button> | |||
</html> | |||
However, this example is not working. | |||
<html> | |||
<style> | |||
@import "mediawiki.skin.variables.less"; | |||
.cdx-demo-css-icon { | |||
&--code { | |||
.cdx-mixin-css-icon( @cdx-icon-code ); | |||
} | |||
&--map-pin { | |||
.cdx-mixin-css-icon( @cdx-icon-map-pin ); | |||
} | |||
} | |||
</style> | |||
</html> | |||
<html> | |||
<p> | |||
<span class="cdx-demo-css-icon--code"></span> | |||
Code | |||
</p> | |||
<p> | |||
<span class="cdx-demo-css-icon--map-pin"></span> | |||
Map pin | |||
</p> | |||
</html> | </html> | ||