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

Flying-fast Metro future vision components

@import "../../common/less/common-variables.less";
@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); } }

@-webkit-keyframes pl-button-rounded-loading { 0% { -webkit-transform: rotate(0deg) scale(1); } 50% { -webkit-transform: rotate(180deg) scale(1.2); opacity: 0.75; } 100% { -webkit-transform: rotate(360deg) scale(1); } }
@-moz-keyframes pl-button-rounded-loading { 0% { -moz-transform: rotate(0deg) scale(1); } 50% { -moz-transform: rotate(180deg) scale(1.2); opacity: 0.75; } 100% { -moz-transform: rotate(360deg) scale(1); } }
@-ms-keyframes pl-button-rounded-loading { 0% { -ms-transform: rotate(0deg) scale(1); } 50% { -ms-transform: rotate(180deg) scale(1.2); opacity: 0.75; } 100% { -ms-transform: rotate(360deg) scale(1); } }
@-o-keyframes pl-button-rounded-loading { 0% { -o-transform: rotate(0deg) scale(1); } 50% { -o-transform: rotate(180deg) scale(1.2); opacity: 0.75; } 100% { -o-transform: rotate(360deg) scale(1); } }
@keyframes pl-button-rounded-loading { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); opacity: 0.75; } 100% { transform: rotate(360deg) scale(1); } }

.pl-button-rounded-selector {
  position: absolute;
  top: -4px;
  left: 6px;
  width: 3rem;
  height: 4rem;
  border: 4px solid @accentColor;
  border-radius: 50%;
  .transform-origin(center center);
  .transform(scale(0));
  .transition(all 0.55s @easeOutQuart);

  &.show {
    .transform(scale(1));
  }

  &.loading {
    .animation(pl-button-rounded-loading 1s linear infinite);
  }

  &::before {
    content: '';
    position: absolute;
    top: 1px;
    left: -9px;
    width: 4rem;
    height: 3rem;
    border-width: 4px;
    border-style: solid;
    border-color: inherit;
    border-radius: 50%;
    .transform-origin(center center);
  }
}

.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;
  }
}