@atlassian/aui/src/less/imports/mixins.less

Atlassian User Interface library

@import (reference) 'aui-theme/components/messages';
@import (reference) 'aui-theme/core/colors';

@import (reference) './mixins/dropdown2-trigger-chevron-icon';
@import (reference) './mixins/focus';
@import (reference) './mixins/icon-pseudoelement';
@import (reference) './mixins/media-queries';
@import (reference) './mixins/shadows';
@import (reference) './mixins/tab-indicator';
@import (reference) './mixins/typography';

#aui {
    .visually-hidden() {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .animation(@animation) {
        animation: @animation;
    }

    .border-radius(@radius) {
        border-radius: @radius;
    }

    .box-sizing(@sizing: border-box) {
        box-sizing: @sizing;
    }

    .prevent-text-selection() {
        user-select: none;
    }

    .gradient {
        .vertical(@start-color: #fff, @end-color: #f2f2f2, @start-percent: 0%, @end-percent: 100%) {
            background: @end-color;
            background: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent);
        }
    }

    .rotate(@angle) {
        transform: rotate(@angle);
    }

    .text-truncate() {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .transition(@transition) {
        // Using + is deliberate; it will comma-append the value to whatever value already exists.
        // See http://lesscss.org/features/#merge-feature-comma
        transition+: @transition;
    }

    .transition {
        .fadeIn(@length: 0.2s, @delay: 0s, @max-opacity: 1) {
            opacity: @max-opacity;
            transition: opacity @length;
            transition-delay: @delay;
            visibility: visible;
        }

        .fadeOut(@length: 0.2s, @delay: 0s) {
            opacity: 0;
            transition: opacity @length, visibility @length;
            transition-delay: @delay;
            visibility: hidden;
        }
    }

    .transform-rotate(@angle) {
        transform: rotate(@angle);
    }

    .height-calc(@calc) {
        height: ~"calc(@{calc})";
    }

    .placeholder(@color) {
        &::placeholder {
            color: @color;
            opacity: 1;
        }
        // Target AUI's JS equivalent of the CSS proposal for the `:placeholder-shown` pseudo-class.
        &.aui-placeholder-shown, &.placeholder-shown {
            color: @color;
        }
    }

    //
    // Responsive mixins
    //
    .responsive-small(@rules) {
        html.aui-responsive {
            @media screen and (max-width: 767px) {
                @rules();
            }
        }
    }
    .responsive-medium(@rules) {
        html.aui-responsive {
            @media screen and (max-width: 800px) {
                @rules();
            }
        }
    }

    .responsive-large(@rules) {
        html.aui-responsive {
            @media screen and (max-width: 1023px) {
                @rules();
            }
        }
    }
}