wp-theme/ascribe/assets/_src/less/ascribe/_helpers.less

// CLEARFIX
// Apply .clearfix to a non-floated container element with floated elements in it
// to ensure the container has a height. Use .no-clearfix to reset a clearfix
// when in a dicey spot
.clearfix {
    zoom: 1;
    &:before, &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}
.no-clearfix {
    zoom: 0;
    &:before,
    &:after {
        display: none;
    }
    &:after {
        clear:  none;
    }
}

//  COLUMN SECTIONS

.wrapper {
    position: relative;
    overflow:hidden;
}

@paddingForCols: 30px;
.ttl-columns {
    width:100%;
    width: calc(~"100% +"@paddingForCols);
    .column {
        display: inline-block;
        vertical-align: top;
        padding-right: @paddingForCols;
    }

    .column-2 {
        .column;
        width: 50%;
        @media screen and (max-width: @middleWidth) {
            width: 100%;
        }
    }

    .column-3 {
        .column;
        width: 100/3%;
        @media screen and (max-width: @middleWidth) {
            width: 100%;
        }
    }

    .column-4 {
        .column;
        width: 25%;
        @media screen and (max-width: @tabletWidth) {
            width: 50%;
        }
    }

    .column-5 {
        .column;
        width: 20%;
        @media screen and (max-width: @tabletWidth) {
            width: 50%;
        }
    }

    .column-6 {
        .column;
        width: 100/6%;
        @media screen and (max-width: @tabletWidth) {
            width: 33%;
        }
        @media screen and (max-width: @phoneWidth) {
            width: 50%;
        }
    }
    .column-7 {
        .column;
        width: 100/7%;
        @media screen and (max-width: @tabletWidth) {
            width: 33%;
        }
    }

    .columnTwoThirds {
        .column;
        width: 66.6%;
        @media screen and (max-width: @middleWidth) {
            width: 100%;
        }
    }

    .columnThreeQuarters {
        .column;
        width: 100 * 3/4%;
        @media screen and (max-width: @tabletWidth) {
            width: 100%;
        }
    }

}
.column-container {
    .ttl-columns;
}


// MOBILE-ONLY
// Use this to only display something on mobile- and tablet-width devices.
// Depending on project specs, you may wish to override this breakpoint.
.phone-only {
    display: none;

    @media screen and (max-width: @phoneWidth) {
        display: inherit;
    }
}

.mobile-only {
    display: none;

    @media screen and (max-width: @tabletWidth) {
        display: inherit;
    }
}
.desktop-only {
    @media screen and (max-width: @tabletWidth) {
        display: none;
    }
}

.phone-and-up {
    @media screen and (max-width: @phoneWidth) {
        display: none;
    }
}

// MIXINS

///**
// * Selection
// *
// * Style a visual representation of selecting elements and objects.
// *
// * @USAGE
// * You can use it on the root of your CSS to make the selection style global
// * or inside a specific element. Provide two arguments: font color and background-color.
// *
// * @EXAMPLES
// * 1. .selection(red, blue);
// * 2. p {
// *        .selection(red, blue)
// *    }
// **/

.selection(@text-color, @background-color) {
    &::-moz-selection {color: @text-color; background-color: @background-color;}
    &::selection {color: @text-color; background-color: @background-color;}
}

//  * =========================================================== *
//  <                            LESSHat                          >
//  * =========================================================== *
//
// Made with Energy drinks in Prague, Czech Republic.
// Handcrafted by Petr Brzek, lesshat.com
// Works great with CSS Hat csshat.com

// version: v3.0.0 (2014-04-18)


.placeholder(@color:#aaa, @element: 08121991) {
    .inception (@arguments) when not (@element = 08121991) {
        @{element}::-webkit-input-placeholder {
            color: @color;
        }
        @{element}:-moz-placeholder {
            color: @color;
        }
        @{element}::-moz-placeholder {
            color: @color;
        }
        @{element}:-ms-input-placeholder {
            color: @color;
        }
    }
    .inception (@arguments) when (@element = 08121991) {
        &::-webkit-input-placeholder {
            color: @color;
        }
        &:-moz-placeholder {
            color: @color;
        }
        &::-moz-placeholder {
            color: @color;
        }
        &:-ms-input-placeholder {
            color: @color;
        }
    }
    .inception(@arguments);
}