wikimedia/mediawiki-extensions-UniversalLanguageSelector

View on GitHub
resources/css/ext.uls.mixins.less

Summary

Maintainability
Test Coverage
// Generate a caret by embedding in the callout.
// Expects callout to have either selector-right or selecter-left class on it to determine directionality.
.caret() {
    &::before,
    &::after {
        border-top: 10px @border-style-base @border-color-transparent;
        border-bottom: 10px @border-style-base @border-color-transparent;
        display: inline-block;
        /* 17px aligns nicely with the size of the search row in language selection */
        top: 17px;
        position: absolute;
        content: '';
    }

    &.selector-right {
        &::before {
            /* @noflip */
            border-left: 10px @border-style-base @border-color-subtle;
            /* @noflip */
            right: -11px;
        }

        &::after {
            /* @noflip */
            border-left: 10px @border-style-base @border-color-inverted;
            /* @noflip */
            right: -10px;
        }
    }

    &.selector-left {
        &::before {
            /* @noflip */
            border-right: 10px @border-style-base @border-color-subtle;
            /* @noflip */
            left: -11px;
        }

        &::after {
            /* @noflip */
            border-right: 10px @border-style-base @border-color-inverted;
            /* @noflip */
            left: -10px;
        }
    }
}