awx/awx/ui/client/lib/theme/_mixins.less

.at-mixin-Placeholder (@color) {
    &:-moz-placeholder {
        color: @color;
    }
    &:-ms-input-placeholder {
        color: @color;
    }
    &::-webkit-input-placeholder {
        color: @color;
    }
}

.at-mixin-Heading (@size) {
    color: @at-color-body-text;
    font-size: @size;
    font-weight: @at-font-weight-heading;
    line-height: @at-line-height-short;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

.at-mixin-Button () {
    height: @at-height-input;
    padding: @at-padding-button-vertical @at-padding-button-horizontal;
    font-size: @at-font-size-body;
    line-height: 1;
}

.at-mixin-InputButton () {
    height: @at-height-button;
    padding: 0 @at-padding-button-horizontal;

    &, &:active, &:hover, &:focus {
        color: @at-color-button-text-default;
        border-color: @at-color-input-border;
        background-color: @at-color-input-button;
        cursor: pointer;
    }

    &:hover {
        background-color: @at-color-input-button-hover;
    }
}

.at-mixin-ButtonColor (@background, @color, @hover: '@{background}-hover') {
    background-color: @@background;
    border-color: @@background;

    &, &:hover, &:focus {
        color: @@color;
    }

    &:hover, &:focus {
        background-color: @@hover;
        border-color: @@hover;
    }

    &[disabled] {
        background-color: fade(@@background, 60%);
    }
}

.at-mixin-ButtonHollow (@bg, @border, @text) {
    @hover: '@{bg}-hover';

    background-color: @@bg;
    color: @@text;
    border-color: @@border;

    &:hover, &:active {
        color: @@text;
        background-color: @@hover;
        box-shadow: none;
    }

    &:focus {
        color: @@text;
        background-color: @@hover;
        border-color: @@border;
        cursor: default;
    }

    &[disabled] {
        opacity: 0.65;
    }
}

.at-mixin-ButtonIcon () {
    line-height: @at-line-height-short;

    & > i {
        cursor: pointer;
        transition: color @at-transition-icon-button;
    }

    & > i:hover {
        color: @at-color-icon-hover
    }
}

.at-mixin-FontFixedWidth () {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}