ityu
3/5/2014 - 1:31 PM

LESS Mixins

LESS Mixins

// Useful LESS Mixins by iTyu

.rounded (@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;

-webkit-background-clip: padding-box;
   -moz-background-clip: padding;
        background-clip: padding-box;
}

// Grandient Background
.grandient (@color1, @color2) {
    background-color: @color2;
    background-image:     -ms-linear-gradient(top left, @color1 0%, @color2 100%);
    background-image: -webkit-linear-gradient(top, @color1, @color2);
    background-image:    -moz-linear-gradient(top, @color1, @color2);
    background-image:      -o-linear-gradient(top, @color1, @color2);
    background-image:        -webkit-gradient(linear, left top, left bottom, from(@color1), to(@color2));
    background-image:         linear-gradient(top, @color1, @color2);
}

.opacity (@value: 1) {
    @filter: @value * 100;

          opacity: @value;
     -moz-opacity: @value;
   -khtml-opacity: @value;
    -ms-filter: ~'"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{filter})"';
    filter: ~"alpha(opacity=@{filter})";
}

.box-shadow (@arguments) {
     -moz-box-shadow: @arguments;
      -ms-box-shadow: @arguments;
       -o-box-shadow: @arguments;
          box-shadow: @arguments;
}

.inner--box-shadow (@arguments) {
    -webkit-box-shadow: inset @arguments;
       -moz-box-shadow: inset @arguments;
            box-shadow: inset @arguments;
}

.size(@width, @height) {
    width: @width;
    height: @height;
}

.rotation(@deg:90deg){
    .transform(rotate(@deg));
}

.scale(@ratio:1){
    .transform(scale(@ratio));
}

.truncate (@width) {
    width: @width;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
}

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

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

.user-select(@argument: none) {
  -webkit-user-select: @argument;
     -moz-user-select: @argument;
      -ms-user-select: @argument;
          user-select: @argument;
}

.text-shadow (@arg: 0 1px 1px rgba(0, 0, 0, 0.5)) {
    text-shadow: @arg;
}

.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
    -webkit-animation: @name @duration @delay @ease;
       -moz-animation: @name @duration @delay @ease;
        -ms-animation: @name @duration @delay @ease;
}

.skew (@deg, @deg2) {
  -webkit-transform: skew(@deg, @deg2);
     -moz-transform: skew(@deg, @deg2);
      -ms-transform: skew(@deg, @deg2);
       -o-transform: skew(@deg, @deg2);
}

.translate (@x, @y:0) {
    -webkit-transform: translate(@x, @y);
       -moz-transform: translate(@x, @y);
        -ms-transform: translate(@x, @y);
         -o-transform: translate(@x, @y);
}

.translate3d (@x, @y: 0, @z: 0) {
  -webkit-transform: translate3d(@x, @y, @z);
     -moz-transform: translate3d(@x, @y, @z);
      -ms-transform: translate3d(@x, @y, @z);
       -o-transform: translate3d(@x, @y, @z);
}

.perspective (@value: 1000) {
    -webkit-perspective: @value;
       -moz-perspective: @value;
        -ms-perspective: @value;
            perspective: @value;
}

.transform-origin (@x:center, @y:center) {
  -webkit-transform-origin: @x @y;
     -moz-transform-origin: @x @y;
      -ms-transform-origin: @x @y;
       -o-transform-origin: @x @y;
}