diff options
Diffstat (limited to 'resources/src/mediawiki.ui/components/icons.less')
| -rw-r--r-- | resources/src/mediawiki.ui/components/icons.less | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/resources/src/mediawiki.ui/components/icons.less b/resources/src/mediawiki.ui/components/icons.less new file mode 100644 index 00000000..ad951b08 --- /dev/null +++ b/resources/src/mediawiki.ui/components/icons.less @@ -0,0 +1,107 @@ +@import "mediawiki.mixins"; + +// Variables +@iconSize: 1.4em; +@gutterWidth: 1em; + +// Mixins +.mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) { + &.mw-ui-icon { + &:after, + &: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 +// +// For elements that are intended to have both an icon and text, browsers that +// do not support pseudo-selectors will degrade to text-only. +// +// However, icon-only elements do not yet degrade to text-only elements in these +// browsers. +// +// Styleguide 6. + +.mw-ui-icon { + position: relative; + min-height: @iconSize; + min-width: @iconSize; + + // Standalone icons + // + // Markup: + // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok">OK</div><br/> + // <div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-ok mw-ui-button mw-ui-progressive">OK</div><br/> + // <button class="mw-ui-icon mw-ui-icon-ok mw-ui-icon-element mw-ui-button mw-ui-quiet" title="">Close</button> + // + // Styleguide 6.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; + } + } + + &.mw-ui-icon-after:after, + &.mw-ui-icon-before:before, + &.mw-ui-icon-element:before { + background-position: 50% 50%; + float: left; + display: block; + background-repeat: no-repeat; + background-size: 100% auto; + 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 6.1.2 + &.mw-ui-icon-before { + &:before { + position: relative; + width: @iconSize; + margin-right: @gutterWidth; + } + } + + // Icons with text before + // + // Markup: + // <div class="mw-ui-icon mw-ui-icon-after mw-ui-icon-ok mw-ui-progressive mw-ui-button">OK</div> + // + // Styleguide 6.1.3 + &.mw-ui-icon-after { + &:after { + position: relative; + float: right; + width: @iconSize; + margin-left: @gutterWidth; + } + } +} + +// Icons +.mw-ui-icon-ok { + .mixin-mw-ui-icon-bgimage('images/ok.svg', 'images/ok.png'); +} |