Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
133 lines (116 sloc) 4.85 KB
/*
SCSS3 (c) 2011 Motion Média
Inspired by http://css3please.com/
*/
// --- Extensions
.clearfix {
zoom: 1;
&:before, &:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
&:after { clear: both; }
}
.reset-box {
margin: 0;
padding: 0;
}
// --- Mixins
// Border radius
@mixin border-radius($top: 8px, $left: false, $bottom: false, $right: false) {
@if($left == false) { $left: $top; }
@if($bottom == false) { $bottom: $top; }
@if($right == false) { $right: $left; }
-moz-border-radius: $top $left $bottom $right; // FF1-3.6
-webkit-border-radius: $top $left $bottom $right; // Saf3-4, iOS 1-3.2, Android ≤1.6
border-radius: $top $left $bottom $right; // Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+
// useful if you don't want a bg color from leaking outside the border:
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
// Opacity
@mixin opacity($val) {
-khtml-opacity: $val/100; // Safari 1.x (pre WebKit)
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$val})"; // IE7-IE8
filter: alpha(opacity=$val); // IE6-IE8
opacity: $val/100; // Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+
}
// Box shadow
@mixin box-shadow($top: 1px, $left: 1px, $size: 4px, $color: #000) {
-webkit-box-shadow: $top $left $size $color; // Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+
-moz-box-shadow: $top $left $size $color; // FF3.5 - 3.6
box-shadow: $top $left $size $color; // Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5
}
// Background gradient
@mixin background-gradient($start: #ffffff, $end: #000000, $direction: top, $fallback: false) {
@if($fallback== false) { $fallback: $start; }
background-color: $fallback;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$start}', EndColorStr='#{$end}')";
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$start}', EndColorStr='#{$end}'); // IE6-IE8
background-image: -webkit-gradient(linear, left $direction, left bottom, from($start), to($end)); // Saf4+, Chrome
background-image: -webkit-linear-gradient($direction, $start, $end); // Chrome 10+, Saf5.1+, iOS 5+
background-image: -moz-linear-gradient($direction, $start, $end); // FF3.6
background-image: -ms-linear-gradient($direction, $start, $end); // IE10
background-image: -o-linear-gradient($direction, $start, $end); // Opera 11.10+
background-image: linear-gradient($direction bottom, $start, $end);
}
// Rotate
@mixin rotate($deg) {
-webkit-transform: rotate($deg); // Saf3.1+, Chrome
-moz-transform: rotate($deg); // FF3.5+
-ms-transform: rotate($deg); // IE9
-o-transform: rotate($deg); // Opera 10.5
transform: rotate($deg);
}
// Scale
@mixin scale($val) {
-webkit-transform: scale($val); // Saf3.1+, Chrome
-moz-transform: scale($val); // FF3.5+
-ms-transform: scale($val); // IE9
-o-transform: scale($val); // Opera 10.5+
transform: scale($val);
}
// 3D transform
@mixin transform-3d($deg: 180deg, $perspective: 300, $style: preserve-3d) {
-webkit-perspective: $perspective; // Saf4+, Chrome 12+
-moz-perspective: $perspective; // FF10+
-ms-perspective: $perspective; // IE10+
perspective: $perspective;
-webkit-transform: rotateY($deg); -webkit-transform-style: $style;
-moz-transform: rotateY($deg); -moz-transform-style: $style;
-ms-transform: rotateY($deg); -ms-transform-style: $style;
transform: rotateY($deg); transform-style: $style;
}
// Transition
@mixin transition($which, $duration: 0.3s, $effect: ease-out) {
-webkit-transition: $which $duration $effect; // Saf3.2+, Chrome
-moz-transition: $which $duration $effect; // FF4+
-ms-transition: $which $duration $effect; // IE10
-o-transition: $which $duration $effect; // Opera 10.5+
transition: $which $duration $effect;
}
// Background size
@mixin background-size($x: 100%, $y: 100%) {
-webkit-background-size: $x $y; // Saf3-4
-moz-background-size: $x $y; // FF3.6
background-size: $x $y; // Opera, IE9, Saf5, Chrome, FF4
}
// Box columns
@mixin box-column($count: 2, $gap: 10px) {
-webkit-column-count: $count; -webkit-column-gap: $gap; // Saf3, Chrome
-moz-column-count: $count; -moz-column-gap: $gap; // FF3.5+
column-count: $count; column-gap: $gap; // Opera 11+
}
// Tab size
@mixin tab-size($size: 2) {
-moz-tab-size: $size; // Firefox 4+
-o-tab-size: $size; // Opera 10.60+
tab-size: $size;
}