Created
September 13, 2013 13:06
-
-
Save ninjapanzer/6550440 to your computer and use it in GitHub Desktop.
Rortated headers 45degrees
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
&.rotated{ | |
tr{ | |
& th:first-child div{ | |
width: 100%; | |
} | |
background: transparent; | |
height: 80px; | |
&.ie{ | |
background: lighten($body_text_color, 60%); | |
height: 20px; | |
& div{ | |
height: 100px; | |
font-size:11px; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */ | |
left: 0px; | |
border-right: 0px solid; | |
} | |
& span{ | |
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */ | |
bottom: 60px; | |
left: 0; | |
} | |
} | |
& th{ | |
height: 3.7em; | |
vertical-align: bottom; | |
& td{ | |
padding: 0 0 0 0; | |
} | |
& div{ | |
position: relative; | |
width: 3.5em; | |
font-size: 12px; | |
line-height: 0.8; | |
-ms-transform:skew(-45deg,0deg); | |
-moz-transform:skew(-45deg,0deg); | |
-webkit-transform:skew(-45deg,0deg); | |
-o-transform:skew(-45deg,0deg); | |
transform:skew(-45deg,0deg); | |
top: 0px; | |
height: 100%; | |
left: 30px; | |
border-left: 1px solid; | |
border-right: 1px solid; | |
border-top: 1px solid; | |
background:#EEEFEF; | |
& span{ | |
-ms-transform:skew(45deg,0deg) rotate(315deg); | |
-moz-transform:skew(45deg,0deg) rotate(315deg); | |
-webkit-transform:skew(45deg,0deg) rotate(315deg); | |
-o-transform:skew(45deg,0deg) rotate(315deg); | |
transform:skew(45deg,0deg) rotate(315deg); | |
position: absolute; | |
bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/ | |
left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/ | |
display: inline-block; | |
line-height: 1.1; | |
// width: 100%; | |
width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/ | |
text-align: left; | |
// white-space: nowrap; /*whether to display in one line or not*/ | |
} | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment