plumes/public/buttons/pl-button-indicator.min.css

Flying-fast Metro future vision components

.pl-button-indicator,.pl-button-indicator-selector{-webkit-transition:all .55s cubic-bezier(.165,.84,.44,1);-moz-transition:all .55s cubic-bezier(.165,.84,.44,1);-ms-transition:all .55s cubic-bezier(.165,.84,.44,1);-o-transition:all .55s cubic-bezier(.165,.84,.44,1)}@-webkit-keyframes pl-button-indicator-show{0%{-webkit-transform:scale(0)}100%{-webkit-transform:scale(1)}}@-moz-keyframes pl-button-indicator-show{0%{-moz-transform:scale(0)}100%{-moz-transform:scale(1)}}@-ms-keyframes pl-button-indicator-show{0%{-ms-transform:scale(0)}100%{-ms-transform:scale(1)}}@-o-keyframes pl-button-indicator-show{0%{-o-transform:scale(0)}100%{-o-transform:scale(1)}}@keyframes pl-button-indicator-show{0%{transform:scale(0)}100%{transform:scale(1)}}@-webkit-keyframes pl-button-indicator-loading{0%{-webkit-transform:rotate(0) scale(1)}50%{-webkit-transform:rotate(180deg) scale(1.2);opacity:.75}100%{-webkit-transform:rotate(360deg) scale(1)}}@-moz-keyframes pl-button-indicator-loading{0%{-moz-transform:rotate(0) scale(1)}50%{-moz-transform:rotate(180deg) scale(1.2);opacity:.75}100%{-moz-transform:rotate(360deg) scale(1)}}@-ms-keyframes pl-button-indicator-loading{0%{-ms-transform:rotate(0) scale(1)}50%{-ms-transform:rotate(180deg) scale(1.2);opacity:.75}100%{-ms-transform:rotate(360deg) scale(1)}}@-o-keyframes pl-button-indicator-loading{0%{-o-transform:rotate(0) scale(1)}50%{-o-transform:rotate(180deg) scale(1.2);opacity:.75}100%{-o-transform:rotate(360deg) scale(1)}}@keyframes pl-button-indicator-loading{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.2);opacity:.75}100%{transform:rotate(360deg) scale(1)}}.pl-button-indicator-selector{position:absolute;top:-5px;left:6px;width:3rem;height:4rem;border:4px solid #00BCD4;border-radius:50%;-webkit-transform-origin:center center;-moz-transform-origin:center center;-ms-transform-origin:center center;-o-transform-origin:center center;transform-origin:center center;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);transition:all .55s cubic-bezier(.165,.84,.44,1)}.pl-button-indicator-selector.show{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.pl-button-indicator-selector.loading{-webkit-animation:pl-button-indicator-loading 1s linear infinite;-moz-animation:pl-button-indicator-loading 1s linear infinite;-ms-animation:pl-button-indicator-loading 1s linear infinite;-o-animation:pl-button-indicator-loading 1s linear infinite;animation:pl-button-indicator-loading 1s linear infinite}.pl-button-indicator-selector::before{content:'';position:absolute;top:1px;left:-9px;width:4rem;height:3rem;border-width:4px;border-style:solid;border-color:inherit;border-radius:50%;-webkit-transform-origin:center center;-moz-transform-origin:center center;-ms-transform-origin:center center;-o-transform-origin:center center;transform-origin:center center}.pl-button-indicator{cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;top:-.5em;width:5rem;height:5rem;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;overflow:hidden;border:none;border-radius:0;padding:0;margin:0;-webkit-animation:pl-button-indicator-show .55s cubic-bezier(.165,.84,.44,1);-moz-animation:pl-button-indicator-show .55s cubic-bezier(.165,.84,.44,1);-ms-animation:pl-button-indicator-show .55s cubic-bezier(.165,.84,.44,1);-o-animation:pl-button-indicator-show .55s cubic-bezier(.165,.84,.44,1);animation:pl-button-indicator-show .55s cubic-bezier(.165,.84,.44,1);transition:all .55s cubic-bezier(.165,.84,.44,1)}.pl-button-indicator .pl-button-indicator-bg{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:3rem;-webkit-transition:all .55s cubic-bezier(.165,.84,.44,1);-moz-transition:all .55s cubic-bezier(.165,.84,.44,1);-ms-transition:all .55s cubic-bezier(.165,.84,.44,1);-o-transition:all .55s cubic-bezier(.165,.84,.44,1);transition:all .55s cubic-bezier(.165,.84,.44,1)}.pl-button-indicator .pl-button-indicator-image,.pl-button-indicator .pl-button-indicator-image:hover,.pl-button-indicator .pl-button-indicator-notification-picture{position:absolute;top:.5rem;left:.5rem;height:4rem;width:4rem;border:none;border-radius:50%;background-size:cover;background-position:50%;background-repeat:no-repeat;-webkit-transition:all .7s cubic-bezier(.165,.84,.44,1);-moz-transition:all .7s cubic-bezier(.165,.84,.44,1);-ms-transition:all .7s cubic-bezier(.165,.84,.44,1);-o-transition:all .7s cubic-bezier(.165,.84,.44,1);transition:all .7s cubic-bezier(.165,.84,.44,1)}.pl-button-indicator .pl-button-indicator-image.hide,.pl-button-indicator .pl-button-indicator-image:hover.hide,.pl-button-indicator .pl-button-indicator-notification-picture,.pl-button-indicator .pl-button-indicator-notification-picture.hide{opacity:0}.pl-button-indicator .pl-button-indicator-notification-message{opacity:0;position:absolute;top:.9rem;left:10rem;width:17.5rem;white-space:normal;text-align:left;color:#fff;text-transform:none;font-weight:400;font-size:1.2rem;line-height:1.4;-webkit-transition:all 1s cubic-bezier(.165,.84,.44,1);-moz-transition:all 1s cubic-bezier(.165,.84,.44,1);-ms-transition:all 1s cubic-bezier(.165,.84,.44,1);-o-transition:all 1s cubic-bezier(.165,.84,.44,1);transition:all 1s cubic-bezier(.165,.84,.44,1)}.pl-button-indicator .pl-button-indicator-notification-message strong{font-weight:600}.pl-button-indicator .pl-button-indicator-number{opacity:0;position:absolute;right:0;bottom:0;box-sizing:border-box;min-width:2rem;height:2rem;line-height:2;color:#fff;border-radius:1em;padding:0 .4rem;-webkit-transition:all 1s cubic-bezier(.165,.84,.44,1);-moz-transition:all 1s cubic-bezier(.165,.84,.44,1);-ms-transition:all 1s cubic-bezier(.165,.84,.44,1);-o-transition:all 1s cubic-bezier(.165,.84,.44,1);transition:all 1s cubic-bezier(.165,.84,.44,1)}.pl-button-indicator .pl-button-indicator-number.showed,.pl-button-indicator.opened .pl-button-indicator-notification-picture{opacity:1}.pl-button-indicator.opened{width:25rem}.pl-button-indicator.opened .pl-button-indicator-image,.pl-button-indicator.opened .pl-button-indicator-image:hover,.pl-button-indicator.opened .pl-button-indicator-notification-picture{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);-o-transform:rotate(-360deg);transform:rotate(-360deg)}.pl-button-indicator.opened .pl-button-indicator-notification-message{opacity:1;left:5.5rem}