cronapp-framework-js
Version:
Javascript library for CronApp's projects
1 lines • 5.77 kB
CSS
.cronapp-icon{position:relative;box-sizing:content-box;justify-content:center;width:5em;height:5em;margin:1.25em auto 1.875em;border:.25em solid transparent;border-radius:50%;border-color:#000;font-family:inherit;line-height:5em;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cronapp-icon.cronapp-error{border-color:#f27474;color:#f27474}.cronapp-icon.cronapp-error .cronapp-x-mark{position:relative;flex-grow:1}.cronapp-icon.cronapp-error [class^=cronapp-x-mark-line]{display:block;position:absolute;top:2.3125em;width:2.9375em;height:.3125em;border-radius:.125em;background-color:#f27474}.cronapp-icon.cronapp-error [class^=cronapp-x-mark-line][class$=left]{left:1.0625em;transform:rotate(45deg)}.cronapp-icon.cronapp-error [class^=cronapp-x-mark-line][class$=right]{right:1em;transform:rotate(-45deg)}.cronapp-icon.cronapp-error{-webkit-animation:cronapp-animate-error-icon .5s;animation:cronapp-animate-error-icon .5s}.cronapp-icon.cronapp-error .cronapp-x-mark{-webkit-animation:cronapp-animate-error-x-mark .5s;animation:cronapp-animate-error-x-mark .5s}.cronapp-icon.cronapp-success{border-color:#a5dc86;color:#a5dc86}.cronapp-icon.cronapp-success [class^=cronapp-success-circular-line]{position:absolute;width:3.75em;height:7.5em;transform:rotate(45deg);border-radius:50%}.cronapp-icon.cronapp-success [class^=cronapp-success-circular-line][class$=left]{top:-.4375em;left:-2.0635em;transform:rotate(-45deg);transform-origin:3.75em 3.75em;border-radius:7.5em 0 0 7.5em}.cronapp-icon.cronapp-success [class^=cronapp-success-circular-line][class$=right]{top:-.6875em;left:1.875em;transform:rotate(-45deg);transform-origin:0 3.75em;border-radius:0 7.5em 7.5em 0}.cronapp-icon.cronapp-success .cronapp-success-ring{position:absolute;z-index:2;top:-.25em;left:-.25em;box-sizing:content-box;width:100%;height:100%;border:.25em solid rgba(165,220,134,.3);border-radius:50%}.cronapp-icon.cronapp-success .cronapp-success-fix{position:absolute;z-index:1;top:.5em;left:1.625em;width:.4375em;height:5.625em;transform:rotate(-45deg)}.cronapp-icon.cronapp-success [class^=cronapp-success-line]{display:block;position:absolute;z-index:2;height:.3125em;border-radius:.125em;background-color:#a5dc86}.cronapp-icon.cronapp-success [class^=cronapp-success-line][class$=tip]{top:2.875em;left:.8125em;width:1.5625em;transform:rotate(45deg)}.cronapp-icon.cronapp-success [class^=cronapp-success-line][class$=long]{top:2.375em;right:.5em;width:2.9375em;transform:rotate(-45deg)}.cronapp-icon.cronapp-success .cronapp-success-line-tip{-webkit-animation:cronapp-animate-success-line-tip .75s;animation:cronapp-animate-success-line-tip .75s}.cronapp-icon.cronapp-success .cronapp-success-line-long{-webkit-animation:cronapp-animate-success-line-long .75s;animation:cronapp-animate-success-line-long .75s}.cronapp-icon.cronapp-success .cronapp-success-circular-line-right{-webkit-animation:cronapp-rotate-success-circular-line 4.25s ease-in;animation:cronapp-rotate-success-circular-line 4.25s ease-in}.cronapp-icon.cronapp-warning{border-color:#ffed6b;color:#ffc038}.cronapp-icon.cronapp-info{border-color:#9de0f6;color:#3fc3ee}.cronapp-icon .cronapp-icon-content{display:flex;align-items:center;font-size:3.75em;justify-content:center;-webkit-animation:cronapp-hide .75s;animation:cronapp-hide .75s}@-webkit-keyframes cronapp-show{0%{transform:scale(.7)}45%{transform:scale(1.05)}80%{transform:scale(.95)}100%{transform:scale(1)}}@keyframes cronapp-show{0%{transform:scale(.7)}45%{transform:scale(1.05)}80%{transform:scale(.95)}100%{transform:scale(1)}}@-webkit-keyframes cronapp-hide{0%{transform:scale(1);opacity:1}100%{transform:scale(.5);opacity:0}}@keyframes cronapp-hide{0%{transform:scale(1);opacity:1}100%{transform:scale(.5);opacity:0}}@-webkit-keyframes cronapp-animate-success-line-tip{0%{top:1.1875em;left:.0625em;width:0}54%{top:1.0625em;left:.125em;width:0}70%{top:2.1875em;left:-.375em;width:3.125em}84%{top:3em;left:1.3125em;width:1.0625em}100%{top:2.8125em;left:.8125em;width:1.5625em}}@keyframes cronapp-animate-success-line-tip{0%{top:1.1875em;left:.0625em;width:0}54%{top:1.0625em;left:.125em;width:0}70%{top:2.1875em;left:-.375em;width:3.125em}84%{top:3em;left:1.3125em;width:1.0625em}100%{top:2.8125em;left:.8125em;width:1.5625em}}@-webkit-keyframes cronapp-animate-success-line-long{0%{top:3.375em;right:2.875em;width:0}65%{top:3.375em;right:2.875em;width:0}84%{top:2.1875em;right:0;width:3.4375em}100%{top:2.375em;right:.5em;width:2.9375em}}@keyframes cronapp-animate-success-line-long{0%{top:3.375em;right:2.875em;width:0}65%{top:3.375em;right:2.875em;width:0}84%{top:2.1875em;right:0;width:3.4375em}100%{top:2.375em;right:.5em;width:2.9375em}}@-webkit-keyframes cronapp-rotate-success-circular-line{0%{transform:rotate(-45deg)}5%{transform:rotate(-45deg)}12%{transform:rotate(-405deg)}100%{transform:rotate(-405deg)}}@keyframes cronapp-rotate-success-circular-line{0%{transform:rotate(-45deg)}5%{transform:rotate(-45deg)}12%{transform:rotate(-405deg)}100%{transform:rotate(-405deg)}}@-webkit-keyframes cronapp-animate-error-x-mark{0%{margin-top:1.625em;transform:scale(.4);opacity:0}50%{margin-top:1.625em;transform:scale(.4);opacity:0}80%{margin-top:-.375em;transform:scale(1.15)}100%{margin-top:0;transform:scale(1);opacity:1}}@keyframes cronapp-animate-error-x-mark{0%{margin-top:1.625em;transform:scale(.4);opacity:0}50%{margin-top:1.625em;transform:scale(.4);opacity:0}80%{margin-top:-.375em;transform:scale(1.15)}100%{margin-top:0;transform:scale(1);opacity:1}}@-webkit-keyframes cronapp-animate-error-icon{0%{transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0);opacity:1}}@keyframes cronapp-animate-error-icon{0%{transform:rotateX(100deg);opacity:0}100%{transform:rotateX(0);opacity:1}}