plumes/features/buttons/css/pl-button-rounded.less

Flying-fast Metro future vision components

@import "../../common/less/common-mixins.less";

@-webkit-keyframes pl-button-rounded-show { 0% { -webkit-transform: scale(0); } 100% { -webkit-transform: scale(1); } }
@-moz-keyframes pl-button-rounded-show { 0% { -moz-transform: scale(0); } 100% { -moz-transform: scale(1); } }
@-ms-keyframes pl-button-rounded-show { 0% { -ms-transform: scale(0); } 100% { -ms-transform: scale(1); } }
@-o-keyframes pl-button-rounded-show { 0% { -o-transform: scale(0); } 100% { -o-transform: scale(1); } }
@keyframes pl-button-rounded-show { 0% { transform: scale(0); } 100% { transform: scale(1); } }

.pl-button-rounded {
  .noselect(pointer);
  position: relative;
  width: 4rem;
  height: 4rem;
  .rounded(50%);
  overflow: hidden;
  border: none;
  padding: 0;
  margin: 0;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;

  .animation(pl-button-rounded-show 0.55s @easeOutQuart);
  .transition(all 0.55s @easeOutQuart);

  i {
    font-size: 2rem;
    line-height: 4rem;
    vertical-align: middle;
  }
}