wikimedia/mediawiki-extensions-UniversalLanguageSelector

View on GitHub
lib/jquery.uls/css/jquery.uls.mobile.css

Summary

Maintainability
Test Coverage
/* stylelint-disable declaration-no-important */
@media only screen and ( max-width: 767px ) {
    .uls-mobile.uls-menu {
        width: 95%;
        left: 2.5%;
    }

    .uls-mobile .uls-language-list {
        -webkit-overflow-scrolling: touch;
    }

    .uls-mobile .uls-language-block {
        padding-left: 15px !important;
    }

    .uls-mobile .uls-language-block ul {
        min-height: 14em;
    }

    .uls-mobile .uls-language-block a {
        font-size: 1.143em;
        line-height: 1.7em;
    }

    .uls-mobile .row {
        width: auto;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .uls-mobile .column,
    .uls-mobile .columns {
        width: auto !important;
        float: none;
    }

    .uls-mobile .column:last-child,
    .uls-mobile .columns:last-child {
        float: none;
    }

    .uls-mobile [ class*='column' ] + [ class*='column' ]:last-child {
        float: none;
    }

    .uls-mobile .column::before,
    .uls-mobile .uls-mobile .columns::before,
    .uls-mobile .column::after,
    .columns::after {
        content: '';
        display: table;
    }

    .uls-mobile .column::after,
    .uls-mobile .columns::after {
        clear: both;
    }

    .uls-mobile .offset-by-one,
    .uls-mobile .offset-by-two,
    .uls-mobile .offset-by-three,
    .uls-mobile .offset-by-four,
    .uls-mobile .offset-by-five,
    .uls-mobile .offset-by-six,
    .uls-mobile .offset-by-seven,
    .uls-mobile .offset-by-eight,
    .uls-mobile .offset-by-nine,
    .uls-mobile .offset-by-ten {
        margin-left: 0 !important;
    }

    .uls-mobile .push-two,
    .uls-mobile .push-three,
    .uls-mobile .push-four,
    .uls-mobile .push-five,
    .uls-mobile .push-six,
    .uls-mobile .push-seven,
    .uls-mobile .push-eight,
    .uls-mobile .push-nine,
    .uls-mobile .push-ten {
        left: auto;
    }

    .uls-mobile .pull-two,
    .uls-mobile .pull-three,
    .uls-mobile .pull-four,
    .uls-mobile .pull-five,
    .uls-mobile .pull-six,
    .uls-mobile .pull-seven,
    .uls-mobile .pull-eight,
    .uls-mobile .pull-nine,
    .uls-mobile .pull-ten {
        right: auto;
    }

    /* Mobile 4-column Grid */
    .uls-mobile .row .mobile-one {
        width: 25% !important;
        float: left;
        padding: 0 4px;
    }

    .uls-mobile .row .mobile-one:last-child {
        float: right;
    }

    .uls-mobile .row.collapse .mobile-one {
        padding: 0;
    }

    .uls-mobile .row .mobile-two {
        width: 50% !important;
        float: left;
        padding: 0 4px;
    }

    .uls-mobile .row .mobile-two:last-child {
        float: right;
    }

    .uls-mobile .row.collapse .mobile-two {
        padding: 0;
    }

    .uls-mobile .row .mobile-three {
        width: 75% !important;
        float: left;
        padding: 0 4px;
    }

    .uls-mobile .row .mobile-three:last-child {
        float: right;
    }

    .uls-mobile .row.collapse .mobile-three {
        padding: 0;
    }

    .uls-mobile .row .mobile-four {
        width: 100% !important;
        float: left;
        padding: 0 4px;
    }

    .uls-mobile .row .mobile-four:last-child {
        float: right;
    }

    .uls-mobile .row.collapse .mobile-four {
        padding: 0;
    }

    .uls-mobile .push-one-mobile {
        left: 25%;
    }

    .uls-mobile .pull-one-mobile {
        right: 25%;
    }

    .uls-mobile .push-two-mobile {
        left: 50%;
    }

    .uls-mobile .pull-two-mobile {
        right: 50%;
    }

    .uls-mobile .push-three-mobile {
        left: 75%;
    }

    .uls-mobile .pull-three-mobile {
        right: 75%;
    }
}

/* Visibility Classes ---------------------- */
/* Standard (large) display targeting */
.uls-mobile .show-for-small,
.uls-mobile .show-for-medium,
.uls-mobile .show-for-medium-down,
.uls-mobile .hide-for-large,
.uls-mobile .hide-for-large-up,
.uls-mobile .show-for-xlarge {
    display: none !important;
}

.uls-mobile .hide-for-xlarge,
.uls-mobile .show-for-large,
.uls-mobile .show-for-large-up,
.uls-mobile .hide-for-small,
.uls-mobile .hide-for-medium,
.uls-mobile .hide-for-medium-down {
    display: block !important;
}

/* Very large display targeting */
@media only screen and ( min-width: 1441px ) {
    .uls-mobile .hide-for-small,
    .uls-mobile .hide-for-medium,
    .uls-mobile .hide-for-medium-down,
    .hide-for-large,
    .show-for-large-up,
    .show-for-xlarge {
        display: block !important;
    }

    .show-for-small,
    .uls-mobile .show-for-medium,
    .uls-mobile .show-for-medium-down,
    .uls-mobile .show-for-large,
    .uls-mobile .hide-for-large-up,
    .uls-mobile .hide-for-xlarge {
        display: none !important;
    }
}

/* Medium display targeting */
@media only screen and ( max-width: 1279px ) and ( min-width: 768px ) {
    .uls-mobile .hide-for-small,
    .uls-mobile .show-for-medium,
    .uls-mobile .show-for-medium-down,
    .uls-mobile .hide-for-large,
    .uls-mobile .hide-for-large-up,
    .uls-mobile .hide-for-xlarge {
        display: block !important;
    }

    .uls-mobile .show-for-small,
    .uls-mobile .hide-for-medium,
    .uls-mobile .hide-for-medium-down,
    .uls-mobile .show-for-large,
    .uls-mobile .show-for-large-up,
    .uls-mobile .show-for-xlarge {
        display: none !important;
    }
}

/* Small display targeting */
@media only screen and ( max-width: 767px ) {
    .uls-mobile .show-for-small,
    .uls-mobile .hide-for-medium,
    .uls-mobile .show-for-medium-down,
    .uls-mobile .hide-for-large,
    .uls-mobile .hide-for-large-up,
    .uls-mobile .hide-for-xlarge {
        display: block !important;
    }

    .uls-mobile .hide-for-small,
    .uls-mobile .show-for-medium,
    .uls-mobile .hide-for-medium-down,
    .uls-mobile .show-for-large,
    .uls-mobile .show-for-large-up,
    .uls-mobile .show-for-xlarge {
        display: none !important;
    }
}

/* Orientation targeting */
.uls-mobile .show-for-landscape,
.uls-mobile .hide-for-portrait {
    display: block !important;
}

.uls-mobile .hide-for-landscape,
.uls-mobile .show-for-portrait {
    display: none !important;
}

@media screen and ( orientation: landscape ) {
    .uls-mobile .show-for-landscape,
    .uls-mobile .hide-for-portrait {
        display: block !important;
    }

    .uls-mobile .hide-for-landscape,
    .uls-mobile .show-for-portrait {
        display: none !important;
    }
}

@media screen and ( orientation: portrait ) {
    .uls-mobile .show-for-portrait,
    .uls-mobile .hide-for-landscape {
        display: block !important;
    }

    .uls-mobile .hide-for-portrait,
    .uls-mobile .show-for-landscape {
        display: none !important;
    }
}

/* Touch-enabled device targeting */
.uls-mobile .show-for-touch,
.uls-mobile .touch .hide-for-touch {
    display: none !important;
}

/* stylelint-disable-next-line no-descending-specificity */
.uls-mobile .hide-for-touch,
.uls-mobile .touch .show-for-touch {
    display: block !important;
}