// Mixins
.mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) {
- &.mw-ui-icon:before {
- .background-image-svg(@iconSvg, @iconPng);
+ &.mw-ui-icon {
+ &:after,
+ &:before {
+ .background-image-svg(@iconSvg, @iconPng);
+ }
}
}
}
}
- &:before {
+ &.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;
- position: relative;
min-height: @iconSize;
content: '';
}
// Styleguide 4.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 4.1.3
+ &.mw-ui-icon-after {
+ &:after {
+ position: relative;
+ float: right;
+ width: @iconSize;
+ margin-left: @gutterWidth;
+ }
+ }
}
// Icons