Created
December 28, 2011 01:15
-
-
Save bencooling/1525695 to your computer and use it in GitHub Desktop.
Helpful Less functions provided by Joni Korpi
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .box-shadow (@string) { | |
| -webkit-box-shadow: @string; | |
| -moz-box-shadow: @string; | |
| box-shadow: @string; | |
| } | |
| .border-radius (@radius: 2px) { | |
| -webkit-border-radius: @radius; | |
| -moz-border-radius: @radius; | |
| border-radius: @radius; | |
| } | |
| .border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { | |
| -webkit-border-top-right-radius: @topright; | |
| -webkit-border-bottom-right-radius: @bottomright; | |
| -webkit-border-bottom-left-radius: @bottomleft; | |
| -webkit-border-top-left-radius: @topleft; | |
| -moz-border-radius-topright: @topright; | |
| -moz-border-radius-bottomright: @bottomright; | |
| -moz-border-radius-bottomleft: @bottomleft; | |
| -moz-border-radius-topleft: @topleft; | |
| border-top-right-radius: @topright; | |
| border-bottom-right-radius: @bottomright; | |
| border-bottom-left-radius: @bottomleft; | |
| border-top-left-radius: @topleft; | |
| } | |
| .rotate (@deg){ | |
| -webkit-transform: rotate(@deg); | |
| -moz-transform: rotate(@deg); | |
| -ms-transform: rotate(@deg); | |
| transform: rotate(@deg); | |
| } | |
| .skew (@deg, @deg2){ | |
| -webkit-transform: skew(@deg, @deg2); | |
| -moz-transform: skew(@deg, @deg2); | |
| -ms-transform: skew(@deg, @deg2); | |
| transform: skew(@deg, @deg2); | |
| } | |
| .translate (@x, @y:0) { | |
| -webkit-transform: translate(@x, @y); | |
| -moz-transform: translate(@x, @y); | |
| -ms-transform: translate(@x, @y); | |
| 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); | |
| transform: translate3d(@x, @y, @z); | |
| } | |
| .scale (@factor) { | |
| -webkit-transform: scale(@factor); | |
| -moz-transform: scale(@factor); | |
| -ms-transform: scale(@factor); | |
| transform: scale(@factor); | |
| } | |
| .perspective (@value:1000) { | |
| -webkit-perspective: @value; | |
| -moz-perspective: @value; | |
| -ms-perspective: @value; | |
| perspective: @value; | |
| } | |
| .transition (@transition) { | |
| -webkit-transition: @transition; | |
| -moz-transition: @transition; | |
| -ms-transition: @transition; | |
| transition: @transition; | |
| } | |
| .transform-origin (@x:center, @y:center) { | |
| -webkit-transform-origin: @x @y; | |
| -moz-transform-origin: @x @y; | |
| -ms-transform-origin: @x @y; | |
| transform-origin: @x @y; | |
| } | |
| .horizontal-gradient (@startColor: #555, @endColor: #333) { | |
| background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor)); | |
| background-image: -webkit-linear-gradient(right center, @startColor, @endColor); | |
| background-image: -moz-linear-gradient(right center, @startColor, @endColor); | |
| } | |
| .horizontal-three-color-gradient (@firstStop: 0, @startColor: #00b3ee, @midStop: 0.5, @midColor: #7a43b6, @lastStop: 1, @endColor: #c3325f) { | |
| background-repeat: no-repeat; | |
| background-image: -webkit-gradient(linear, left top, right top, | |
| color-stop(@firstStop, @startColor), | |
| color-stop(@midStop, @midColor), | |
| color-stop(@lastStop, @endColor)); | |
| background-image: -webkit-linear-gradient( | |
| @startColor @firstStop, | |
| @midColor @midStop, | |
| @endColor @lastStop); | |
| background-image: -moz-linear-gradient( | |
| @startColor @firstStop, | |
| @midColor @midStop, | |
| @endColor @lastStop); | |
| } | |
| .horizontal-four-color-gradient (@firstStop: 0, @startColor: #00b3ee, @secondStop: 0, @secondColor: #00b3ee, @midStop: 0.5, @midColor: #7a43b6, @lastStop: 1, @endColor: #c3325f) { | |
| background-repeat: no-repeat; | |
| background-image: -webkit-gradient(linear, left top, right top, | |
| color-stop(@firstStop, @startColor), | |
| color-stop(@secondStop, @secondColor), | |
| color-stop(@midStop, @midColor), | |
| color-stop(@lastStop, @endColor)); | |
| background-image: -webkit-linear-gradient( | |
| @startColor @firstStop, | |
| @secondColor @secondStop, | |
| @midColor @midStop, | |
| @endColor @lastStop); | |
| background-image: -moz-linear-gradient( | |
| @startColor @firstStop, | |
| @secondColor @secondStop, | |
| @midColor @midStop, | |
| @endColor @lastStop); | |
| } | |
| .vertical-gradient (@startColor: #555, @endColor: #333) { | |
| background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); | |
| background-image: -webkit-linear-gradient(@startColor, @endColor); | |
| background-image: -moz-linear-gradient(@startColor, @endColor); | |
| } | |
| .vertical-three-color-gradient (@startColor: #00b3ee, @colorStop: 0.5, @midColor: #7a43b6, @endColor: #c3325f) { | |
| background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); | |
| background-image: -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor); | |
| background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor); | |
| } | |
| .animate (@name, @duration: 1s, @count: infinite, @direction: normal, @function: ease-in-out) { | |
| -moz-animation-name: @name; | |
| -moz-animation-duration: @duration; | |
| -moz-animation-iteration-count: @count; | |
| -moz-animation-direction: @direction; | |
| -moz-animation-timing-function: @function; | |
| -webkit-animation-name: @name; | |
| -webkit-animation-duration: @duration; | |
| -webkit-animation-iteration-count: @count; | |
| -webkit-animation-direction: @direction; | |
| -webkit-animation-timing-function: @function; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment