|
|
@@ -1,40 +1,275 @@
|
|
|
//============================================================
|
|
|
//
|
|
|
-// LESS CSS3 Mixins by @soyjavi
|
|
|
+// 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
|
|
|
//
|
|
|
-// @description CSS3 mixins for LESS projects
|
|
|
-// @version 1.2
|
|
|
+//============================================================
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+//============================================================
|
|
|
+//
|
|
|
+// 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;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
//============================================================
|
|
|
-// Variables
|
|
|
//
|
|
|
+// 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, %;
|
|
|
+// @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;
|
|
|
+.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;
|
|
|
+ -webkit-background-clip: padding-box;
|
|
|
+ -moz-background-clip: padding;
|
|
|
+ background-clip: padding-box;
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -43,25 +278,95 @@
|
|
|
//
|
|
|
// 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;
|
|
|
+// @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() {
|
|
|
+.box-shadow(...) {
|
|
|
-webkit-box-shadow: @arguments;
|
|
|
- -moz-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
|
|
|
@@ -75,10 +380,12 @@
|
|
|
// @see http://www.w3.org/TR/css3-2d-transforms/
|
|
|
//
|
|
|
//============================================================
|
|
|
-.transform() {
|
|
|
+
|
|
|
+.transform(...) {
|
|
|
-webkit-transform: @arguments;
|
|
|
- -moz-transform: @arguments;
|
|
|
- -o-transform: @arguments;
|
|
|
+ -moz-transform: @arguments;
|
|
|
+ -ms-transform: @arguments;
|
|
|
+ -o-transform: @arguments;
|
|
|
transform: @arguments;
|
|
|
}
|
|
|
|
|
|
@@ -86,59 +393,90 @@
|
|
|
|
|
|
//============================================================
|
|
|
//
|
|
|
-// translate
|
|
|
+// transform-origin
|
|
|
//
|
|
|
-// @param translate-x : px;
|
|
|
-// @param translate-y : px;
|
|
|
+// @param value : left |
|
|
|
+// center |
|
|
|
+// right |
|
|
|
+// px |
|
|
|
+// em |
|
|
|
+// %;
|
|
|
//
|
|
|
-// @see http://www.w3.org/TR/css3-2d-transforms/
|
|
|
+// @see http://www.w3.org/TR/css3-3d-transforms/#transform-origin-property
|
|
|
//
|
|
|
//============================================================
|
|
|
|
|
|
-.translate() {
|
|
|
- -webkit-transform: translate(@arguments);
|
|
|
- -moz-transform: translate(@arguments);
|
|
|
- -o-transform: translate(@arguments);
|
|
|
- transform: translate(@arguments);
|
|
|
+.transform-origin(...) {
|
|
|
+ -webkit-transform-origin: @arguments;
|
|
|
+ -moz-transform-origin: @arguments;
|
|
|
+ -ms-transform-origin: @arguments;
|
|
|
+ -o-transform-origin: @arguments;
|
|
|
+ transform-origin: @arguments;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//============================================================
|
|
|
//
|
|
|
-// scale
|
|
|
+// transform-style
|
|
|
//
|
|
|
-// @param scale-x : 0.5, 2, etc;
|
|
|
-// @param scale-y : 0.5, 2, etc;
|
|
|
+// @param value : preserve-3d | flat
|
|
|
//
|
|
|
-// @see http://www.w3.org/TR/css3-2d-transforms/
|
|
|
+// @see http://www.w3.org/TR/css3-3d-transforms/#transform-style-property
|
|
|
//
|
|
|
//============================================================
|
|
|
|
|
|
-.scale() {
|
|
|
- -webkit-transform: scale(@arguments);
|
|
|
- -moz-transform: scale(@arguments);
|
|
|
- -o-transform: scale(@arguments);
|
|
|
- transform: scale(@arguments);
|
|
|
+.transform-style(...) {
|
|
|
+ -webkit-transform-style: @arguments;
|
|
|
+ -moz-transform-style: @arguments;
|
|
|
+ -ms-transform-style: @arguments;
|
|
|
+ -o-transform-style: @arguments;
|
|
|
+ transform-style: @arguments;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//============================================================
|
|
|
//
|
|
|
-// rotate
|
|
|
+// perspective
|
|
|
//
|
|
|
-// @param angle : 0deg;
|
|
|
+// @param value : none | 0, 1, 100, 1000, etc
|
|
|
//
|
|
|
-// @see http://www.w3.org/TR/css3-2d-transforms/
|
|
|
+// @see http://www.w3.org/TR/css3-3d-transforms/#perspective-property
|
|
|
//
|
|
|
//============================================================
|
|
|
|
|
|
-.rotate() {
|
|
|
- -webkit-transform: rotate(@arguments);
|
|
|
- -moz-transform: rotate(@arguments);
|
|
|
- -o-transform: rotate(@arguments);
|
|
|
- transform: rotate(@arguments);
|
|
|
+.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;
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -147,16 +485,17 @@
|
|
|
//
|
|
|
// backface-visibility
|
|
|
//
|
|
|
-// @param visibility : visible | hidden;
|
|
|
+// @param value : visible | hidden
|
|
|
//
|
|
|
-// @see http://www.w3.org/TR/css3-3d-transforms/
|
|
|
+// @see http://www.w3.org/TR/css3-3d-transforms/#backface-visibility-property
|
|
|
//
|
|
|
//============================================================
|
|
|
|
|
|
-.backface-visibility() {
|
|
|
+.backface-visibility(...) {
|
|
|
-webkit-backface-visibility: @arguments;
|
|
|
- -moz-backface-visibility: @arguments;
|
|
|
- -o-backface-visibility: @arguments;
|
|
|
+ -moz-backface-visibility: @arguments;
|
|
|
+ -ms-backface-visibility: @arguments;
|
|
|
+ -o-backface-visibility: @arguments;
|
|
|
backface-visibility: @arguments;
|
|
|
}
|
|
|
|
|
|
@@ -164,46 +503,135 @@
|
|
|
|
|
|
//============================================================
|
|
|
//
|
|
|
-// transition
|
|
|
+// matrix
|
|
|
//
|
|
|
-// @param properties : all, left, opacity, etc;
|
|
|
-// @param duration : 1s, 1000ms;
|
|
|
-// @param delay : 1s, 1000ms;
|
|
|
-// @param easing : linear, ease-in-out, etc;
|
|
|
+// @param a : Number
|
|
|
+// @param b : Number
|
|
|
+// @param c : Number
|
|
|
+// @param d : Number
|
|
|
+// @param e : Number
|
|
|
+// @param f : Number
|
|
|
//
|
|
|
-// @see http://www.w3.org/TR/css3-transitions/
|
|
|
+// http://www.w3.org/TR/css3-3d-transforms/#transform-functions
|
|
|
//
|
|
|
//============================================================
|
|
|
|
|
|
-.transition() {
|
|
|
- -webkit-transition: @arguments;
|
|
|
- -moz-transition: @arguments;
|
|
|
- -o-transition: @arguments;
|
|
|
- transition: @arguments;
|
|
|
+.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;
|
|
|
+// @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/
|
|
|
//
|
|
|
//============================================================
|
|
|
|
|
|
-.user-select() {
|
|
|
- -webkit-user-select: @arguments;
|
|
|
- -moz-user-select: @arguments;
|
|
|
- -o-user-select: @arguments;
|
|
|
- user-select: @arguments;
|
|
|
+.transition(...) {
|
|
|
+ -webkit-transition: @arguments;
|
|
|
+ -moz-transition: @arguments;
|
|
|
+ -ms-transition: @arguments;
|
|
|
+ -o-transition: @arguments;
|
|
|
+ transition: @arguments;
|
|
|
}
|
|
|
|
|
|
|
|
|
+
|
|
|
//============================================================
|
|
|
//
|
|
|
// easing
|
|
|
@@ -250,4 +678,40 @@
|
|
|
// 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);
|
|
|
+@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.
|
|
|
+//
|
|
|
+//============================================================
|
@soyjavi