From 7e931c1a456efadd7dd65d435456e18cee666bd2 Mon Sep 17 00:00:00 2001 From: Sam Smith Date: Wed, 16 Jul 2014 09:16:29 -0700 Subject: [PATCH] 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 --- docs/kss/Makefile | 2 +- resources/Resources.php | 7 ++ .../src/mediawiki.ui/components/icons.less | 80 ++++++++++++++++++ .../src/mediawiki.ui/components/images/ok.png | Bin 0 -> 596 bytes .../src/mediawiki.ui/components/images/ok.svg | 13 +++ 5 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 resources/src/mediawiki.ui/components/icons.less create mode 100644 resources/src/mediawiki.ui/components/images/ok.png create mode 100644 resources/src/mediawiki.ui/components/images/ok.svg 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 0000000000000000000000000000000000000000..8a62f27e486421d4b75d426abea6f10986f9668b GIT binary patch literal 596 zcmV-a0;~OrP)!*Maql^0y>O z&ZlYm2@V}MRjsS)UI^h{1$qs5S%H2xvx@^1;21!=-FCHFZ5voHvjy+{@jTBT44Og+ ztH3KjO3;1aQl94@4=0mGqcNW($rf;8kQ9;os`{jlu9(>y%3r1f5xJaY+3s*by!V^H zg|hXD$cC9M4^}o5KSbn;b8fTr-cF};MnpD%`Lc$J_-STW^E`iF)gWd@Q52_Qj9Y-4 z0PO)QS(d#U)sz6FY5G}276CsF6_M3(=x-RnIrjxv?9Zq)VvK9fxwqp`DEYc|yWO+B zUT+(y{naS)+&On^60{TsD2n2AjPV11PQ!YZWj7{80Wh=Dp{gfU^}u`ox~gZ?7+Gw! iT5cND%x3?CRK+g^T1T99=0fxU0000jTmN literal 0 HcmV?d00001 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 @@ + + + + + + + + + + + -- 2.20.1