//============================================================ // // LESS CSS3 Mixins // // @description CSS3 mixins for projects using LESS // @see http://lesscss.org/ // @version 2.00 // // @author Matthew Wagerfield // @see http://matthew.wagerfield.com // @see http://twitter.com/mwagerfield // // ---------- INDEX ---------- // // Display: // @mixin display-box // @mixin box-orient // @mixin box-pack // @mixin box-align // @mixin box-flex // @mixin box-sizing // @mixin user-select // @mixin appearance // // Decoration: // @mixin border-radius // @mixin box-shadow // @mixin text-shadow // @mixin linear-gradient // @mixin radial-gradient // // Transformation: // @mixin transform // @mixin transform-origin // @mixin transform-style // @mixin perspective // @mixin perspective-origin // @mixin backface-visibility // @mixin matrix // @mixin translate // @mixin scale // @mixin rotate // @mixin skew // // Animation: // @mixin transition // @mixin easing // //============================================================ //============================================================ // // display-box // // @see http://www.w3.org/TR/css3-flexbox/ // @see http://www.html5rocks.com/en/tutorials/flexbox/quick/ // //============================================================ .display-box(...) { display: -webkit-box; display: -moz-box; display: -ms-box; display: -o-box; display: box; } //============================================================ // // box-orient // // @param value : horizontal | // vertical | // inherit // // @see http://www.w3.org/TR/css3-flexbox/ // @see http://www.html5rocks.com/en/tutorials/flexbox/quick/ // //============================================================ .box-orient(...) { .display-box(); -webkit-box-orient: @arguments; -moz-box-orient: @arguments; -ms-box-orient: @arguments; -o-box-orient: @arguments; box-orient: @arguments; } //============================================================ // // box-pack // // @param value : start | // end | // center | // justify // // @see http://www.w3.org/TR/css3-flexbox/ // @see http://www.html5rocks.com/en/tutorials/flexbox/quick/ // //============================================================ .box-pack(...) { .display-box(); -webkit-box-pack: @arguments; -moz-box-pack: @arguments; -ms-box-pack: @arguments; -o-box-pack: @arguments; box-pack: @arguments; } //============================================================ // // box-align // // @param value : start | // end | // center | // baseline | // stretch // // @see http://www.w3.org/TR/css3-flexbox/ // @see http://www.html5rocks.com/en/tutorials/flexbox/quick/ // //============================================================ .box-align(...) { .display-box(); -webkit-box-align: @arguments; -moz-box-align: @arguments; -ms-box-align: @arguments; -o-box-align: @arguments; box-align: @arguments; } //============================================================ // // box-flex // // @param value : 0 | Integer // // @see http://www.w3.org/TR/css3-flexbox/ // @see http://www.html5rocks.com/en/tutorials/flexbox/quick/ // //============================================================ .box-flex(...) { .display-box(); -webkit-box-flex: @arguments; -moz-box-flex: @arguments; -ms-box-flex: @arguments; -o-box-flex: @arguments; box-flex: @arguments; } //============================================================ // // box-sizing // // @param value : content-box | // padding-box | // border-box | // inherit // // @see http://www.w3.org/TR/css3-ui/#box-sizing // //============================================================ .box-sizing(...) { -webkit-box-sizing: @arguments; -moz-box-sizing: @arguments; box-sizing: @arguments; } //============================================================ // // user-select // // @param value : none | // text | // toggle | // element | // elements | // all | // inherit // // @see http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select // //============================================================ .user-select(...) { -webkit-touch-callout: @arguments; -webkit-user-select: @arguments; -moz-user-select: @arguments; -ms-user-select: @arguments; -o-user-select: @arguments; user-select: @arguments; } //============================================================ // // appearance // // @param value : button | // push-button | // hyperlink | // radio-button | // checkbox | // pop-up-menu | // list-menu | // radio-group | // checkbox-group | // field | // password | // normal | // inherit | // none // // @see http://www.w3.org/TR/css3-ui/#appearance // @see http://www.cssportal.com/css-properties/appearance.htm // @see https://developer.mozilla.org/en/CSS/-moz-appearance // //============================================================ .appearance(...) { -webkit-appearance: @arguments; -moz-appearance: @arguments; -ms-appearance: @arguments; -o-appearance: @arguments; appearance: @arguments; } //============================================================ // // border-radius // // @param top-left-radius : px, em, % // @param top-right-radius : px, em, % // @param bottom-right-radius : px, em, % // @param bottom-left-radius : px, em, % // // @see http://www.w3.org/TR/css3-background/#border-radius // //============================================================ .border-radius(...) { -webkit-border-radius: @arguments; -moz-border-radius: @arguments; border-radius: @arguments; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } //============================================================ // // box-shadow // // @param colour : #000, rgba, hsla // @param horizontal-offset : px, em // @param vertical-offset : px, em // @param blur-radius : px, em // @param spread-distance : px, em // @param inset : inset // // @see http://www.w3.org/TR/css3-background/#box-shadow // //============================================================ .box-shadow(...) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } //============================================================ // // text-shadow // // @param colour : #000, rgba, hsla // @param horizontal-offset : px, em // @param vertical-offset : px, em // @param blur-radius : px, em // // @see http://www.w3.org/TR/css3-text/#text-shadow // //============================================================ .text-shadow(...) { text-shadow: @arguments; } //============================================================ // // linear-gradient // // @param angle : top, left, 90deg // @param colourA : #000 0%, red 0% // @param colourB : #000 50%, red 50% // @param colourC : #000 100%, red 100% // // @example .linear-gradient(top, ~',crimson 0%', ~',black 100%'); // // @see http://dev.w3.org/csswg/css3-images/#linear-gradients // //============================================================ .linear-gradient(...) { background-image: -webkit-linear-gradient(@arguments); background-image: -moz-linear-gradient(@arguments); background-image: -ms-linear-gradient(@arguments); background-image: -o-linear-gradient(@arguments); background-image: linear-gradient(@arguments); } //============================================================ // // radial-gradient // // @param location : left top, 50% 50% // @param shape : circle, ellipse, 100% 75% // @param colourA : #000 0%, red 0% // @param colourB : #000 50%, red 50% // @param colourC : #000 100%, red 100% // // @example .radial-gradient(~'50% 50%,', circle, ~',crimson 0%', ~',black 100%'); // // @see http://dev.w3.org/csswg/css3-images/#radial-gradients // //============================================================ .radial-gradient(...) { background-image: -webkit-radial-gradient(@arguments); background-image: -moz-radial-gradient(@arguments); background-image: -ms-radial-gradient(@arguments); background-image: -o-radial-gradient(@arguments); background-image: radial-gradient(@arguments); } //============================================================ // // transform // // @param functions : matrix() // : translate() // : scale() // : rotate() // : skew() // // @see http://www.w3.org/TR/css3-2d-transforms/ // //============================================================ .transform(...) { -webkit-transform: @arguments; -moz-transform: @arguments; -ms-transform: @arguments; -o-transform: @arguments; transform: @arguments; } //============================================================ // // transform-origin // // @param value : left | // center | // right | // px | // em | // %; // // @see http://www.w3.org/TR/css3-3d-transforms/#transform-origin-property // //============================================================ .transform-origin(...) { -webkit-transform-origin: @arguments; -moz-transform-origin: @arguments; -ms-transform-origin: @arguments; -o-transform-origin: @arguments; transform-origin: @arguments; } //============================================================ // // transform-style // // @param value : preserve-3d | flat // // @see http://www.w3.org/TR/css3-3d-transforms/#transform-style-property // //============================================================ .transform-style(...) { -webkit-transform-style: @arguments; -moz-transform-style: @arguments; -ms-transform-style: @arguments; -o-transform-style: @arguments; transform-style: @arguments; } //============================================================ // // perspective // // @param value : none | 0, 1, 100, 1000, etc // // @see http://www.w3.org/TR/css3-3d-transforms/#perspective-property // //============================================================ .perspective(...) { -webkit-perspective: @arguments; -moz-perspective: @arguments; -ms-perspective: @arguments; -o-perspective: @arguments; perspective: @arguments; } //============================================================ // // perspective-origin // // @param value : left | // center | // right | // px | // em | // % // // @see http://www.w3.org/TR/css3-3d-transforms/#perspective-origin-property // //============================================================ .perspective-origin(...) { -webkit-perspective-origin: @arguments; -moz-perspective-origin: @arguments; -ms-perspective-origin: @arguments; -o-perspective-origin: @arguments; perspective-origin: @arguments; } //============================================================ // // backface-visibility // // @param value : visible | hidden // // @see http://www.w3.org/TR/css3-3d-transforms/#backface-visibility-property // //============================================================ .backface-visibility(...) { -webkit-backface-visibility: @arguments; -moz-backface-visibility: @arguments; -ms-backface-visibility: @arguments; -o-backface-visibility: @arguments; backface-visibility: @arguments; } //============================================================ // // matrix // // @param a : Number // @param b : Number // @param c : Number // @param d : Number // @param e : Number // @param f : Number // // http://www.w3.org/TR/css3-3d-transforms/#transform-functions // //============================================================ .matrix(...) { -webkit-transform: matrix(@arguments); -moz-transform: matrix(@arguments); -ms-transform: matrix(@arguments); -o-transform: matrix(@arguments); transform: matrix(@arguments); } //============================================================ // // translate // // @param translate-x : px // @param translate-y : px // // http://www.w3.org/TR/css3-3d-transforms/#transform-functions // //============================================================ .translate(...) { -webkit-transform: translate(@arguments); -moz-transform: translate(@arguments); -ms-transform: translate(@arguments); -o-transform: translate(@arguments); transform: translate(@arguments); } //============================================================ // // scale // // @param scale-x : 0.5, 2, etc // @param scale-y : 0.5, 2, etc // // http://www.w3.org/TR/css3-3d-transforms/#transform-functions // //============================================================ .scale(...) { -webkit-transform: scale(@arguments); -moz-transform: scale(@arguments); -ms-transform: scale(@arguments); -o-transform: scale(@arguments); transform: scale(@arguments); } //============================================================ // // rotate // // @param angle : 0deg // // http://www.w3.org/TR/css3-3d-transforms/#transform-functions // //============================================================ .rotate(...) { -webkit-transform: rotate(@arguments); -moz-transform: rotate(@arguments); -ms-transform: rotate(@arguments); -o-transform: rotate(@arguments); transform: rotate(@arguments); } //============================================================ // // skew // // @param axis-x : 0deg // @param axis-y : 0deg // // http://www.w3.org/TR/css3-3d-transforms/#transform-functions // //============================================================ .skew(...) { -webkit-transform: skew(@arguments); -moz-transform: skew(@arguments); -ms-transform: skew(@arguments); -o-transform: skew(@arguments); transform: skew(@arguments); } //============================================================ // // transition // // @param properties : all, left, opacity, etc // @param duration : 1s, 1000ms // @param delay : 1s, 1000ms // @param easing : linear, ease-in-out, etc // // @see http://www.w3.org/TR/css3-transitions/ // //============================================================ .transition(...) { -webkit-transition: @arguments; -moz-transition: @arguments; -ms-transition: @arguments; -o-transition: @arguments; transition: @arguments; } //============================================================ // // easing // // Thanks to Robert Penner for his sterling work on easing, // and to Matthew Lein for converting these functions into // approximated cubic-bezier functions. Respect. // // @see http://robertpenner.com/ // @see http://matthewlein.com/ceaser/ // //============================================================ // Cubic @easeInCubic : cubic-bezier(0.550, 0.055, 0.675, 0.190); @easeOutCubic : cubic-bezier(0.215, 0.610, 0.355, 1.000); @easeInOutCubic : cubic-bezier(0.645, 0.045, 0.355, 1.000); // Circ @easeInCirc : cubic-bezier(0.600, 0.040, 0.980, 0.335); @easeOutCirc : cubic-bezier(0.075, 0.820, 0.165, 1.000); @easeInOutCirc : cubic-bezier(0.785, 0.135, 0.150, 0.860); // Expo @easeInExpo : cubic-bezier(0.950, 0.050, 0.795, 0.035); @easeOutExpo : cubic-bezier(0.190, 1.000, 0.220, 1.000); @easeInOutExpo : cubic-bezier(1.000, 0.000, 0.000, 1.000); // Quad @easeInQuad : cubic-bezier(0.550, 0.085, 0.680, 0.530); @easeOutQuad : cubic-bezier(0.250, 0.460, 0.450, 0.940); @easeInOutQuad : cubic-bezier(0.455, 0.030, 0.515, 0.955); // Quart @easeInQuart : cubic-bezier(0.895, 0.030, 0.685, 0.220); @easeOutQuart : cubic-bezier(0.165, 0.840, 0.440, 1.000); @easeInOutQuart : cubic-bezier(0.770, 0.000, 0.175, 1.000); // Quint @easeInQuint : cubic-bezier(0.755, 0.050, 0.855, 0.060); @easeOutQuint : cubic-bezier(0.230, 1.000, 0.320, 1.000); @easeInOutQuint : cubic-bezier(0.860, 0.000, 0.070, 1.000); // Sine @easeInSine : cubic-bezier(0.470, 0.000, 0.745, 0.715); @easeOutSine : cubic-bezier(0.390, 0.575, 0.565, 1.000); @easeInOutSine : cubic-bezier(0.445, 0.050, 0.550, 0.950); // Back @easeInBack : cubic-bezier(0.600, -0.280, 0.735, 0.045); @easeOutBack : cubic-bezier(0.175, 0.885, 0.320, 1.275); @easeInOutBack : cubic-bezier(0.680, -0.550, 0.265, 1.550); //============================================================ // // Copyright (c) 2012 Matthew Wagerfield // // Permission is hereby granted, free of charge, to any // person obtaining a copy of this software and associated // documentation files (the "Software"), to deal in the // Software without restriction, including without limitation // the rights to use, copy, modify, merge, publish, distribute, // sublicense, and/or sell copies of the Software, and to // permit persons to whom the Software is furnished to do // so, subject to the following conditions: // // The above copyright notice and this permission notice // shall be included in all copies or substantial portions // of the Software. // // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY // OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT // LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS // FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO // EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE // FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN // AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE // OR OTHER DEALINGS IN THE SOFTWARE. // //============================================================