git.roojs.org Git - bootswatch/blob - bower_components/font-awesome/src/assets/font-awesome/less/extras.less

   1 /* EXTRAS
   2  * -------------------------- */
   3
   4 /* Stacked and layered icon */
   5 .icon-stack();
   6
   7 /* Animated rotating icon */
   8 .icon-spin {
   9   display: inline-block;
  10   -moz-animation: spin 2s infinite linear;
  11   -o-animation: spin 2s infinite linear;
  12   -webkit-animation: spin 2s infinite linear;
  13   animation: spin 2s infinite linear;
  14 }
  15
  16 /* Prevent stack and spinners from being taken inline when inside a link */
  17 a .icon-stack,
  18 a .icon-spin {
  19   display: inline-block;
  20   text-decoration: none;
  21 }
  22
  23 @-moz-keyframes spin {
  24   0% { -moz-transform: rotate(0deg); }
  25   100% { -moz-transform: rotate(359deg); }
  26 }
  27 @-webkit-keyframes spin {
  28   0% { -webkit-transform: rotate(0deg); }
  29   100% { -webkit-transform: rotate(359deg); }
  30 }
  31 @-o-keyframes spin {
  32   0% { -o-transform: rotate(0deg); }
  33   100% { -o-transform: rotate(359deg); }
  34 }
  35 @-ms-keyframes spin {
  36   0% { -ms-transform: rotate(0deg); }
  37   100% { -ms-transform: rotate(359deg); }
  38 }
  39 @keyframes spin {
  40   0% { transform: rotate(0deg); }
  41   100% { transform: rotate(359deg); }
  42 }
  43
  44 /* Icon rotations and mirroring */
  45 .icon-rotate-90:before {
  46   -webkit-transform: rotate(90deg);
  47   -moz-transform: rotate(90deg);
  48   -ms-transform: rotate(90deg);
  49   -o-transform: rotate(90deg);
  50   transform: rotate(90deg);
  51   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  52 }
  53
  54 .icon-rotate-180:before {
  55   -webkit-transform: rotate(180deg);
  56   -moz-transform: rotate(180deg);
  57   -ms-transform: rotate(180deg);
  58   -o-transform: rotate(180deg);
  59   transform: rotate(180deg);
  60   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  61 }
  62
  63 .icon-rotate-270:before {
  64   -webkit-transform: rotate(270deg);
  65   -moz-transform: rotate(270deg);
  66   -ms-transform: rotate(270deg);
  67   -o-transform: rotate(270deg);
  68   transform: rotate(270deg);
  69   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  70 }
  71
  72 .icon-flip-horizontal:before {
  73   -webkit-transform: scale(-1, 1);
  74   -moz-transform: scale(-1, 1);
  75   -ms-transform: scale(-1, 1);
  76   -o-transform: scale(-1, 1);
  77   transform: scale(-1, 1);
  78 }
  79
  80 .icon-flip-vertical:before {
  81   -webkit-transform: scale(1, -1);
  82   -moz-transform: scale(1, -1);
  83   -ms-transform: scale(1, -1);
  84   -o-transform: scale(1, -1);
  85   transform: scale(1, -1);
  86 }
  87
  88 /* ensure rotation occurs inside anchor tags */
  89 a {
  90   .icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical {
  91     &:before { display: inline-block; }
  92   }
  93 }