/*--------------------------------------------------- LESS Prefixer --------------------------------------------------- All of the CSS3 fun, none of the prefixes! As a rule, you can use the CSS properties you would expect just by adding a '.': box-shadow => .box-shadow(@args) Also, when shorthand is available, arguments are not parameterized. Learn CSS, not LESS Prefixer. ------------------------------------------------- TABLE OF CONTENTS (*) denotes a syntax-sugar helper ------------------------------------------------- .animation(@args) .animation-delay(@delay) .animation-direction(@direction) .animation-duration(@duration) .animation-iteration-count(@count) .animation-name(@name) .animation-play-state(@state) .animation-timing-function(@function) .background-size(@args) .border-radius(@args) .box-shadow(@args) .inner-shadow(@args) * .box-sizing(@args) .border-box() * .content-box() * .columns(@args) .column-count(@count) .column-gap(@gap) .column-rule(@args) .column-width(@width) .gradient(@default,@start,@stop) * .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])* .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])* .opacity(@factor) .transform(@args) .rotate(@deg) .scale(@factor) .translate(@x,@y) .translate3d(@x,@y,@z) .translateHardware(@x,@y) * .text-shadow(@args) .transition(@args) .transition-delay(@delay) .transition-duration(@duration) .transition-property(@property) .transition-timing-function(@function) Credit to LESS Elements for the motivation and to CSS3Please.com for implementation. Copyright (c) 2012 Joel Sutherland MIT Licensed: http://www.opensource.org/licenses/mit-license.php -----------------------------------------------------*/ /* 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; } /* 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; }