From: Sam Smith Date: Wed, 16 Jul 2014 16:16:29 +0000 (-0700) Subject: Add mw-ui-icon X-Git-Tag: 1.31.0-rc.0~13879^2 X-Git-Url: http://git.cyclocoop.org/%28%5B%5E/404?a=commitdiff_plain;h=7e931c1a456efadd7dd65d435456e18cee666bd2;p=lhc%2Fweb%2Fwiklou.git Add mw-ui-icon 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 --- diff --git a/docs/kss/Makefile b/docs/kss/Makefile index a7b0c47122..dfee6109b8 100644 --- a/docs/kss/Makefile +++ b/docs/kss/Makefile @@ -6,7 +6,7 @@ kss: kssnodecheck $(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) diff --git a/resources/Resources.php b/resources/Resources.php index f72049dad6..b9b2c8d2c2 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1513,6 +1513,13 @@ return array( '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( diff --git a/resources/src/mediawiki.ui/components/icons.less b/resources/src/mediawiki.ui/components/icons.less new file mode 100644 index 0000000000..3a92b21a2b --- /dev/null +++ b/resources/src/mediawiki.ui/components/icons.less @@ -0,0 +1,80 @@ +@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: + //
OK
+ //
OK
+ // + // 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: + //
OK
+ //
OK
+ // + // 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'); +} diff --git a/resources/src/mediawiki.ui/components/images/ok.png b/resources/src/mediawiki.ui/components/images/ok.png new file mode 100644 index 0000000000..8a62f27e48 Binary files /dev/null and b/resources/src/mediawiki.ui/components/images/ok.png differ diff --git a/resources/src/mediawiki.ui/components/images/ok.svg b/resources/src/mediawiki.ui/components/images/ok.svg new file mode 100644 index 0000000000..15bc296d4f --- /dev/null +++ b/resources/src/mediawiki.ui/components/images/ok.svg @@ -0,0 +1,13 @@ + + + + + + + + + + +