phorge-phorge/webroot/rsrc/css/font/phui-font-icon-base.css

/**
 * @provides phui-font-icon-base-css
 */

.phui-font-fa {
  display: inline-block;
  color: {$darkgreytext};
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ph-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.ph-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.ph-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

.ph-flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
  -webkit-transform: scale(-1, 1);
  -moz-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.ph-flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
  -webkit-transform: scale(1, -1);
  -moz-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  transform: scale(1, -1);
}

.ph-spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}
@-ms-keyframes spin {
  0% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

.phui-icon-view.dark {
  color: {$darkgreytext};
}
.phui-icon-view.bluegrey {
  color: {$bluetext};
}
.phui-icon-view.white {
  color: #fff;
}
.phui-icon-view.red  {
  color: {$red};
}
.phui-icon-view.orange {
  color: {$orange};
}
.phui-icon-view.yellow {
  color: {$yellow};
}
.phui-icon-view.green {
  color: {$green}
}
.phui-icon-view.blue {
  color: {$blue};
}
.phui-icon-view.sky {
  color: {$sky};
}
.phui-icon-view.indigo {
  color: {$indigo};
}
.phui-icon-view.pink {
  color: {$pink};
}
.phui-icon-view.fire {
  color: {$fire};
}
.phui-icon-view.violet {
  color: {$violet};
}
.phui-icon-view.lightbluetext {
  color: {$lightbluetext};
}
.phui-icon-view.lightgreytext,
.phui-icon-view.grey {
  color: rgba({$alphagrey},0.3);
}

/* Backgrounds */

.phui-icon-view.bg-dark {
  background-color: {$darkgreytext};
}
.phui-icon-view.bg-bluegrey {
  background-color: {$bluetext};
}
.phui-icon-view.bg-red  {
  background-color: {$red};
}
.phui-icon-view.bg-orange {
  background-color: {$orange};
}
.phui-icon-view.bg-yellow {
  background-color: {$yellow};
}
.phui-icon-view.bg-green {
  background-color: {$green}
}
.phui-icon-view.bg-blue {
  background-color: {$blue};
}
.phui-icon-view.bg-sky {
  background-color: {$sky};
}
.phui-icon-view.bg-indigo {
  background-color: {$indigo};
}
.phui-icon-view.bg-pink {
  background-color: {$pink};
}
.phui-icon-view.bg-fire {
  background-color: {$fire};
}
.phui-icon-view.bg-violet {
  background-color: {$violet};
}

/* Hovers */

.device-desktop a.phui-icon-view.lightgreytext:hover,
.device-desktop a.phui-icon-view.grey:hover {
  color: {$darkgreytext};
}

.device-desktop a.phui-icon-view.bluegrey:hover {
  color: {$darkbluetext};
}