wikimedia/mediawiki-extensions-MobileFrontend

View on GitHub
resources/mobile.init.styles/icons.less

Summary

Maintainability
Test Coverage
@import 'mediawiki.skin.variables.less';
@import 'mediawiki.mixins.less';

.mf-icon {
    .cdx-mixin-css-icon-background( );
    .cdx-mixin-css-icon-size( );
    .cdx-mixin-css-icon-alignment( );
    font-size: 14px;

    // Temporary fix for https://phabricator.wikimedia.org/T356540
    background-position: center;
    background-repeat: no-repeat;
    background-size: ~'calc( max( @{size-icon-medium}, @{min-size-icon-medium} ) )';
}

.mf-icon-close {
    .cdx-mixin-css-icon( @cdx-icon-close, @param-is-button-icon: false,
    @param-fill-color: @color-subtle );
}

.mf-icon-close-gray {
    .cdx-mixin-css-icon( @cdx-icon-close, @param-is-button-icon: false,
    @param-fill-color: @border-color-base );
}

.mf-icon-previous {
    .cdx-mixin-css-icon( @cdx-icon-previous, @param-is-button-icon: false,
    @param-fill-color: @color-subtle );
}

.mf-icon-next {
    .cdx-mixin-css-icon( @cdx-icon-next, @param-is-button-icon: false,
    @param-fill-color: @color-subtle );
}

.mf-icon-next-invert {
    .cdx-mixin-css-icon( @cdx-icon-next, @param-is-button-icon: false,
    @param-fill-color: @color-inverted );
}

.mf-icon-alert-invert {
    .cdx-mixin-css-icon( @cdx-icon-alert, @param-is-button-icon: false,
    @param-fill-color: @color-inverted-fixed );
}

.mf-icon-expand {
    .cdx-mixin-css-icon( @cdx-icon-expand, @param-is-button-icon: false,
    @param-fill-color: @color-subtle );
}

.mf-icon-expand-invert {
    .cdx-mixin-css-icon( @cdx-icon-expand, @param-is-button-icon: false,
    @param-fill-color: @color-inverted-fixed );
}

.mf-icon-collapse {
    .cdx-mixin-css-icon( @cdx-icon-collapse, @param-is-button-icon: false,
    @param-fill-color: @color-subtle );
}

.mf-icon-rotate-anti-clockwise {
    transform: rotate( -90deg );
}

.mf-icon-rotate-clockwise {
    transform: rotate( 90deg );
}

.mf-icon-rotate-flip {
    transform: scaleY( -1 );
}

.rtl {
    .mf-icon-rotate-anti-clockwise {
        transform: rotate( 90deg );
    }

    .mf-icon-rotate-clockwise {
        transform: rotate( -90deg );
    }
}