https://github.com/sha-red/compass-mixins/tree/master/lib
extended with more sass frameworks and as django app.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.4 KiB
88 lines
2.4 KiB
![]()
12 years ago
|
@import "shared";
|
||
|
|
||
|
@warn "This version of the transform module has been deprecated and will be removed.";
|
||
|
|
||
|
// CSS Transform and Transform-Origin
|
||
|
|
||
|
// Apply a transform sent as a complete string.
|
||
|
|
||
|
@mixin apply-transform($transform) {
|
||
|
@include experimental(transform, $transform,
|
||
![]()
11 years ago
|
-moz, -webkit, -o, not(-ms), not(-khtml), official
|
||
![]()
12 years ago
|
);
|
||
|
}
|
||
|
|
||
|
// Apply a transform-origin sent as a complete string.
|
||
|
|
||
|
@mixin apply-origin($origin) {
|
||
|
@include experimental(transform-origin, $origin,
|
||
![]()
11 years ago
|
-moz, -webkit, -o, not(-ms), not(-khtml), official
|
||
![]()
12 years ago
|
);
|
||
|
}
|
||
|
|
||
|
// transform-origin requires x and y coordinates
|
||
|
//
|
||
|
// * only applies the coordinates if they are there so that it can be called by scale, rotate and skew safely
|
||
|
|
||
|
@mixin transform-origin($originx: 50%, $originy: 50%) {
|
||
|
@if $originx or $originy {
|
||
|
@if $originy {
|
||
|
@include apply-origin($originx or 50% $originy);
|
||
|
} @else {
|
||
|
@include apply-origin($originx);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// A full transform mixin with everything you could want
|
||
|
//
|
||
|
// * including origin adjustments if you want them
|
||
|
// * scale, rotate and skew require units of degrees(deg)
|
||
|
// * scale takes a multiplier, rotate and skew take degrees
|
||
|
|
||
|
@mixin transform(
|
||
|
$scale: 1,
|
||
|
$rotate: 0deg,
|
||
|
$transx: 0,
|
||
|
$transy: 0,
|
||
|
$skewx: 0deg,
|
||
|
$skewy: 0deg,
|
||
|
$originx: false,
|
||
|
$originy: false
|
||
|
) {
|
||
|
$transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
|
||
|
@include apply-transform($transform);
|
||
|
@include transform-origin($originx, $originy);
|
||
|
}
|
||
|
|
||
|
// Transform Partials
|
||
|
//
|
||
|
// These work well on their own, but they don't add to each other, they override.
|
||
|
// Use them with extra origin args, or along side +transform-origin
|
||
|
|
||
|
// Adjust only the scale, with optional origin coordinates
|
||
|
|
||
|
@mixin scale($scale: 1.25, $originx: false, $originy: false) {
|
||
|
@include apply-transform(scale($scale));
|
||
|
@include transform-origin($originx, $originy);
|
||
|
}
|
||
|
|
||
|
// Adjust only the rotation, with optional origin coordinates
|
||
|
|
||
|
@mixin rotate($rotate: 45deg, $originx: false, $originy: false) {
|
||
|
@include apply-transform(rotate($rotate));
|
||
|
@include transform-origin($originx, $originy);
|
||
|
}
|
||
|
|
||
|
// Adjust only the translation
|
||
|
|
||
|
@mixin translate($transx: 0, $transy: 0) {
|
||
|
@include apply-transform(translate($transx, $transy));
|
||
|
}
|
||
|
|
||
|
// Adjust only the skew, with optional origin coordinates
|
||
|
@mixin skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {
|
||
|
@include apply-transform(skew($skewx, $skewy));
|
||
|
@include transform-origin($originx, $originy);
|
||
|
}
|