wikimedia/mediawiki-core

/**
* MediaWiki UI icons specification 2.0
*
* Applies the MinervaNeue icon styles, adding more mobile-friendly
* features like increased touch-area sizes and highlights.
*
* - mw-ui-icon = base class. 20px square with icon.
* - mw-ui-icon + mw-ui-icon-element = icon with padding & pseudo-states.
* - mw-ui-icon + mw-ui-icon-before = *deprecated*, icon with text.
*   Labels should be placed in a separate element beside the icon.
*
*/

@import 'mediawiki.skin.variables.less';
@import 'mediawiki.mixins.less';

// == Icons ==
@icon-touch-area-sm: 32; // This is also used for touch areas at DESKTOP resolutions.
@icon-touch-area-md: 44;
@font-size-browser: 16; // Assumed browser default of `16px`.
// Medium icon
@icon-glyph-size-md: 20;
@icon-size-md: unit( @icon-glyph-size-md / @font-size-browser, em );
@icon-padding-md: unit( ( @icon-touch-area-md - @icon-glyph-size-md ) / 2 / @font-size-browser, em );

// Includes 2px mw-ui-button border
@icon-padding-md-button: unit( ( @icon-touch-area-md - @icon-glyph-size-md - 2 ) / 2 / @font-size-browser, em );
// At desktop resolution the icon touch area will shrink from @icon-touch-area-md to @icon-touch-area-sm
@icon-padding-md-button--desktop: unit( ( @icon-touch-area-sm - @icon-glyph-size-md - 2 ) / 2 / @font-size-browser, em );

// Colors
@icon-color: @color-subtle;
@margin-icon-md-labelled: 6px;

/**
* Mixin for a pseudo-element with a background image.
*/
.mixin-background-square( @size ) {
    // Sizing properties
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    // In case display: block is overridden and display gets set to `flex`
    // because of inheritance T233521.
    min-width: @size;
    min-height: @size;

    // Background properties.
    background-repeat: no-repeat;
    // Using static value instead of `background-size: contain` because of T233521#5545513.
    background-size: @size @size;
    background-position: center;
}

/**
* A standalone 20px square with screen-reader text. Contains a :before element
* to house the icon as a background image. Total size is increased with padding via
* `box-sizing: content-box`. This separates control over size of icon vs the size of
* the touch-area.
*/
.mw-ui-icon {
    // reset font-size so the "em" value is relative to the more
    // predictable rem font size ...and no rems because we can't have nice things.
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    font-size: initial;

    // sizing
    position: relative;
    display: inline-block;

    // this is important for increasing the size via padding. Overrides `.view-border-box *`.
    // stylelint-disable-next-line declaration-no-important
    box-sizing: content-box !important;
    width: @icon-size-md;
    height: @icon-size-md;

    // Guarding against flex-box variability.
    min-width: @icon-size-md;
    min-height: @icon-size-md;
    flex-basis: @icon-size-md;

    // alignment
    vertical-align: middle;
    line-height: 0;

    // Overflow ellipsis.
    .text-overflow( @visible: false );

    // resetting styles for <button> elements
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    -moz-appearance: none;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    -webkit-appearance: none;
    background-color: transparent;
    margin: 0;
    padding: 0;

    &:not( .mw-ui-button ) {
        border: 0;
    }

    &::before {
        .mixin-background-square( @icon-size-md );
    }

    // Use `not` selector to ensure we don't add space for machine readable markup. More info: T307233
    & + span:not( :empty ) {
        // Margin is added to separate accompanying text.
        margin-left: @margin-icon-md-labelled;
    }
}

.mw-ui-icon-element {
    border-radius: @border-radius-base;
    padding: @icon-padding-md;
    // Override line-height applied by `.mw-ui-button`.
    line-height: 0;
    transition: background-color @transition-duration-base;

    &.mw-ui-button {
        padding: @icon-padding-md-button;
    }
    // Combined with nowrap & ellipsis from .mw-ui-icon, forms safe "screen-reader" text.
    color: transparent;

    &:focus,
    &:active,
    &:visited {
        color: transparent;
    }

    // In desktop these icons shrink in size as touch area no longer important.
    @media ( min-width: @width-breakpoint-desktop ) {
        &.mw-ui-button {
            padding: @icon-padding-md-button--desktop;
        }
    }
}

.mw-ui-icon-before {
    width: auto;
    max-width: 100%;

    &::before {
        // sizing
        display: inline-block;
        /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
        font-size: initial;
        width: auto;
        min-width: @icon-size-md;
        min-height: @icon-size-md;

        // alignment. Margin is added to separate accompanying text.
        margin-right: @margin-icon-md-labelled;
        vertical-align: middle;
    }

    span {
        vertical-align: middle;
    }
}

@media all and ( min-width: @width-breakpoint-desktop ) {
    .mw-ui-icon-with-label-desktop {
        // stylelint-disable-next-line declaration-no-important
        color: @icon-color !important;
        width: auto;
        line-height: inherit;
        flex-basis: auto;
        // Special case outside of standard buttons styling due to surrounding
        // interface elements, see T237019.
        // stylelint-disable-next-line declaration-no-important
        font-weight: 500 !important;

        &:hover,
        &:focus,
        &:active,
        &:visited {
            color: @icon-color;
            text-decoration: none;
        }

        &::before {
            width: auto;
            display: inline-block;
            // Don't use `@icon-padding-md` as we are adjacent to text.
            margin-right: @margin-icon-md-labelled;
            // Seems to be more visually centered than `middle`.
            vertical-align: text-bottom;
        }
    }
}