static/css/impala/lib.less

// Colors
@link: #447BC4;
@light-gray: #ccc;
@note-gray: #999;
@medium-gray: #666;
@dark-gray: #333;
@red: #C63717;
@error-red: #C00000;
@orange: #D16B00;
@teal: #5875A0;
@shadow-blue: #98B2C9;
@border-blue: #C9DDF2;
@inset-blue: rgba(152, 178, 201, 0.3);
@border-black: fadeout(#000, 80%);
@faded-blue: fadeout(@border-blue, 90%);
@green: #093;
@menu-active: #ecf5fe;


// Button Colors
@button-green-light: #84c63c;
@button-green-dark: #489615;
@button-red-light: #f84b4e;
@button-red-dark: #bc2b1a;


// Font Stacks
@sans-stack: "Helvetica Neue", Arial, sans-serif;
@mono-stack: "andale mono", monospace;


// Retina
@retina: ~'screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2)';


// Fixed Sizes
@page-min-height: 404px; // height of the current gradient background image on #page


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

.transform(@tform) {
    -webkit-transform: @tform;
    -moz-transform: @tform;
    -ms-transform: @tform;
    transform: @tform;
}

.transition(@property) {
    -moz-transition: @property;
    -webkit-transition: @property;
    transition: @property;
}

.transition-property(@property) {
    -moz-transition-property: @property;
    -webkit-transition-property: @property;
    transition-property: @property;
}

.transition-duration(@duration:2s) {
    -moz-transition-duration: @duration;
    -webkit-transition-duration: @duration;
    transition-duration: @duration;
}

.background-size(@size) {
    -moz-background-size: @size;
    -wekbkit-background-size: @size;
    background-size: @size;
}
.background-size(@size, @size2) {
    -moz-background-size: @size, @size2;
    -wekbkit-background-size: @size, @size2;
    background-size: @size, @size2;
}

.box-shadow(@shadow) {
    box-shadow: @shadow;
    -moz-box-shadow: @shadow;
    -webkit-box-shadow: @shadow;
}
.box-shadow(@shadow, @shadow2) {
    box-shadow: @shadow, @shadow2;
    -moz-box-shadow: @shadow, @shadow2;
    -webkit-box-shadow: @shadow, @shadow2;
}
.box-shadow(@shadow, @shadow2, @shadow3) {
    box-shadow: @shadow, @shadow2, @shadow3;
    -moz-box-shadow: @shadow, @shadow2, @shadow3;
    -webkit-box-shadow: @shadow, @shadow2, @shadow3;
}

.columns(@count, @gap: 1em) {
    column-count: @count;
    -moz-column-count: @count;
    -webkit-column-count: @count;
    column-gap: @gap;
    -moz-column-gap: @gap;
    -webkit-column-gap: @gap;
}

.height-calc(@calc, @fallback) {
    height: @fallback;
    height: -moz-calc(@calc);
    height: -webkit-calc(@calc);
    height: calc(@calc);
}

.width-calc(@calc, @fallback) {
    width: @fallback;
    width: -moz-calc(@calc);
    width: -webkit-calc(@calc);
    width: calc(@calc);
}

.border-box() {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.animation(@animation) {
    -webkit-animation: @animation;
    -moz-animation: @animation;
    -ms-animation: @animation;
    animation: @animation;
}

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

.gradient-two-color(@color1, @color2) {
    background-image: -webkit-gradient(linear, left bottom, left top, from(@color1), to(@color2));
    background-image: linear-gradient(@color1, @color2);
    background-image: -webkit-linear-gradient(@color1, @color2);
}

.gradient-two-color(@color1, @color2, @fallback) {
    background: @fallback;
    .gradient-two-color(@color1, @color2);
}

// Vertical sprite
.sprite(@url, @pos, @spacing, @offset:0) {
    background: ~'url(@{url}) no-repeat';
    background-position: 0 (@spacing * @pos * -1 + @offset) + 0px;
}
.sprite-pos(@pos, @spacing, @offset:0) {
    background-position: 0 (@spacing * @pos * -1 + @offset) + 0px;
}
.sprite-pos-right(@pos, @spacing, @offset:0) {
    background-position: right (@spacing * @pos * -1 + @offset) + 0px;
}

// Horizontal sprite
.hsprite(@url, @pos, @spacing, @offset:0) {
    background: ~'url(@{url}) no-repeat';
    background-position: (@spacing * @pos * -1 + @offset) + 0px 0;
}
.hsprite-pos(@pos, @spacing, @offset:0) {
    background-position: (@spacing * @pos * -1 + @offset) + 0px 0;
}

@white-trans: fadeout(#fff, 100%);
.checkerboard() {
    background: -moz-repeating-linear-gradient(left, #ccc, #ccc 2px, @white-trans 2px, @white-trans 4px);
    background: repeating-linear-gradient(to right, #ccc, #ccc 2px, @white-trans 2px, @white-trans 4px);
}

.item-icon(@icon-w, @icon-h) {
    overflow: auto;
    position: relative;
    margin-top: 1em;
    padding-left: @icon-w + 15px;

    .icon {
        position: absolute;
        width: @icon-w;
        height: @icon-h;
        left: 0;
        top: 0;
    }
    .summary {
        float: left;

        h3 {
            font-weight: bold;
        }
        p.desc {
            margin-top: 0;
        }
    }
}