249 lines
7.1 KiB
Plaintext
249 lines
7.1 KiB
Plaintext
/* ==============================
|
|
CSS3 Library for MoreLess System
|
|
version 1.0
|
|
|
|
Developed By:
|
|
Fernando Aureliano - @Pailoro
|
|
|
|
- License:
|
|
|
|
* This program is free software. It comes without any warranty, to
|
|
* the extent permitted by applicable law. You can redistribute it
|
|
* and/or modify it under the terms of the Do What The Fuck You Want
|
|
* To Public License, Version 2, as published by Sam Hocevar. See
|
|
* http://sam.zoy.org/wtfpl for more details.
|
|
===============================*/
|
|
|
|
.corners( @radius: 5px ) {
|
|
-webkit-border-radius: @radius;
|
|
-moz-border-radius: @radius;
|
|
-o-border-radius: @radius;
|
|
border-radius: @radius;
|
|
}
|
|
|
|
|
|
.corner( @topright: 5px, @bottomright: 5px, @bottomleft: 5px, @topleft: 5px ) {
|
|
-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-top-right-radius: @topright;
|
|
-moz-border-bottom-right-radius: @bottomright;
|
|
-moz-border-bottom-left-radius: @bottomleft;
|
|
-moz-border-top-left-radius: @topleft;
|
|
-o-border-bottom-right-radius: @bottomright;
|
|
-o-border-bottom-left-radius: @bottomleft;
|
|
-o-border-top-left-radius: @topleft;
|
|
border-top-right-radius: @topright;
|
|
border-bottom-right-radius: @bottomright;
|
|
border-bottom-left-radius: @bottomleft;
|
|
border-top-left-radius: @topleft;
|
|
}
|
|
// -------------------------------------------------- what it does: http://www.css3.info/preview/rounded-border/
|
|
|
|
.shadow(
|
|
@x: 4px,
|
|
@y: 4px,
|
|
@blur: 5px,
|
|
@spread: 0,
|
|
@color: #000
|
|
) {
|
|
-webkit-box-shadow: @x @y @blur @spread @color;
|
|
-moz-box-shadow: @x @y @blur @spread @color;
|
|
-o-box-shadow: @x @y @blur @spread @color;
|
|
box-shadow: @x @y @blur @spread @color;
|
|
}
|
|
// -------------------------------------------------- what it does: http://www.css3.info/preview/box-shadow/
|
|
|
|
.glow(
|
|
@blur: 5px,
|
|
@spread: 0,
|
|
@color: #000
|
|
) {
|
|
-webkit-box-shadow: 0 0 @blur @spread @color;
|
|
-moz-box-shadow: 0 0 @blur @spread @color;
|
|
-o-box-shadow: 0 0 @blur @spread @color;
|
|
box-shadow: 0 0 @blur @spread @color;
|
|
}
|
|
// -------------------------------------------------- what it does: http://www.css3.info/preview/box-shadow/
|
|
|
|
.animate(
|
|
@elements: all,
|
|
@time: 0.3s,
|
|
@easing: ease-in-out
|
|
) {
|
|
-webkit-transition: @elements @time @easing;
|
|
-moz-transition: @elements @time @easing;
|
|
-o-transition: @elements @time @easing;
|
|
transition: @elements @time @easing;
|
|
}
|
|
|
|
|
|
.animation(
|
|
@elements: all,
|
|
@time: 2s,
|
|
@value: infinite,
|
|
@easing: linear
|
|
) {
|
|
-webkit-animation: @elements @time @value @easing;
|
|
-moz-animation: @elements @time @value @easing;
|
|
-o-animation: @elements @time @value @easing;
|
|
animation: @elements @time @value @easing;
|
|
}
|
|
|
|
|
|
// -------------------------------------------------- what it does: http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
|
|
|
|
.opacity(@opacity: 0.5) {
|
|
-moz-opacity: @opacity;
|
|
-khtml-opacity: @opacity;
|
|
-webkit-opacity: @opacity;
|
|
-o-opacity: @opacity;
|
|
opacity: @opacity;
|
|
-ms-filter: ~"'progid:DXImageTransform.Microsoft.Alpha(Opacity=" @opacity*100 ~")'";
|
|
filter: ~"alpha(opacity=" @opacity*100 ~")";
|
|
}
|
|
// -------------------------------------------------- what it does: http://www.w3schools.com/css/css_image_transparency.asp
|
|
|
|
.rotate( @deg: 5deg ){
|
|
-webkit-transform: rotate(@deg);
|
|
-moz-transform: rotate(@deg);
|
|
-o-transform: rotate(@deg);
|
|
transform: rotate(@deg);
|
|
}
|
|
|
|
.origin(@px: 0px){
|
|
-webkit-transform-origin: @px;
|
|
-moz-transform-origin: @px;
|
|
-o-transform-origin: @px;
|
|
transform-origin: @px;
|
|
}
|
|
// -------------------------------------------------- what it does: no link yet
|
|
|
|
.transform(
|
|
@params
|
|
) {
|
|
-webkit-transform: @params;
|
|
-moz-transform: @params;
|
|
-o-transform: @params;
|
|
transform: @params;
|
|
}
|
|
|
|
.transform-style(
|
|
@params
|
|
) {
|
|
-webkit-transform-style: @params;
|
|
-moz-transform-style: @params;
|
|
-o-transform-style: @params;
|
|
transform-style: @params;
|
|
}
|
|
|
|
.backface(
|
|
@params
|
|
) {
|
|
-webkit-backface-visibility: @params;
|
|
-moz-backface-visibility: @params;
|
|
-o-backface-visibility: @params;
|
|
backface-visibility: @params;
|
|
}
|
|
// -------------------------------------------------- what it does: http://www.zenelements.com/blog/css3-transform/
|
|
|
|
.2borders(
|
|
@color1: #993300,
|
|
@color2: #FF9900,
|
|
@width: 1px,
|
|
@radius: 0
|
|
|
|
) {
|
|
border: @width solid @color1;
|
|
|
|
-webkit-box-shadow: 0 0 0 1px @color2;
|
|
-moz-box-shadow: 0 0 0 1px @color2;
|
|
-o-box-shadow: 0 0 0 1px @color2;
|
|
box-shadow: 0 0 0 1px @color2;
|
|
|
|
.corners ( @radius )
|
|
|
|
}
|
|
// -------------------------------------------------- what it does: see link below
|
|
|
|
.3borders(
|
|
@color1: #993300,
|
|
@color2: #FF9900,
|
|
@color3: #009900,
|
|
@width: 1px,
|
|
@radius: 0
|
|
) {
|
|
border: @width solid @color1;
|
|
|
|
|
|
-webkit-box-shadow: 0 0 0 1px @color2, 0 0 0 2px @color3;
|
|
-moz-box-shadow: 0 0 0 1px @color2, 0 0 0 2px @color3;
|
|
-o-box-shadow: 0 0 0 1px @color2, 0 0 0 2px @color3;
|
|
box-shadow: 0 0 0 1px @color2, 0 0 0 2px @color3;
|
|
|
|
.corners ( @radius )
|
|
}
|
|
// -------------------------------------------------- what it does: http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box-shadow/
|
|
|
|
.flex( @val: 1 ) {
|
|
-webkit-box-flex: @val;
|
|
-moz-box-flex: @val;
|
|
-o-box-flex: @val;
|
|
box-flex: @val;
|
|
}
|
|
// -------------------------------------------------- what it does: http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
|
|
|
|
.resize( @direction: both ) {
|
|
-webkit-resize: @direction;
|
|
-moz-resize: @direction;
|
|
-o-resize: @direction;
|
|
resize: @direction;
|
|
}
|
|
// -------------------------------------------------- what it does: http://www.w3schools.com/css3/css3_pr_resize.asp
|
|
|
|
.gradient(
|
|
@start: #000,
|
|
@end: #fff,
|
|
@switch: 100%
|
|
) {
|
|
background: @start;
|
|
background: -webkit-gradient(linear, 0 0, 0 100%, from(@start), color-stop(@switch, @end));
|
|
background: -moz-linear-gradient(top, @start, @end @switch);
|
|
background: -o-linear-gradient(top, @start, @end @switch);
|
|
background: linear-gradient(top, @start, @end @switch);
|
|
}
|
|
// -------------------------------------------------- what it does: http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/
|
|
|
|
.columns(
|
|
@count: 3,
|
|
@gap: 10
|
|
) {
|
|
-webkit-column-count: @count;
|
|
-moz-column-count: @count;
|
|
-o-column-count: @count;
|
|
column-count: @count;
|
|
|
|
-webkit-column-gap: @gap;
|
|
-moz-column-gap: @gap;
|
|
-o-column-gap: @gap;
|
|
column-gap: @gap;
|
|
}
|
|
// -------------------------------------------------- what it does: http://www.quirksmode.org/css/multicolumn.html
|
|
|
|
.boxSize( @type: border-box ) {
|
|
-webkit-box-sizing: @type;
|
|
-moz-box-sizing: @type;
|
|
-o-box-sizing: @type;
|
|
box-sizing: @type;
|
|
}
|
|
// -------------------------------------------------- what it does: http://css-tricks.com/box-sizing/
|
|
|
|
.appearance( @type: none) {
|
|
-webkit-appearance: @type;
|
|
-moz-appearance: @type;
|
|
-o-appearance: @type;
|
|
appearance: @type;
|
|
}
|
|
|