Permalink
Browse files

Added new popout effect

  • Loading branch information...
1 parent 54ec7ed commit fe46ea4745fc93753f70c46b347829593502378a @finnsson committed Oct 4, 2012
Showing with 328 additions and 0 deletions.
  1. +328 −0 prefixer.less
View
@@ -0,0 +1,328 @@
+/*---------------------------------------------------
+ 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;
+}

0 comments on commit fe46ea4

Please sign in to comment.