css3.less

//============================================================
//
// LESS CSS3 Mixins
//
// @description CSS3 mixins for projects using LESS
// @version 1.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
// 
// 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;
        -ms-box-sizing: @arguments;
         -o-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;
}



//============================================================
//
// 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);