Source style/less/mixins.bauplan.less

/**
 * @stylesheet mixins%bauplan%less
 * @language less
 * @description Mixin functions
 * @nopreparse
 */

/**
 * @function .box-sizing
 * @description Browser-prefixed box-sizing
 */
.box-sizing() {
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/**
 * @function .border-radius
 * @description Browser-prefixed border-radius
 * @param {unit} @radius Border radius size (px|em|rem)
 */
.border-radius(@radius) {
    -ms-border-radius: @radius;
    -moz-border-radius: @radius;
    -o-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}

// Would be nice to use multiple shadow solution from http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/
// instead declare multiples as a variable and pass, eg.
//    @shadow: 0 1px 3px #eee, 0 5px 10px #f5f5f5;
//    .box-shadow(@shadow);
/**
 * @function .box-shadow
 * @description Browser-prefixed box-shadow
 * @param {shadow-properties} @shadow Shadow properties
 */
.box-shadow(@shadow) {
    -ms-box-shadow: @shadow;
    -moz-box-shadow: @shadow;
    -o-box-shadow: @shadow;
    -webkit-box-shadow: @shadow;
    box-shadow: @shadow;
}

/**
 * @function .opacity
 * @description Cross-browser opacity
 * @param {number} @op Opacity value between 0 and 1
 */
.opacity(@op) {
    opacity: @op;
    @filterop: (@op * 100);
    filter: alpha(opacity=@filterop);
}

/**
 * @function .placeholder
 * @description Cross-browser placeholder colour
 * @param {color} @color Placeholder text color
 */
.placeholder(@color) {
    &:-moz-placeholder {
        color: @color;
    }
    &:-ms-input-placeholder {
        color: @color;
    }
    &::-webkit-input-placeholder {
        color: @color;
    }
}

/**
 * @function .vertical-align
 * @description Cross-browser vertical alignment
 * @param {unit} [@percent=50%] Vertical alignment offset
 * @param {string} [@position=absolute] Position type to use
 */
.vertical-align(@percent: 50%, @position: absolute) {
  position: @position;
  display: block;
  top: @percent;
  -webkit-transform: translateY(-@percent);
  -ms-transform: translateY(-@percent);
  transform: translateY(-@percent);
}

/**
 * @function .accessibilityHide
 * @description Visually hide text present for accessibilty purposes
 */
.accessibilityHide() {
    position: absolute;
    left: -9999px;
}

/**
 * @function .hoverUnderline
 * @description Only display link underline on :hover
 */
.hoverUnderline() {
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}

/**
 * @function .siteDivider
 * @description Add visual division between site sections
 */
.siteDivider(@siteDividerHeight: 0.5em) {
    border-bottom: solid @siteDividerHeight @mediumGrey;
}

/**
 * @function .currencySymbol
 * @description Prepend amount with £ symbol
 */
.currencySymbol() {
    &:before {
        //.siteDisplay();
        content: "£";
        font-size: 0.75em;
        position: relative;
        top: -0.3125em;
        padding-right: 0.125em;
    }
}

//animate-me
@lesscompiler: 'js';
/**
 * @function .animator
 * @description Cross-browser keyframe animation rule properties
 * @param {string} @n Id of animation
 * @param {string|boolean} @p Duration of animation
 * @param {string|boolean} @s Target class for animation
 * @param {unit} [@1p] Keyframe
 * @param {string} [@1r] Animation properties
 * @param {...unit} [@np] Additional keyframes
 * @param {...string} [@nr] Additional animation properties
 * @example .animator(ANIMATIONID; 10s infinite; ".targetclass";
 *   0%; "left: 15%";
 *   50%; "left: 100%";
 *   100%; "left: 15%";
 * );
 * @example .animator(ANOTHERANMID; false; false;
 *    0%; "opacity: 0";
 *    100%; "opacity: 1";
 * );
 */
.animator(@n; @p: false; @s: false; @1p: false; @1r: 'x'; @2p: false; @2r: 'x'; @3p: false; @3r: 'x'; @4p: false; @4r: 'x'; @5p: false; @5r: 'x'; @6p: false; @6r: 'x'; @7p: false; @7r: 'x'; @8p: false; @8r: 'x'; @9p: false; @9r: 'x'; @10p: false; @10r: 'x'; @11p: false; @11r: 'x')
        when (@lesscompiler='js') {
        .keyframe(@x; @1i; @v) {
                @sp: ~" ";
          @z: "`'\n'`";
          @as: ~"} @{s}";
    @keyframe: ~"@{x}@{z}@@{v}keyframes @{n} {@{z}";

    .ks(@1p; @2p; @3p; @4p; @5p; @6p; @7p; @8p; @9p; @10p; @11p) when not (iskeyword(@1p)) and (iskeyword(@2p)) and (iskeyword(@3p)) and (iskeyword(@4p)) and (iskeyword(@5p)) and (iskeyword(@6p)) and (iskeyword(@7p)) and (iskeyword(@8p)) and (iskeyword(@9p)) and (iskeyword(@10p)) and (iskeyword(@11p)) { @{keyframe} { .kd('l'; @1r; @1p); } }
                .ks(@1p; @2p; @3p; @4p; @5p; @6p; @7p; @8p; @9p; @10p; @11p) when not (iskeyword(@1p)) and not (iskeyword(@2p)) and (iskeyword(@3p)) and (iskeyword(@4p)) and (iskeyword(@5p)) and (iskeyword(@6p)) and (iskeyword(@7p)) and (iskeyword(@8p)) and (iskeyword(@9p)) and (iskeyword(@10p)) and (iskeyword(@11p)) { @{keyframe} { .kd(''; @1r; @1p); } @{sp} { .kd('l'; @2r; @2p); } }
                .ks(@1p; @2p; @3p; @4p; @5p; @6p; @7p; @8p; @9p; @10p; @11p) when not (iskeyword(@1p)) and not (iskeyword(@2p)) and not (iskeyword(@3p)) and (iskeyword(@4p)) and (iskeyword(@5p)) and (iskeyword(@6p)) and (iskeyword(@7p)) and (iskeyword(@8p)) and (iskeyword(@9p)) and (iskeyword(@10p)) and (iskeyword(@11p)) { @{keyframe} { .kd(''; @1r; @1p); } @{sp} { .kd(''; @2r; @2p); } @{sp} { .kd('l'; @3r; @3p); } }
                .ks(@1p; @2p; @3p; @4p; @5p; @6p; @7p; @8p; @9p; @10p; @11p) when not (iskeyword(@1p)) and not (iskeyword(@2p)) and not (iskeyword(@3p))  and not (iskeyword(@4p)) and (iskeyword(@5p)) and (iskeyword(@6p)) and (iskeyword(@7p)) and (iskeyword(@8p)) and (iskeyword(@9p)) and (iskeyword(@10p)) and (iskeyword(@11p)) { @{keyframe} { .kd(''; @1r; @1p); } @{sp} { .kd(''; @2r; @2p); } @{sp} { .kd(''; @3r; @3p); } @{sp} { .kd('l'; @4r; @4p); } }
                .ks(@1p; @2p; @3p; @4p; @5p; @6p; @7p; @8p; @9p; @10p; @11p) when not (iskeyword(@1p)) and not (iskeyword(@2p)) and not (iskeyword(@3p))  and not (iskeyword(@4p)) and not (iskeyword(@5p)) and (iskeyword(@6p)) and (iskeyword(@7p)) and (iskeyword(@8p)) and (iskeyword(@9p)) and (iskeyword(@10p)) and (iskeyword(@11p)) { @{keyframe} { .kd(''; @1r; @1p); } @{sp} { .kd(''; @2r; @2p); } @{sp} { .kd(''; @3r; @3p); } @{sp} { .kd(''; @4r; @4p); } @{sp} { .kd('l'; @5r; @5p); } }
                .ks(@1p; @2p; @3p; @4p; @5p; @6p; @7p; @8p; @9p; @10p; @11p) when not (iskeyword(@1p)) and not (iskeyword(@2p)) and not (iskeyword(@3p))  and not (iskeyword(@4p)) and not (iskeyword(@5p)) and not (iskeyword(@6p)) and (iskeyword(@7p)) and (iskeyword(@8p)) and (iskeyword(@9p)) and (iskeyword(@10p)) and (iskeyword(@11p)) { @{keyframe} { .kd(''; @1r; @1p); } @{sp} { .kd(''; @2r; @2p); } @{sp} { .kd(''; @3r; @3p); } @{sp} { .kd(''; @4r; @4p); } @{sp} { .kd(''; @5r; @5p); } @{sp} { .kd('l'; @6r; @6p); } }
                .ks(@1p; @2p; @3p; @4p; @5p; @6p; @7p; @8p; @9p; @10p; @11p) when not (iskeyword(@1p)) and not (iskeyword(@2p)) and not (iskeyword(@3p))  and not (iskeyword(@4p)) and not (iskeyword(@5p)) and not (iskeyword(@6p)) and not (iskeyword(@7p)) and (iskeyword(@8p)) and (iskeyword(@9p)) and (iskeyword(@10p)) and (iskeyword(@11p)) { @{keyframe} { .kd(''; @1r; @1p); } @{sp} { .kd(''; @2r; @2p); } @{sp} { .kd(''; @3r; @3p); } @{sp} { .kd(''; @4r; @4p); } @{sp} { .kd(''; @5r; @5p); } @{sp} { .kd(''; @6r; @6p); } @{sp} { .kd('l'; @7r; @7p); } }
                .ks(@1p; @2p; @3p; @4p; @5p; @6p; @7p; @8p; @9p; @10p; @11p) when not (iskeyword(@1p)) and not (iskeyword(@2p)) and not (iskeyword(@3p))  and not (iskeyword(@4p)) and not (iskeyword(@5p)) and not (iskeyword(@6p)) and not (iskeyword(@7p)) and not (iskeyword(@8p)) and (iskeyword(@9p)) and (iskeyword(@10p)) and (iskeyword(@11p)) { @{keyframe} { .kd(''; @1r; @1p); } @{sp} { .kd(''; @2r; @2p); } @{sp} { .kd(''; @3r; @3p); } @{sp} { .kd(''; @4r; @4p); } @{sp} { .kd(''; @5r; @5p); } @{sp} { .kd(''; @6r; @6p); } @{sp} { .kd(''; @7r; @7p); } @{sp} { .kd('l'; @8r; @8p); } }
                .ks(@1p; @2p; @3p; @4p; @5p; @6p; @7p; @8p; @9p; @10p; @11p) when not (iskeyword(@1p)) and not (iskeyword(@2p)) and not (iskeyword(@3p))  and not (iskeyword(@4p)) and not (iskeyword(@5p)) and not (iskeyword(@6p)) and not (iskeyword(@7p)) and not (iskeyword(@8p)) and not (iskeyword(@9p)) and (iskeyword(@10p)) and (iskeyword(@11p)) { @{keyframe} { .kd(''; @1r; @1p); } @{sp} { .kd(''; @2r; @2p); } @{sp} { .kd(''; @3r; @3p); } @{sp} { .kd(''; @4r; @4p); } @{sp} { .kd(''; @5r; @5p); } @{sp} { .kd(''; @6r; @6p); } @{sp} { .kd(''; @7r; @7p); } @{sp} { .kd(''; @8r; @8p); } @{sp} { .kd('l'; @9r; @9p); } }
                .ks(@1p; @2p; @3p; @4p; @5p; @6p; @7p; @8p; @9p; @10p; @11p) when not (iskeyword(@1p)) and not (iskeyword(@2p)) and not (iskeyword(@3p))  and not (iskeyword(@4p)) and not (iskeyword(@5p)) and not (iskeyword(@6p)) and not (iskeyword(@7p)) and not (iskeyword(@8p)) and not (iskeyword(@9p)) and not (iskeyword(@10p)) and (iskeyword(@11p)) { @{keyframe} { .kd(''; @1r; @1p); } @{sp} { .kd(''; @2r; @2p); } @{sp} { .kd(''; @3r; @3p); } @{sp} { .kd(''; @4r; @4p); } @{sp} { .kd(''; @5r; @5p); } @{sp} { .kd(''; @6r; @6p); } @{sp} { .kd(''; @7r; @7p); } @{sp} { .kd(''; @8r; @8p); } @{sp} { .kd(''; @9r; @9p); } @{sp} { .kd('l'; @10r; @10p); } }
                .ks(@1p; @2p; @3p; @4p; @5p; @6p; @7p; @8p; @9p; @10p; @11p) when not (iskeyword(@1p)) and not (iskeyword(@2p)) and not (iskeyword(@3p))  and not (iskeyword(@4p)) and not (iskeyword(@5p)) and not (iskeyword(@6p)) and not (iskeyword(@7p)) and not (iskeyword(@8p)) and not (iskeyword(@9p)) and not (iskeyword(@10p)) and not (iskeyword(@11p)) { @{keyframe} { .kd(''; @1r; @1p); } @{sp} { .kd(''; @2r; @2p); } @{sp} { .kd(''; @3r; @3p); } @{sp} { .kd(''; @4r; @4p); } @{sp} { .kd(''; @5r; @5p); } @{sp} { .kd(''; @6r; @6p); } @{sp} { .kd(''; @7r; @7p); } @{sp} { .kd(''; @8r; @8p); } @{sp} { .kd(''; @9r; @9p); } @{sp} { .kd(''; @10r; @10p); } @{sp} { .kd('l'; @11r; @11p); } }

    .kd(@1id; @ru; @pcn) when not (iskeyword(@s)) {@pr: %(@ru, @v); @rij: ~"@{pr};"; @ij: ~"@{pcn} {@{z}    @{rij} /*"; @{ij} { /**/ } }
    .kd(@1id; @ru; @pcn) when not (@1i='l') and not (@1id='l') and (iskeyword(@s)) {@pr: %(@ru, @v); @rij: ~"@{pr};"; @ij: ~"@{pcn} {@{z}    @{rij} /*"; @{ij} { /**/ } }
    .kd(@1id; @ru; @pcn) when not (@1i='l') and (@1id='l') and (iskeyword(@s)) {@pr: %(@ru, @v); @rij: ~"@{pr};"; @ij: ~"@{pcn} {@{z}    @{rij} /*"; @{ij} { /**/ } }
    .kd(@1id; @ru; @pcn) when (@1i='l') and not (@1id='l') and (iskeyword(@s)) {@pr: %(@ru, @v); @rij: ~"@{pr};"; @ij: ~"@{pcn} {@{z}    @{rij} /*"; @{ij} { /**/ } }
    .kd(@1id; @ru; @pcn) when (@1i='l') and (@1id='l') and (iskeyword(@s)) {@pr: %(@ru, @v); @rij: ~"@{pr};"; @ij: ~"@{pcn} {@{z}    @{rij}@{z} } /*"; @{ij} { /**/ } }

    .ks(@1p; @2p; @3p; @4p; @5p; @6p; @7p; @8p; @9p; @10p; @11p);

    .as() {}
    .as() when (@1i='l') and not (iskeyword(@s)) and (iskeyword(@p)) {
      @{as} {
        -moz-animation: @n;
        -webkit-animation: @n;
        -o-animation: @n;
        animation: @n;
      }
    }
    .as() when (@1i='l') and not (iskeyword(@s)) and not (iskeyword(@p)) {
      @{as} {
        -moz-animation: @n @p;
        -webkit-animation: @n @p;
        -o-animation: @n @p;
        animation: @n @p;
      }
    }
    .as;
  }

  .keyframe(''   , 'f',  '-moz-');
  .keyframe(~'} ', 0, '-webkit-');
  .keyframe(~'} ', 0,      '-o-');
  .keyframe(~'} ', 'l',       '');
}

/**
 * @function .animation
 * @description Cross-browser animation rule property
 * @param {animation} [@animationProperties] Animation properties
 */
.animation(@animationProperties) {
    -moz-animation: @animationProperties;
    -webkit-animation: @animationProperties;
    -o-animation: @animationProperties;
    animation: @animationProperties;
}

/**
 * @function .transition
 * @description Cross-browser transition rule property
 * @param {transition} [@transprops] Transition properties
 */
.transition(@transprops) {
    -webkit-transition: @transprops;
    -moz-transition: @transprops;
    -o-transition: @transprops;
    -ms-transition: @transprops;
    transition: @transprops;
}

//phrase:hover:before {
//    .siteDisplay();
//    font-size: 14px !important;
//    content: attr(data-phrase-key);
//    text-transform: none !important;
//    position: absolute;
//    border: solid 1px #000000;
//    background: #ffffff !important;
//    color: #000000 !important;
//    padding: 6px;
//    z-index: 20000;
//}

//body {
//    .animation(LORKS 10s);
//}