hangoutsslackgmailskypefacebook-workplaceoutlookemailmicrosoft-teamsdiscordmessengercustom-servicesmacoslinuxwindowsinboxwhatsappicloudtweetdeckhipchattelegram
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
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; |
|
} |
|
} |