User:JDrewniak (WMF)/notes/Understanding mw-ui-icon

mw-ui-icon

Expected usage
Standalone icon: Icon with text:

In programming terms,  can be thought of as exposing the following interface:

a base class, a modifier class, and an instance property.

The base class is, the modifier class is one of [  ,   ] and the property is one of many icon image urls.

By themselves, these classes produce nothing. The base class does not have a “default” state and requires a modifier class to have any effect.

i.e.  doesn’t work.

The line-by-line
Now we go through the code above line-by-line and see what we find.

Line #27  This base class just sizes &#x26; positions the box (min-height/min-width/line-height/relative).

Line #34 -  This guards against a single inline element,

line #46 -  is a class to create “stand-alone” icons. It hides text, overrides the base width, and creates an absolutely positioned  pseudo-element.

Line #63 oh! An additional modifier class. . This resized the icon again (min/max/width and min/line/height). The expected usage is probably:

Line #76 - common rules for   and. These rules style the  pseudo-element which is the container for the actual icon image (placed as a background-image). The min-height of this pseudo-element is declared but the width is not. The width is declared in the modifier classes instead.

Line #94 -  is a modifier class that accommodates “icons with text”. Essentially providing a right-margin and relatively positioning the  pseudo element  (instead of absolutely positioning it like   so that the pseudo-element is positioned beside the elements text content.

Visual Representation
https://codepen.io/j4n/pen/RwbKMwm