cronapp-framework-js 2.9.1-SNAPSHOT.2 → 2.9.1-SP.2

package/components/templates/form.template.html

@@ -3,39 +3,39 @@
     <div class="tool-bar" ng-hide="datasource.editing || datasource.inserting">
       <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-startInserting">
         <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.startInserting()" aria-label="{{'StartInserting' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
-          <i class="glyphicon glyphicon-plus color-white" icon-theme="color-white"></i>
+          <i class="glyphicon glyphicon-plus" icon-theme=""></i>
         </button>
       </div>
       <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-startEditing">
         <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.startEditing()" aria-label="{{'startEditing' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
-          <i class="glyphicon glyphicon-pencil color-white" icon-theme="color-white"></i>
+          <i class="glyphicon glyphicon-pencil" icon-theme=""></i>
         </button>
       </div>
       <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-previous">
         <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.previous()" ng-disabled="!datasource.hasPrevious()" aria-label="{{'Before' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
-          <i class="glyphicon glyphicon-chevron-left color-white" icon-theme="color-white"></i>
+          <i class="glyphicon glyphicon-chevron-left" icon-theme=""></i>
         </button>
       </div>
       <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-next">
         <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.next()" ng-disabled="!datasource.hasNext()" aria-label="{{'Next' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
-          <i class="glyphicon glyphicon-chevron-right color-white" icon-theme="color-white"></i>
+          <i class="glyphicon glyphicon-chevron-right" icon-theme=""></i>
         </button>
       </div>
       <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-remove">
         <button class="btn k-button btn-block btn-danger btn-fab" ng-click="datasource.remove()" aria-label="{{'Remove' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-danger" xattr-disabled="">
-          <i class="glyphicon glyphicon-remove color-white" icon-theme="color-white"></i>
+          <i class="glyphicon glyphicon-remove" icon-theme=""></i>
         </button>
       </div>
     </div>
     <div class="active-bar" ng-hide="!datasource.editing &amp;&amp; !datasource.inserting">
       <div class="component-holder ng-scope" data-component="crn-button" id="btn_crud_post_${RANDOM}">
         <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.post()" aria-label="{{'SaveChanges' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
-          <i class="glyphicon glyphicon-ok color-white" icon-theme="color-white"></i>
+          <i class="glyphicon glyphicon-ok" icon-theme=""></i>
         </button>
       </div>
       <div class="component-holder ng-scope" data-component="crn-button" id="btn_crud_cancel_${RANDOM}">
         <button class="btn k-button btn-block btn-danger btn-fab" ng-click="datasource.cancel()" aria-label="{{'CancelChanges' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-danger" xattr-disabled="">
-          <i class="glyphicon  glyphicon-ban-circle color-white" icon-theme="color-white"></i>
+          <i class="glyphicon  glyphicon-ban-circle" icon-theme=""></i>
         </button>
       </div>
     </div>

package/components/templates/icon.template.html

@@ -1 +1 @@
-<i class="fa fa-star font-size-theme color-theme" icon-size="font-size-theme" icon-theme="color-theme"></i>
+<i class="fa fa-star font-size-default color-default" icon-size="font-size-default" icon-theme="color-default"></i>

package/components/templates/image-menu.template.html

@@ -1 +1 @@
-<img class="user-avatar" alt="Icon user" src="{{session.user.picture || 'node_modules/cronapp-framework-js/dist/img/img-user.svg'}}" style="max-height:22px;max-width:22px" data-component="crn-image-menu" id="crn-image-menu-${RANDOM}">
+<img class="user-avatar" alt="Icon user" src="{{session.user.picture || 'node_modules/cronapp-framework-js/dist/img/img-user.svg'}}" data-component="crn-image-menu" id="crn-image-menu-${RANDOM}">

package/components/templates/navbar.template.html

@@ -1,16 +1,15 @@
 <nav class="navbar navbar-default">
-  <div class="container-fluid"> 
-    <div class="navbar-header"> 
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
-      <a class="component-holder ng-binding ng-scope navbar-brand" data-component="crn-image" href="#/home"> <img alt="cronapp-logo" src="node_modules/cronapp-framework-js/dist/img/logo.svg" style="width:101px; margin-top:-4px" id="crn-navbar-logo" data-component="crn-image"> </a>
-    </div>  
-    <div id="navbar" class="navbar-collapse collapse"> 
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
+      <a class="component-holder ng-binding ng-scope navbar-brand" data-component="crn-image" href="#/home"> <img alt="cronapp-logo" src="node_modules/cronapp-framework-js/img/cronapp-logo-login.png" id="crn-navbar-logo" data-component="crn-image"> </a>
+    </div>
+    <div id="navbar" class="navbar-collapse collapse">
       <ul class="nav navbar-nav" style="float:none">
         <div class="component-holder ng-scope col-md-10" data-component="crn-dynamic-menu" id="crn-dynamic-menu">
-          <cron-dynamic-menu options="{&quot;subMenuOptions&quot;:[{&quot;id&quot;:&quot;qxfhylqx9sh1&quot;,&quot;name&quot;:&quot;Menu 1&quot;,&quot;title&quot;:&quot;Menu 1&quot;,&quot;level&quot;:1,&quot;menuItems&quot;:[{&quot;id&quot;:&quot;qe1juldmy0kk&quot;,&quot;name&quot;:&quot;Menu A&quot;,&quot;title&quot;:&quot;Menu A&quot;,&quot;level&quot;:2,&quot;menuItems&quot;:[]}]},{&quot;id&quot;:&quot;1jenqtqrij8mb&quot;,&quot;name&quot;:&quot;Menu 2&quot;,&quot;title&quot;:&quot;Menu 2&quot;,&quot;level&quot;:1,&quot;menuItems&quot;:[{&quot;id&quot;:&quot;urgv85ip8603&quot;,&quot;name&quot;:&quot;Menu B&quot;,&quot;title&quot;:&quot;Menu B&quot;,&quot;level&quot;:2,&quot;menuItems&quot;:[]}]}]}" data-component="crn-dynamic-menu" class="component-holder" id="crn-dynamic-menu-226965">          Dynamic Menu
-        </cron-dynamic-menu>
+          <cron-dynamic-menu options="{&quot;subMenuOptions&quot;:[{&quot;id&quot;:&quot;qxfhylqx9sh1&quot;,&quot;name&quot;:&quot;Menu 1&quot;,&quot;title&quot;:&quot;Menu 1&quot;,&quot;level&quot;:1,&quot;menuItems&quot;:[{&quot;id&quot;:&quot;qe1juldmy0kk&quot;,&quot;name&quot;:&quot;Menu A&quot;,&quot;title&quot;:&quot;Menu A&quot;,&quot;level&quot;:2,&quot;menuItems&quot;:[]}]},{&quot;id&quot;:&quot;1jenqtqrij8mb&quot;,&quot;name&quot;:&quot;Menu 2&quot;,&quot;title&quot;:&quot;Menu 2&quot;,&quot;level&quot;:1,&quot;menuItems&quot;:[{&quot;id&quot;:&quot;urgv85ip8603&quot;,&quot;name&quot;:&quot;Menu B&quot;,&quot;title&quot;:&quot;Menu B&quot;,&quot;level&quot;:2,&quot;menuItems&quot;:[]}]}]}">Dynamic Menu</cron-dynamic-menu>
         </div>
       </ul>
     </div>
   </div>
-</nav>
+</nav>

package/components/templates/panel.template.html

@@ -1,4 +1,4 @@
-<div class="panel panel-primary" xattr-theme="panel-primary" data-container="true" id="">
+<div class="panel panel-default" xattr-theme="panel-default" data-container="true" id="">
   <div class="panel-heading" data-container="true" id="panel-heading-${RANDOM}">
     <div class="panel-title">
       <div class="lead text-center component-holder" data-component="crn-title" xattr-position="text-center">Header

package/components/templates/radiogroup.template.html

@@ -1,4 +1,4 @@
-<div class="component-holder crn-radiogroup" ng-model="vars.radio${RANDOM}">
+<div class="component-holder crn-radiogroup option-default" ng-model="vars.radio${RANDOM}" option-theme="option-default">
     <div class = "k-content" data-component="crn-radioOption">
         <input class = "k-radio" type="radio" crn-value=""  value="1" name="optionsRadios" id="optionsRadios1${COMPONENTID}" ng-checked="">
         <label class="k-radio-label" for="optionsRadios1${COMPONENTID}">Option One</label>

package/components/templates/rating.template.html

@@ -1,7 +1,7 @@
 <cronapp-rating ng-model="vars.evaluation${RANDOM}" icon-off="fa fa-star-o" xattr-default-value="">
-    <i icon-theme="color-theme" icon-size="font-size-theme" class="fa fa-star color-theme font-size-theme"></i>
-    <i icon-theme="color-theme" icon-size="font-size-theme" class="fa fa-star color-theme font-size-theme"></i>
-    <i icon-theme="color-theme" icon-size="font-size-theme" class="fa fa-star color-theme font-size-theme"></i>
-    <i icon-theme="color-theme" icon-size="font-size-theme" class="fa fa-star color-theme font-size-theme"></i>
-    <i icon-theme="color-theme" icon-size="font-size-theme" class="fa fa-star color-theme font-size-theme"></i>
+    <i icon-theme="color-default" icon-size="font-size-default" class="fa fa-star color-default font-size-default"></i>
+    <i icon-theme="color-default" icon-size="font-size-default" class="fa fa-star color-default font-size-default"></i>
+    <i icon-theme="color-default" icon-size="font-size-default" class="fa fa-star color-default font-size-default"></i>
+    <i icon-theme="color-default" icon-size="font-size-default" class="fa fa-star color-default font-size-default"></i>
+    <i icon-theme="color-default" icon-size="font-size-default" class="fa fa-star color-default font-size-default"></i>
 </cronapp-rating>

package/components/templates/social-button-bar.template.html

@@ -1,54 +1,54 @@
 <div class="component-holder ng-binding ng-scope col-xs-12 col-md-12" data-component="crn-social-login" id="crn-social-login${RANDOM}">
   <ul class="list-inline center-block text-center">
     <li data-container="true">
-      <form action="/signin/facebook" method="POST" id="facebook">
+      <div action="/signin/facebook" method="POST" id="facebookContainer">
         <input type="hidden" name="scope" value="email,public_profile">
-        <a title="Facebook" role="button" onclick="document.getElementById('facebook').submit();">
+        <a title="Facebook" role="button" onclick="cronapi.internal.loginSocial('facebookContainer');">
           <div class="component-holder ng-scope" data-component="crn-icon" id="crn-icon-${RANDOM}">
-            <i class="fa fa-2x fa-facebook font-size-theme color-theme" icon-size="font-size-theme" icon-theme="color-theme"></i>
+            <i class="fa fa-2x fa-facebook font-size-theme color-default" icon-size="font-size-theme" icon-theme="color-default"></i>
           </div>
         </a>
-      </form>
+      </div>
     </li>
     <li data-container="true">
-      <form action="/signin/github" method="POST" id="github">
+      <div action="/signin/github" method="POST" id="githubContainer">
         <input type="hidden" name="scope" value="email,public_profile">
-        <a title="GitHub" role="button" onclick="document.getElementById('github').submit();">
+        <a title="GitHub" role="button" onclick="cronapi.internal.loginSocial('githubContainer')">
           <div class="component-holder ng-scope" data-component="crn-icon" id="crn-icon-${RANDOM}">
-            <i class="fa fa-2x fa-github-alt font-size-theme color-theme" icon-size="font-size-theme" icon-theme="color-theme"></i>
+            <i class="fa fa-2x fa-github-alt font-size-theme color-default" icon-size="font-size-theme" icon-theme="color-default"></i>
           </div>
         </a>
-      </form>
+      </div>
     </li>
     <li data-container="true">
-      <form action="/signin/linkedin" method="POST" id="linkedin">
+      <div action="/signin/linkedin" method="POST" id="linkedinContainer">
         <input type="hidden" name="scope" value="r_emailaddress">
-        <a title="LinkedIn" role="button" onclick="document.getElementById('linkedin').submit();">
+        <a title="LinkedIn" role="button" onclick="cronapi.internal.loginSocial('linkedinContainer')">
           <div class="component-holder ng-scope" data-component="crn-icon" id="crn-icon-${RANDOM}">
-            <i class="fa fa-2x fa-linkedin-square font-size-theme color-theme" icon-size="font-size-theme" icon-theme="color-theme"></i>
+            <i class="fa fa-2x fa-linkedin-square font-size-theme color-default" icon-size="font-size-theme" icon-theme="color-default"></i>
           </div>
         </a>
-      </form>
+      </div>
     </li>
     <li data-container="true">
-      <form action="/signin/google" method="POST" id="google">
+      <div action="/signin/google" method="POST" id="googleContainer">
         <input type="hidden" name="scope" value="email">
-        <a title="Google" role="button" onclick="document.getElementById('google').submit();">
+        <a title="Google" role="button" onclick="cronapi.internal.loginSocial('googleContainer')">
           <div class="component-holder ng-scope" data-component="crn-icon" id="crn-icon-${RANDOM}">
-            <i class="fa fa-2x fa-google font-size-theme color-theme" icon-size="font-size-theme" icon-theme="color-theme"></i>
+            <i class="fa fa-2x fa-google font-size-theme color-default" icon-size="font-size-theme" icon-theme="color-default"></i>
           </div>
         </a>
-      </form>
+      </div>
     </li>
     <li data-container="true">
-      <form action="/signin/cronapp" method="POST" id="cronapp">
+      <div action="/signin/cronapp" method="POST" id="cronappContainer">
         <input type="hidden" name="scope" value="email">
-        <a title="CronApp" role="button" onclick="document.getElementById('cronapp').submit();">
+        <a title="CronApp" role="button" onclick="cronapi.internal.loginSocial('cronappContainer')">
           <div class="component-holder ng-scope" data-component="crn-icon" id="crn-icon-${RANDOM}">
-            <i class="fa fa-2x fa-cloud font-size-theme color-theme" icon-size="font-size-theme" icon-theme="color-theme"></i>
+            <i class="fa fa-2x fa-cloud font-size-theme color-default" icon-size="font-size-theme" icon-theme="color-default"></i>
           </div>
         </a>
-      </form>
+      </div>
     </li>
   </ul>
 </div>

package/components/templates/sub-form.template.html

@@ -3,39 +3,39 @@
         <div class="tool-bar" ng-hide="datasource.editing || datasource.inserting">
             <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-startInserting">
                 <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.startInserting()" aria-label="{{'StartInserting' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
-                    <i class="glyphicon glyphicon-plus color-white" icon-theme="color-white"></i>
+                    <i class="glyphicon glyphicon-plus" icon-theme=""></i>
                 </button>
             </div>
             <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-startEditing">
                 <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.startEditing()" aria-label="{{'startEditing' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
-                    <i class="glyphicon glyphicon-pencil color-white" icon-theme="color-white"></i>
+                    <i class="glyphicon glyphicon-pencil" icon-theme=""></i>
                 </button>
             </div>
             <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-previous">
                 <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.previous()" ng-disabled="!datasource.hasPrevious()" aria-label="{{'Before' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
-                    <i class="glyphicon glyphicon-chevron-left color-white" icon-theme="color-white"></i>
+                    <i class="glyphicon glyphicon-chevron-left" icon-theme=""></i>
                 </button>
             </div>
             <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-next">
                 <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.next()" ng-disabled="!datasource.hasNext()" aria-label="{{'Next' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
-                    <i class="glyphicon glyphicon-chevron-right color-white" icon-theme="color-white"></i>
+                    <i class="glyphicon glyphicon-chevron-right" icon-theme=""></i>
                 </button>
             </div>
             <div class="component-holder ng-scope" data-component="crn-button" id="crn-button-remove">
                 <button class="btn k-button btn-block btn-danger btn-fab" ng-click="datasource.remove()" aria-label="{{'Remove' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-danger" xattr-disabled="">
-                    <i class="glyphicon glyphicon-remove color-white" icon-theme="color-white"></i>
+                    <i class="glyphicon glyphicon-remove" icon-theme=""></i>
                 </button>
             </div>
         </div>
         <div class="active-bar" ng-hide="!datasource.editing &amp;&amp; !datasource.inserting">
             <div class="component-holder ng-scope" data-component="crn-button" id="btn_crud_post_${RANDOM}">
                 <button class="btn k-button btn-block btn-default btn-fab" ng-click="datasource.post()" aria-label="{{'SaveChanges' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-default" xattr-disabled="">
-                    <i class="glyphicon glyphicon-ok color-white" icon-theme="color-white"></i>
+                    <i class="glyphicon glyphicon-ok" icon-theme=""></i>
                 </button>
             </div>
             <div class="component-holder ng-scope" data-component="crn-button" id="btn_crud_cancel_${RANDOM}">
                 <button class="btn k-button btn-block btn-danger btn-fab" ng-click="datasource.cancel()" aria-label="{{'CancelChanges' | translate}}" xattr-fullsize="btn-block" xattr-theme="btn-danger" xattr-disabled="">
-                    <i class="glyphicon  glyphicon-ban-circle color-white" icon-theme="color-white"></i>
+                    <i class="glyphicon  glyphicon-ban-circle" icon-theme=""></i>
                 </button>
             </div>
         </div>

package/components/templates/textinputbutton.template.html

@@ -7,7 +7,7 @@
     </div>
     <div class="component-holder ng-scope crn-textinputbutton-button" data-component="crn-button" id="crn-button-${RANDOM}">
         <button class="btn k-button btn-default" ng-click="" xattr-fullsize="" xattr-theme="btn-default" xattr-disabled="">
-            <i class="color-white glyphicon glyphicon-search" icon-theme="color-white"></i>
+            <i class="glyphicon glyphicon-search" icon-theme=""></i>
             <span></span>
         </button>
     </div>

package/css/animate.css

@@ -19,8 +19,9 @@
 
 /* Error */
 .cronapp-icon.cronapp-error {
-    border-color: #f27474;
-    color: #f27474;
+    border-color: var(--colorDanger40, #ce3a36);
+    color: var(--colorDanger40, #ce3a36);
+    display: flex;
 }
 
 .cronapp-icon.cronapp-error .cronapp-x-mark {
@@ -35,7 +36,7 @@
     width: 2.9375em;
     height: .3125em;
     border-radius: .125em;
-    background-color: #f27474;
+    background-color: var(--colorDanger40, #ce3a36);
 }
 
 .cronapp-icon.cronapp-error [class^=cronapp-x-mark-line][class$=left] {
@@ -60,8 +61,8 @@
 
 /* Success */
 .cronapp-icon.cronapp-success {
-    border-color: #a5dc86;
-    color: #a5dc86;
+    border-color: var(--colorSuccess40, #257d25);
+    color: var(--colorSuccess40, #257d25);
 }
 
 .cronapp-icon.cronapp-success [class^=cronapp-success-circular-line] {
@@ -96,7 +97,6 @@
     box-sizing: content-box;
     width: 100%;
     height: 100%;
-    border: .25em solid rgba(165, 220, 134, .3);
     border-radius: 50%;
 }
 
@@ -116,7 +116,7 @@
     z-index: 2;
     height: .3125em;
     border-radius: .125em;
-    background-color: #a5dc86;
+    background-color: var(--colorSuccess40, #257d25);
 }
 
 .cronapp-icon.cronapp-success [class^=cronapp-success-line][class$=tip] {
@@ -150,14 +150,14 @@
 
 /* Warning */
 .cronapp-icon.cronapp-warning {
-    border-color: #ffed6b;
-    color: #ffc038;
+    border-color: var(--colorWarning40, #f0ad4e);
+    color: var(--colorWarning50, #d29744);
 }
 
 /* Info */
 .cronapp-icon.cronapp-info {
-    border-color: #9de0f6;
-    color: #3fc3ee;
+    border-color: var(--colorCalm40, #3b448e);
+    color: var(--colorCalm50, #343c7c);
 }
 
 .cronapp-icon .cronapp-icon-content {
@@ -172,17 +172,19 @@
 
 
 /* animação para abrir o modal */
-
 @-webkit-keyframes cronapp-show {
     0% {
         transform: scale(.7)
     }
+
     45% {
         transform: scale(1.05)
     }
+
     80% {
         transform: scale(.95)
     }
+
     100% {
         transform: scale(1)
     }
@@ -192,25 +194,27 @@
     0% {
         transform: scale(.7)
     }
+
     45% {
         transform: scale(1.05)
     }
+
     80% {
         transform: scale(.95)
     }
+
     100% {
         transform: scale(1)
     }
 }
 
-
 /* animação para fechar o modal */
-
 @-webkit-keyframes cronapp-hide {
     0% {
         transform: scale(1);
         opacity: 1
     }
+
     100% {
         transform: scale(.5);
         opacity: 0
@@ -222,6 +226,7 @@
         transform: scale(1);
         opacity: 1
     }
+
     100% {
         transform: scale(.5);
         opacity: 0
@@ -230,28 +235,31 @@
 
 
 /* Success */
-
 @-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;
@@ -265,21 +273,25 @@
         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;
@@ -293,16 +305,19 @@
         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;
@@ -316,16 +331,19 @@
         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;
@@ -337,12 +355,15 @@
     0% {
         transform: rotate(-45deg)
     }
+
     5% {
         transform: rotate(-45deg)
     }
+
     12% {
         transform: rotate(-405deg)
     }
+
     100% {
         transform: rotate(-405deg)
     }
@@ -352,35 +373,39 @@
     0% {
         transform: rotate(-45deg)
     }
+
     5% {
         transform: rotate(-45deg)
     }
+
     12% {
         transform: rotate(-405deg)
     }
+
     100% {
         transform: rotate(-405deg)
     }
 }
 
-
 /* Error */
-
 @-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);
@@ -394,15 +419,18 @@
         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);
@@ -415,6 +443,7 @@
         transform: rotateX(100deg);
         opacity: 0
     }
+
     100% {
         transform: rotateX(0);
         opacity: 1
@@ -426,8 +455,9 @@
         transform: rotateX(100deg);
         opacity: 0
     }
+
     100% {
         transform: rotateX(0);
         opacity: 1
     }
-} 
+}