muffin.io/skeletons/client/assets/stylesheets/prefixer.less

A full stack development tool for creating modern webapps

/* Animation */
.animation(@args) {
  -webkit-animation: @args;
  -moz-animation: @args;
  -ms-animation: @args;
  -o-animation: @args;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
  -moz-animation-delay: @delay;
  -ms-animation-delay: @delay;
  -o-animation-delay: @delay;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
  -moz-animation-direction: @direction;
  -ms-animation-direction: @direction;
  -o-animation-direction: @direction;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
  -moz-animation-duration: @duration;
  -ms-animation-duration: @duration;
  -o-animation-duration: @duration;
}
.animation-iteration-count(@count) {
  -webkit-animation-iteration-count: @count;
  -moz-animation-iteration-count: @count;
  -ms-animation-iteration-count: @count;
  -o-animation-iteration-count: @count;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
  -moz-animation-name: @name;
  -ms-animation-name: @name;
  -o-animation-name: @name;
}
.animation-play-state(@state) {
  -webkit-animation-play-state: @state;
  -moz-animation-play-state: @state;
  -ms-animation-play-state: @state;
  -o-animation-play-state: @state;
}
.animation-timing-function(@function) {
  -webkit-animation-timing-function: @function;
  -moz-animation-timing-function: @function;
  -ms-animation-timing-function: @function;
  -o-animation-timing-function: @function;
}

/* Blink */
.blink (@period:3000ms,@to:0.4) {
  animation: fade @period infinite;
  -webkit-animation:fade @period infinite;
  
  @keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: @to; }
    to { opacity: 1.0; }
  }

  @-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: @to; }
    to { opacity: 1.0; }
  }
}

/* Background Size */
.background-size(@args) {
  -webkit-background-size: @args;
  -moz-background-size: @args;
  background-size: @args;
}


/* Border Radius */
.border-radius(@args) {
  -webkit-border-radius: @args;
  -moz-border-radius: @args;
  border-radius: @args;

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


/* Box Shadows */
.box-shadow(@args) {
  -webkit-box-shadow: @args;
  -moz-box-shadow: @args;
  box-shadow: @args;
}
.inner-shadow(@args) {
  .box-shadow(inset @args);
}


/* Box Sizing */
.box-sizing(@args){
  -webkit-box-sizing: @args;
  -moz-box-sizing: @args;
  box-sizing: @args;
}
.border-box(){
  .box-sizing(border-box);
}
.content-box(){
  .box-sizing(content-box);
}


/* Columns */
.columns(@args){
  -webkit-columns: @args;
  -moz-columns: @args;
  columns: @args;
}
.column-count(@count) {
  -webkit-column-count: @count;
  -moz-column-count: @count;
  column-count: @count;
}
.column-gap(@gap) {
  -webkit-column-gap: @gap;
  -moz-column-gap: @gap;
  column-gap: @gap;
}
.column-width(@width){
  -webkit-column-width: @width;
  -moz-column-width: @width;
  column-width: @width;
}
.column-rule(@args){
  -webkit-column-rule: @rule;
  -moz-column-rule: @rule;
  column-rule: @rule;
}


/* Gradients */
.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
  .linear-gradient-top(@default,@start,0%,@stop,100%);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
  background-color: @default;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
  background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
  background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
  background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
  background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
  background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
  background-color: @default;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
  background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
  background-color: @default;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
  background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
  background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
  background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
  background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
  background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
  background-color: @default;
  background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
  background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
  background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2);
  background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2);
  background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2);
  background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
  background-color: @default;
  background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
  background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
  background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
  background-color: @default;
  background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
  background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
  background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
  background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
  background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
  background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}


/* Opacity */
.opacity(@factor){
  opacity: @factor;
  @iefactor: @factor*100;
  filter: alpha(opacity=@iefactor);
}


/* Text Shadow */
.text-shadow(@args){
  text-shadow: @args;
}

/* Transforms */
.transform(@args) {
  -webkit-transform: @args; 
  -moz-transform: @args; 
  -ms-transform: @args; 
  -o-transform: @args; 
  transform: @args;
}
.rotate(@deg:45deg){
  .transform(rotate(@deg));
}
.scale(@factor:.5){
  .transform(scale(@factor));
}
.translate(@x,@y){
  .transform(translate(@x,@y));
}
.translate3d(@x,@y,@z) {
  .transform(translate3d(@x,@y,@z));
}
.translateHardware(@x,@y){
  .translate(@x,@y);
  -webkit-transform: translate3d(@x,@y,0);
  -moz-transform: translate3d(@x,@y,0);
}


/* Transitions */
.transition(@args:200ms) {
  -webkit-transition: @args;
  -moz-transition: @args;
  -o-transition: @args;
  transition: @args;
}
.transition-delay(@delay:0) {
  -webkit-transition-delay: @delay;
  -moz-transition-delay: @delay;
  -o-transition-delay: @delay;
  transition-delay: @delay;
}
.transition-duration(@duration:200ms) {
  -webkit-transition-duration: @duration;
  -moz-transition-duration: @duration;
  -o-transition-duration: @duration;
  transition-duration: @duration;
}
.transition-property(@property:all) {
  -webkit-transition-property: @property;
  -moz-transition-property: @property;
  -o-transition-property: @property;
  transition-property: @property;
}
.transition-timing-function(@function:ease) {
  -webkit-transition-timing-function: @function;
  -moz-transition-timing-function: @function;
  -o-transition-timing-function: @function;
  transition-timing-function: @function;
}


/* Word Wrap */
.word-wrap () {
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
}