Created page with "<div class="my-feature"> Something with a link to Foo to test MediaWiki:Common.less mix-ins from Codex https://doc.wikimedia.org/codex/latest/components/mixins/link.html </div>" |
No edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<div class="my-feature"> | <div class="my-feature"> | ||
Something with a link to [[Foo]] to test [[MediaWiki:Common.less]] mix-ins from Codex https://doc.wikimedia.org/codex/latest/components/mixins/link.html | Something with a link to [[Foo]] to test [[MediaWiki:Common.less]] mix-ins from Codex https://doc.wikimedia.org/codex/latest/components/mixins/link.html | ||
</div> | </div> | ||
<html> | |||
<div> | |||
<button class="cdx-button cdx-button--action-default"> | |||
Default button | |||
</button> | |||
</div> | |||
<div> | |||
<button class="cdx-button cdx-button--action-progressive"> | |||
Progressive button | |||
</button> | |||
</div> | |||
<div> | |||
<button class="cdx-button cdx-button--action-destructive"> | |||
Destructive button | |||
</button> | |||
</div> | |||
</html> | |||
{ | |||
"name": "icons.json", | |||
"callback": "MediaWiki\\ResourceLoader\\CodexModule::getIcons", | |||
"callbackParam": [ | |||
// List the icons your module needs here, e.g.: | |||
"cdxIconArrowNext", | |||
"cdxIconBold", | |||
"cdxIconTrash" | |||
] | |||
} | |||
cdxIconLogoCC | |||
cdxIconLogoCodex | |||
cdxIconLogoMediaWiki | |||
cdxIconLogoMetaWiki | |||
cdxIconLogoWikibooks | |||
cdxIconLogoWikidata | |||
cdxIconLogoWikifunctions | |||
cdxIconLogoWikimedia | |||
cdxIconLogoWikimediaCommons | |||
cdxIconLogoWikimediaDiscovery | |||
cdxIconLogoWikinews | |||
cdxIconLogoWikipedia | |||
cdxIconLogoWikiquote | |||
cdxIconLogoWikisource | |||
cdxIconLogoWikispecies | |||
cdxIconLogoWikiversity | |||
=== CSS-only icons === | |||
from https://doc.wikimedia.org/codex/latest/using-codex/developing.html#css-only-icons | |||
This: | |||
<pre> | |||
<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> | |||
</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> | |||
Latest revision as of 11:50, 21 November 2025
Something with a link to Foo to test MediaWiki:Common.less mix-ins from Codex https://doc.wikimedia.org/codex/latest/components/mixins/link.html
{
"name": "icons.json",
"callback": "MediaWiki\\ResourceLoader\\CodexModule::getIcons",
"callbackParam": [
// List the icons your module needs here, e.g.:
"cdxIconArrowNext",
"cdxIconBold",
"cdxIconTrash"
]
}
cdxIconLogoCC cdxIconLogoCodex cdxIconLogoMediaWiki cdxIconLogoMetaWiki cdxIconLogoWikibooks cdxIconLogoWikidata cdxIconLogoWikifunctions cdxIconLogoWikimedia cdxIconLogoWikimediaCommons cdxIconLogoWikimediaDiscovery cdxIconLogoWikinews cdxIconLogoWikipedia cdxIconLogoWikiquote cdxIconLogoWikisource cdxIconLogoWikispecies cdxIconLogoWikiversity
CSS-only icons[edit]
from https://doc.wikimedia.org/codex/latest/using-codex/developing.html#css-only-icons
This:
<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>
produces:
However, this example is not working.
Code
Map pin
