Форк Rambox
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.

64 lines
2.1 KiB

// rotates an element vertically using a css3 transform
@mixin rotate-element(
$angle, // angle of rotation (90, 180, or 270)
$include-ie: $include-ie,
$background-color: null, // bg color to use for ms chroma filter
$origin: null
) {
$rotation-origin: null;
$rotation: rotate(#{$angle}deg);
$ie-rotation: null;
@if $angle == 90 {
$ie-rotation: 1;
$rotation-origin: 0 0;
} @else if $angle == 180 {
$rotation-origin: 50% 50%;
$ie-rotation: 2;
} @else if $angle == 270 {
$ie-rotation: 3;
$rotation-origin: 100% 0;
}
@if not is-null($origin) {
$rotation-origin: $origin;
}
-webkit-transform: $rotation;
-webkit-transform-origin: $rotation-origin;
-moz-transform: $rotation;
-moz-transform-origin: $rotation-origin;
-o-transform: $rotation;
-o-transform-origin: $rotation-origin;
-ms-transform: $rotation;
-ms-transform-origin: $rotation-origin;
transform: $rotation;
transform-origin: $rotation-origin;
@if $include-ie {
// In IE8 we have to use a BasicImage filter to achieve 90 or 270 degree
// rotation of the text container. Text rotated using this methodology does
// not display using ClearType font unless the element has a background. To
// work around this, we apply a background color to the text container element
// and then use a Chroma filter to display all pixels of that color as transparent.
.#{$prefix}ie8 & {
@if not is-null($background-color) {
background-color: $background-color;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$ie-rotation}),
progid:DXImageTransform.Microsoft.Chroma(color=#{$background-color});
} @else {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$ie-rotation});
}
}
}
}
@mixin unrotate-element() {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
@if $include-ie {
background-color: transparent;
filter: none;
}
}