//
// To use icons you must be using a browser that supports pseudo elements.
// This includes support for IE 8.
-// http://caniuse.com/#feat=css-gencontent
+// https://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.
min-height: @iconSize;
min-width: @iconSize;
+ // If an inline element has been marked as a mw-ui-icon element it must be inline-block
+ span& {
+ display: inline-block;
+ }
+
// Standalone icons
//
// Markup:
//
// Styleguide 6.1.1.
&.mw-ui-icon-element {
- @width: @iconSize + ( 2 * @iconGutterWidth );
+ @marginIcon: 2 * @iconGutterWidth;
+ @width: @iconSize + @marginIcon;
+ @sizeIconLarge: ( @iconSize * 1.75) + @marginIcon;
text-indent: -999px;
overflow: hidden;
position: absolute;
margin: 0 @iconGutterWidth;
}
+
+ &.mw-ui-icon-large {
+ width: @sizeIconLarge;
+ min-width: @sizeIconLarge;
+ max-width: @sizeIconLarge;
+ line-height: @sizeIconLarge;
+ min-height: @sizeIconLarge;
+
+ &:before {
+ min-height: @sizeIconLarge;
+ }
+ }
}
&.mw-ui-icon-before:before,