Compatible with IE8+ (because of the use of pseudo-elements).
This includes support for icons on the left of the element and
icons which hide the text of the containing element.
I attempted to make an mw-ui-icon-element which didn't use pseudo
elements but the problem with this is how it plays with things such
as mw-ui-button and the gutter. I'd suggest exploring this later as this gets greater
adoption.
In addition to this I have dropped mw-ui-icon-after since I don't see any
clear use cases for this yet and I think it is overengineering the solution.
Bug: 55535
Change-Id: I68a1b207d8a4af57879361921a5f8c3aeda3fd9a
$(eval KSS_RL_TMP := $(shell mktemp /tmp/tmp.XXXXXXXXXX))
# Keep module names in strict alphabetical order, so CSS loads in the same order as ResourceLoader's addModuleStyles does; this can affect rendering.
# See OutputPage::makeResourceLoaderLink.
- @curl -sG "${MEDIAWIKI_LOAD_URL}?modules=mediawiki.legacy.commonPrint|mediawiki.legacy.shared|mediawiki.ui|mediawiki.ui.anchor|mediawiki.ui.button|mediawiki.ui.checkbox|mediawiki.ui.input&only=styles" > $(KSS_RL_TMP)
+ @curl -sG "${MEDIAWIKI_LOAD_URL}?modules=mediawiki.legacy.commonPrint|mediawiki.legacy.shared|mediawiki.ui|mediawiki.ui.anchor|mediawiki.ui.button|mediawiki.ui.checkbox|mediawiki.ui.icon|mediawiki.ui.input&only=styles" > $(KSS_RL_TMP)
@node_modules/.bin/kss-node ../../resources/src/mediawiki.ui static/ --css $(KSS_RL_TMP) -t styleguide-template
@rm $(KSS_RL_TMP)
'position' => 'top',
'targets' => array( 'desktop', 'mobile' ),
),
+ 'mediawiki.ui.icon' => array(
+ 'styles' => array(
+ 'resources/src/mediawiki.ui/components/icons.less',
+ ),
+ 'position' => 'top',
+ 'targets' => array( 'desktop', 'mobile' ),
+ ),
/* es5-shim */
'es5-shim' => array(
--- /dev/null
+@import "mediawiki.mixins";
+
+// Variables
+@iconSize: 1.4em;
+@gutterWidth: 1em;
+
+// Mixins
+.mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) {
+ &.mw-ui-icon:before {
+ .background-image-svg(@iconSvg, @iconPng);
+ }
+}
+
+// Icons
+//
+// To use icons you must be using a browser that supports pseudo elements.
+// This includes support for IE8.
+// http://caniuse.com/#feat=css-gencontent
+// Browsers that do not support either of these selectors will degrade to text only.
+//
+// Styleguide 4.
+
+.mw-ui-icon {
+ position: relative;
+ min-height: @iconSize;
+
+ // Standalone icons
+ //
+ // Markup:
+ // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok">OK</div>
+ // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div>
+ //
+ // Styleguide 4.1.1.
+ &.mw-ui-icon-element {
+ @width: @iconSize + ( 2 * @gutterWidth );
+
+ text-indent: -999px;
+ overflow: hidden;
+ width: @width;
+ min-width: @width;
+ max-width: @width;
+ &:before {
+ left: 0;
+ right: 0;
+ position: absolute;
+ margin: 0 @gutterWidth;
+ }
+ }
+
+ &:before {
+ background-position: 50% 50%;
+ float: left;
+ display: block;
+ background-repeat: no-repeat;
+ background-size: 100% auto;
+ position: relative;
+ min-height: @iconSize;
+ content: '';
+ }
+
+
+ // Icons with text
+ //
+ // Markup:
+ // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok">OK</div>
+ // <div class="mw-ui-icon mw-ui-icon-before mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div>
+ //
+ // Styleguide 4.1.2
+ &.mw-ui-icon-before {
+ &:before {
+ width: @iconSize;
+ margin-right: @gutterWidth;
+ }
+ }
+}
+
+// Icons
+.mw-ui-icon-ok {
+ .mixin-mw-ui-icon-bgimage('images/ok.svg', 'images/ok.png');
+}
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="142.282px" height="142.28px" viewBox="0 -11.785 142.282 142.28" enable-background="new 0 -11.785 142.282 142.28"
+ xml:space="preserve">
+<g>
+
+ <rect x="18.012" y="41.792" transform="matrix(0.6983 -0.7158 0.7158 0.6983 -17.1914 77.8785)" fill="#F0F0F0" width="131.56" height="35.083"/>
+
+ <rect x="2.416" y="64.455" transform="matrix(0.7158 0.6983 -0.6983 0.7158 67.7777 -2.5416)" fill="#F0F0F0" width="69.191" height="35.082"/>
+</g>
+</svg>