wikimedia/mediawiki-extensions-MobileFrontend

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

Summary

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

@selector-parsoid-top-heading: ~'.mw-parser-output[data-mw-parsoid-version] > section > .mw-heading';

.client-js {
    /* For Parsoid HTML hide the div until the hidden attribute has been added. */
    /* .mw-parser-output > section limits this to top level headings */
    &.mf-expand-sections-clientpref-0 @{selector-parsoid-top-heading} + div:not( .mf-collapsible-content ),
    .collapsible-block:not( .collapsible-block-js ) {
        @media all and ( max-width: @max-width-breakpoint-tablet ) {
            display: none;
        }
    }

    @{selector-parsoid-top-heading}:not( .mf-collapsible-heading ) {
        padding-left: 22px;
    }

    @{selector-parsoid-top-heading} {
        cursor: pointer;
        border-bottom: @border-width-base @border-style-base @border-color-muted;

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            display: flex;
            align-items: center;
        }

        .mf-collapsible-icon {
            margin-right: 6px;
        }
    }
}

.mf-icon--small {
    .cdx-mixin-css-icon-background( @size-icon-small );
    .cdx-mixin-css-icon-size( @size-icon-small );

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

// FIXME: For legacy parser, can be removed when Parsoid is everywhere.
/* stylelint-disable no-duplicate-selectors */
.client-js {
    .collapsible-block:not( .collapsible-block-js ) {
        display: none;
        // But show it for tablets.
        @media all and ( min-width: @min-width-breakpoint-tablet ) {
            display: block;
        }
    }

    // For expand all sections client preference:
    &.mf-expand-sections-clientpref-1 {
        .collapsible-block:not( .collapsible-block-js ) {
            display: block;
        }
    }

    .section-heading {
        align-items: center;
    }
}

// FIXME: For legacy parser, can be removed when Parsoid is everywhere.
.section-heading .indicator {
    margin-right: 6px;
}

// FIXME: For legacy parser, can be removed when Parsoid is everywhere.
.client-nojs {
    // Toggling indicators are unusable without JavaScript
    .section-heading .indicator {
        display: none;
    }
}

// START FOOTER RULES
// Historically, MobileFrontend has modified the mobile footer
// to limit the amount of items in it.
// This was previously done in the now deprecated SkinTemplateOutputPageBeforeExec
// We can remove these rules as soon as we've talked this through with a
// designer and product manager.

// Rule is overly specific to counter .hlist style
ul.footer-info li,
ul.footer-places li {
    display: none;
}

/* stylelint-disable-next-line selector-max-id */
#footer-places-terms-use {
    float: left;
}
// Historically we've limited places on mobile
// to terms-use, desktop toggle and privacy links

/* stylelint-disable-next-line selector-max-id */
#footer-places-terms-use,
#footer-places-desktop-toggle,
#footer-places-privacy {
    display: inline-block;
}

/* stylelint-disable-next-line selector-max-id */
#footer-places-desktop-toggle::after {
    content: '' !important;
}
// END FOOTER RULES