This commit is contained in:
davegandy 2013-05-23 17:10:47 -04:00
parent 584f720436
commit fe004a9336
4 changed files with 38 additions and 5 deletions

View file

@ -0,0 +1,6 @@
<a href="#"><i class="icon-flag"></i>&nbsp; normal</a><br>
<a href="#"><i class="icon-flag icon-rotate-90"></i>&nbsp; icon-rotate-90</a><br>
<a href="#"><i class="icon-flag icon-rotate-180"></i>&nbsp; icon-rotate-180</a><br>
<a href="#"><i class="icon-flag icon-rotate-270"></i>&nbsp; icon-rotate-270</a><br>
<a href="#"><i class="icon-flag icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal</a><br>
<a href="#"><i class="icon-flag icon-flip-vertical"></i>&nbsp; icon-flip-vertical</a>

View file

@ -0,0 +1,6 @@
<a class="btn" href="#"><i class="icon-flag"></i>&nbsp; normal</a><br>
<a class="btn" href="#"><i class="icon-flag icon-rotate-90"></i>&nbsp; icon-rotate-90</a><br>
<a class="btn" href="#"><i class="icon-flag icon-rotate-180"></i>&nbsp; icon-rotate-180</a><br>
<a class="btn" href="#"><i class="icon-flag icon-rotate-270"></i>&nbsp; icon-rotate-270</a><br>
<a class="btn" href="#"><i class="icon-flag icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal</a><br>
<a class="btn" href="#"><i class="icon-flag icon-flip-vertical"></i>&nbsp; icon-flip-vertical</a>

View file

@ -35,7 +35,7 @@
}
/* Icon rotations and mirroring */
.icon-rotate-90:before{
.icon-rotate-90:before {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
@ -44,7 +44,7 @@
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.icon-rotate-180:before{
.icon-rotate-180:before {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
@ -53,7 +53,7 @@
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.icon-rotate-270:before{
.icon-rotate-270:before {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
@ -76,4 +76,11 @@
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
}
/* ensure rotation occurs inside anchor tags */
a {
.icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical {
&:before { display: inline-block; }
}
}

View file

@ -602,5 +602,19 @@ relative_path: ../
{% include tests/rotated-flipped.html %}
</div>
</div>
</div>
</div>
<h4>Mirrored and rotated icons inside anchors and buttons</h4>
<div class="row">
<div class="span6">
<div class="well">
{% include tests/rotated-flipped-inside-anchor.html %}
</div>
</div>
<div class="span6">
<div class="well">
{% include tests/rotated-flipped-inside-btn.html %}
</div>
</div>
</div>
</section>